Tune styling

Author: g3force

frontend/src/assets/main.css

@@ -0,0 +1,60 @@
+.body--dark {
+  --q-primary: #487A91;
+  --q-secondary: #26A69A;
+  --q-accent: #9C27B0;
+  --q-positive: #21BA45;
+  --q-negative: #C10015;
+  --q-info: #31CCEC;
+  --q-warning: #F2C037;
+  --q-dark-page: #545454;
+}
+
+.body--light {
+  --q-primary: #0794B9;
+  --q-secondary: #17DFD5;
+  --q-accent: #9C27B0;
+  --q-positive: #21BA45;
+  --q-negative: #C10015;
+  --q-info: #31CCEC;
+  --q-warning: #F2C037;
+}
+
+.text-team-yellow {
+  color: #000000 !important;
+}
+
+.bg-team-yellow {
+  background: #ced509 !important;
+}
+
+.text-team-blue {
+  color: #ffffff !important;
+}
+
+.bg-team-blue {
+  background: #134cc4 !important;
+}
+
+h1 {
+  margin: 0.3em;
+}
+
+h2 {
+  margin: 0.3em;
+}
+
+h3 {
+  margin: 0.3em;
+}
+
+h4 {
+  margin: 0.3em;
+}
+
+h5 {
+  margin: 0.3em;
+}
+
+.max-content-width {
+  max-width: 900px;
+}

frontend/src/assets/main.scss

@@ -8,7 +8,7 @@ import {Quasar} from 'quasar'
 
 import {control} from "@/plugins/control";
 
-import "@/assets/main.css"
+import "@/assets/main.scss"
 
 // Import icon libraries
 import '@quasar/extras/material-icons/material-icons.css'
@@ -20,23 +20,7 @@ createApp(App)
   .use(router)
   .use(createPinia())
   .use(control)
-  .use(Quasar, {
-    config: {
-      brand: {
-        primary: '#a11a30',
-        secondary: '#984447',
-        accent: '#9C27B0',
-
-        dark: '#07171a',
-        'dark-page': '#374040',
-
-        positive: '#21BA45',
-        negative: '#C10015',
-        info: '#1ad3ed',
-        warning: '#ddb660'
-      }
-    }
-  })
+  .use(Quasar)
   .mount('#app')
 
 subscribeToLocalStorage()

frontend/src/main.ts

@@ -79,4 +79,6 @@ export const mockedConfig = {
     "Team1", "Team2"
   ],
   activeTrackerSource: "Foo",
+  gameEventBehavior: {},
+  autoRefConfigs: {},
 } as Config

frontend/src/store/gcState/defaultStates.ts

@@ -17,15 +17,6 @@ import {teams} from "@/helpers";
 
 <template>
   <div class="q-ma-md">
-    <p>
-      To set up a new match, go through this page from top to bottom.
-      The full procedure can be found in the
-      <q-btn dense color="primary" target="_blank"
-             href="https://robocup-ssl.github.io/ssl-rules/sslrules.html#_match_preparation">
-        rule book
-      </q-btn>
-      .
-    </p>
     <div class="row justify-evenly">
       <div class="q-pa-md">
         <ResetMatchButton/>
@@ -82,5 +73,16 @@ import {teams} from "@/helpers";
       <SwitchSidesRandomButton/>
       <EndMatchButton/>
     </div>
+
+    <div class="q-ma-md">
+      <p>
+        To set up a new match, go through this page from top to bottom.
+        The full procedure can be found in the
+        <q-btn color="primary" target="_blank"
+               href="https://robocup-ssl.github.io/ssl-rules/sslrules.html#_match_preparation">
+          rule book
+        </q-btn>
+      </p>
+    </div>
   </div>
 </template>