updated style of workspaces widget

.config/eww/widgets/hypr_workspaces.scss

@@ -7,29 +7,40 @@
 	//$light: #fde10e;
 	//$dark: #ff6520;
 	
-	background: $dark;
-	padding: 3px 1rem;
+	background: transparent;
+	padding: 0;
+  margin: 0;
 	
 	&--ws {
-		border-radius: 50%;
-		font-family: 'Symbols Nerd Font Mono';
-		border: 1px solid blue;
-		color: black;
+		border-radius: 0;
 
     &--label {
-			font-size: 0.7rem;
+			font-size: 1rem;
+      color: black;
 		}
 	
 		&--active {
 			background: $light;
-			color: $dark;
 			border-color: $light;
 		}
 		
 		&--inactive {
 			background: $dark;
-			color: $dark;
 			border-color: $light;
 		}
 	}	
+
+  .first {
+    border-radius: 1.5rem 0 0 1rem;
+    border-right: 1px solid black;
+  }
+
+  .middle {
+    border-radius: 0;
+    border-right: 1px solid black;
+  }
+
+  .last {
+    border-radius: 0 1rem 1.5rem 0;
+  }
 }

.config/eww/widgets/hypr_workspaces.yuck

@@ -10,15 +10,15 @@
   (box
     :class "workspaces"
     :space-evenly false
-    :spacing 3
+    :height 20
+    :spacing 0
     (for workspace in workspaces
       (eventbox
-        :height 20
-        :width 20
+        :width 35
         :onclick "hyprctl dispatch workspace ${workspace.id}"
         :cursor "pointer"
         :tooltip "${workspace.name}"
-        :class "workspaces--ws ${workspace.active == true ? 'workspaces--ws--active' : 'workspaces--ws--inactive'}"
+        :class "workspaces--ws ${workspace.active == true ? 'workspaces--ws--active' : 'workspaces--ws--inactive'} ${workspace.name == 1 ? 'first' : workspace.name == 10 ? 'last' : 'middle'}"
         (label 
           :class "workspaces--ws--label"
-          :text "${workspace.windows > 0 ? workspaceIcons.full : workspaceIcons.empty}")))))
+          :text "${workspace.name}${workspace.windows > 0 ? '+' : ''}")))))