From a9e4daed35b7b8e24657ee7b1d04bd09e83c940f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Wed, 9 Feb 2022 08:40:28 +0100
Subject: [PATCH] UI enhancements

---
 .../js/components/FilesView/InfoSidebar.vue   |  2 +-
 .../js/components/FilesView/ItemGrid.vue      | 74 +++++++++++++------
 .../js/components/FilesView/ItemList.vue      |  9 ++-
 .../js/components/FilesView/OptionGroup.vue   | 12 ---
 .../js/components/FilesView/OptionUpload.vue  |  2 +-
 .../js/components/FilesView/ToolbarButton.vue |  8 +-
 .../js/components/Others/Forms/ImageInput.vue |  2 +-
 .../components/Others/Forms/SelectInput.vue   |  7 +-
 .../js/components/Sidebar/ContentGroup.vue    |  2 +-
 resources/js/views/SharedSingleFile.vue       |  2 +-
 tailwind.config.js                            |  2 +-
 11 files changed, 73 insertions(+), 49 deletions(-)

diff --git a/resources/js/components/FilesView/InfoSidebar.vue b/resources/js/components/FilesView/InfoSidebar.vue
index d849f13f..423558f4 100644
--- a/resources/js/components/FilesView/InfoSidebar.vue
+++ b/resources/js/components/FilesView/InfoSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="hidden 2xl:w-[360px] w-[320px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
+    <div class="hidden 2xl:w-[360px] xl:w-[320px] w-[300px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
         <!--Is empty clipboard-->
         <div v-if="isEmpty" class="flex h-full items-center justify-center">
             <div class="text-center">
diff --git a/resources/js/components/FilesView/ItemGrid.vue b/resources/js/components/FilesView/ItemGrid.vue
index 20bbf839..05bc6b87 100644
--- a/resources/js/components/FilesView/ItemGrid.vue
+++ b/resources/js/components/FilesView/ItemGrid.vue
@@ -1,9 +1,9 @@
 <template>
     <div
         :class="{
-			'bg-light-background dark:bg-dark-foreground': isClicked,
-			'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover
-		}"
+            'bg-light-background dark:bg-dark-foreground': isClicked,
+            'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover,
+        }"
         class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center sm:h-56 lg:h-60"
         :draggable="canDrag"
         spellcheck="false"
@@ -15,13 +15,24 @@
             <!--Item thumbnail-->
             <div class="relative mx-auto">
                 <!--Emoji Icon-->
-                <Emoji v-if="entry.data.attributes.emoji" :emoji="entry.data.attributes.emoji" class="mb-10 inline-block scale-150 transform text-5xl" />
+                <Emoji
+                    v-if="entry.data.attributes.emoji"
+                    :emoji="entry.data.attributes.emoji"
+                    class="mb-10 inline-block scale-150 transform text-5xl"
+                />
 
                 <!--Folder Icon-->
-                <FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" class="mt-3 mb-5 inline-block scale-150 transform lg:mt-2 lg:mb-8" />
+                <FolderIcon
+                    v-if="isFolder && !entry.data.attributes.emoji"
+                    :item="entry"
+                    class="mt-3 mb-5 inline-block scale-150 transform lg:mt-2 lg:mb-8"
+                />
 
                 <!--File Icon-->
-                <div v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" class="relative mx-auto w-24">
+                <div
+                    v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)"
+                    class="relative mx-auto w-24"
+                >
                     <!--Member thumbnail for team folders-->
                     <MemberAvatar
                         v-if="user && canShowAuthor"
@@ -31,11 +42,17 @@
                         class="absolute right-2 -bottom-5 z-10 z-10 scale-75 transform lg:-bottom-7 lg:scale-100"
                     />
 
-                    <FileIconThumbnail :entry="entry" class="z-0 mt-5 mb-10 scale-125 transform lg:mb-12 lg:mt-6 lg:scale-150" />
+                    <FileIconThumbnail
+                        :entry="entry"
+                        class="z-0 mt-5 mb-10 scale-125 transform lg:mb-12 lg:mt-6 lg:scale-150"
+                    />
                 </div>
 
                 <!--Image thumbnail-->
-                <div v-if="isImage && entry.data.attributes.thumbnail" class="relative mb-4 inline-block h-24 w-28 lg:h-28 lg:w-36">
+                <div
+                    v-if="isImage && entry.data.attributes.thumbnail"
+                    class="relative mb-4 inline-block h-24 w-28 lg:h-28 lg:w-36"
+                >
                     <!--Member thumbnail for team folders-->
                     <MemberAvatar
                         v-if="user && canShowAuthor"
@@ -45,7 +62,12 @@
                         class="absolute -right-3 -bottom-2.5 z-10 scale-75 transform lg:scale-100"
                     />
 
