feat(agsV2): add styling

nixosModules/ags/v2/widgets/bar/items/battery.tsx

@@ -10,22 +10,23 @@ const LOW_BATT = 20;
 const SPACING = 5;
 
 export default () => (
-    <box className="toggle-off battery">
+    <box className="bar-item battery">
         <icon
-            class_name="battery-indicator"
             icon={bind(Battery, 'batteryIconName')}
 
             setup={(self: Widget.Icon) => {
                 Battery.connect('notify::percentage', () => {
+                    const percent = Math.round(Battery.get_percentage() * 100);
+
                     self.toggleClassName('charging', Battery.get_charging());
-                    self.toggleClassName('charged', Battery.get_percentage() === 100);
-                    self.toggleClassName('low', Battery.get_percentage() < LOW_BATT);
+                    self.toggleClassName('charged', percent === 100);
+                    self.toggleClassName('low', percent < LOW_BATT);
                 });
             }}
         />
 
         <Separator size={SPACING} />
 
-        <label label={bind(Battery, 'percentage').as((v) => `${v}%`)} />
+        <label label={bind(Battery, 'percentage').as((v) => `${Math.round(v * 100)}%`)} />
     </box>
 );

nixosModules/ags/v2/widgets/bar/style.scss

@@ -0,0 +1,19 @@
+.bar {
+    .bar-item {
+        padding: 5px;
+        border-radius: 7px;
+        background-color: darken($window_bg_color, 3%);
+        font-size: 20px;
+        min-height: 30px;
+
+        .battery icon {
+            &.charging {
+                color: green;
+            }
+
+            &.low {
+                color: red;
+            }
+        }
+    }
+}

nixosModules/ags/v2/widgets/bar/wim.tsx

@@ -15,9 +15,7 @@ export default () => {
                 Astal.WindowAnchor.RIGHT
             }
         >
-            <box
-                className="Bar"
-            >
+            <box className="bar widget">
                 <Battery />
             </box>
         </BarRevealer>