UI Styling Overhaul (#18)

Author: jakekohl

cypress/e2e/workflow/projects.cy.js

@@ -19,7 +19,7 @@ describe('Projects', () => {
     });
   });
 
-  it.skip('should show a list of completed projects', () => {
+  it('should show a list of completed projects', () => {
     const completedProjects = [];
 
     cy.getDataTest('completed-projects').should('be.visible').within(() => {

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

src/App.vue

@@ -4,7 +4,7 @@ import TopNav from './components/TopNav.vue';
 
 <template>
   <div id="app" class="min-h-screen">
-    <TopNav />
+    <TopNav data-test="nav-top-menubar" />
     <main>
       <RouterView />
     </main>
@@ -17,8 +17,8 @@ import TopNav from './components/TopNav.vue';
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: var(--font-family-primary);
+  background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-blue-dark) 50%, var(--color-accent-blue-darker) 100%);
   min-height: 100vh;
 }
 
@@ -27,6 +27,7 @@ body {
 }
 
 main {
-  padding-top: 1rem;
+  padding-top: 80px; /* Account for fixed navigation height */
 }
+
 </style>