feat(NotificationsOverview): change email limit color to red when…

… `limit reached` See: BEDS-482
gobitfly · Dec 9, 2024 · 0c931e8 · 0c931e8
1 parent a2c00c2
commit 0c931e8
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/frontend/components/notifications/NotificationsOverview.vue b/frontend/components/notifications/NotificationsOverview.vue
@@ -58,7 +58,10 @@ const emit = defineEmits<{
           {{ hasEmail ? $t('common.active') : $t('common.inactive') }}
         </div>
         <div v-if="hasEmail" class="inline-items">
-          <span class="small_text">{{ last24hEmailsCount }}/{{ mailLimit }} {{ $t('common.units.per_day') }}</span>
+          <span
+            class="small_text"
+            :class="{ is_limit_reached: last24hEmailsCount >= mailLimit }"
+          >{{ last24hEmailsCount }}/{{ mailLimit }} {{ $t('common.units.per_day') }}</span>
           <BcTooltip
             tooltip-width="220px"
             :text="tooltipEmail"
@@ -213,6 +216,9 @@ const emit = defineEmits<{
   align-items: center;
   gap: .625rem;
 }
+.is_limit_reached {
+  color: var(--negative-color);
+}
 a:hover {
   color: var(--light-blue);
 }