Hovedside klar (uten tips og gamification)

src/components/Navbar.vue

@@ -48,7 +48,7 @@ export default {
       return `32px`;
     },
     logoSize() {
-      return '62px';
+      return '52px';
     }
   }
 }
@@ -75,7 +75,7 @@ nav {
     width: 100%;
     background-color: base.$green;
     margin:0;
-    padding:0;
+    padding:5px;
 }
 
 ul {

src/views/HomeView.vue

-<script setup>
+<script>
+  import { useAuthStore } from "@/stores/authStore.js";
+  import { mapState } from 'pinia'
 
+  export default {
+    data() {
+      return {
+      }
+    },
+
+    computed: {
+      ...mapState(useAuthStore, ['profile'])
+    }
+
+
+  }
 </script>
 
 <template>
   <main>
-      <p>HALLO</p>
+      <div class="content">
+        <div class="welcome">
+          <img id="logo" src="../components/icons/logo.png" alt="Logo">
+          <h1>Velkommen, {{ this.profile.name }}!</h1>
+        </div>
+
+        <div class="gamification">
+          
+        </div>
+
+        <div class="tips">
+          <img id="tips-img" src="../components/icons/logo.png" alt="Logo">
+          <p id="tips-text">Her kommer tips du kanskje kan ha nytte av, trykk på meg for å gå til neste tips!</p>
+        </div>
+
+
+      </div>
   </main>
 </template>
+
+<style scoped>
+  .container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  min-width: 300px;
+  margin-top: 40px;
+}
+
+.welcome {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 20px;
+}
+
+
+#logo {
+  width: 75px;
+  height: 75px;
+}
+
+#tips-img {
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+}
+
+
+.tips {
+  display:flex;
+  padding: 10px;
+  min-height: 75px;
+  max-height: 250px;
+  background-color: rgb(232, 232, 232);
+  margin-left: 10px;
+  margin-right: 10px;
+  
+
+}
+
+#tips-text {
+  overflow: hidden;
+  padding-left: 10px;
+}
+
+@media (min-width: 1024px) {
+  .container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>

src/views/__tests__/HomeView.spec.js

+import { describe, it, expect, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+
+import { mount } from '@vue/test-utils'
+import HomeView from '../HomeView.vue'
+
+describe('Home', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HomeView, {
+        global: {
+          plugins: [createTestingPinia({
+            createSpy: vi.fn,
+          })],
+        },
+      })
+    expect(wrapper.text()).toContain('Velkommen,')
+  })
+
+  it('tips renders properly', () => {
+    const wrapper = mount(HomeView, {
+        global: {
+          plugins: [createTestingPinia({
+            createSpy: vi.fn,
+          })],
+        },
+      })
+    expect(wrapper.find('#tips-text').text()).not.toBe("");
+  })
+})
\ No newline at end of file