added dark mode

src/App.vue

@@ -7,47 +7,48 @@ import { MathPage } from "./support/page";
 import { onMounted, ref } from "vue";
 import { checkLoggedIn, loggedOut, loggedIn } from "./support/auth";
 import router from "./router";
+import { Dark } from "quasar";
 
 (window as any).Stmt = MathStatement;
 (window as any).Pg = MathPage;
 
-const status = ref(checkLoggedIn())
-
-; (async () => {
-    const response = await fetch('/api/login/status/', {
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-      },
-    })
-    const res = (await response.json()) as unknown as any
-    if (res.data.hasUser) {
-      loggedIn()
-    }
-    status.value = checkLoggedIn()
-  })()
+const status = ref(checkLoggedIn());
+(async () => {
+  const response = await fetch("/api/login/status/", {
+    method: "GET",
+    headers: {
+      Accept: "application/json",
+    },
+  });
+  const res = ((await response.json()) as unknown) as any;
+  if (res.data.hasUser) {
+    loggedIn();
+  }
+  status.value = checkLoggedIn();
+})();
 
 onMounted(() => {
-  status.value = checkLoggedIn()
-  console.log(status.value)
-})
+  status.value = checkLoggedIn();
+  console.log(status.value);
+});
 
 router.afterEach(() => {
-  status.value = checkLoggedIn()
-  console.log(status.value)
-})
+  status.value = checkLoggedIn();
+  console.log(status.value);
+});
 
 const logout = async () => {
-  const response = await fetch('/api/logout/', {
-    method: 'POST',
+  const response = await fetch("/api/logout/", {
+    method: "POST",
     headers: {
-      'Accept': 'application/json',
+      Accept: "application/json",
     },
-  })
-  loggedOut()
-  status.value = checkLoggedIn()
-  router.push({path: '/'})
-}
+  });
+  loggedOut();
+  status.value = checkLoggedIn();
+  router.push({ path: "/" });
+};
+Dark.set(true)
 
 </script>
 
@@ -56,20 +57,22 @@ const logout = async () => {
     <q-header elevated class="bg-primary text-white" height-hint="98">
       <q-toolbar>
         <q-toolbar-title>
-            
-
-          <q-avatar size="100px">
-            <img src="./assets/logo.svg" />
+          <q-avatar size="50px">
+            <img src="./assets/l2.svg" />
           </q-avatar>
-          Title
+          <span style="font-family: 'Cinzel Decorative', cursive;">
+            Crystal Math Worktable
+          </span>
+          <q-tab v-if="status" @click="logout()" label="Logout" />
+
         </q-toolbar-title>
       </q-toolbar>
 
-      <q-tabs>
-        <q-route-tab to="/Scratch" label="Scratch" />
-        <q-route-tab to="/Editor" label="Editor" />
-        <q-tab v-if="status" @click="logout()" label="Logout" />
-      </q-tabs>
+      <!-- <q-tabs>
+          <q-route-tab to="/Scratch" label="Scratch" />
+          <q-route-tab to="/Editor" label="Editor" />
+          <q-tab v-if="status" @click="logout()" label="Logout" />
+        </q-tabs> -->
     </q-header>
 
     <q-page-container style="display: flex;padding-top: 20px;">
@@ -79,11 +82,8 @@ const logout = async () => {
 </template>
 
 <style>
-body {
-  margin-top: 0px;
-  height: 100%;
-  background: #1e2361;
-}
+@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -92,4 +92,9 @@ body {
   color: #4484c4;
   margin-top: 60px;
 }
+.titleBar {
+  font-family: "Cinzel Decorative";
+}
+
+
 </style>

src/assets/l2.svg

@@ -51,7 +51,7 @@
        style="fill:#550000">
       <text
          xml:space="preserve"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0.50484;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
          x="-37.659836"
          y="831.96069"
          id="text6305"
@@ -60,10 +60,10 @@
            id="tspan6303"
            x="-37.659836"
            y="831.96069"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke-width:0.50484;stroke:#ffffff;stroke-opacity:1">C</tspan></text>
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">C</tspan></text>
       <text
          xml:space="preserve"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:463.256px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke:#ffffff;stroke-width:0.24128;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:463.256px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
          x="120.35316"
          y="634.82605"
          id="text6413"
@@ -72,7 +72,7 @@
            id="tspan6411"
            x="120.35316"
            y="634.82605"
-           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke-width:0.24128;stroke:#ffffff;stroke-opacity:1">M</tspan></text>
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">M</tspan></text>
     </g>
   </g>
 </svg>

src/main.ts

@@ -12,7 +12,7 @@ import router from './router'
                     App UI
 --------------------------------------------------
 */
-import { Quasar } from 'quasar'
+import { Dark, Quasar  } from 'quasar'
 
 // Import icon libraries
 import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
@@ -46,7 +46,21 @@ import App from './App.vue'
 const app = createApp(App)
 
 app.use(Quasar, {
-    plugins: {}, // import Quasar plugins and add here
+    plugins: {Dark}, // import Quasar plugins and add here
+    config: {
+        brand: {
+            primary: '#553564',
+            secondary: '#c1eeff',
+            accent: '#9C27B0',
+
+            dark: '#1d1d1d',
+
+            positive: '#21BA45',
+            negative: '#C10015',
+            info: '#31CCEC',
+            warning: '#F2C037',
+        },
+    },
 })
 
 app.use(router)

src/pages/Editor.vue

@@ -15,12 +15,16 @@ import { stepX, stepY } from '../support/const'
 import { checkLoggedIn, loggedOut } from '../support/auth'
 import router from '../router'
 
+
 const math = new MathPage(uuidv4());
 const statements = ref<MathStatement[]>([]);
 const evaluation = ref<EvaluationResult | undefined>();
 const statementsKey = ref<string>(uuidv4());
 const leftDrawerOpen = ref(false);
 
+
+
+
 const variableListingColumns = [
   {
     name: 'name',
@@ -34,6 +38,7 @@ const variableListingColumns = [
     label: 'Value',
   },
 ]
+  
 
 const stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => {
   console.log(e)

src/quasar-variables.sass

@@ -1,8 +1,10 @@
-$primary   : #1976D2
+$primary   : #553564
 $secondary : #26A69A
 $accent    : #9C27B0
 
 $dark      : #1D1D1D
+// $dark-page: #333333;
+
 
 $positive  : #21BA45
 $negative  : #C10015