✨ feat: use gtk icons instead of nerdfonts across the shell

also removed hour count from recording widgets

ags/style/_bar.scss

@@ -149,7 +149,7 @@
       box-shadow: inset 0 0 0 300px rgba(colors.$fg-primary, .2);
     }
 
-    & .icon {
+    & icon {
       font-size: 14px;
     }
 
@@ -162,8 +162,8 @@
         & > button {
           margin: 4px 1px;
 
-          & label {
-            font-size: 8px;
+          & icon {
+            font-size: 10px;
           }
         }
       }
@@ -211,23 +211,23 @@
 
     & > box {
       padding: 0 8px;
-
-      & .nf {
-        margin: {
-          right: 3px;
-          left: 2px;
-        };
-
-        font-size: 12px;
+      & icon {
+        font-size: 14px;
       }
 
       & .status-icons {
         padding-left: 4px;
 
-        & .notification-count {
-          font-size: 5px;
-          margin-left: -3px;
-          margin-top: 1px;
+        & revealer > eventbox > box {
+          background: rgba($color: colors.$bg-tertiary, $alpha: .7);
+          border-radius: 12px; 
+          margin: 4px 0; 
+          padding: 2px 6px;
+        }
+
+        & icon.notification-count {
+          font-size: 6px;
+          margin-top: -14px;
         }
       }
     }

ags/style/_center-window.scss

@@ -51,11 +51,11 @@
 
     & .bottom {
       & .controls {
-        margin-top: 5px;
+        margin-top: 9px;
         & button {
           padding: 7px;
           & label {
-            font-size: 10px;
+            font-size: 9px;
           }
         }
       }

ags/style/_control-center.scss

@@ -23,11 +23,19 @@
   }
 
   & .quickactions {
+    margin-bottom: .8em;
+
     & .hostname {
       font-size: 15px;
       font-weight: 600;
     }
 
+    & > box:not(.button-row) icon {
+      font-size: 12px;
+      color: colors.$fg-disabled;
+      margin-right: 3px;
+    }
+
     & .uptime {
       font-size: 10.1px;
       font-family: "Symbols Nerd Font Mono";
@@ -46,31 +54,19 @@
   }
 
   & .sliders {
-    padding: 0;
-    & > box {
-      margin: 8px 0;
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
+    icon {
+      font-size: 16px;
     }
 
-    label.nf,
-    button.nf label {
-      margin-right: 8px;
-      font-size: 15px;
-    }
-
-    button.more {
-      @include mixins.hover-shadow;
+    button {
+      @include mixins.hover-shadow2;
 
       padding: 4px;
       border-radius: 16px;
-      margin-left: 6px;
+
+      icon {
+        font-size: 14px;
+      }
     }
 
     & .page .content {
@@ -133,6 +129,16 @@
       & label {
         font-size: 14px;
       }
+
+      & label.description {
+        font-size: 10px;
+        font-weight: 400;
+        color: colors.$fg-disabled;
+      }
+
+      & icon {
+        font-size: 16px;
+      }
     }
 
     & .bottom-buttons button {
@@ -176,14 +182,15 @@ box.history {
 
   & > .button-row {
     margin-top: 12px;
+
     & button {
       padding: 6px;
 
-      & label.nf {
+      & icon {
         font-size: 16px;
       }
 
-      & label:not(.nf) {
+      & label {
         font-size: 12px;
         font-weight: 600;
       }

ags/style/_functions.scss

@@ -2,7 +2,7 @@
 
 
 /**
- * GTK3 only supports sRGB color space, unfortunatly
+ * GTK3 only supports sRGB color space, unfortunately
  */
 @function toRGB($color) {
   @return rgba(

ags/style/_logout-menu.scss

@@ -17,8 +17,8 @@
     margin: 0 150px;
 
     & > button {
-      & label {
-        font-size: 96px;
+      & icon {
+        font-size: 128px;
       }
 
       margin: {