✨ feat: add user face to control center if available

also improved quickactions hostname widget and removed unnecessary stylesheet

resources/styles/_center-window.scss

@@ -35,44 +35,6 @@
       }
     }
 
-    & .player-select {
-      @include mixins.button-reactive-secondary;
-
-      border-radius: 14px;
-
-      & revealer label {
-        margin-left: 4px;
-      }
-
-      margin-right: 2px;
-      margin-bottom: 2px;
-
-      image.arrow {
-        -gtk-icon-size: 12px;
-        margin-left: 6px;
-        margin-top: 1px;
-      }
-    }
-
-    & popover contents {
-      background: colors.$bg-primary;
-      border-radius: 16px;
-      padding: 4px;
-
-      & button {
-        padding: 6px;
-        border-radius: 12px;
-
-        & image {
-          margin-right: 4px;
-        }
-
-        &:hover {
-          background: colors.$bg-secondary;
-        }
-      }
-    }
-
     & slider {
       all: unset;
       opacity: 0;

resources/styles/_control-center.scss

@@ -30,9 +30,26 @@
   & .quickactions {
     margin-bottom: .8em;
 
-    & .hostname {
-      font-size: 15px;
-      font-weight: 600;
+    & .user-face {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      min-height: 32px;
+      min-width: 34px;
+      margin-right: 6px;
+      border-radius: 50%;
+    }
+
+    & .user-host {
+      .user {
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .host {
+        color: colors.$fg-disabled;
+        font-size: 10px;
+        font-weight: 500;
+      }
     }
 
     & > box:not(.button-row) image {

resources/styles/_wal.scss

@@ -1,26 +0,0 @@
-// SCSS Variables
-// Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Anime Girl Drawing Sofa.jpg";
-
-// Special
-$background: #0e1721;
-$foreground: #c2c5c7;
-$cursor: #c2c5c7;
-
-// Colors
-$color0: #0e1721;
-$color1: #393f39;
-$color2: #4d4c46;
-$color3: #824f36;
-$color4: #6c574a;
-$color5: #816956;
-$color6: #4e767a;
-$color7: #91959b;
-$color8: #5d6772;
-$color9: #4C544C;
-$color10: #67665E;
-$color11: #AE6A49;
-$color12: #917463;
-$color13: #AC8C73;
-$color14: #689EA3;
-$color15: #c2c5c7;

src/widget/control-center/QuickActions.tsx

@@ -62,12 +62,16 @@ export const QuickActions = () =>
         <Gtk.Box halign={Gtk.Align.START} class={"left"} hexpand>
             {userFace.query_exists(null) && 
                 <Gtk.Box class={"user-face"} css={
-                  `background-image: url("${userFace.get_path()!}");`} 
+                  `background-image: url("file://${userFace.get_path()!}");`} 
                 />
             }
             <Gtk.Box orientation={Gtk.Orientation.VERTICAL}>
-                <Gtk.Label class={"hostname"} xalign={0} tooltipText={"Host name"}
-                  label={GLib.get_host_name()} />
+                <Gtk.Box class={"user-host"}>
+                    <Gtk.Label class={"user"} xalign={0} 
+                      label={GLib.get_user_name()} />
+                    <Gtk.Label class={"host"} xalign={0} yalign={.8}
+                      label={`@${GLib.get_host_name()}`} />
+                </Gtk.Box>
 
                 <Gtk.Box>
                     <Gtk.Image iconName={"hourglass-symbolic"} />