[pages] added styling & improved components

8 files changed, 141 insertions, 4 deletions

diff --git a/src/public/css/dashboard.css b/src/public/css/dashboard.css
new file mode 100644
index 0000000..10b25ca
--- /dev/null
+++ b/src/public/css/dashboard.css
@@ -0,0 +1,89 @@
+/*
+ * ~~~ dashboard css styling
+*/
+
+body {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 256px auto;
+    gap: 8px;
+}
+
+h1 {
+    padding: 32px 0 16px 0;
+}
+
+aside {
+    background-color: var(--color-surface);
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+
+    ul {
+        padding: 4px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        list-style-type: none;
+
+        li {
+            display: flex;
+
+            a {
+                width: 100%;
+                padding: 6px 12px;
+                display: inline-block;
+                color: var(--color-text);
+                border-radius: 8px;
+                text-decoration: none;
+                transition: var(--trans) background-color, color;
+
+                &:hover {
+                    background-color: var(--color-accent);
+                    color: var(--color-accent-text);
+                }
+            }
+        }
+    }
+}
+
+section.devices,
+section.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+article.device,
+article.action {
+    padding: 12px 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--color-surface);
+
+    &:first-child {
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+    }
+
+    &:last-child {
+        border-bottom-left-radius: 12px;
+        border-bottom-right-radius: 12px;
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        button {
+            padding: 4px 8px;
+            cursor: pointer;
+        }
+
+        a {
+            color: var(--color-text);
+        }
+    }
+}
diff --git a/src/public/css/global.css b/src/public/css/global.css
index 95fdd00..70a26c6 100644
--- a/src/public/css/global.css
+++ b/src/public/css/global.css
@@ -19,8 +19,22 @@
     font-family: OpenSans;
 }
 
+:root {
+    color-scheme: light dark;
+
+    --color-background: light-dark(#ffffff, #18191b);
+    --color-surface: light-dark(#eeeff0, #252629);
+    --color-text: light-dark(#090909, #e0e1e4);
+    --color-accent: light-dark(#18191b, #e0e1e4);
+    --color-accent-text: light-dark(#e0e1e4, #18191b);
+
+    --trans: 0.15s ease;
+}
+
 body {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
+    background-color: var(--color-background);
+    color: var(--color-text);
 }
diff --git a/src/views/components/dashboard/action.pug b/src/views/components/dashboard/action.pug
new file mode 100644
index 0000000..6c14434
--- /dev/null
+++ b/src/views/components/dashboard/action.pug
@@ -0,0 +1,9 @@
+article.action
+
+    div
+        p= action.name
+
+    div
+
+        - let location = `/actions/${action.id}`
+        a(href=location) View
diff --git a/src/views/components/dashboard/device.pug b/src/views/components/dashboard/device.pug
new file mode 100644
index 0000000..099a54b
--- /dev/null
+++ b/src/views/components/dashboard/device.pug
@@ -0,0 +1,12 @@
+article.device
+
+    div
+        p= device.name
+
+    div
+
+        if device.type == "light"
+            button Toggle
+
+        - let location = `/devices/${device.id}`
+        a(href=location) View
diff --git a/src/views/components/head.pug b/src/views/components/head.pug
index d28b9d5..3d684fe 100644
--- a/src/views/components/head.pug
+++ b/src/views/components/head.pug
@@ -1,2 +1,4 @@
 meta(charset="utf-8")
 meta(name="viewport" content="width=device-width,initial-scale=1.0")
+
+link(href="/public/css/global.css" rel="stylesheet")
diff --git a/src/views/pages/dashboard/actions.pug b/src/views/pages/dashboard/actions.pug
index 06f5aed..9fa9086 100644
--- a/src/views/pages/dashboard/actions.pug
+++ b/src/views/pages/dashboard/actions.pug
@@ -6,6 +6,8 @@ html
 
         include ../../components/head.pug
 
+        link(href="/public/css/dashboard.css" rel="stylesheet")
+
         title Actions | Home Control
 
     body
@@ -22,6 +24,9 @@ html
 
             else
 
-                each action in actions
+                section.actions
+
+                    each action in actions
+
+                        include ../../components/dashboard/action.pug
 
-                    p= JSON.stringify(action)
diff --git a/src/views/pages/dashboard/devices.pug b/src/views/pages/dashboard/devices.pug
index 1175136..f3605c0 100644
--- a/src/views/pages/dashboard/devices.pug
+++ b/src/views/pages/dashboard/devices.pug
@@ -6,6 +6,8 @@ html
 
         include ../../components/head.pug
 
+        link(href="/public/css/dashboard.css" rel="stylesheet")
+
         title Devices | Home Control
 
     body
@@ -22,6 +24,8 @@ html
 
             else
 
-                each device in devices
+                section.devices
+
+                    each device in devices
 
-                    p= JSON.stringify(device)
+                        include ../../components/dashboard/device.pug
diff --git a/src/views/pages/dashboard/home.pug b/src/views/pages/dashboard/home.pug
index c5267bf..8ae2c4b 100644
--- a/src/views/pages/dashboard/home.pug
+++ b/src/views/pages/dashboard/home.pug
@@ -6,6 +6,8 @@ html
 
         include ../../components/head.pug
 
+        link(href="/public/css/dashboard.css" rel="stylesheet")
+
         title Dashboard | Home Control
 
     body