From b40d7b80b9eceefb392304f97a4fb1766c1f439f Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Fri, 27 Sep 2024 12:37:14 -0400
Subject: [PATCH] feat(agsV2): add styling

---
 nixosModules/ags/v2/app.ts                    |  2 +-
 nixosModules/ags/v2/style.scss                | 46 +++++++++++++++++++
 .../ags/v2/widgets/bar/items/battery.tsx      | 11 +++--
 nixosModules/ags/v2/widgets/bar/style.scss    | 19 ++++++++
 nixosModules/ags/v2/widgets/bar/wim.tsx       |  4 +-
 5 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 nixosModules/ags/v2/widgets/bar/style.scss

diff --git a/nixosModules/ags/v2/app.ts b/nixosModules/ags/v2/app.ts
index 7fd4d8c3..5b914671 100644
--- a/nixosModules/ags/v2/app.ts
+++ b/nixosModules/ags/v2/app.ts
@@ -1,6 +1,6 @@
 import { App } from 'astal';
 
-import style from 'inline:./style.scss';
+import style from './style.scss';
 
 import Bar from './widgets/bar/wim';
 
diff --git a/nixosModules/ags/v2/style.scss b/nixosModules/ags/v2/style.scss
index 8b137891..0c65f809 100644
--- a/nixosModules/ags/v2/style.scss
+++ b/nixosModules/ags/v2/style.scss
@@ -1 +1,47 @@
+$accent_color: #bd93f9;
+$accent_bg_color: #bd93f9;
+$accent_fg_color: #f8f8f2;
+$destructive_color: #ff5555;
+$destructive_bg_color: #ff5555;
+$destructive_fg_color: #f8f8f2;
+$success_color: #50fa7b;
+$success_bg_color: #50fa7b;
+$success_fg_color: #f8f8f2;
+$warning_color: #f1fa8c;
+$warning_bg_color: #f1fa8c;
+$warning_fg_color: rgba(0, 0, 0, 0.8);
+$error_color: #ff5555;
+$error_bg_color: #ff5555;
+$error_fg_color: #f8f8f2;
+$window_bg_color: #282a36;
+$window_fg_color: #f8f8f2;
+$view_bg_color: #282a36;
+$view_fg_color: #f8f8f2;
+$headerbar_bg_color: #282a36;
+$headerbar_fg_color: #f8f8f2;
+$headerbar_border_color: #ffffff;
+$headerbar_backdrop_color: $window_bg_color;
+$headerbar_shade_color: rgba(0, 0, 0, 0.36);
+$card_bg_color: rgba(255, 255, 255, 0.08);
+$card_fg_color: #f8f8f2;
+$card_shade_color: rgba(0, 0, 0, 0.36);
+$dialog_bg_color: #282a36;
+$dialog_fg_color: #f8f8f2;
+$popover_bg_color: #282a36;
+$popover_fg_color: #f8f8f2;
+$shade_color: #383838;
+$scrollbar_outline_color: rgba(0, 0, 0, 0.5);
 
+window {
+    all: unset;
+}
+
+.widget {
+    margin: 10px;
+    padding: 5px;
+    border-radius: 7px;
+    background-color: rgba($window_bg_color, 1);
+    box-shadow: 8px 8px rgba($accent_color, 1);
+}
+
+@import 'widgets/bar/style.scss';
diff --git a/nixosModules/ags/v2/widgets/bar/items/battery.tsx b/nixosModules/ags/v2/widgets/bar/items/battery.tsx
index 358edd84..880a5633 100644
--- a/nixosModules/ags/v2/widgets/bar/items/battery.tsx
+++ b/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>
 );
diff --git a/nixosModules/ags/v2/widgets/bar/style.scss b/nixosModules/ags/v2/widgets/bar/style.scss
new file mode 100644
index 00000000..15b20843
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/nixosModules/ags/v2/widgets/bar/wim.tsx b/nixosModules/ags/v2/widgets/bar/wim.tsx
index 96ba5a27..f090c785 100644
--- a/nixosModules/ags/v2/widgets/bar/wim.tsx
+++ b/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>