From d2a74ea1a2965eb38609bb8029a41b45beab89ce Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 15:53:49 +0200
Subject: add .input class to all inputs

---
 src/components/settings_modal/tabs/theme_tab/preview.vue | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/components/settings_modal/tabs/theme_tab/preview.vue')

diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index d755279a..5230f3e9 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -95,6 +95,7 @@
         <input
           :value="$t('settings.style.preview.input')"
           type="text"
+          class="input"
         >
 
         <div class="actions">
@@ -103,6 +104,7 @@
               id="preview_checkbox"
               checked="very yes"
               type="checkbox"
+              class="input"
             >
             <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
           </span>
-- 
cgit v1.2.3-70-g09d2


From 7c77809ff9a4d365ec17fb2ed43f3795382940a9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 16 Feb 2024 00:29:16 +0200
Subject: badge, alert(dot) improvements

---
 src/App.scss                                       | 54 +++++++---------------
 src/components/alert.style.js                      |  9 +++-
 src/components/badge.style.js                      |  3 +-
 src/components/chat/chat.vue                       |  2 +-
 src/components/chat_list_item/chat_list_item.vue   |  2 +-
 src/components/menu_item.style.js                  |  3 +-
 src/components/mobile_nav/mobile_nav.vue           | 25 ++--------
 src/components/navigation/navigation_entry.vue     |  6 ++-
 src/components/navigation/navigation_pins.vue      | 13 +-----
 src/components/notifications/notifications.vue     |  2 +-
 .../settings_modal/tabs/theme_tab/preview.vue      |  2 +-
 src/components/side_drawer/side_drawer.vue         |  6 +--
 src/components/timeline/timeline.scss              | 11 -----
 src/services/style_setter/style_setter.js          |  3 --
 14 files changed, 44 insertions(+), 97 deletions(-)

(limited to 'src/components/settings_modal/tabs/theme_tab/preview.vue')

diff --git a/src/App.scss b/src/App.scss
index 6080b0e5..0af05a54 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -634,11 +634,21 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.badge-notification {
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-    color: white;
-    color: var(--badgeNotificationText, white);
+  &.-dot {
+    border-radius: 100%;
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+    padding: 0;
+    line-height: 0;
+    margin: 0;
+    font-size: 0;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
   }
 }
 
@@ -646,39 +656,7 @@ option {
   margin: 0 0.35em;
   padding: 0 0.25em;
   border-radius: var(--roundness);
-
-  &.error {
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
-    color: $fallback--text;
-    color: var(--alertErrorText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertErrorPanelText, $fallback--text);
-    }
-  }
-
-  &.warning {
-    background-color: $fallback--alertWarning;
-    background-color: var(--alertWarning, $fallback--alertWarning);
-    color: $fallback--text;
-    color: var(--alertWarningText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertWarningPanelText, $fallback--text);
-    }
-  }
-
-  &.success {
-    background-color: var(--alertSuccess, $fallback--alertWarning);
-    color: var(--alertSuccessText, $fallback--text);
-
-    .panel-heading & {
-      color: var(--alertSuccessPanelText, $fallback--text);
-    }
-  }
+  border: 1px solid var(--border);
 }
 
 .faint {
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 081031d7..5881e833 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -17,9 +17,16 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.8
+        opacity: 0.5
       }
     },
