- cancel/resume subscription fix

- upload into root folder fix
- custom color theme part 3

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 {

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>

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);
-            }
-        }
     }
    
 }

resources/js/components/FilesView/FileInfoPanel.vue

@@ -214,18 +214,5 @@
                 }
             }
         }
-
-        .sharelink {
-
-            .lock-icon {
-
-                &:hover {
-
-                    path, rect {
-                        stroke: $theme;
-                    }
-                }
-            }
-        }
     }
 </style>

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 {
+    circle {
-        fill: $theme;
+        color: inherit;
     }
 }
 

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 {
+                circle {
-                    fill: $theme;
+                    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;

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>
+            <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"></folder-plus-icon>
+            <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"></list-icon>
+            <list-icon v-if="icon === 'th-list'" size="15" class="icon dark-text-theme" />
-            <trash-icon v-if="icon === 'trash'" size="15" class="icon"></trash-icon>
+            <trash-icon v-if="icon === 'trash'" size="15" class="icon dark-text-theme" />
-            <grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
+            <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"></user-plus-icon>
+            <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"></plus-icon>
+            <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"></check-square-icon>
+            <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"></x-square-icon>
+            <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"></check-icon>
+            <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"></dollar-sign-icon>
+            <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"></sorting-and-preview-icon>
+            <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 {

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])

resources/js/components/FilesView/MultiSelected.vue

@@ -82,12 +82,6 @@ export default {
                 color: $dark_mode_text_secondary;
             }
         }
-
-        .icon-wrapper {
-            .icon {
-                stroke: $theme;
-            }
-        }
     }
 }
 </style>

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%);
         }
     } 
 }

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 {

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 {

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;
-                }
-            }
         }
 
 

resources/js/components/Others/Forms/SelectInput.vue

@@ -187,11 +187,11 @@
         .input-area {
             background: $dark_mode_foreground;
             border-color: $dark_mode_foreground;
+        }
 
-            .option-icon {
+        .popup-wrapper {
-                path {
+            .input-area {
-                    fill: $theme
+                background: lighten($dark_mode_foreground, 3%);
-                }
             }
         }
 
@@ -202,16 +202,12 @@
                 border-bottom: none;
 
                 &:hover {
-                    background: rgba($theme, .1);
+                    background: lighten($dark_mode_foreground, 5%);
-
-                    .option-value {
-                        color: $theme;
-                    }
 
                     .option-icon {
 
                         path, circle {
-                            stroke: $theme;
+                            color: inherit;
                         }
                     }
                 }

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>

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;
                     }
                 }
 

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;
         }
     }

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;
             }
         }
     }

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>

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 {

resources/js/components/Others/TextLabel.vue

@@ -31,7 +31,7 @@
 
     @media (prefers-color-scheme: dark) {
         .text-label {
-            color: $theme;
+            opacity: 0.35;
         }
     }
 </style>

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) {

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);
-            }
         }
     }
 

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);
-            }
         }
     }
 

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;
-                }
             }
         }
 

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>
+        <b class="name">{{ user.data.relationships.settings.data.attributes.name }}</b>
-        <span class="email">{{ user.data.attributes.email }}</span>
+        <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;
         }
     }

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

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;
           }
         }
       }

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%);
+    }
+  }
 }

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>