New api key page

src/App.css

@@ -14,20 +14,26 @@
   font-style: normal;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   font-family: "Graphik";
 }
 
 body {
   margin: 0;
-  --background:white;
+  --background: white;
   --color: black;
   --accent: #232323;
-  --light: #f0eeeb;
-  --logo: invert(9%) sepia(10%) saturate(418%) hue-rotate(22deg) brightness(98%) contrast(89%);
+  --light: #ffffff;
+  --logo: invert(9%) sepia(10%) saturate(418%) hue-rotate(22deg) brightness(98%)
+    contrast(89%);
   --dark: #232323;
   --dark-accent: rgb(76, 75, 72);
   --embed: #232323;
+  --code-accent: #f4ede5;
+  --tool-tip: #faf8f7;
 }
 
 .dark {
@@ -40,38 +46,24 @@ body {
   --dark: #1b1b1a;
   --dark-accent: #3a3937;
   --embed: rgba(242, 244, 250, 0.2);
+  --code-accent: rgb(76, 75, 72);
+  --tool-tip: #4c4b48;
 }
 
 div,
-a,
-button {
+a {
   font-family: "Lato";
   font-size: 14px;
   color: var(--color, black);
 }
 
-h1, h2, h3, h4, h5, h6 {
-  color:  var(--color, black);
-}
-
-button, .button {
-  text-decoration: none;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: var(--color, black);
-  text-align: center;
-  padding: 10px 20px;
-  background-color: rgba(196, 196, 196, 0.2);
-  border: none;
-  transition: background-color 0.3s;
-  border-radius: 32px;
-  cursor: pointer;
-}
-
-button:hover, .button:hover {
-  background-color: rgba(196, 196, 196, 0.4);
-}
-
-button:active, .button:active {
-  background-color: rgba(196, 196, 196, 0.1);
 }
 
 @keyframes fadein {

src/components/Navbar.vue

@@ -1,14 +1,48 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :class="{ 'dark-mode': darkMode }">
     <router-link to="/">
       <img src="@/assets/logo.svg" />
     </router-link>
-    <router-link to="/card"> Cards </router-link>
-    <router-link to="/transaction"> Transactions </router-link>
-    <router-link to="/fundingsource"> Funding </router-link>
-    <toggle-button :value="darkMode" @change="toggleDarkMode" />
-    <a href="https://lithic.com" target="_blank"> Learn More </a>
-    <a href="https://docs.lithic.com" target="_blank"> API Docs </a>
+    <div>
+      <router-link
+        to="/"
+        exact
+        class="nav-link"
+        :class="{ active: $route.path === '/' }"
+      >
+        Overview
+      </router-link>
+      <router-link
+        to="/card"
+        class="nav-link"
+        :class="{ active: $route.path === '/card' }"
+      >
+        Cards
+      </router-link>
+      <router-link
+        to="/fundingsource"
+        class="nav-link"
+        :class="{ active: $route.path === '/fundingsource' }"
+      >
+        Funding
+      </router-link>
+      <a href="https://lithic.com" target="_blank" class="nav-link"
+        >Learn More</a
+      >
+      <a href="https://docs.lithic.com" target="_blank" class="nav-link"
+        >Docs</a
+      >
+    </div>
+
+    <div class="switch-container">
+      <p :class="{ 'dark-text': darkMode }">Light</p>
+      <toggle-button
+        :value="darkMode"
+        @change="toggleDarkMode"
+        class="toggle"
+      />
+      <p :class="{ 'dark-text': !darkMode }">Dark</p>
+    </div>
   </div>
 </template>
 
@@ -21,7 +55,7 @@ export default {
     },
   },
   methods: {
-    toggleDarkMode: function () {
+    toggleDarkMode() {
       this.$store.commit("toggleDarkMode");
     },
   },
@@ -36,23 +70,25 @@ export default {
   top: 0;
   height: 56px;
   width: 100%;
-  background: var(--light, #f0eeeb);
-  padding: 0 24px;
+  padding: 0 200px;
+  background: var(--light, #ffffff);
   display: flex;
   align-items: center;
+  justify-content: space-between;
+
+  > img {
+    filter: var(--logo);
+    height: 20px;
+  }
 
-  > * {
-    font-weight: bold;
+  > div > .nav-link {
+    font-weight: 400;
     font-family: "Graphik";
     text-decoration: none;
     margin-right: 24px;
+    border-spacing: 15px;
 
-    > img {
-      filter: var(--logo);
-      height: 20px;
-    }
-
-    &:nth-child(5) {
+    &:nth-child(7) {
       margin-left: auto;
     }
 
@@ -63,6 +99,26 @@ export default {
     &:hover {
       opacity: 0.7;
     }
+
+    &.active {
+      text-decoration: underline;
+    }
+  }
+
+  .switch-container {
+    display: flex;
+    align-items: center;
+    .toggle {
+      margin: 0 12px;
+    }
+    .dark-text {
+      opacity: 0.5;
+    }
+    .dark-mode {
+      .dark-text {
+        opacity: 1;
+      }
+    }
   }
 }
 </style>