✨ ags(workspaces, style): use eventbox instead of button, better styling

ags/style/_bar.scss

@@ -59,19 +59,23 @@
     @include mixins.reset-props;
     padding: 0 4px;
 
-    & button {
+    & > eventbox {
+      & > box {
+        margin: 3px 0;
         border-radius: 16px;
         transition: 80ms linear;
         min-width: 15px;
         padding: 0 6px;
         background: colors.$bg-tertiary;
-      margin: 3px 0;
 
-      &:not(.focus) {
+        & label.id {
-        @include mixins.hover-shadow2;
+          font-weight: 600;
+          margin-right: 4px;
+          opacity: 0;
+        }
       }
 
-      &.focus {
+      &.focus > box {
         background: colors.$fg-primary;
         min-width: 32px;
 
@@ -81,29 +85,26 @@
         }
       }
 
-      &.show {
-        // Smooth showing
-        & label.id {
-          opacity: 1;
-        }
-      }
-
-      & label.id {
-        font-weight: 600;
-        margin-right: 4px;
-        opacity: 0;
-      }
-
       & icon {
         font-size: 16px;
       }
+
+      &.show label.id {
+        opacity: 1;
+      }
+
+      &:hover > box {
+        box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2);
+      }
     }
 
     &.special-workspaces {
-      & button {
+      & > eventbox {
+        & box {
           background: wal.$color4;
+        }
 
-        &:hover {
+        &:hover > box {
           background: functions.toRGB(color.adjust(wal.$color4, $lightness: -6%));
         }
       }

ags/style/_center-window.scss

@@ -119,6 +119,10 @@
         background: transparent;
         box-shadow: 0 2px 0 -1px rgba(colors.$bg-secondary, .5);
       }
+
+      &:focus {
+        outline: 1px white;
+      }
     }
   }
 }

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Gumi Street Bike.jpg";
+$wallpaper: "/home/joaov/wallpapers/Bocchi The Rock!.png";
 
 // Special
-$background: #0d101f;
+$background: #0a0a0c;
-$foreground: #c2c3c7;
+$foreground: #c1c1c2;
-$cursor: #c2c3c7;
+$cursor: #c1c1c2;
 
 // Colors
-$color0: #0d101f;
+$color0: #0a0a0c;
-$color1: #425169;
+$color1: #935d6d;
-$color2: #4b756e;
+$color2: #967e84;
-$color3: #488389;
+$color3: #ac8486;
-$color4: #708078;
+$color4: #bcae7a;
-$color5: #7a997b;
+$color5: #a49c9c;
-$color6: #9ba287;
+$color6: #bcb79c;
-$color7: #90929b;
+$color7: #8a8a96;
-$color8: #5c6071;
+$color8: #565669;
-$color9: #586C8C;
+$color9: #C57C92;
-$color10: #649D93;
+$color10: #C9A9B0;
-$color11: #60AFB7;
+$color11: #E6B1B3;
-$color12: #96ABA0;
+$color12: #FBE8A3;
-$color13: #A3CCA4;
+$color13: #DBD1D0;
-$color14: #CFD8B4;
+$color14: #FBF5D1;
-$color15: #c2c3c7;
+$color15: #c1c1c2;

ags/widget/bar/SpecialWorkspaces.ts

@@ -12,13 +12,14 @@ export const SpecialWorkspaces: (() => Gtk.Widget) = () => new Widget.EventBox({
         spacing: 4,
         children: bind(AstalHyprland.get_default(), "workspaces").as((workspaces) => 
             workspaces.filter(ws => ws.id < 0).sort((a, b) => a.id - b.id).map((workspace) => 
-                new Widget.Button({
+                new Widget.EventBox({
                     className: bind(AstalHyprland.get_default(), "focusedWorkspace").as(focusWs =>
                         `${focusWs.id === workspace.id ? "focus" : ""}`),
                     tooltipText: bind(workspace, "name").as((name) => {
                         name = name.replace(/^special\:/, "");
                         return name.charAt(0).toUpperCase().concat(name.substring(1, name.length));
                     }),
+                    child: new Widget.Box({
                         child: new Widget.Icon({
                             className: "last-app-icon",
                             visible: Variable.derive([
@@ -30,11 +31,12 @@ export const SpecialWorkspaces: (() => Gtk.Widget) = () => new Widget.EventBox({
                                 lastClient ? 
                                     getAppIcon(lastClient.initialClass) || "image-missing"
                                 : "image-missing")
-                    } as Widget.IconProps),
+                        } as Widget.IconProps)
-                    onClicked: () => AstalHyprland.get_default().dispatch(
+                    } as Widget.BoxProps),
+                    onClickRelease: () => AstalHyprland.get_default().dispatch(
                         "togglespecialworkspace", workspace.name.replace(/^special\:/, "")
                     )
-                } as Widget.ButtonProps)
+                } as Widget.EventBoxProps)
             )
         )
     } as Widget.BoxProps)

ags/widget/bar/Workspaces.ts

@@ -23,14 +23,14 @@ export function Workspaces(): Gtk.Widget {
                     (a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id());
 
                 return sortedWorkspaces.map((workspace: AstalHyprland.Workspace) => 
-                    new Widget.Button({
+                    new Widget.EventBox({
                         className: Variable.derive([
                             bind(hyprland, "focusedWorkspace"),
                             showWorkspaceNumbers()
                         ], (focusedWs, showWsNumbers) =>
                             `${focusedWs.id === workspace.id ? "focus" : ""} ${showWsNumbers ? "show" : ""}`
                         )(),
-                        visible: true,
+                        onClickRelease: () => workspace.focus(),
                         tooltipText: Variable.derive([
                             bind(workspace, "lastClient"),
                             bind(hyprland, "focusedWorkspace")
@@ -39,7 +39,8 @@ export function Workspaces(): Gtk.Widget {
                                 !lastClient.title.toLowerCase().includes(lastClient.class) ?
                                     `${lastClient.get_class()}: `
                                 : ""
-                                } ${lastClient.title}` : "" }`)(),
+                            } ${lastClient.title}` : "" }`
+                        )(),
                         child: new Widget.Box({
                             children: bind(workspace, "lastClient").as((lastClient) => [
                                 new Widget.Revealer({
@@ -49,8 +50,7 @@ export function Workspaces(): Gtk.Widget {
                                     child: new Widget.Label({
                                         label: bind(workspace, "id").as(String),
                                         className: "id",
-                                        xalign: 0.5,
+                                        hexpand: true
-                                        hexpand: true,
                                     } as Widget.LabelProps)
                                 } as Widget.RevealerProps),
                                 new Widget.Icon({
@@ -65,9 +65,8 @@ export function Workspaces(): Gtk.Widget {
                                     : undefined
                                 } as Widget.IconProps)
                             ])
-                        } as Widget.BoxProps),
+                        } as Widget.BoxProps)
-                        onClicked: () => workspace.focus()
+                    } as Widget.EventBoxProps)
-                    } as Widget.ButtonProps)
                 )
             })
         } as Widget.BoxProps)