v1.7 beta.8

resources/js/components/Index/IndexNavigation.vue

@@ -23,7 +23,7 @@
                         {{ $t('page_index.menu.log_in') }}
                     </router-link>
                 </li>
-                <li>
+                <li v-if="config.userRegistration">
                     <router-link class="cta-button" :to="{name: 'SignUp'}">
                         {{ $t('page_index.menu.sign_in') }}
                     </router-link>

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

@@ -28,6 +28,10 @@
             p, a {
                 color: $danger;
             }
+
+            a {
+                text-decoration: underline;
+            }
         }
 
         p {

resources/js/components/Others/UserAvatar.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="user-avatar" :class="size">
+        <span v-if="isIncompletePayment || isNearlyFullStorageCapacity" class="notification"></span>
         <img :src="user.data.attributes.avatar" :alt="user.data.attributes.name">
     </div>
 </template>
@@ -14,6 +15,12 @@
         ],
         computed: {
             ...mapGetters(['user']),
+            isIncompletePayment() {
+                return this.user.data.attributes.incomplete_payment
+            },
+            isNearlyFullStorageCapacity() {
+                return this.config.storageLimit && this.user.relationships.storage.data.attributes.used > 95
+            }
         },
     }
 </script>
@@ -24,6 +31,22 @@
 
     .user-avatar {
         line-height: 0;
+        position: relative;
+        width: 40px;
+        margin: 0 auto;
+
+        .notification {
+            width: 12px;
+            height: 12px;
+            display: block;
+            position: absolute;
+            bottom: -5px;
+            right: -4px;
+            border-radius: 10px;
+            z-index: 2;
+            background: $red;
+            border: 2px solid $light_background;
+        }
 
         img {
             border-radius: 6px;
@@ -32,6 +55,8 @@
         }
 
         &.large {
+            margin: 0;
+            width: 54px;
 
             img {
                 border-radius: 9px;
@@ -42,6 +67,11 @@
     }
 
     @media (prefers-color-scheme: dark) {
+        .user-avatar {
 
+            .notification {
+                border-color: $dark_mode_foreground;
+            }
+        }
     }
 </style>