Add Settings Icon to Header Menu

src/app/ui/header-menu/header-menu.html

@@ -1,7 +1,7 @@
 <div class="menu-left">
   <div class="brand">
     <img src="/logo_inverted.svg" alt="logo"/>
-    <span>ADOFAI Editor Forum</span>
+    <span><strong>ADOFAI Editor Forum</strong></span>
   </div>
 
   <span>Levels</span>
@@ -11,6 +11,8 @@
 </div>
 
 <div class="menu-right">
-  <span>Login</span>
+  <span><strong>Login</strong></span>
   <span>Signup</span>
+
+  <span class="material-symbols-outlined icon-40 settings">settings</span>
 </div>

src/app/ui/header-menu/header-menu.scss

@@ -23,11 +23,19 @@
     flex-direction: row;
     align-items: center;
     gap: 48px;
-    padding: 12px;
+
+    span:not(.icon-40) {
+      font-size: 18px;
+      line-height: 40px;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
   }
 
   .menu-left {
     justify-content: start;
+    padding: 12px;
+
     .brand {
       display: flex;
       flex-direction: row;
@@ -42,22 +50,15 @@
       }
 
       span {
-        font-weight: 900;
         /*text-box-trim: trim-both;
         text-box-edge: cap alphabetic;*/
       }
     }
-
-    span {
-      font-size: 18px;
-      line-height: 40px;
-      vertical-align: middle;
-      white-space: nowrap;
-    }
   }
 
   .menu-right {
     flex-grow: 1;
     justify-content: flex-end;
+    padding: 12px 20px;
   }
 }

src/styles.scss

@@ -11,3 +11,29 @@ body {
   background-color: white;
 }
 
+.icon-24 {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24;
+
+  font-size: 24px;
+  line-height: 24px;
+}
+
+.icon-40 {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 40;
+
+  font-size: 40px;
+  line-height: 40px;
+}
+
+strong {
+  font-weight: 900;
+}
+

src/styles/_library.scss

@@ -1,21 +1 @@
 @forward 'functions';
-
-.icon-24 {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24;
-
-  line-height: 24px;
-}
-
-.icon-40 {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 40;
-
-  line-height: 40px;
-}