Improve users icon

Author: ItsOnlyBinary

src/components/ContainerHeader.vue

@@ -42,11 +42,9 @@
                         :title="$t('person', {count: userCount})"
                         @click="sidebarState.toggleNicklist()"
                     >
-                        <svg-icon icon="fa-solid fa-users" />
+                        <users-icon />
                         <span v-if="!$state.ui.is_narrow" class="kiwi-stack">
-                            <span class="kiwi-stack-hidden">{{
-                                new Array(userCount.toString().length < 4 ? 5 : userCount.toString().length + 1).join('8')
-                            }}</span>
+                            <span class="kiwi-stack-hidden">8888</span>
                             <span class="kiwi-stack-content">{{ userCount }}</span>
                         </span>
                     </a>
@@ -174,13 +172,15 @@
 import GlobalApi from '@/libs/GlobalApi';
 import toHtml from '@/libs/renderers/Html';
 import parseMessage from '@/libs/MessageParser';
+import UsersIcon from '@/res/icons/users.svg';
 import BufferSettings from './BufferSettings';
 import ChannelInfo from './ChannelInfo';
 import ChannelBanlist from './ChannelBanlist';
 import AwayStatusIndicator from './AwayStatusIndicator';
 
 export default {
     components: {
+        UsersIcon,
         BufferSettings,
         ChannelInfo,
         ChannelBanlist,
@@ -415,29 +415,31 @@ export default {
     opacity: 1;
 }
 
+@font-face {
+    font-family: Roboto-Numbers;
+    font-style: normal;
+    font-weight: 400;
+    src: url('@/res/fonts/Roboto-Numbers.woff2') format('woff2'),
+         url('@/res/fonts/Roboto-Numbers.ttf') format('truetype');
+    font-display: auto;
+}
+
 .kiwi-header-option-nicklist {
-    position: relative;
+    font-size: 12px;
 
-    svg {
-        height: 22px;
+    a {
+        gap: 2px;
     }
-}
 
-.kiwi-header-option-nicklist .kiwi-stack {
-    position: absolute;
-    bottom: 4px;
-    padding: 2px 3px 1px 3px;
-    background-color: white;
-    transition: background-color 0.3s;
-
-    > * {
-        top: 1px;
+    svg {
+        height: auto;
+        width: 22px;
     }
-}
 
-.kiwi-header-option-nicklist.kiwi-header-option--active .kiwi-stack,
-.kiwi-header-option-nicklist.kiwi-header-option a:hover .kiwi-stack {
-    background-color: var(--brand-primary);
+    span {
+        font-family: 'Roboto-Numbers', Arial, sans-serif;
+        font-weight: 400;
+    }
 }
 
 /* The not joined button */

src/components/NetworkSettings.vue

@@ -494,10 +494,10 @@ export default {
         width: 100%;
     }
 
-    span {
+    .u-input-text-c {
         position: absolute;
-        right: 2px;
-        top: 6px;
+        right: 5px;
+        top: 0;
     }
 }
 

src/components/UserAvatar.vue

@@ -206,9 +206,8 @@ const toggleAway = () => {
     font-family: Roboto;
     font-style: normal;
     font-weight: 900;
-    src: url('../res/fonts/Roboto-Black.woff2') format('woff2'),
-         url('../res/fonts/Roboto-Black.woff') format('woff')
-         url('../res/fonts/Roboto-Black.ttf') format('truetype');
+    src: url('@/res/fonts/Roboto-Black.woff2') format('woff2'),
+         url('@/res/fonts/Roboto-Black.ttf') format('truetype');
     font-display: auto;
 }
 

src/main.js

@@ -43,11 +43,11 @@ import IrcInput from '@/components/utils/IrcInput';
 import TabbedView from '@/components/utils/TabbedView';
 import TransitionExpand from '@/components/utils/TransitionExpand';
 
+import SvgSpinner from '@/res/icons/ring-resize.svg';
+
 import AvailableLocales from '@/res/locales/available.json';
 import FallbackLocale from '@/../static/locales/dev.json';
 
-import SvgSpinner from '@/res/icons/ring-resize.svg';
-
 Object.assign(faConfig, {
     // Disable fontawesome's watching of the dom
     observeMutations: false,