feat: dark mode

PHPJunior · Sep 23, 2023 · 5a6e7c9 · 5a6e7c9
1 parent bedcec5
commit 5a6e7c9
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 70 deletions.
diff --git a/resources/js/Components/Bucket/Button/AddBucketButton.vue b/resources/js/Components/Bucket/Button/AddBucketButton.vue
@@ -10,21 +10,17 @@ const showBucketCreateForm = ref(false)
 </script>
 
 <template>
-  <div class="h-full">
-    <div class="flex flex-col justify-around">
-      <button
-        type="button"
-        class="relative inline-flex items-center gap-x-1.5 py-3 px-2 text-sm text-gray-500 hover:text-gray-700 truncate"
-        @click="showBucketCreateForm = true"
-      >
-        <PlusIcon
-          class="-ml-0.5 h-5 w-5"
-          aria-hidden="true"
-        />
-        {{ $t('nav.add_bucket') }}
-      </button>
-    </div>
-  </div>
+  <button
+    type="button"
+    class="relative inline-flex items-center gap-x-1.5 py-3 px-2 text-sm text-gray-500 dark:hover:text-white hover:text-gray-700 truncate"
+    @click="showBucketCreateForm = true"
+  >
+    <PlusIcon
+      class="-ml-0.5 h-5 w-5"
+      aria-hidden="true"
+    />
+    {{ $t('nav.add_bucket') }}
+  </button>
 
   <SlideOver
     :show="showBucketCreateForm"

diff --git a/resources/js/Components/Bucket/EmptyStates/NoBuckets.vue b/resources/js/Components/Bucket/EmptyStates/NoBuckets.vue
@@ -18,16 +18,14 @@ import AddBucketButton from "@components/Bucket/Button/AddBucketButton.vue";
         d="M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6"
       />
     </svg>
-    <h3 class="mt-2 text-sm font-semibold text-gray-900">
+    <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
       {{ $t('empty_state.title') }}
     </h3>
     <p class="mt-1 text-sm text-gray-500">
       {{ $t('empty_state.description') }}
     </p>
     <div class="mt-6 flex justify-center">
-      <div class="w-fit ring-1 ring-inset ring-gray-500/20 rounded-md">
-        <AddBucketButton />
-      </div>
+      <AddBucketButton />
     </div>
   </div>
 </template>

