various color fixes and other debauchery

frontend/src/App.vue

@@ -1,56 +1,26 @@
 <template>
   <v-app>
-    <v-app-bar density="comfortable" color="primary" v-if="!$route.meta.hideHeader">
-      <v-app-bar-title>My App, The Disaster Unfolding Before Our Very Eyes: The Sequel</v-app-bar-title>
-      <v-btn variant="text" to="/">Home</v-btn>
-      <v-btn varient="text" to="/dashboard">Dashboard</v-btn>
-      <v-btn varient="text" to="/item">Item</v-btn>
-      <v-btn varient="text" to="/kitchen-sink">Kitchen Sink</v-btn>
-      <v-btn varient="text" to="/copilot-test">Copilot Test</v-btn>
-      <v-btn icon @click="toggleTheme">
-        <v-icon>
-          {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
-        </v-icon>
-      </v-btn>
-      <v-menu>
-        <template #activator="{ props }">
-          <v-btn icon v-bind="props">
-            <v-avatar size="32">
-              <img src="https://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" />
-            </v-avatar>
-          </v-btn>
-        </template>
+    <Header v-if="!$route.meta.hideHeader"/>
 
-        <v-list>
-          <v-list-item title="Profile" to="/profile"/>
-          <v-list-item title="Sign out" />
-        </v-list>
-      </v-menu>
-    </v-app-bar>
     <v-main>
       <v-container fluid>
         <router-view />
         <AppSnackbar ref="snackbar" />
       </v-container>
     </v-main>
+
+    <Footer  v-if="!$route.meta.hideFooter" />
   </v-app>
 </template>
 
 <script lang="ts" setup>
-  import HelloWorld from '@/components/HelloWorld.vue'
   import { useDisplay, useTheme } from 'vuetify'
   import { ref, provide } from 'vue'
-
-
-  const theme = useTheme()
-
-  function toggleTheme() {
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-  }
+  import Header from '@/components/Header.vue'
+  import Footer from '@/components/Footer.vue'
 
   // Snackbar
   import AppSnackbar from './components/AppSnackbar.vue'
-
   const snackbar = ref(null)
   provide('snackbar', snackbar)
 

frontend/src/components/AppSnackbar.vue

@@ -6,7 +6,7 @@
     timer="bottom"
     variant="flat"
     theme="dark"
-    timer-color="green"
+    timer-color="dark-grey"
     location="bottom center"
     rounded="lg"
   >
@@ -27,7 +27,7 @@ function toast(message, opts = {}) {
 }
 
 // Shorthand helpers
-const success = (msg, opts = {}) => toast(msg, { color: 'blue-grey', icon: 'mdi-check-circle-outline',  ...opts })
+const success = (msg, opts = {}) => toast(msg, { color: 'success', icon: 'mdi-check-circle-outline',  ...opts })
 const error   = (msg, opts = {}) => toast(msg, { color: 'error',   icon: 'mdi-alert-circle-outline',  ...opts })
 const warning = (msg, opts = {}) => toast(msg, { color: 'warning', icon: 'mdi-alert-outline',         ...opts })
 const info    = (msg, opts = {}) => toast(msg, { color: 'info',    icon: 'mdi-information-outline',   ...opts })

frontend/src/components/Header.vue

@@ -0,0 +1,39 @@
+<template>
+    <v-app-bar density="comfortable" color="primary">
+        <v-app-bar-title>My App, The Disaster Unfolding Before Our Very Eyes: The Sequel</v-app-bar-title>
+        <v-btn variant="text" to="/">Home</v-btn>
+        <v-btn varient="text" to="/dashboard">Dashboard</v-btn>
+        <v-btn varient="text" to="/item">Item</v-btn>
+        <v-btn varient="text" to="/kitchen-sink">Kitchen Sink</v-btn>
+        <v-btn varient="text" to="/copilot-test">Copilot Test</v-btn>
+        <v-btn icon @click="toggleTheme">
+            <v-icon>
+            {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+            </v-icon>
+        </v-btn>
+        <v-menu>
+            <template #activator="{ props }">
+            <v-btn icon v-bind="props">
+                <v-avatar size="32">
+                <img src="https://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" />
+                </v-avatar>
+            </v-btn>
+            </template>
+
+            <v-list>
+            <v-list-item title="Profile" to="/profile"/>
+            <v-list-item title="Sign out" />
+            </v-list>
+        </v-menu>
+    </v-app-bar>
+</template>
+
+<script setup>
+    import { ref, watch, computed } from 'vue'
+    import { useTheme } from 'vuetify'
+    const theme = useTheme()
+
+    function toggleTheme() {
+        theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+    }
+</script>

frontend/src/components/HelloWorld.vue

@@ -100,4 +100,18 @@
 </script>
 
 <style scoped>
+  @reference "../styles/tailwind.css";
+
+  /*
+    1. mixing helper classes and @apply for demonstration purposes only
+    2. the classes below are NOT wrapped in any CSS layer, so they "win" over everything else
+  */
+  .hero-card {
+    @apply py-3 md:pr-[120px] w-full transition-none;
+  }
+
+  :deep(.v-card) {
+    @apply bg-gray-200;
+    @apply dark:bg-black dark:bg-linear-to-r dark:from-primary/50 dark:to-primary/30 dark:text-white/80;
+  }
 </style>

frontend/src/styles/tailwind.css

@@ -7,6 +7,16 @@
   --font-body: "Roboto", sans-serif;
   --font-mono: "Roboto Mono", monospace;
 
+  --color-background: rgb(var(--v-theme-background));
+  --color-surface: rgb(var(--v-theme-surface));
+  --color-on-surface: rgb(var(--v-theme-on-surface));
+
+  --color-primary: rgb(var(--v-theme-primary));
+  --color-success: rgb(var(--v-theme-success));
+  --color-info: rgb(var(--v-theme-info));
+  --color-warning: rgb(var(--v-theme-warning));
+  --color-error: rgb(var(--v-theme-error));
+
   --breakpoint-*: initial;
   --breakpoint-xs: 0px;
   --breakpoint-sm: 600px;
@@ -67,14 +77,6 @@
 @source inline('elevation-{0,1,2,3,4,5}');
 
 @layer components {
-  .list {
-    @apply list-disc list-inside space-y-1.5 mx-8;
-  }
-
-  .header-1 {
-    @apply text-lg font-bold my-2
-  }
-
   .v-app-bar .v-toolbar__content {
     gap: 4px; 
   }

frontend/src/views/Dashboard.vue

@@ -8,16 +8,15 @@
         <div class="text-body-2 text-medium-emphasis mt-1">Overview of all routed items</div>
       </v-col>
       <v-col cols="auto">
-        <v-btn-toggle v-model="viewMode" mandatory density="compact" variant="outlined" divided>
-          <v-btn value="cards" size="small">
-            <v-icon size="16" start>mdi-view-grid-outline</v-icon>
-            Cards
-          </v-btn>
-          <v-btn value="table" size="small">
-            <v-icon size="16" start>mdi-table</v-icon>
-            Table
-          </v-btn>
-        </v-btn-toggle>
+        <v-btn
+          color="primary"
+          prepend-icon="mdi-plus-circle-outline"
+          rounded="lg"
+          variant="flat"
+          @click="$router.push({ name: 'item', params: { mode: 'create' } })"
+        >
+          Submit item
+        </v-btn>
       </v-col>
     </v-row>
 
@@ -83,15 +82,16 @@
       </v-col>
       <v-spacer />
       <v-col cols="auto">
-        <v-btn
-          color="primary"
-          prepend-icon="mdi-plus-circle-outline"
-          rounded="lg"
-          variant="flat"
-          @click="$router.push({ name: 'item', params: { mode: 'create' } })"
-        >
-          Submit item
-        </v-btn>
+        <v-btn-toggle v-model="viewMode" mandatory density="compact" variant="outlined" divided>
+          <v-btn value="cards" size="small">
+            <v-icon size="16" start>mdi-view-grid-outline</v-icon>
+            Cards
+          </v-btn>
+          <v-btn value="table" size="small">
+            <v-icon size="16" start>mdi-table</v-icon>
+            Table
+          </v-btn>
+        </v-btn-toggle>
       </v-col>
     </v-row>
 
@@ -206,7 +206,6 @@
           :headers="tableHeaders"
           :items="tabItems"
           :search="search"
-          density="compact"
           item-value="id"
           hover
           @click:row="onRowClick"
@@ -255,23 +254,6 @@
             <span class="text-caption text-medium-emphasis">{{ item.updated }}</span>
           </template>
 
-          <!-- Row actions -->
-          <template #item.actions="{ item }">
-            <div class="d-flex ga-1 justify-end">
-              <v-btn
-                icon="mdi-eye-outline"
-                size="x-small"
-                variant="text"
-                @click.stop="$router.push({ name: 'item', params: { id: item.id, mode: 'view' } })"
-              />
-              <v-btn
-                icon="mdi-pencil-outline"
-                size="x-small"
-                variant="text"
-                @click.stop="$router.push({ name: 'item', params: { id: item.id, mode: 'edit' } })"
-              />
-            </div>
-          </template>
         </v-data-table>
       </v-card>
     </template>

frontend/src/views/Item.vue

@@ -12,7 +12,7 @@
         />
       </v-col>
       <v-col>
-        <div class="text-h5 font-weight-medium text-high-emphasis">{{ pageTitle }}</div>
+        <div class="text-xl font-weight-medium text-high-emphasis">{{ pageTitle }}</div>
         <div class="text-body-2 text-medium-emphasis mt-1">{{ pageSubtitle }}</div>
       </v-col>
       <v-col cols="auto" class="d-flex ga-2">
@@ -48,8 +48,8 @@
         </template>
 
         <!-- Create mode actions -->
-        <template v-else-if="mode === 'create'">
-          <v-btn variant="outlined" rounded="lg" @click="saveDraft">Save draft</v-btn>
+        <template density="comfortable" v-else-if="mode === 'create'">
+          <v-btn variant="outlined" rounded="lg" prepend-icon="mdi-content-save" @click="saveDraft">Save draft</v-btn>
           <v-btn color="primary" variant="flat" rounded="lg" prepend-icon="mdi-send-outline" @click="submitItem">Submit for routing</v-btn>
         </template>
 

frontend/src/views/SystemNotice.vue

@@ -1,13 +1,13 @@
 <template>
-  <v-container class="flex items-center justify-center min-h-screen">
+  <v-container class="fill-height flex items-center justify-center ">
     <v-card class="pa-8">
-      <v-card-title>System Use Notice</v-card-title>
+      <v-card-title style="font-size: x-large">System Use Notice</v-card-title>
         <v-card-text>
-            <h1 class="header-1">Usage Agreement</h1>
+            <div style="font-size: large; font-weight: bold;">Usage Agreement</div>
             <p>
                 You are accessing a U.S. Government (USG) Information System (IS) that is provided for USG-authorized use only. By using this IS (which includes any device attached to this IS), you consent to the following conditions:
             </p>
-            <ul class="list">
+            <ul class="pl-8" style="list-style: disc">
                 <li>The USG routinely intercepts and monitors communications on this IS for purposes including, but not limited to, penetration testing, COMSEC monitoring, network operations and defense, personnel misconduct (PM), law enforcement (LE) and counterintelligence (CI) investigations.</li>
                 <li>At any time, the USG may inspect and seize data stored on this IS.</li>
                 <li>Communications using, or data stored on, this IS are not private, are subject to routine monitoring, interception, and search, and may be disclosed or used for any USG-authorized purpose.</li>
@@ -25,18 +25,18 @@
 </template>
 
 <script setup>
-import { useRouter, useRoute } from 'vue-router'
+    import { useRouter, useRoute } from 'vue-router'
 
-const router = useRouter()
-const route = useRoute()
+    const router = useRouter()
+    const route = useRoute()
 
-async function accept() {
-    await fetch('/api/accept-disclaimer/', {
-        method: 'POST',
-        credentials: 'include'
-    })
+    async function accept() {
+        await fetch('/api/accept-disclaimer/', {
+            method: 'POST',
+            credentials: 'include'
+        })
 
-  const redirect = route.query.redirect || '/'
-  router.push(redirect)
-}
+    const redirect = route.query.redirect || '/'
+    router.push(redirect)
+    }
 </script>