From 254a00e18e427487cbe7dfcb50bfd2adc1e95715 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Thu, 25 Mar 2021 15:46:34 +0100
Subject: [PATCH] - cancel/resume subscription fix - upload into root folder
 fix - custom color theme part 3

---
 resources/js/components/FilesView/Alert.vue   |  2 +-
 .../js/components/FilesView/ButtonBase.vue    |  8 +++++-
 .../FilesView/DesktopSortingAndPreview.vue    | 26 -------------------
 .../js/components/FilesView/FileInfoPanel.vue | 13 ----------
 .../js/components/FilesView/FileItemGrid.vue  |  9 ++++---
 .../js/components/FilesView/FileItemList.vue  | 13 ++++------
 .../FilesView/MobileActionButton.vue          | 26 +++++++++----------
 .../js/components/FilesView/MobileMenu.vue    |  6 ++---
 .../js/components/FilesView/MultiSelected.vue |  6 -----
 resources/js/components/FilesView/Option.vue  |  8 ++----
 .../components/FilesView/ProcessingPopup.vue  |  2 +-
 .../js/components/Others/EmojiPicker.vue      |  4 +--
 .../js/components/Others/Forms/CopyInput.vue  | 13 +---------
 .../components/Others/Forms/SelectInput.vue   | 16 +++++-------
 .../components/Others/Forms/SwitchInput.vue   |  6 +++++
 .../components/Others/Popup/PopupHeader.vue   |  4 +--
 .../components/Others/Popup/PopupWrapper.vue  |  2 +-
 resources/js/components/Others/RenameItem.vue | 10 +++----
 resources/js/components/Others/TabWrapper.vue | 10 +++++--
 .../Others/Tables/DatatableWrapper.vue        | 12 ---------
 resources/js/components/Others/TextLabel.vue  |  2 +-
 .../js/components/Others/ThumbnailItem.vue    | 13 ++++++++--
 resources/js/components/Others/TreeMenu.vue   | 22 ----------------
 .../components/Others/TreeMenuNavigator.vue   | 22 ----------------
 resources/js/components/Sidebar/MenuBar.vue   |  4 ---
 .../js/components/Sidebar/UserHeadline.vue    |  5 ++--
 resources/js/views/Profile.vue                |  2 +-
 resources/sass/app.scss                       | 11 +++-----
 resources/sass/vuefilemanager/_forms.scss     | 11 ++++++++
 .../others/color-template.blade.php           |  4 +++
 30 files changed, 101 insertions(+), 191 deletions(-)

diff --git a/resources/js/components/FilesView/Alert.vue b/resources/js/components/FilesView/Alert.vue
index e9395adb..1dc35078 100644
--- a/resources/js/components/FilesView/Alert.vue
+++ b/resources/js/components/FilesView/Alert.vue
@@ -169,7 +169,7 @@
 
     @media (prefers-color-scheme: dark) {
         .popup-wrapper {
-            background: $dark_mode_background;
+            background: $dark_mode_foreground;
         }
         .popup-content {
             .title {
diff --git a/resources/js/components/FilesView/ButtonBase.vue b/resources/js/components/FilesView/ButtonBase.vue
index f2189e9f..e5d859c6 100644
--- a/resources/js/components/FilesView/ButtonBase.vue
+++ b/resources/js/components/FilesView/ButtonBase.vue
@@ -120,9 +120,15 @@
                 }
 
                 polyline, path {
-                    stroke: $theme;
+                    color: inherit;
                 }
             }
         }
+
+        .popup-wrapper {
+            .button-base.secondary {
+                background: lighten($dark_mode_foreground, 3%);
+            }
+        }
     }
 </style>
diff --git a/resources/js/components/FilesView/DesktopSortingAndPreview.vue b/resources/js/components/FilesView/DesktopSortingAndPreview.vue
index 60b6ae5d..aba4ab3c 100644
--- a/resources/js/components/FilesView/DesktopSortingAndPreview.vue
+++ b/resources/js/components/FilesView/DesktopSortingAndPreview.vue
@@ -46,38 +46,12 @@ import { events } from '@/bus'
     &.showed {
         display: block;
     }
