v1.7 beta.1

resources/js/components/FilesView/MobileActionButton.vue

@@ -1,6 +1,7 @@
 <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>
@@ -15,7 +16,7 @@
 </template>
 
 <script>
-    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon } from 'vue-feather-icons'
+    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon } from 'vue-feather-icons'
 
     export default {
         name: 'MobileActionButton',
@@ -23,6 +24,7 @@
             'icon'
         ],
         components: {
+            CreditCardIcon,
             FolderPlusIcon,
             UserPlusIcon,
             TrashIcon,

resources/js/components/Index/Components/PricingTables.vue

@@ -61,7 +61,7 @@
         text-align: center;
         flex: 0 0 33%;
         padding: 55px 25px 75px;
-        border-right: 1px solid #F7F7F7;
+        //border-right: 1px solid #F7F7F7;
 
         &:last-child {
             border-right: none;
@@ -123,7 +123,7 @@
     .plans-wrapper {
         display: flex;
         flex-wrap: wrap;
-        justify-content: center;
+        justify-content: space-around;
     }
 
     @media only screen and (max-width: 960px) {
@@ -135,6 +135,7 @@
             .plan {
                 padding: 30px 25px;
                 border-bottom: 1px solid #F7F7F7;
+                border-right: none;
             }
         }
     }
@@ -146,7 +147,7 @@
         }
 
         .plan {
-            border-color: $dark_mode_border_color;
+            border-color: $dark_mode_border_color !important;
 
             .plan-wrapper {
                 background: $dark_mode_foreground;

resources/js/components/Others/CookieDisclaimer.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="cookie-wrapper" v-if="isVisibleDisclaimer">
+        <span class="close-icon">
+            <x-icon @click="closeDisclaimer" size="12"></x-icon>
+        </span>
+        <i18n path="cookie_disclaimer.description" tag="p">
+            <router-link :to="{name: 'DynamicPage', params: {slug: 'cookie-policy'}}">{{ $t('cookie_disclaimer.button') }}</router-link>
+        </i18n>
+    </div>
+</template>
+
+<script>
+    import {XIcon} from 'vue-feather-icons'
+
+    export default {
+        name: 'CookieDisclaimer',
+        components: {
+            XIcon
+        },
+        data() {
+            return {
+                isVisibleDisclaimer: false
+            }
+        },
+        methods: {
+            closeDisclaimer() {
+                localStorage.setItem('isHiddenDisclaimer', 'true')
+
+                this.isVisibleDisclaimer = false
+            }
+        },
+        created() {
+            this.isVisibleDisclaimer = localStorage.getItem('isHiddenDisclaimer') ? false : true;
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .cookie-wrapper {
+        @include widget-card;
+        position: fixed;
+        bottom: 0;
+        left: 35px;
+        max-width: 225px;
+        z-index: 3;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+        .close-icon {
+            position: absolute;
+            right: -4px;
+            top: -4px;
+            cursor: pointer;
+            padding: 12px;
+
+            line {
+                stroke: $text-muted;
+            }
+        }
+
+        p {
+            font-size: 12px;
+            line-height: 1.6;
+
+            a {
+                font-size: 12px;
+                color: $theme;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .cookie-wrapper {
+            padding: 10px 15px;
+            left: 0;
+            right: 0;
+            max-width: 100%;
+
+            p {
+                max-width: 300px;
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .cookie-wrapper {
+            background: $dark_mode_foreground;
+
+            p {
+                color: $dark_mode_text_primary;
+            }
+
+            .close-icon {
+
+                line {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+        }
+    }
+</style>

resources/js/components/Others/UpgradeSIdebarBanner.vue

@@ -5,12 +5,12 @@
             <span class="title">{{ storage.used }}% From {{ storage.capacity_formatted }}</span>
         </div>
         <div class="content">
-            <p v-if="storage.used > 95" class="reach-capacity">You reach your storage capacity. Please upgrade.</p>
-            <p v-else class="reach-capacity">You nearly reach your storage capacity.</p>
+            <p v-if="storage.used > 95" class="reach-capacity">{{ $t('upgrade_banner.title') }}</p>
+            <p v-else class="reach-capacity">{{ $t('upgrade_banner.description') }}</p>
         </div>
         <div v-if="config.app_payments_active" class="footer">
             <router-link :to="{name: 'UpgradePlan'}" class="button">
-                Upgrade
+                {{ $t('upgrade_banner.button') }}
             </router-link>
         </div>
     </div>