From 5c305a088d6fab768ea14cb3fc2fca3ff1fd1383 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sun, 10 Apr 2022 02:45:45 -0500
Subject: [PATCH] my changes on the ui and theme

---
 src/App.vue               |  7 +++----
 src/assets/grid.svg       |  4 ++--
 src/main.ts               |  2 +-
 src/pages/Editor.vue      | 40 +++++++++++++++++++++------------------
 src/quasar-variables.sass |  4 ++--
 5 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ce01029..2d74dbe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,7 +54,7 @@ Dark.set(true)
 
 <template>
   <q-layout view="hHr LpR fFf">
-    <q-header elevated class="bg-primary text-white" height-hint="98">
+    <q-header elevated class="bg-primary text-white" >
       <q-toolbar>
         <q-toolbar-title>
           <q-avatar size="50px">
@@ -63,8 +63,7 @@ Dark.set(true)
           <span style="font-family: 'Cinzel Decorative', cursive;">
             Crystal Math Worktable
           </span>
-          <q-tab v-if="status" @click="logout()" label="Logout" />
-
+          <q-icon icon="fa-solid fa-arrow-up-left-from-circle" v-if="status" @click="logout()" label="Logout" />
         </q-toolbar-title>
       </q-toolbar>
 
@@ -75,7 +74,7 @@ Dark.set(true)
         </q-tabs> -->
     </q-header>
 
-    <q-page-container style="display: flex;padding-top: 20px;">
+    <q-page-container style="display: flex;padding-top: 0px;">
       <router-view />
     </q-page-container>
   </q-layout>
diff --git a/src/assets/grid.svg b/src/assets/grid.svg
index ac2d34e..697c2a7 100644
--- a/src/assets/grid.svg
+++ b/src/assets/grid.svg
@@ -2,11 +2,11 @@
   <defs>
     <pattern id="smallGrid" width="25" height="25" patternUnits="userSpaceOnUse">
       <!-- <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/> -->
-    <circle cx="0.5" cy=".5" r=".25" stroke="gray" fill="transparent" stroke-width="1"/>    
+    <circle cx="0.5" cy=".5" r=".25" stroke="#bcbcbc" fill="transparent" stroke-width="1"/>    
     </pattern>
     <pattern id="grid" width="250" height="250" patternUnits="userSpaceOnUse">
       <rect width="250" height="250" fill="url(#smallGrid)"/>
-      <path d="M 250 0 L 0 0 0 250" fill="none" stroke="gray" stroke-width="2"/>
+      <path d="M 250 0 L 0 0 0 250" fill="none" stroke="#f5f5f5" stroke-width="2"/>
     </pattern>
   </defs>
       
diff --git a/src/main.ts b/src/main.ts
index 5ce924a..b5c8da8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -50,7 +50,7 @@ app.use(Quasar, {
     config: {
         brand: {
             primary: '#553564',
-            secondary: '#c1eeff',
+            secondary: '#7da9b2',
             accent: '#9C27B0',
 
             dark: '#1d1d1d',
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 8ae2c0b..2bd48dc 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -195,7 +195,9 @@ const makeNewRichTextBox = () => {
   richEditModal.value = true;
 };
 
-const richTextStatements = ref<RichTextBox[]>([]);
+const richTextStatements = ref<RichTextBox[]>([
+  new RichTextBox("Hello World"),   
+]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
@@ -256,16 +258,18 @@ onMounted(() => {
         <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
 
         <q-toolbar-title>
-          <q-avatar>
-            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
-          </q-avatar>Title
-        </q-toolbar-title>
+          <q-avatar size="50px">
+            <img src="../assets/l2.svg" />
+          </q-avatar>
+          <span style="font-family: 'Cinzel Decorative', cursive;">
+            Crystal Math Worktable
+          </span>
+        </q-toolbar-title>         
+
+        <span v-if="status" @click="logout()" label="Logout">Logout</span>
+
       </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-header>
 
     <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
@@ -320,7 +324,7 @@ onMounted(() => {
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container id="editor">
+    <q-page-container id="editor" style='padding=0'>
       <!--      <WrapperBox />-->
 
       <span v-for="statement in statements" style="display: flex">
@@ -416,20 +420,20 @@ onMounted(() => {
       </div>
     </q-page-container>
 
-    <q-footer reveal elevated class="bg-grey-8 text-white">
-      <q-toolbar>
-        <q-toolbar-title>
-          <div>Status</div>
-        </q-toolbar-title>
-      </q-toolbar>
-    </q-footer>
+
   </q-layout>
 </template>
 
 <style>
+@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
+
+
+
 #editor {
   background-image: url(../assets/grid.svg);
   background-repeat: repeat;
   height: 100%;
+    padding-top: 0px
+
 }
 </style>
diff --git a/src/quasar-variables.sass b/src/quasar-variables.sass
index edc3022..ad6e563 100644
--- a/src/quasar-variables.sass
+++ b/src/quasar-variables.sass
@@ -1,5 +1,5 @@
 $primary   : #553564
-$secondary : #26A69A
+$secondary : #008e80
 $accent    : #9C27B0
 
 $dark      : #1D1D1D
@@ -8,5 +8,5 @@ $dark      : #1D1D1D
 
 $positive  : #21BA45
 $negative  : #C10015
-$info      : #31CCEC
+$info      : #7da9b2
 $warning   : #F2C037
\ No newline at end of file