-
-    /deep/.menu-option {
-
-        &:hover {
-            background: $light_background;
-
-            .text-label {
-                color: $theme;
-            }
-
-            path,
-            /deep/ line,
-            /deep/ polyline,
-            rect,
-            circle,
-            polygon {
-                stroke: $theme !important;
-            }
-        }
-    }
 }
 
 
 @media (prefers-color-scheme: dark) {
     .sorting-preview {
         background: $dark_mode_foreground;
-
-         /deep/ .menu-option {
-         &:hover {
-                background: rgba($theme, 0.1);
-            }
-        }
     }
    
 }
diff --git a/resources/js/components/FilesView/FileInfoPanel.vue b/resources/js/components/FilesView/FileInfoPanel.vue
index 44472957..ee034e57 100644
--- a/resources/js/components/FilesView/FileInfoPanel.vue
+++ b/resources/js/components/FilesView/FileInfoPanel.vue
@@ -214,18 +214,5 @@
                 }
             }
         }
-
-        .sharelink {
-
-            .lock-icon {
-
-                &:hover {
-
-                    path, rect {
-                        stroke: $theme;
-                    }
-                }
-            }
-        }
     }
 </style>
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index e7d0cf37..c3ce09ad 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -59,14 +59,14 @@
             </div>
 
             <span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! multiSelectMode && canShowMobileOptions">
-                <FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
+                <MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme"/>
             </span>
         </div>
     </div>
 </template>
 
 <script>
-import {LinkIcon, UserPlusIcon, CheckIcon} from 'vue-feather-icons'
+import {LinkIcon, UserPlusIcon, CheckIcon, MoreHorizontalIcon} from 'vue-feather-icons'
 import FolderIcon from '@/components/FilesView/FolderIcon'
 import {debounce} from 'lodash'
 import {mapGetters} from 'vuex'
