feat: eww style changes

hypr-configs/hyprland/eww/assets/scss/_components.scss

@@ -1,17 +1,23 @@
 .reveal-on-hover {
-  padding: 6px 0px;
+  padding: 12px 0px;
 }
 
 .reveal-on-click {
+  @extend .widget;
+
+  label {
+    @extend .icon;
+
     color: $surface2;
     padding: 4px 0px;
   }
+}
 
 .separator {
   padding: get-token(padding, small);
 
   .dot {
-    padding: 3px;
+    padding: 2px;
 
     border-radius: 100%;
 

hypr-configs/hyprland/eww/assets/scss/_global.scss

@@ -4,8 +4,8 @@
 
 .widget {
   padding: get-token(padding, small);
-  margin: get-token(margin, small);
-  border-radius: get-token(border-radius);
+  margin: get-token(margin);
+  border-radius: get-token(border-radius, small);
   background-color: $surface0;
 }
 

hypr-configs/hyprland/eww/assets/scss/_modules.scss

@@ -1,15 +1,19 @@
 .clock {
   @extend .widget;
 
+  label {
     font-size: get-token(font-sizes, large);
-  font-weight: bolder;
+    font-weight: bold;
+  }
 }
 
 .language {
   @extend .widget;
 
-  font-size: get-token(font-sizes, small);
-  font-weight: bolder;
+  label {
+    font-size: get-token(font-sizes);
+    font-weight: bold;
+  }
 }
 
 .logo {
@@ -33,18 +37,26 @@
 
   .workspace {
     @extend .animation;
-    border-radius: get-token(border-radius);
     min-height: 16px;
     background-color: $surface2;
+    border-radius: get-token(border-radius);
 
     &.current {
-      min-height: 48px;
+      min-height: 42px;
 
       background-color: $accent;
     }
   }
 }
 
+.bar-media-player {
+  @extend .widget;
+
+  label {
+    font-size: get-token(font-sizes, large);
+  }
+}
+
 .media-player {
   @extend .panel-widget;
 

hypr-configs/hyprland/eww/assets/scss/_tokens.scss

@@ -16,8 +16,8 @@ $design-tokens: (
     large: 6px,
   ),
   border-radius: (
-    small: 6px,
-    default: 8px,
+    small: 8px,
+    default: 10px,
     large: 16px,
   ),
 );

hypr-configs/hyprland/eww/src/-components/_helpers.yuck

@@ -32,13 +32,14 @@
     :orientation "v"
     :class "widget"
     :space-evenly false
+    :class "reveal-on-click"
     
     (eventbox
       :cursor "pointer"
       :visible {direction == "up"}
       :onclick `${EWW_CMD} update ${varname}=${!var}`
       
-      (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
+      (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :tooltip "touch control" :text ""))
     
     (revealer
       :reveal var
@@ -52,6 +53,6 @@
       :visible {direction == "down"}
       :onclick `${EWW_CMD} update ${varname}=${!var}`
       
-      (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
+      (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :tooltip "touch control" :text ""))
     
   ))

hypr-configs/hyprland/eww/src/-modules/_media.yuck

@@ -1,16 +1,18 @@
-(defwidget PlayerCtl [?cover]
+(defwidget BarMediaPlayer [?cover]
   (eventbox
     :cursor "pointer"
     
     (box
-      :class "widget player-ctl"
+      :class "bar-media-player"
       :orientation "v"
-      :spacing spacing-default
       :space-evenly false
+      :spacing spacing-default
+      
       
       (eventbox
         :onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
         :visible cover
+        
         (image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20))
       
       (button :onclick "playerctl previous"

hypr-configs/hyprland/eww/src/-modules/_time.yuck

@@ -6,7 +6,7 @@
       :orientation "v"
       :space-evenly false
       :class "clock"
-      :spacing spacing-small
+      
       (label :text thour)
       (label :text tmin))))
 
@@ -20,6 +20,7 @@
   
   (box
     :class "popup"
+    
     (box
       :class "widget"
       (calendar :day calendar_day :year calendar_year))))

hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck

@@ -48,7 +48,7 @@
     
     (Separator :orientation "h" :dots "[1, 2, 3]" :visible true)
     
-    (PlayerCtl :cover false)
+    (BarMediaPlayer :cover false)
   ))
 
 (defwidget BarBottom []
@@ -57,7 +57,6 @@
     :space-evenly false
     :valign "end"
     
-    
     (Sliders)
     (Language)
   ))
@@ -86,7 +85,6 @@
     :orientation "v"
     :space-evenly false
     :spacing spacing-default
-    :valign "end"
     
     (RevealOnHover
       :var {revealWifiEssid}