Add dark mode and UI enhancements

src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <el-container id="app" direction="vertical">
       <div>
-        <Navbar />
+        <Navbar :dark-mode="darkMode" @toggle-dark-mode="toggleDarkMode" />
       </div>
       <archive-banner
         v-if="showBanner"
@@ -14,6 +14,7 @@
       <div>
         <Footer class="footer-container" />
       </div>
+      <BackToTop />
     </el-container>
   </div>
 </template>
@@ -22,23 +23,47 @@
 import Navbar from "@/components/Navbar/index.vue"
 import Footer from "@/components/Footer.vue"
 import ArchiveBanner from "./components/ArchiveBanner.vue"
+import BackToTop from "@/components/BackToTop.vue"
 
 export default {
   name: "App",
   components: {
     Navbar,
     Footer,
-    ArchiveBanner
+    ArchiveBanner,
+    BackToTop
   },
   data() {
     return {
       showBanner: true,
+      darkMode: localStorage.getItem('darkMode') === 'true',
       footer: [
         { text: "Home", url: "/" },
         { text: "Promises", url: "/promises" },
         { text: "Politicians", url: "/politicians" },
       ],
     }
+  },
+  watch: {
+    darkMode(val) {
+      localStorage.setItem('darkMode', val)
+      this.applyTheme()
+    }
+  },
+  mounted() {
+    this.applyTheme()
+  },
+  methods: {
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode
+    },
+    applyTheme() {
+      if (this.darkMode) {
+        document.body.classList.add('dark')
+      } else {
+        document.body.classList.remove('dark')
+      }
+    }
   }
 };
 </script>
@@ -60,4 +85,15 @@ export default {
 .title {
   font-size: 36px;
 }
+
+body.dark {
+  background-color: #121212;
+  color: #e0e0e0;
+}
+
+body.dark #navbar,
+body.dark #footer {
+  background-color: #1e1e1e;
+  color: #e0e0e0;
+}
 </style>

src/components/BackToTop.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-button
+    id="back-to-top"
+    type="primary"
+    circle
+    v-show="visible"
+    @click="scrollToTop"
+  >
+    <i class="el-icon-arrow-up"></i>
+  </el-button>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'BackToTop',
+  setup() {
+    const visible = ref(false)
+    const onScroll = () => {
+      visible.value = window.scrollY > 300
+    }
+    const scrollToTop = () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+    onMounted(() => window.addEventListener('scroll', onScroll))
+    onUnmounted(() => window.removeEventListener('scroll', onScroll))
+    return { visible, scrollToTop }
+  }
+}
+</script>
+
+<style scoped>
+#back-to-top {
+  position: fixed;
+  right: 40px;
+  bottom: 40px;
+  z-index: 1000;
+}
+</style>

src/components/Footer.vue

@@ -63,6 +63,9 @@ export default {
   padding: 10px 5px 20px;
   color: white
 }
+body.dark #footer {
+  background-color: #1e1e1e;
+}
 .footer-link {
   color: white;
   text-decoration: none;

src/components/Navbar/Desktop.vue

@@ -52,14 +52,22 @@
           <el-button type="primary">Submit A Promise</el-button>
         </router-link>
       </el-menu-item>
+      <el-menu-item index="7" id="theme-toggle">
+        <el-switch
+          :model-value="darkMode"
+          active-text="Dark"
+          inactive-text="Light"
+          @change="$emit('toggle-dark-mode')"
+        />
+      </el-menu-item>
     </el-menu>
   </el-header>
 </template>
 
 <script>
 export default {
   name: "NavbarDesktop",
-  props: ["navigation", "authenticated", "email"],
+  props: ["navigation", "authenticated", "email", "darkMode"],
   data() {
     return {
       activeIndex: "0",
@@ -110,4 +118,8 @@ a {
 .router-link-active {
   font-weight: 600;
 }
+
+body.dark #navbar {
+  background-color: #1e1e1e;
+}
 </style>

src/components/Navbar/Mobile.vue

@@ -36,6 +36,14 @@
                 <el-button type="primary">Submit A Promise</el-button>
               </router-link>
             </el-menu-item>
+            <el-menu-item index="6" id="theme-toggle">
+              <el-switch
+                :model-value="darkMode"
+                active-text="Dark"
+                inactive-text="Light"
+                @change="$emit('toggle-dark-mode')"
+              />
+            </el-menu-item>
           </el-menu>
         </el-col>
       </el-row>
@@ -46,7 +54,7 @@
 <script>
 export default {
   name: "NavbarMobile",
-  props: ["navigation", "authenticated", "email"],
+  props: ["navigation", "authenticated", "email", "darkMode"],
   data() {
     return {
       activeNames: []
@@ -89,6 +97,10 @@ a {
   font-weight: 800;
 }
 
+body.dark #navbar {
+  background-color: #1e1e1e;
+}
+
 .el-collapse-item >>> .el-collapse-item__header {
   justify-content: flex-end;
 }

src/components/Navbar/index.vue

@@ -1,9 +1,14 @@
 <template>
   <navbar-mobile
     v-if="isMobile"
-    v-bind="{ navigation, authenticated }"
+    v-bind="{ navigation, authenticated, darkMode }"
+    @toggle-dark-mode="$emit('toggle-dark-mode')"
+  />
+  <navbar-desktop
+    v-else
+    v-bind="{ navigation, authenticated, darkMode }"
+    @toggle-dark-mode="$emit('toggle-dark-mode')"
   />
-  <navbar-desktop v-else v-bind="{ navigation, authenticated }" />
 </template>
 
 <script>
@@ -16,6 +21,7 @@ export default {
     NavbarDesktop,
     NavbarMobile
   },
+  props: ['darkMode'],
   data() {
     return {
       navigation: [

src/components/PoliticianCard.vue

@@ -63,12 +63,15 @@ export default {
   height: 120px;
   margin: 5px;
   box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
-  transition: box-shadow 0.3s ease, background-color 0.3s ease;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
 }
 
 .el-card:hover {
   background-color: rgba(240, 248, 255, 0.5);
   box-shadow: 4px 4px 8px rgba(0,0,0,0.35);
+  transform: scale(1.03);
 }
 .card-body {
   display: flex;
@@ -103,4 +106,8 @@ export default {
 .shadow-img {
   display: none;
 }
+
+body.dark .politician-card {
+  background-color: #1e1e1e;
+}
 </style>