-                    <img class="h-full w-full rounded-lg object-cover shadow-lg" :src="entry.data.attributes.thumbnail.sm" :alt="entry.data.attributes.name" loading="lazy" />
+                    <img
+                        class="h-full w-full rounded-lg object-cover shadow-lg"
+                        :src="entry.data.attributes.thumbnail.sm"
+                        :alt="entry.data.attributes.name"
+                        loading="lazy"
+                    />
                 </div>
             </div>
 
@@ -53,8 +75,8 @@
             <div class="text-center">
                 <!--Item Title-->
                 <b
-                    class="tracking-tight inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 md:px-6"
-					:class="{'hover:underline': canEditName}"
+                    class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 tracking-tight md:px-6"
+                    :class="{ 'hover:underline': canEditName }"
                     ref="name"
                     @input="renameItem"
                     @keydown.delete.stop
@@ -72,20 +94,24 @@
                     </div>
 
                     <!--File & Image sub line-->
-                    <small v-if="!isFolder" class="block text-xs text-gray-500">
-                        {{ entry.data.attributes.filesize }}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
+                    <small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
+                        {{ entry.data.attributes.filesize }}
+						<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
                     </small>
 
                     <!--Folder sub line-->
-                    <small v-if="isFolder" class="block text-xs text-gray-500">
+                    <small v-if="isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
                         {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems)
-                        }}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
+                        }}<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
                     </small>
                 </div>
             </div>
 
             <!-- Mobile item action button-->
-            <div v-if="mobileHandler && !isMultiSelectMode && $isMobile()" class="relative flex items-center justify-center py-0.5 px-2">
+            <div
+                v-if="mobileHandler && !isMultiSelectMode && $isMobile()"
+                class="relative flex items-center justify-center py-0.5 px-2"
+            >
                 <div @mouseup.stop="$openInDetailPanel(entry)" class="hidden p-2.5 sm:block">
                     <eye-icon size="18" class="vue-feather inline-block opacity-30" />
                 </div>
@@ -163,14 +189,20 @@ export default {
             )
         },
         folderItems() {
-            return this.entry.data.attributes.deleted_at ? this.entry.data.attributes.trashed_items : this.entry.data.attributes.items
+            return this.entry.data.attributes.deleted_at
+                ? this.entry.data.attributes.trashed_items
+                : this.entry.data.attributes.items
         },
         canShowAuthor() {
-            return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) && !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
+            return (
+                this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) &&
+                !this.isFolder &&
+                this.user.data.id !== this.entry.data.relationships.owner.data.id
+            )
+        },
+        canShowLinkIcon() {
+            return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
         },
-		canShowLinkIcon() {
-			return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
-		},
         canDrag() {
             return !this.isDeleted && this.$checkPermission(['master', 'editor'])
         },
diff --git a/resources/js/components/FilesView/ItemList.vue b/resources/js/components/FilesView/ItemList.vue
index 8aa694dc..458b699c 100644
--- a/resources/js/components/FilesView/ItemList.vue
+++ b/resources/js/components/FilesView/ItemList.vue
@@ -39,7 +39,8 @@
         <div class="pl-2">
             <!--Item Title-->
             <b
-                class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:underline"
+                class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm"
+				:class="{'hover:underline': canEditName}"
                 style="max-width: 240px"
                 ref="name"
                 @input="renameItem"
@@ -58,10 +59,12 @@
                 </div>
 
                 <!--File & Image sub line-->
-                <small v-if="!isFolder" class="block text-xs text-gray-500"> {{ entry.data.attributes.filesize }}, {{ timeStamp }} </small>
+                <small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
+					{{ entry.data.attributes.filesize }}, {{ timeStamp }}
+				</small>
 
                 <!--Folder sub line-->
-                <small v-if="isFolder" class="block text-xs text-gray-500">
+                <small v-if="isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
                     {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
                 </small>
             </div>
diff --git a/resources/js/components/FilesView/OptionGroup.vue b/resources/js/components/FilesView/OptionGroup.vue
index 8b453403..e62c0600 100644
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -17,15 +17,3 @@ export default {
 	]
 }
 </script>
-
-<style scoped lang="scss">
-	.option-group {
-		&:first-child {
-			padding-top: 0 !important;
-		}
-
-		&:last-child {
-			padding-bottom: 0 !important;
-		}
-	}
-</style>
diff --git a/resources/js/components/FilesView/OptionUpload.vue b/resources/js/components/FilesView/OptionUpload.vue
index de6a8a24..4bfdfb61 100644
--- a/resources/js/components/FilesView/OptionUpload.vue
+++ b/resources/js/components/FilesView/OptionUpload.vue
@@ -1,6 +1,6 @@
 <template>
     <label
-		class="flex items-center py-4 px-5 lg:py-3 2xl:py-4 group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground"
+		class="flex items-center py-4 px-5 group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground"
 	>
         <div class="mr-4">
             <upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" />
