style: Adding login and signup styling

src/components/Buttons/ShopButton.vue

 <template>
-    <button type="button" class="btn btn-primary" id="buttonStyle"><img src="@/assets/items/v-buck.png" style="width: 2rem"> +{{ buttonText }}</button>
+    <button type="button" class="btn btn-primary" id="buttonStyle"><img src="@/assets/items/pigcoin.png" style="width: 2rem"> +{{ buttonText }}</button>
 </template>
 
 <script>

src/components/Login/Login.vue

@@ -3,11 +3,29 @@ import LoginForm from '@/components/Login/LoginForm.vue'
 </script>
 
 <template>
-  <div class="container-fluid">
-    <LoginForm/>
+  <div class="containers">
+    <div class="box">
+      <LoginForm/>
+    </div>
   </div>
 </template>
 
-<style>
+<style scoped>
+  .containers {
+    background-color: #A2CC99;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
+  .box {
+    background-color: white;
+    border-radius: 3rem;
+    max-width: 450px;
+    padding: 1rem 4rem;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+  }
+
+  
 </style>
\ No newline at end of file

src/components/SignUp/SignUp.vue

@@ -4,9 +4,27 @@ import SignUpForm from '@/components/SignUp/SignUpForm.vue'
 </script>
 
 <template>
-  <SignUpForm/>
+  <div class="containers">
+    <div class="box">
+      <SignUpForm />
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.containers {
+  background-color: #A2CC99;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+}
 
+.box {
+  width: 450px;
+  margin: 2rem;
+  background-color: white;
+  border-radius: 3rem;
+  padding: 1rem 4rem;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
 </style>
\ No newline at end of file

src/components/SignUp/SignUpForm.vue

@@ -68,6 +68,7 @@ const handleSubmit = async () => {
 
 <template>
   <div class="container">
+    <img src="@/assets/Sparesti-logo.png" style="width: 120px">
     <form ref="formRef" id="signUpForm" @submit.prevent="handleSubmit" novalidate>
       <BaseInput :model-value=firstNameRef
                  @input-change-event="handleFirstNameInputEvent"
@@ -124,12 +125,17 @@ const handleSubmit = async () => {
 
 .container {
   max-width: 450px;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  flex-direction: column;
 }
 
 #signUpForm {
   display: flex;
   flex-direction: column;
   justify-items: center;
+  width: 100%;
 }
 
 #firstNameInput, #surnameInput, #emailInput, #passwordInput, #confirmButton, #confirmPasswordInput {

src/views/Authentication/ChangePasswordView.vue

 <template>
-    <div class="container">
+    <div class="containers">
         <div class="row justify-content-center">
             <div class="col-lg-5">
                 <div class="card shadow-lg border-0 rounded-lg mt-5">
@@ -70,4 +70,17 @@ const submitForm = async () => {
     }
 };
 
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+    .containers {
+        width: 100%;
+        background-color: #A2CC99;
+        height: 100vh;
+    }
+
+    .row {
+        margin-right: 0px;
+        margin-left: 0px;
+    }
+</style>
\ No newline at end of file

src/views/Authentication/ForgottenPasswordView.vue

 <template>
-    <div class="container">
+    <div class="containers">
         <div class="row justify-content-center">
             <div class="col-lg-5">
                 <div class="card shadow-lg border-0 rounded-lg mt-5">
@@ -56,4 +56,17 @@ const submitForm = async () => {
     }
 };
 
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+    .containers {
+        width: 100%;
+        background-color: #A2CC99;
+        height: 100vh;
+    }
+
+    .row {
+        margin-right: 0px;
+        margin-left: 0px;
+    }
+</style>
\ No newline at end of file

src/views/LeaderboardView.vue

@@ -17,7 +17,7 @@
     </div>
     <main>
         <div id="leaderboard">
-            <h1><img src="@/assets/items/v-buck.png" style="width: 2rem"> Total points</h1>
+            <h1><img src="@/assets/items/pigcoin.png" style="width: 3rem"> Total points</h1>
             <Leaderboard :leaderboard="pointsLeaderboardData" :leaderboardExtra="pointsLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
         </div>
         <div id="leaderboard">
@@ -97,8 +97,6 @@ async function global() {
     pointsLeaderboardDataExtra.value = globalPointsYou.entries;
     currentLeaderboardDataExtra.value = globalCurrentStreakYou.entries;
     streakLeaderboardDataExtra.value = globalStreakYou.entries;
-
-    console.log(pointsLeaderboardDataExtra.value);
 }
 
 async function friends() {
@@ -138,8 +136,6 @@ async function friends() {
     pointsLeaderboardDataExtra.value = friendsPointsYou.entries;
     currentLeaderboardDataExtra.value = friendsStreakYou.entries;
     streakLeaderboardDataExtra.value = friendsCurrentStreakYou.entries;
-
-
 }
 
 const navigateToUserProfile = (userId: number) => {
@@ -170,7 +166,6 @@ main {
 #content {
     display: flex;
     flex-direction: row;
-   
     justify-content: center;
     flex-wrap: wrap;
 }
@@ -188,7 +183,6 @@ h1 {
     display: flex;
     justify-content: center;
     margin-bottom: 2rem;
-
 }
 
 #radioContainer {

src/views/ShopView.vue

@@ -73,14 +73,14 @@
                         <img src="@/assets/items/adfree.png" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">Adfree</h5>
-                            <ShopButton button-text="35kr"></ShopButton>
+                            <button type="button" class="btn btn-primary" id="buttonStyle"> +35kr</button>
                         </div>
                     </div> 
                     <div class="card text-center" style="width: 16rem; border: none">
                         <img src="@/assets/items/piggybank.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">Premium</h5>
-                            <ShopButton button-text="50kr"></ShopButton>
+                            <button type="button" class="btn btn-primary" id="buttonStyle">+50kr</button>
                         </div>
                     </div> 
                 </div>