@@ -76,6 +76,7 @@ export default {
     name: 'FileItemGrid',
     props: ['item'],
     components: {
+        MoreHorizontalIcon,
         UserPlusIcon,
         CheckIcon,
         LinkIcon,
@@ -349,8 +350,8 @@ export default {
         @include font-size(12);
     }
 
-    path {
-        fill: $theme;
+    circle {
+        color: inherit;
     }
 }
 
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index 4dd378ee..5f43189b 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -64,7 +64,7 @@
             <transition name="slide-from-right">
                 <div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
                     <span @click.stop="showItemActions" class="show-actions">
-                        <FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
+                        <MoreVerticalIcon size="16" class="icon-action text-theme" />
                     </span>
                 </div>
             </transition>
@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
+import { LinkIcon, UserPlusIcon, CheckIcon, MoreVerticalIcon } from 'vue-feather-icons'
 import FolderIcon from '@/components/FilesView/FolderIcon'
 import { debounce } from 'lodash'
 import { mapGetters } from 'vuex'
@@ -83,6 +83,7 @@ export default {
     name: 'FileItemList',
     props: ['item'],
     components: {
+        MoreVerticalIcon,
         UserPlusIcon,
         LinkIcon,
         FolderIcon,
@@ -367,8 +368,8 @@ export default {
             .icon-action {
                 @include font-size(14);
 
-                path {
-                    fill: $theme;
+                circle {
+                    color: inherit;
                 }
             }
         }
@@ -580,10 +581,6 @@ export default {
             &.is-clicked {
                 background: $dark_mode_foreground;
 
-                .item-name .name {
-                    color: $theme;
-                }
-
                 .file-icon {
                     path {
                         fill: $dark_mode_background;
diff --git a/resources/js/components/FilesView/MobileActionButton.vue b/resources/js/components/FilesView/MobileActionButton.vue
index c37423bf..0e2e3d4f 100644
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/FilesView/MobileActionButton.vue
@@ -1,18 +1,18 @@
 <template>
     <button class="mobile-action-button">
         <div class="flex">
-            <credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon"></credit-card-icon>
-            <folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon"></folder-plus-icon>
-            <list-icon v-if="icon === 'th-list'" size="15" class="icon"></list-icon>
-            <trash-icon v-if="icon === 'trash'" size="15" class="icon"></trash-icon>
-            <grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
-            <user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
-            <plus-icon v-if="icon === 'plus'" size="15" class="icon"></plus-icon>
-            <check-square-icon v-if="icon === 'check-square'" size="15" class="icon"></check-square-icon>
-            <x-square-icon v-if="icon === 'x-square'" size="15" class="icon"></x-square-icon>
-            <check-icon v-if="icon === 'check'" size="15" class="icon"></check-icon>
-            <dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="icon"></dollar-sign-icon>
-            <sorting-and-preview-icon v-if="icon === 'preview-sorting'" size="15" class="icon preview-sorting"></sorting-and-preview-icon>
+            <credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon dark-text-theme" />
+            <folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon dark-text-theme" />
+            <list-icon v-if="icon === 'th-list'" size="15" class="icon dark-text-theme" />
+            <trash-icon v-if="icon === 'trash'" size="15" class="icon dark-text-theme" />
+            <grid-icon v-if="icon === 'th'" size="15" class="icon dark-text-theme" />
+            <user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon dark-text-theme" />
+            <plus-icon v-if="icon === 'plus'" size="15" class="icon dark-text-theme" />
+            <check-square-icon v-if="icon === 'check-square'" size="15" class="icon dark-text-theme" />
+            <x-square-icon v-if="icon === 'x-square'" size="15" class="icon dark-text-theme" />
+            <check-icon v-if="icon === 'check'" size="15" class="icon dark-text-theme" />
+            <dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="icon dark-text-theme" />
+            <sorting-and-preview-icon v-if="icon === 'preview-sorting'" size="15" class="icon preview-sorting" />
             <span class="label">
                 <slot></slot>
             </span>
@@ -103,7 +103,7 @@
             background: $dark_mode_foreground;
 
             path, line, polyline, rect, circle {
-                stroke: $theme;
+                color: inherit;
             }
 
             .label {
diff --git a/resources/js/components/FilesView/MobileMenu.vue b/resources/js/components/FilesView/MobileMenu.vue
index 6ea0c98d2..86e58ee9 100644
--- a/resources/js/components/FilesView/MobileMenu.vue
+++ b/resources/js/components/FilesView/MobileMenu.vue
@@ -315,11 +315,11 @@ export default {
     computed: {
         ...mapGetters(['fileInfoDetail', 'user']),
         favourites() {
-            return this.user.relationships.favourites.data.attributes.folders
+            return this.user.data.relationships.favourites.data.attributes.folders
         },
         isInFavourites() {
             return this.favourites.find(
-                (el) => el.unique_id == this.fileInfoDetail[0].unique_id
+                (el) => el.id == this.fileInfoDetail[0].id
             )
         },
         isFile() {
@@ -369,7 +369,7 @@ export default {
             if (
                 this.favourites &&
                 !this.favourites.find(
-                    (el) => el.unique_id == this.fileInfoDetail[0].unique_id
+                    (el) => el.id == this.fileInfoDetail[0].id
                 )
             ) {
                 this.$store.dispatch('addToFavourites', this.fileInfoDetail[0])
diff --git a/resources/js/components/FilesView/MultiSelected.vue b/resources/js/components/FilesView/MultiSelected.vue
index 21890dd2..247f98a6 100644
--- a/resources/js/components/FilesView/MultiSelected.vue
+++ b/resources/js/components/FilesView/MultiSelected.vue
@@ -82,12 +82,6 @@ export default {
                 color: $dark_mode_text_secondary;
             }
         }
-
-        .icon-wrapper {
-            .icon {
-                stroke: $theme;
-            }
-        }
     }
 }
 </style>
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/FilesView/Option.vue
index 84a2282b..b9329374 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -106,16 +106,12 @@ import {
     }
 }
 @media (prefers-color-scheme: dark) {
-    .danger {
-        &:hover {
-            background: rgba($danger, 0.1) !important;
-        }
-    }
+
     .menu-option {
         color: $dark_mode_text_primary;
 
         &:hover {
-            background: rgba($theme, 0.1);
+            background: lighten($dark_mode_foreground, 2%);
         }
     } 
 }
diff --git a/resources/js/components/FilesView/ProcessingPopup.vue b/resources/js/components/FilesView/ProcessingPopup.vue
index 46b4aee2..57bd25cf 100644
--- a/resources/js/components/FilesView/ProcessingPopup.vue
+++ b/resources/js/components/FilesView/ProcessingPopup.vue
@@ -103,7 +103,7 @@ export default {
 
 @media (prefers-color-scheme: dark) {
     .popup-wrapper {
-        background: $dark_mode_background;
+        background: $dark_mode_foreground;
     }
     .popup-content {
         .title {
diff --git a/resources/js/components/Others/EmojiPicker.vue b/resources/js/components/Others/EmojiPicker.vue
index 18b8329b..ddbc5e89 100644
--- a/resources/js/components/Others/EmojiPicker.vue
+++ b/resources/js/components/Others/EmojiPicker.vue
@@ -437,7 +437,7 @@ export default {
 @media (prefers-color-scheme: dark) {
 
     .emoji-wrapper {
-        background: $dark_mode_background;
+        background: lighten($dark_mode_foreground, 2%);
 
         .emoji-input {
             background: $dark_mode_foreground;
@@ -469,7 +469,7 @@ export default {
     }
 
     .select-input-wrapper {
-        background: $dark_mode_foreground;
+        background: lighten($dark_mode_foreground, 3%);
 
         .not-selected {
             span {
diff --git a/resources/js/components/Others/Forms/CopyInput.vue b/resources/js/components/Others/Forms/CopyInput.vue
index bf0ffb00..ec499201 100644
--- a/resources/js/components/Others/Forms/CopyInput.vue
+++ b/resources/js/components/Others/Forms/CopyInput.vue
@@ -159,22 +159,11 @@ export default {
         line,
         path,
         polygon {
-            stroke: $dark_mode_text_primary !important;
+            color: inherit !important;
         }
 
         .icon-item {
             border-color: #333333;
-
-            &:hover {
-                background: rgba($theme, 0.1);
-
-                line,
-                polyline,
-                path,
-                polygon {
-                    stroke: $theme !important;
-                }
-            }
         }
 
 
diff --git a/resources/js/components/Others/Forms/SelectInput.vue b/resources/js/components/Others/Forms/SelectInput.vue
index 9e01570e..54cf842a 100644
--- a/resources/js/components/Others/Forms/SelectInput.vue
+++ b/resources/js/components/Others/Forms/SelectInput.vue
@@ -187,11 +187,11 @@
         .input-area {
             background: $dark_mode_foreground;
             border-color: $dark_mode_foreground;
+        }
 
-            .option-icon {
-                path {
-                    fill: $theme
-                }
+        .popup-wrapper {
+            .input-area {
+                background: lighten($dark_mode_foreground, 3%);
             }
         }
 
@@ -202,16 +202,12 @@
                 border-bottom: none;
 
                 &:hover {
-                    background: rgba($theme, .1);
-
-                    .option-value {
-                        color: $theme;
-                    }
+                    background: lighten($dark_mode_foreground, 5%);
 
                     .option-icon {
 
                         path, circle {
-                            stroke: $theme;
+                            color: inherit;
                         }
                     }
                 }
diff --git a/resources/js/components/Others/Forms/SwitchInput.vue b/resources/js/components/Others/Forms/SwitchInput.vue
index aa3a6f0c..b418e57c 100644
--- a/resources/js/components/Others/Forms/SwitchInput.vue
+++ b/resources/js/components/Others/Forms/SwitchInput.vue
@@ -94,5 +94,11 @@
         .switch {
             background: $dark_mode_foreground;
         }
+
+        .popup-wrapper {
+            .switch {
+                background: lighten($dark_mode_foreground, 3%);
+            }
+        }
     }
 </style>
diff --git a/resources/js/components/Others/Popup/PopupHeader.vue b/resources/js/components/Others/Popup/PopupHeader.vue
index 933fc082..7e81a979 100644
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/resources/js/components/Others/Popup/PopupHeader.vue
@@ -7,7 +7,7 @@
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
-            <x-icon @click="closePopup" size="22" class="close-icon" />
+            <x-icon @click="closePopup" size="22" class="close-icon hover-text-theme" />
         </div>
     </div>
 </template>
@@ -80,7 +80,7 @@
                     background: $light_background;
 
                     line {
-                        stroke: $theme;
+                        color: inherit;
                     }
                 }
 
diff --git a/resources/js/components/Others/Popup/PopupWrapper.vue b/resources/js/components/Others/Popup/PopupWrapper.vue
index 2f7916b5..7ac3f4cc 100644
--- a/resources/js/components/Others/Popup/PopupWrapper.vue
+++ b/resources/js/components/Others/Popup/PopupWrapper.vue
@@ -141,7 +141,7 @@
 
     @media (prefers-color-scheme: dark) {
         .popup-wrapper {
-            background: $dark_mode_background;
+            background: $dark_mode_foreground;
             box-shadow: $dark_mode_popup_shadow;
         }
     }
diff --git a/resources/js/components/Others/RenameItem.vue b/resources/js/components/Others/RenameItem.vue
index 54e2b9f7..751bb586 100644
--- a/resources/js/components/Others/RenameItem.vue
+++ b/resources/js/components/Others/RenameItem.vue
@@ -18,7 +18,7 @@
                     <div class="input">
                         <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
                         <div @click="pickedItem.name = ''" class="close-icon-wrapper">
-                            <x-icon class="close-icon" size="14" />
+                            <x-icon class="close-icon hover-text-theme" size="14" />
                         </div>
                     </div>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -168,14 +168,14 @@ export default {
         &:hover {
             .close-icon {
                 line {
-                    stroke: $theme;
+                    color: inherit;
                 }
             }
         }
 
         .close-icon {
             line {
-                stroke: rgba($text-muted, 0.3);
+                color: rgba($text-muted, 0.3);
             }
         }
     }
@@ -191,14 +191,14 @@ export default {
 
             .close-icon {
                 line {
-                    stroke: $theme !important;
+                    color: inherit !important;
                 }
             }
         }
 
         .close-icon {
             line {
-                stroke: rgba($dark_mode_text_primary, 0.3) !important;
+                color: rgba($dark_mode_text_primary, 0.3) !important;
             }
         }
     }
diff --git a/resources/js/components/Others/TabWrapper.vue b/resources/js/components/Others/TabWrapper.vue
index ea2568f6..d69733bd 100644
--- a/resources/js/components/Others/TabWrapper.vue
+++ b/resources/js/components/Others/TabWrapper.vue
@@ -108,13 +108,19 @@
             border-color: transparent;
 
             .tab.active {
-                background: rgba($theme, 0.1);
+                background: lighten($dark_mode_foreground, 7%);
 
                 .tab-title {
-                    color: $theme;
+                    color: $dark_mode_text_primary;
                 }
             }
         }
+
+        .popup-wrapper {
+            .tab-wrapper {
+                background: lighten($dark_mode_foreground, 2%);
+            }
+        }
     }
 
 </style>
diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/Others/Tables/DatatableWrapper.vue
index 292dcec7..6911e949 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -429,18 +429,6 @@ export default {
 
     .table {
 
-        .table-header {
-
-            tr {
-                td, th {
-
-                    span {
-                        color: $theme;
-                    }
-                }
-            }
-        }
-
         .table-body {
             tr, th {
                 &:hover {
diff --git a/resources/js/components/Others/TextLabel.vue b/resources/js/components/Others/TextLabel.vue
index 87ac5611..876fadec 100644
--- a/resources/js/components/Others/TextLabel.vue
+++ b/resources/js/components/Others/TextLabel.vue
@@ -31,7 +31,7 @@
 
     @media (prefers-color-scheme: dark) {
         .text-label {
-            color: $theme;
+            opacity: 0.35;
         }
     }
 </style>
diff --git a/resources/js/components/Others/ThumbnailItem.vue b/resources/js/components/Others/ThumbnailItem.vue
index 17fe98f7..ac56a3a9 100644
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/Others/ThumbnailItem.vue
@@ -5,7 +5,7 @@
         <div class="icon-item">
 
             <!--If is file or image, then link item-->
-            <span v-if="isFile || (isImage && !item.thumbnail) " class="file-icon-text">{{ item.mimetype }}</span>
+            <span v-if="isFile || (isImage && !item.thumbnail) " class="file-icon-text text-theme">{{ item.mimetype }}</span>
 
             <!--Folder thumbnail-->
             <FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
@@ -138,7 +138,6 @@
                 text-align: center;
                 left: 0;
                 right: 0;
-                color: $theme;
                 font-weight: 600;
                 user-select: none;
                 max-width: 20px;
@@ -194,6 +193,16 @@
                 }
             }
         }
+
+        .popup-wrapper {
+            .file-item {
+                .icon-item .file-icon {
+                    path {
+                        fill: lighten($dark_mode_foreground, 3%);
+                    }
+                }
+            }
+        }
     }
 
     @media (max-width: 690px) and (prefers-color-scheme: dark) {
diff --git a/resources/js/components/Others/TreeMenu.vue b/resources/js/components/Others/TreeMenu.vue
index 93af5b70..796bf1dd 100644
--- a/resources/js/components/Others/TreeMenu.vue
+++ b/resources/js/components/Others/TreeMenu.vue
@@ -168,28 +168,6 @@
             .label {
                 color: $dark_mode_text_primary;
             }
-
-            &:hover {
-                background: rgba($theme, .1);
-            }
-
-            &.is-selected {
-                background: rgba($theme, .1);
-            }
-        }
-
-        &.is-selected {
-            background: rgba($theme, .1);
-        }
-    }
-
-    @media (prefers-color-scheme: dark) and (max-width: 690px) {
-        .folder-item {
-
-            &:hover,
-            &.is-selected {
-                background: rgba($theme, .1);
-            }
         }
     }
 
diff --git a/resources/js/components/Others/TreeMenuNavigator.vue b/resources/js/components/Others/TreeMenuNavigator.vue
index bd45ed53..19061412 100644
--- a/resources/js/components/Others/TreeMenuNavigator.vue
+++ b/resources/js/components/Others/TreeMenuNavigator.vue
@@ -240,28 +240,6 @@
             .label {
                 color: $dark_mode_text_primary;
             }
-
-            &:hover {
-                background: rgba($theme, .1);
-            }
-
-            &.is-selected {
-                background: rgba($theme, .1);
-            }
-        }
-
-        &.is-selected {
-            background: rgba($theme, .1);
-        }
-    }
-
-    @media (prefers-color-scheme: dark) and (max-width: 690px) {
-        .folder-item {
-
-            &:hover,
-            &.is-selected {
-                background: rgba($theme, .1);
-            }
         }
     }
 
diff --git a/resources/js/components/Sidebar/MenuBar.vue b/resources/js/components/Sidebar/MenuBar.vue
index 90fcb6ab..843ea13e 100644
--- a/resources/js/components/Sidebar/MenuBar.vue
+++ b/resources/js/components/Sidebar/MenuBar.vue
@@ -248,10 +248,6 @@
                 &:hover {
                     background: $dark_mode_background;
                 }
-
-                path, line, polyline, rect, circle {
-                    stroke: $dark_mode_text_primary;
-                }
             }
         }
 
diff --git a/resources/js/components/Sidebar/UserHeadline.vue b/resources/js/components/Sidebar/UserHeadline.vue
index 323f64d3..f6bd48ed 100644
--- a/resources/js/components/Sidebar/UserHeadline.vue
+++ b/resources/js/components/Sidebar/UserHeadline.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="user-meta" v-if="user">
-        <b class="name">{{ user.data.attributes.name }}</b>
-        <span class="email">{{ user.data.attributes.email }}</span>
+        <b class="name">{{ user.data.relationships.settings.data.attributes.name }}</b>
+        <span class="email text-theme">{{ user.data.attributes.email }}</span>
     </div>
 </template>
 
@@ -32,7 +32,6 @@
         .email {
             display: block;
             @include font-size(12);
-            color: $theme;
             font-weight: 600;
         }
     }
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 971d850a..0af4dece 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -175,7 +175,7 @@
                 return this.config.isSaaS && this.config.app_payments_active
             },
             canShowUpgradeWarning() {
-                return this.config.storageLimit && this.user.data.attributes.used > 95
+                return this.config.storageLimit && this.user.data.attributes.storage.used > 95
             },
             canShowIncompletePayment() {
                 return this.user.data.attributes.incomplete_payment
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 5ac0f1bd..633c615b 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -373,7 +373,7 @@
         .icon {
 
           path, line, polyline, rect, circle, ellipse {
-            stroke: $dark_mode_text_primary;
+            color: $dark_mode_text_primary;
           }
         }
       }
@@ -385,21 +385,16 @@
       .icon {
 
         path, line, polyline, rect, circle, ellipse {
-          stroke: $dark_mode_text_primary;
+          color: $dark_mode_text_primary;
         }
       }
 
       &:hover {
-        background: rgba($theme, .1);
-
-        .label {
-          color: $theme;
-        }
 
         .icon {
 
           path, line, polyline, rect, circle, ellipse {
-            stroke: $theme;
+            color: inherit;
           }
         }
       }
diff --git a/resources/sass/vuefilemanager/_forms.scss b/resources/sass/vuefilemanager/_forms.scss
index 37279a5e..517b54ea 100644
--- a/resources/sass/vuefilemanager/_forms.scss
+++ b/resources/sass/vuefilemanager/_forms.scss
@@ -295,4 +295,15 @@ input[type="email"] {
       -webkit-text-fill-color: rgba($dark_mode_text_secondary, 0.8);
     }
   }
+
+  .popup-wrapper {
+
+    textarea,
+    input[type="password"],
+    input[type="text"],
+    input[type="number"],
+    input[type="email"] {
+      background: lighten($dark_mode_foreground, 3%);
+    }
+  }
 }
\ No newline at end of file
diff --git a/resources/views/vuefilemanager/others/color-template.blade.php b/resources/views/vuefilemanager/others/color-template.blade.php
index 5936f1a1..215e386b 100644
--- a/resources/views/vuefilemanager/others/color-template.blade.php
+++ b/resources/views/vuefilemanager/others/color-template.blade.php
@@ -82,4 +82,8 @@
         .folder-item.is-dragenter {border-color: {{ $settings->app_color }} !important;}
         .favourites.is-dragenter .menu-list {border-color: {{ $settings->app_color }} !important;}
 
+        {{-- Dark mode --}}
+        @media (prefers-color-scheme: dark) {
+            .dark-text-theme {color: {{ $settings->app_color }}}
+        }
     </style>
\ No newline at end of file