diff --git a/resources/js/components/FilesView/ToolbarButton.vue b/resources/js/components/FilesView/ToolbarButton.vue
index 7aa12167..256ea1ec 100644
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -10,7 +10,7 @@
         <printer-icon v-if="source === 'print'" size="19" class="vue-feather group-hover-text-theme" />
         <trash-2-icon v-if="source === 'trash'" size="19" class="vue-feather group-hover-text-theme" />
         <list-icon v-if="source === 'th-list'" size="19" class="vue-feather group-hover-text-theme" />
-        <info-icon v-if="source === 'info'" size="19" class="vue-feather group-hover-text-theme" />
+        <info-icon v-if="source === 'info'" size="19" class="vue-feather group-hover-text-theme" :class="{'text-theme': isVisibleSidebar}" />
         <grid-icon v-if="source === 'th'" size="19" class="vue-feather group-hover-text-theme" />
         <link-icon v-if="source === 'share'" size="19" class="vue-feather group-hover-text-theme" />
         <x-icon v-if="source === 'close'" size="19" class="vue-feather group-hover-text-theme" />
@@ -42,10 +42,16 @@ import {
     LinkIcon,
     XIcon,
 } from 'vue-feather-icons'
+import {mapGetters} from "vuex";
 
 export default {
     name: 'ToolbarButton',
     props: ['source', 'action'],
+	computed: {
+		...mapGetters([
+			'isVisibleSidebar'
+		])
+	},
     components: {
         SearchIcon,
         CloudPlusIcon,
diff --git a/resources/js/components/Others/Forms/ImageInput.vue b/resources/js/components/Others/Forms/ImageInput.vue
index d69d1d62..206231dd 100644
--- a/resources/js/components/Others/Forms/ImageInput.vue
+++ b/resources/js/components/Others/Forms/ImageInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex items-center justify-center rounded-lg relative h-[175px] bg-light-background" :class="{ 'is-error': error }">
+    <div class="flex items-center justify-center rounded-lg relative h-[175px] dark:bg-2x-dark-foreground bg-light-background" :class="{ 'is-error': error }">
 
 		<!--Reset Image-->
 		<div
diff --git a/resources/js/components/Others/Forms/SelectInput.vue b/resources/js/components/Others/Forms/SelectInput.vue
index bd5a660d..abb3e248 100644
--- a/resources/js/components/Others/Forms/SelectInput.vue
+++ b/resources/js/components/Others/Forms/SelectInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="select">
         <!--Area-->
-        <div class="input-area rounded-lg bg-light-background" :class="{ 'is-active': isOpen, 'is-error': isError }" @click="openMenu">
+        <div class="input-area rounded-lg dark:bg-2x-dark-foreground bg-light-background" :class="{ 'is-active': isOpen, 'is-error': isError }" @click="openMenu">
             <!--If is selected-->
             <div class="selected flex w-full items-center" v-if="selected">
                 <div class="option-icon" v-if="selected.icon">
@@ -226,11 +226,6 @@ export default {
         }
     }
 
-    .input-area {
-        background: $dark_mode_foreground;
-        border-color: $dark_mode_foreground;
-    }
-
     .popup-wrapper {
         .input-area {
             background: lighten($dark_mode_foreground, 3%);
diff --git a/resources/js/components/Sidebar/ContentGroup.vue b/resources/js/components/Sidebar/ContentGroup.vue
index 5793c132..299f972c 100644
--- a/resources/js/components/Sidebar/ContentGroup.vue
+++ b/resources/js/components/Sidebar/ContentGroup.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="ml-6 mb-6" :class="{ 'is-collapsed': !isVisible, collapsable: canCollapse }">
         <div @click="hideGroup" class="mb-2 flex items-center justify-between">
-            <small class="text-xs font-bold text-gray-400 dark:text-gray-700">
+            <small class="text-xs font-bold text-gray-400 dark:text-gray-600">
                 {{ title }}
             </small>
             <chevron-up-icon v-if="canCollapseWrapper" size="12" class="vue-feather mr-5 transform cursor-pointer text-gray-300" :class="{ 'rotate-180': !isVisible }" />
diff --git a/resources/js/views/SharedSingleFile.vue b/resources/js/views/SharedSingleFile.vue
index cead16e4..de5c63d1 100644
--- a/resources/js/views/SharedSingleFile.vue
+++ b/resources/js/views/SharedSingleFile.vue
@@ -48,7 +48,7 @@
 					<div class="flex items-center justify-center">
 
 						<!--File & Image sub line-->
-						<small class="block text-xs text-gray-500">
+						<small class="block text-xs text-gray-500 dark:text-gray-500">
 							{{ file.data.attributes.filesize }}<span class="text-xs text-gray-500 lg:inline-block">, {{ file.data.attributes.created_at }}</span>
 						</small>
 					</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index a51f7aeb..3f5c365f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,7 +37,7 @@ module.exports = {
 			},
 			backgroundColor: theme => ({
 				'dark-background': '#151515',
-				'dark-foreground': '#161718',
+				'dark-foreground': '#171819',
 				'2x-dark-foreground': '#191b1e',
 				'4x-dark-foreground': '#1e2124',
 				'light-background': '#f4f5f6',