v1.7 beta.1

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>