feat(style): adding daisyui theme

Author: goshatch

resources/styles/main.css

@@ -1,5 +1,39 @@
 @import "tailwindcss";
 @plugin "daisyui";
+@plugin "daisyui/theme" {
+    name: "bumblebee";
+    default: true;
+    prefersdark: true;
+    color-scheme: "light";
+    --color-base-100: oklch(100% 0 0);
+    --color-base-200: oklch(97% 0 0);
+    --color-base-300: oklch(92% 0 0);
+    --color-base-content: oklch(20% 0 0);
+    --color-primary: oklch(85% 0.199 91.936);
+    --color-primary-content: oklch(42% 0.095 57.708);
+    --color-secondary: oklch(75% 0.183 55.934);
+    --color-secondary-content: oklch(40% 0.123 38.172);
+    --color-accent: oklch(0% 0 0);
+    --color-accent-content: oklch(100% 0 0);
+    --color-neutral: oklch(37% 0.01 67.558);
+    --color-neutral-content: oklch(92% 0.003 48.717);
+    --color-info: oklch(74% 0.16 232.661);
+    --color-info-content: oklch(39% 0.09 240.876);
+    --color-success: oklch(76% 0.177 163.223);
+    --color-success-content: oklch(37% 0.077 168.94);
+    --color-warning: oklch(82% 0.189 84.429);
+    --color-warning-content: oklch(41% 0.112 45.904);
+    --color-error: oklch(70% 0.191 22.216);
+    --color-error-content: oklch(39% 0.141 25.723);
+    --radius-selector: 1rem;
+    --radius-field: 0.5rem;
+    --radius-box: 1rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 1;
+    --noise: 0;
+}
 
 .system-view {
     .node {
@@ -34,14 +68,9 @@
         margin-top: 1em;
     }
 
-    .toolbar {
-        button {
-            margin-left: 0.2rem;
-        }
-    }
-
     .parts-toolbar {
-        border-radius: 5px;
+        background-color: var(--color-base-100);
+        border-radius: var(--radius-box);
         padding: 0.2rem 0.5rem;
         border: 1px solid #cccccc;
     }

src/main/parts/frontend/components/system.cljs

@@ -64,12 +64,12 @@
          ($ :span "(...) "))
        (if user
          ($ :span
-            ($ :span {:class "user-email"} (str "🟢 " (:username user)))
-            ($ :button {:on-click (fn [] (logout))}
+            ($ :span {:class "user-email"} (str "🟢 " (:username user) " "))
+            ($ :button {:class "btn btn-xs" :on-click (fn [] (logout))}
                "Log out"))
          ($ :span
             ($ :span "🔴")
-            ($ :button {:on-click #(set-show-login-modal true)}
+            ($ :button {:class "btn btn-xs" :on-click #(set-show-login-modal true)}
                "Log in"))))))
 
 (defui system [{:keys [nodes edges]}]
@@ -99,26 +99,23 @@
                 ($ parts-toolbar
                    ($ auth-status-bar)
                    ($ :span " Add part: ")
-                   ($ :button
-                      {:on-click
-                       (fn []
-                         (setNodes (add-node "unknown")))}
-                      "Unknown")
-                   ($ :button
-                      {:on-click
-                       (fn []
-                         (setNodes (add-node "exile")))}
-                      "Exile")
-                   ($ :button
-                      {:on-click
-                       (fn []
-                         (setNodes (add-node "firefighter")))}
-                      "Firefighter")
-                   ($ :button
-                      {:on-click
-                       (fn []
-                         (setNodes (add-node "manager")))}
-                      "Manager")))
+                   ($ :div {:class "join"}
+                      ($ :button
+                         {:class "btn btn-xs join-item"
+                          :on-click (fn [] (setNodes (add-node "unknown")))}
+                         "Unknown")
+                      ($ :button
+                         {:class "btn btn-xs join-item"
+                          :on-click (fn [] (setNodes (add-node "exile")))}
+                         "Exile")
+                      ($ :button
+                         {:class "btn btn-xs join-item"
+                          :on-click (fn [] (setNodes (add-node "firefighter")))}
+                         "Firefighter")
+                      ($ :button
+                         {:class "btn btn-xs join-item"
+                          :on-click (fn [] (setNodes (add-node "manager")))}
+                         "Manager"))))
              ($ Background {:variant "dots"
                             :gap 12
                             :size 1}))))))