From 4cb56824f6141f7581f77583b6c52dcbcbb85a75 Mon Sep 17 00:00:00 2001
From: "D. Scott Boggs" <scott@tams.tech>
Date: Sun, 27 Aug 2023 17:21:17 -0400
Subject: [PATCH] change CSS to dark theme

---
 client/src/main.ts                |   1 -
 client/src/style.scss             |  33 +++++++++
 client/src/views/NewTrackView.vue | 113 ++++++++++++++++--------------
 3 files changed, 93 insertions(+), 54 deletions(-)

diff --git a/client/src/main.ts b/client/src/main.ts
index 90cdedc..6b3f153 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import './style.scss'
 import router from './router'
 import { state } from "./state";
-import 'bulma/css/bulma.css'
 import App from './App.vue'
 
 
diff --git a/client/src/style.scss b/client/src/style.scss
index e69de29..5ceccce 100644
--- a/client/src/style.scss
+++ b/client/src/style.scss
@@ -0,0 +1,33 @@
+$background: hsl(0, 0%, 29%); // Bulma's $dark-grey
+$body-background-color: hsl(0, 0%, 21%); // Bulma's $grey-darker
+$text: hsl(0, 0%, 96%); // Bulma's $white-ter
+$text-light: hsl(0, 0%, 98%); // Bulma's $white-bis
+$text-strong: hsl(0, 0%, 93%); // Bulma's $grey-lightest
+
+
+// must be after assignments!
+@import '../node_modules/bulma/bulma.sass';
+
+.modal-card-body {
+    background-color: $body-background-color;
+}
+.modal-card-head {
+    border-bottom: 1px solid $primary;
+}
+
+.modal-card-foot {
+    border-top: 1px solid $primary;
+}
+
+.textarea, .table, .input {
+    background-color: $background;
+    border-color: $primary;
+}
+
+.tr, .th {
+    border: 1px solid $primary;
+}
+
+.navbar {
+    background-color: $background;
+}
diff --git a/client/src/views/NewTrackView.vue b/client/src/views/NewTrackView.vue
index a15e26a..5413cab 100644
--- a/client/src/views/NewTrackView.vue
+++ b/client/src/views/NewTrackView.vue
@@ -31,60 +31,67 @@ const submit = async () => {
 </script>
 <template>
     <section class="section">
-        <div class="field">
-            <label for="name" class="label">Name</label>
-            <div class="control">
-                <input type="text" name="name" class="input" v-model="name" />
+        <div class=columns>
+            <div class="column is-2"></div>
+            <div class="column is-7">
+                <h1 class="title">Add a new track</h1>
+                <div class="field">
+                    <label for="name" class="label">Name</label>
+                    <div class="control">
+                        <input type="text" name="name" class="input" v-model="name" />
+                    </div>
+                </div>
+                <div class="field">
+                    <label for="description" class="label">Description</label>
+                    <div class="control">
+                        <textarea class="textarea" name="description" cols="30" rows="5" v-model="description"></textarea>
+                    </div>
+                </div>
+                <div class="field">
+                    <label for="icon" class="label">Icon</label>
+                    <div class="control">
+                        <input type="text" name="icon" class="input" v-model="icon" />
+                    </div>
+                </div>
+                <div class="field is-grouped">
+                    <div class="control">
+                        <label for="enabled" class="label">
+                            <input type="checkbox" name="enabled" class="checkbox" v-model="enabled" />
+                            Enabled?
+                        </label>
+                    </div>
+                    <div class="control">
+                        <label for="multiple-entries" class="label">
+                            <input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay" />
+                            Multiple Entries per Day?
+                        </label>
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="control">
+                        TODO color choice
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="control">
+                        <label for="order" class="label">
+                            <input type="number" name="order" class="input" v-model="order" />
+                            Order
+                        </label>
+                    </div>
+                </div>
+                <div class="buttons">
+                    <RouterLink to="/">
+                        <button class="button is-danger">
+                            Cancel
+                        </button>
+                    </RouterLink>
+                    <button :class="submitButtonClass" @click="submit">
+                        Save
+                    </button>
+                </div>
             </div>
-        </div>
-        <div class="field">
-            <label for="description" class="label">Description</label>
-            <div class="control">
-                <textarea name="description" cols="30" rows="5" v-model="description"></textarea>
-            </div>
-        </div>
-        <div class="field">
-            <label for="icon" class="label">Icon</label>
-            <div class="control">
-                <input type="text" name="icon" class="input" v-model="icon" />
-            </div>
-        </div>
-        <div class="field is-grouped">
-            <div class="control">
-                <label for="enabled" class="label">
-                    <input type="checkbox" name="enabled" class="checkbox" v-model="enabled" />
-                    Enabled?
-                </label>
-            </div>
-            <div class="control">
-                <label for="multiple-entries" class="label">
-                    <input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay" />
-                    Multiple Entries per Day?
-                </label>
-            </div>
-        </div>
-        <div class="field">
-            <div class="control">
-                TODO color choice
-            </div>
-        </div>
-        <div class="field">
-            <div class="control">
-                <label for="order" class="label">
-                    <input type="number" name="order" class="input" v-model="order" />
-                    Order
-                </label>
-            </div>
-        </div>
-        <div class="buttons">
-            <RouterLink to="/">
-                <button class="button is-danger">
-                    Cancel
-                </button>
-            </RouterLink>
-            <button :class="submitButtonClass" @click="submit">
-                Save
-            </button>
+            <div class="column"></div>
         </div>
     </section>
 </template>
\ No newline at end of file