diff --git a/resources/js/Components/Bucket/FileManager.vue b/resources/js/Components/Bucket/FileManager.vue
@@ -175,8 +175,8 @@ onMounted(() => {
     @close="openNewFolderModal = false"
   />
 
-  <div class="bg-white relative">
-    <div class="flex gap-3 items-center justify-between sticky top-0 bg-gray-100 divided-x">
+  <div class="bg-white dark:bg-slate-800 relative">
+    <div class="flex gap-3 items-center justify-between sticky top-0 bg-gray-100 divided-x dark:bg-slate-700">
       <!-- Breadcrumbs -->
       <div class="px-5 py-3 overflow-x-auto">
         <nav
@@ -285,7 +285,7 @@ onMounted(() => {
         v-if="storage.folders.length"
         class="space-y-2"
       >
-        <span class="font-semibold text-md">
+        <span class="font-semibold text-md dark:text-white">
           {{ $t('file_manager.folders') }}
         </span>
         <div :class="['grid gap-2', folderCols]">
@@ -310,7 +310,7 @@ onMounted(() => {
         v-if="storage.files.length"
         class="space-y-2"
       >
-        <span class="font-semibold text-md">
+        <span class="font-semibold text-md dark:text-white">
           {{ $t('file_manager.files') }}
         </span>
         <div :class="['grid gap-2', fileCols]">
@@ -336,7 +336,7 @@ onMounted(() => {
   <portal to="fab">
     <!-- Menu -->
     <div
-      class="flex gap-2 items-center divide-x"
+      class="flex gap-2 items-center"
     >
       <div
         v-if="loading"
@@ -350,7 +350,14 @@ onMounted(() => {
 
       <div
         v-if="!hideMenu"
-        :class="['flex items-center', 'text-gray-700', 'px-3 py-2 leading-6 text-sm', 'cursor-pointer', 'rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']"
+        :class="[
+          'flex items-center',
+          'text-gray-700',
+          'px-3 py-2 leading-6 text-sm',
+          'cursor-pointer',
+          'rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50',
+          'dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:ring-0'
+        ]"
         @click="openNewFolderModal = true"
       >
         <FolderPlusIcon
@@ -362,7 +369,14 @@ onMounted(() => {
 
       <div
         v-if="!hideMenu"
-        :class="['flex items-center', 'text-gray-700', 'px-3 py-2 leading-6 text-sm', 'cursor-pointer', 'rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']"
+        :class="[
+          'flex items-center',
+          'text-gray-700',
+          'px-3 py-2 leading-6 text-sm',
+          'cursor-pointer',
+          'rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50',
+          'dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:ring-0'
+        ]"
         title="Upload"
         @click="openFileUploadModal = true"
       >

diff --git a/resources/js/Components/Bucket/Form/BucketForm.vue b/resources/js/Components/Bucket/Form/BucketForm.vue
@@ -68,7 +68,7 @@ const submit = () => {
 
 <template>
   <form
-    class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl"
+    class="flex h-full flex-col divide-y divide-gray-200 dark:divide-white/5 bg-white dark:bg-slate-800 shadow-xl"
     @submit.prevent="submit"
   >
     <div class="h-0 flex-1 overflow-y-auto">
@@ -164,7 +164,7 @@ const submit = () => {
     <div class="flex flex-shrink-0 justify-end px-4 py-4">
       <button
         type="button"
-        class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:ring-0"
         @click="close"
       >
         {{ $t('buttons.cancel') }}

diff --git a/resources/js/Components/Bucket/Modals/FileMoveModal.vue b/resources/js/Components/Bucket/Modals/FileMoveModal.vue
@@ -102,12 +102,12 @@ const moveFile = () => {
             leave-from="opacity-100 translate-y-0 sm:scale-100"
             leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl">
-              <div class="bg-white p-4 ">
+            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl">
+              <div class="bg-white dark:bg-slate-800 p-4 ">
                 <div class="text-center sm:text-left">
                   <DialogTitle
                     as="h3"
-                    class="text-base leading-6 text-gray-700"
+                    class="text-base leading-6 text-gray-700 dark:text-gray-500"
                   >
                     {{ $t('buckets.move') }} <span class="font-extrabold">{{ currentName }}</span>
                   </DialogTitle>
@@ -126,11 +126,11 @@ const moveFile = () => {
                       as="div"
                     >
                       <div class="relative mt-2">
-                        <ListboxButton class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                        <ListboxButton class="relative w-full cursor-default rounded-md bg-white dark:bg-slate-700 py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                           <span class="absolute inset-y-0 left-0 flex items-center px-2">
                             <ArchiveBoxIcon class="h-5 w-5 text-gray-400" />
                           </span>
-                          <span class="ml-6 block truncate">{{ selectedBucket.name }}</span>
+                          <span class="ml-6 block truncate dark:text-gray-400">{{ selectedBucket.name }}</span>
                           <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                             <ChevronUpDownIcon
                               class="h-5 w-5 text-gray-400"
@@ -144,16 +144,16 @@ const moveFile = () => {
                           leave-from-class="opacity-100"
                           leave-to-class="opacity-0"
                         >
-                          <ListboxOptions class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                          <ListboxOptions class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-slate-700 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                             <ListboxOption
                               v-for="bucket in bucketOptions"
                               :key="bucket.id"
                               v-slot="{ active, selectedBucket }"
                               as="template"
                               :value="bucket"
                             >
-                              <li :class="[active ? 'bg-indigo-600 text-white' : 'text-gray-900', 'relative cursor-default select-none py-2 pl-8 pr-4']">
-                                <span :class="[selectedBucket ? 'font-semibold' : 'font-normal', 'block truncate']">{{ bucket.name }}</span>
+                              <li :class="[active ? 'bg-indigo-600 dark:bg-slate-500 text-white' : 'text-gray-900', 'relative cursor-default select-none py-2 pl-8 pr-4', 'dark:hover:bg-slate-500']">
+                                <span :class="[selectedBucket ? 'font-semibold' : 'font-normal', 'block truncate', 'dark:text-gray-400']">{{ bucket.name }}</span>
 
                                 <span
                                   v-if="selectedBucket"
@@ -185,7 +185,7 @@ const moveFile = () => {
                 </div>
               </div>
 
-              <div class="bg-gray-50 px-4 py-3 flex gap-3 justify-between items-center">
+              <div class="bg-gray-50 dark:bg-slate-700 px-4 py-3 flex gap-3 justify-between items-center">
                 <div>
                   <label
                     for="keep-file"
@@ -197,7 +197,7 @@ const moveFile = () => {
                       type="checkbox"
                       class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
                     >
-                    <span class="ml-2 text-sm text-gray-500">
+                    <span class="ml-2 text-sm text-gray-500 dark:text-white">
                       {{ $t('buckets.keep_file') }}
                     </span>
                   </label>
@@ -213,7 +213,7 @@ const moveFile = () => {
                   <button
                     ref="cancelButtonRef"
                     type="button"
-                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-5 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-5 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:ring-0"
                     @click="emit('close')"
                   >
                     {{ $t('buttons.cancel') }}

diff --git a/resources/js/Components/Bucket/Modals/NewFolderModal.vue b/resources/js/Components/Bucket/Modals/NewFolderModal.vue
@@ -74,12 +74,12 @@ const submit = () => {
             leave-from="opacity-100 translate-y-0 sm:scale-100"
             leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md">
+            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md">
               <div class="px-4 py-5">
-                <h3 class="text-base font-semibold leading-6 text-gray-900">
+                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
                   {{ $t('file_manager.form.new_folder.title') }}
                 </h3>
-                <div class="mt-2 max-w-xl text-sm text-gray-500">
+                <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
                   <p>
                     {{ $t('file_manager.form.new_folder.description') }}
                   </p>

diff --git a/resources/js/Components/Bucket/Partials/File.vue b/resources/js/Components/Bucket/Partials/File.vue
@@ -166,10 +166,10 @@ const download = () => {
     :show="viewFileDetails"
     @close="viewFileDetails = false"
   >
-    <div class="flex h-full flex-col justify-between bg-white shadow-xl px-4 py-6 sm:px-6 ">
+    <div class="flex h-full flex-col justify-between bg-white dark:bg-slate-800 shadow-xl px-4 py-6 sm:px-6 ">
       <div class="space-y-6">
         <div>
-          <div class="aspect-h-7 aspect-w-10 block w-full overflow-hidden rounded-lg">
+          <div class="aspect-h-7 aspect-w-10 block w-full overflow-hidden">
             <img
               v-if="photoExtensions.includes(file.extension)"
               :src="file.preview_url"
@@ -193,7 +193,7 @@ const download = () => {
           </div>
           <div class="mt-4 flex items-start justify-between">
             <div>
-              <h2 class="text-lg font-medium text-gray-900">
+              <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                 <span class="sr-only">Details for </span>
                 {{ file.name }}
               </h2>
@@ -204,15 +204,15 @@ const download = () => {
           </div>
         </div>
         <div>
-          <h3 class="font-medium text-gray-900">
+          <h3 class="font-medium text-gray-900 dark:text-white">
             {{ $t('file_manager.file.information') }}
           </h3>
-          <dl class="mt-2 divide-y divide-gray-200 border-b border-t border-gray-200">
+          <dl class="mt-2 divide-y divide-gray-200 dark:divide-white/5 border-b border-t border-gray-200 dark:border-white/5">
             <div class="flex justify-between py-3 text-sm font-medium">
               <dt class="text-gray-500">
                 {{ $t('file_manager.file.last_modified') }}
               </dt>
-              <dd class="whitespace-nowrap text-gray-900">
+              <dd class="whitespace-nowrap text-gray-900 dark:text-gray-500">
                 {{ moment(file.modified).fromNow() }}
               </dd>
             </div>

diff --git a/resources/js/Components/Bucket/Partials/OptionMenu.vue b/resources/js/Components/Bucket/Partials/OptionMenu.vue
@@ -59,26 +59,27 @@ defineProps({
       leave-to-class="transform opacity-0 scale-95"
     >
       <MenuItems
-        class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="{
           '-top-4 transform -translate-y-full': position === 'top',
         }"
       >
-        <div class="divide-y divide-gray-200">
+        <div class="divide-y divide-gray-200 dark:divide-white/5">
           <MenuItem
             v-if="!hideMove"
             v-slot="{ active }"
+            class="rounded-t-md"
           >
             <a
               href="#"
-              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm']"
+              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm', 'dark:hover:bg-slate-500']"
               @click="emit('move')"
             >
               <FolderIcon
                 class="mr-3 h-5 w-5 text-gray-400"
                 aria-hidden="true"
               />
-              <span>
+              <span class="dark:text-white">
                 {{ $t('menus.move') }}
               </span>
             </a>
@@ -89,14 +90,14 @@ defineProps({
           >
             <a
               href="#"
-              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm']"
+              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm', 'dark:hover:bg-slate-500']"
               @click="emit('upload')"
             >
               <CloudArrowUpIcon
                 class="mr-3 h-5 w-5 text-gray-400"
                 aria-hidden="true"
               />
-              <span>
+              <span class="dark:text-white">
                 {{ $t('menus.upload') }}
               </span>
             </a>
@@ -107,14 +108,14 @@ defineProps({
           >
             <a
               href="#"
-              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm']"
+              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm', 'dark:hover:bg-slate-500']"
               @click="emit('edit')"
             >
               <PencilSquareIcon
                 class="mr-3 h-5 w-5 text-gray-400"
                 aria-hidden="true"
               />
-              <span>
+              <span class="dark:text-white">
                 {{ $t('menus.edit') }}
               </span>
             </a>
@@ -125,32 +126,33 @@ defineProps({
           >
             <a
               href="#"
-              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm']"
+              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm', 'dark:hover:bg-slate-500']"
               @click="emit('delete')"
             >
               <TrashIcon
                 class="mr-3 h-5 w-5 text-gray-400"
                 aria-hidden="true"
               />
-              <span>
+              <span class="dark:text-white">
                 {{ $t('menus.delete') }}
               </span>
             </a>
           </MenuItem>
           <MenuItem
             v-if="!hideView"
             v-slot="{ active }"
+            class="rounded-b-md"
           >
             <a
               href="#"
-              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm']"
+              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm', 'dark:hover:bg-slate-500']"
               @click="emit('view')"
             >
               <EyeIcon
                 class="mr-3 h-5 w-5 text-gray-400"
                 aria-hidden="true"
               />
-              <span>
+              <span class="dark:text-white">
                 {{ $t('menus.view') }}
               </span>
             </a>