add more info text for the header analyzer

mailtower-app · Oct 18, 2024 · 5ded68b · 5ded68b
1 parent 7dc03de
commit 5ded68b
Show file tree

Hide file tree

Showing 9 changed files with 906 additions and 408 deletions.
diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
@@ -11,22 +11,22 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
-    "quasar": "^2.6.0",
+    "quasar": "^2.17.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
+    "@quasar/app-vite": "^1.10.1",
+    "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
+    "autoprefixer": "^10.4.2",
     "eslint": "^8.10.0",
-    "eslint-plugin-vue": "^9.0.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-promise": "^6.0.0",
-    "@types/node": "^12.20.21",
-    "@quasar/app-vite": "^1.0.0",
-    "autoprefixer": "^10.4.2",
+    "eslint-plugin-vue": "^9.0.0",
     "typescript": "^4.5.4"
   },
   "engines": {

diff --git a/src/Frontend/src/css/app.scss b/src/Frontend/src/css/app.scss
@@ -1,5 +1,24 @@
 // app global css in SCSS form
 
+html {
+  font-size: 16px;
+}
+
+html,
+body {
+   margin: 0;
+   padding: 0;
+}
+
+h1 {
+  font-size: clamp(2.0rem, -0.2rem + 4vw, 3.0rem) !important;
+  line-height: clamp(2.2rem, -0.2rem + 4vw, 3.2rem) !important;
+  font-weight: 600;
+  margin-block-start: 0em;
+  margin-block-end: 0.4em;
+  color: $secondary;
+}
+
 h2 {
   font-size: 1.4rem;
   line-height: 1.5rem;

diff --git a/src/Frontend/src/css/quasar.variables.scss b/src/Frontend/src/css/quasar.variables.scss
@@ -13,8 +13,8 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary   : #000000;
-$secondary : #26A69A;
-$accent    : #9C27B0;
+$secondary : #2b3131;
+$accent    : #616161;
 
 $dark      : #1D1D1D;
 $dark-page : #121212;

diff --git a/src/Frontend/src/layouts/MainLayout.vue b/src/Frontend/src/layouts/MainLayout.vue
@@ -6,30 +6,65 @@
   <q-layout view="lHh Lpr lFf">
     <q-header>
       <q-toolbar>
-        <q-toolbar-title>
-          <span style="font-weight: 600;">MAILTOWER</span> - E-Mail Header Analyzer
-        </q-toolbar-title>
-
-        <q-btn
-          stretch
-          flat
-          href="https://mailtower.app"
+        <q-toolbar-title
+          shrink
+          style="min-width:120px;"
         >
-          Mailtower.app
-        </q-btn>
+          <router-link
+            :to="{ name: 'home' }"
+            class="brand-name"
+          >
+            MAILTOWER
+          </router-link>
+        </q-toolbar-title>
 
-        <q-btn
+        <q-item
           stretch
           flat
-          href="https://github.com/mailtower-app/email-header-analyzer"
+          :to="{name: 'analyzer'}"
+          active-class="text-white bg-menu-active"
         >
-          GitHub
-        </q-btn>
+          <q-item-section class="text-uppercase text-weight-medium">
+            E-Mail Header Analyzer
+          </q-item-section>
+        </q-item>
       </q-toolbar>
     </q-header>
 
     <q-page-container>
       <router-view />
     </q-page-container>
+
+    <q-footer class="text-center bg-grey-2 text-black q-pa-xl">
+      <q-btn
+        stretch
+        flat
+        href="https://mailtower.app"
+        size="md"
+      >
+        Mailtower.app
+      </q-btn>
+
+      <q-btn
+        stretch
+        flat
+        href="https://github.com/mailtower-app/email-header-analyzer"
+        size="md"
+      >
+        GitHub
+      </q-btn>
+    </q-footer>
   </q-layout>
 </template>
+
+<style scoped>
+.brand-name {
+  color: #fff;
+  text-decoration: none;
+  font-weight:600;
+}
+
+.bg-menu-active {
+  background-color: #539CC5;
+}
+</style>