feat: Dark Mode (#7471)

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -1,29 +1,37 @@
 <template>
-  <div class="preview-item__wrap">
+  <div
+    class="preview-item__wrap flex flex-col overflow-auto mt-4 max-h-[12.5rem]"
+  >
     <div
       v-for="(attachment, index) in attachments"
       :key="attachment.id"
-      class="preview-item"
+      class="preview-item flex p-1 bg-slate-50 dark:bg-slate-800 rounded-md w-[15rem] mb-1"
     >
-      <div class="thumb-wrap">
+      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
           v-if="isTypeImage(attachment.resource)"
           class="image-thumb"
           :src="attachment.thumb"
         />
-        <span v-else class="attachment-thumb"> 📄 </span>
+        <span v-else class="w-6 h-6 text-lg relative -top-px text-left">
+          📄
+        </span>
       </div>
-      <div class="file-name-wrap">
-        <span class="item">
+      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis ml-2">
+        <span
+          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
+        >
           {{ fileName(attachment.resource) }}
         </span>
       </div>
-      <div class="file-size-wrap">
-        <span class="item text-truncate">
+      <div class="w-[30%] justify-center">
+        <span
+          class="item overflow-hidden text-xs text-ellipsis whitespace-nowrap"
+        >
           {{ formatFileSize(attachment.resource) }}
         </span>
       </div>
-      <div class="remove-file-wrap">
+      <div class="flex items-center justify-center">
         <woot-button
           v-if="!isTypeAudio(attachment.resource)"
           class="remove--attachment clear secondary"
@@ -70,103 +78,20 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.preview-item__wrap {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  margin-top: var(--space-normal);
-  max-height: 12.5rem;
-}
-
-.preview-item {
-  display: flex;
-  padding: var(--space-slab) 0 0;
-  background: var(--color-background-light);
-  background: var(--b-50);
-  border-radius: var(--border-radius-normal);
-  width: 15rem;
-  padding: var(--space-smaller);
-  margin-bottom: var(--space-one);
-}
-
-.thumb-wrap {
-  max-width: var(--space-jumbo);
-  flex-shrink: 0;
-  width: var(--space-medium);
-  display: flex;
-  align-items: center;
-}
-
 .image-thumb {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  object-fit: cover;
-  border-radius: var(--border-radius-small);
-}
-
-.attachment-thumb {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  font-size: var(--font-size-medium);
-  text-align: center;
-  position: relative;
-  top: -1px;
-  text-align: left;
+  @apply w-6 h-6 object-cover rounded-sm;
 }
 
 .file-name-wrap,
 .file-size-wrap {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-smaller);
+  @apply flex items-center py-0 px-1;
 
   > .item {
-    margin: 0;
-    overflow: hidden;
-    font-size: var(--font-size-mini);
-    font-weight: var(--font-weight-medium);
+    @apply m-0 overflow-hidden text-xs font-medium;
   }
 }
 
-.preview-header {
-  padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
-}
-
-.file-name-wrap {
-  max-width: 60%;
-  min-width: 50%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: var(--space-small);
-
-  .item {
-    height: var(--space-normal);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.file-size-wrap {
-  width: 30%;
-  justify-content: center;
-}
-
-.remove-file-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .remove--attachment {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  border-radius: var(--space-medium);
-  font-size: var(--font-size-small);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-background);
-  }
+  @apply w-6 h-6 rounded-md text-sm cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800;
 }
 </style>