+    {
+      parent: {
+        component: 'Alert'
+      },
+      component: 'Border',
+      textColor: '--parent'
+    },
     {
       variant: 'error',
       directives: {
diff --git a/src/components/badge.style.js b/src/components/badge.style.js
index 3ac7d8c0..37833cdb 100644
--- a/src/components/badge.style.js
+++ b/src/components/badge.style.js
@@ -6,8 +6,7 @@ export default {
     'Icon'
   ],
   variants: {
-    normal: '.neutral',
-    notification: '.notification'
+    notification: '.-notification'
   },
   defaultRules: [
     {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index b1e5468c..fc94cc71 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -61,7 +61,7 @@
               <FAIcon icon="chevron-down" />
               <div
                 v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
+                class="badge -notification unread-chat-count unread-message-count"
               >
                 {{ newMessageCount }}
               </div>
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 69ad609b..cbae2d11 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -36,7 +36,7 @@
         />
         <div
           v-if="chat.unread > 0"
-          class="badge badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 6475395a..3c70bd9f 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -6,7 +6,8 @@ export default {
     'Icon',
     'Input',
     'Border',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Badge'
   ],
   states: {
     hover: ':hover',
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 489f3866..2e7590b9 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,14 +37,14 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
       </div>
     </nav>
     <aside
       v-if="currentUser"
-      class="mobile-notifications-drawer"
+      class="panel mobile-notifications-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
@@ -54,7 +54,7 @@
           {{ $t('notifications.notifications') }}
           <span
             v-if="unseenCountBadgeText"
-            class="badge badge-notification unseen-count"
+            class="badge -notification unseen-count"
           >{{ unseenCountBadgeText }}</span>
         </span>
         <span class="spacer" />
@@ -165,19 +165,6 @@
     display: flex;
   }
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .mobile-notifications-drawer {
     width: 100%;
     height: 100vh;
@@ -238,10 +225,6 @@
     height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
 
     .notifications {
       padding: 0;
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ed805944..1189f76d 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -34,7 +34,7 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge -notification"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -100,5 +100,9 @@
       margin-right: -0.8em;
     }
   }
+
+  .badge {
+     margin: 0 0.8em;
+  }
 }
 </style>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 48a4dcbd..931d5325 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge alert-dot"
+        class="badge -dot -notification"
       />
     </router-link>
   </span>
@@ -36,17 +36,6 @@
   overflow: hidden;
   height: 100%;
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 0.5em;
-    width: 0.5em;
-    position: absolute;
-    right: calc(50% - 0.75em);
-    top: calc(50% - 0.5em);
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .pinned-item {
     position: relative;
     flex: 1 0 3em;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index a0025182..eb128450 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -18,7 +18,7 @@
             {{ $t('notifications.notifications') }}
             <span
               v-if="unseenCountBadgeText"
-              class="badge badge-notification unseen-count"
+              class="badge -notification unseen-count"
             >{{ unseenCountBadgeText }}</span>
           </div>
           <div
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 5230f3e9..4054a440 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -5,7 +5,7 @@
       <div class="panel-heading">
         <div class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
         </div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 09588767..1c6e5802 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -82,7 +82,7 @@
             /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadChatCount }}
             </span>
@@ -111,7 +111,7 @@
             /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ followRequestCount }}
             </span>
@@ -205,7 +205,7 @@
             /> {{ $t("nav.announcements") }}
             <span
               v-if="unreadAnnouncementCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadAnnouncementCount }}
             </span>
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 64c7de76..7f886dc3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,17 +1,6 @@
 @import "../../variables";
 
 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-  }
-
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index f9608680..3e420017 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -24,9 +24,6 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css(themes3.eager).forEach(rule => {
     styleSheet.insertRule(rule, 'index-max')
-- 
cgit v1.2.3-70-g09d2


From dc631c68fde12fef499c4b26c9a29e38c23357de Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 22:31:40 +0200
Subject: fix some mistakes

---
 src/components/chat_list_item/chat_list_item.scss        | 6 +++---
 src/components/settings_modal/tabs/theme_tab/preview.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components/settings_modal/tabs/theme_tab/preview.vue')

diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 04bec8dd..67e913a2 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -10,7 +10,7 @@
   }
 
   &:hover {
-    box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
+    box-shadow: var(--shadow)
   }
 
   .chat-list-item-left {
@@ -49,12 +49,12 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: var(--faintText);
+    color: var(--textFaint);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink);
+    color: var(--linkFaint);
     text-decoration: none;
     pointer-events: none;
   }
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 4054a440..1837620f 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink);">
+              <a style="color: var(--linkFaint);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>
-- 
cgit v1.2.3-70-g09d2

