refactor/Made budgetview and budgetoverview scaleable

src/assets/icons/budget.svg

-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M840-320 464-614 305-395 120-540v-140l160 120 200-280 200 160h160v360ZM120-160v-280l200 160 160-220 360 281v59H120Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" height="24" viewBox="0 -960 960 960" width="24"><path d="M840-320 464-614 305-395 120-540v-140l160 120 200-280 200 160h160v360ZM120-160v-280l200 160 160-220 360 281v59H120Z"/></svg>
\ No newline at end of file

src/components/BaseComponents/NavBar.vue

@@ -30,6 +30,15 @@
               <img src="@/assets/icons/newsletter.svg">Nyheter
             </router-link>
           </li>
+          <li class="nav-item" v-if="useUserInfoStore().isPremium">
+            <router-link data-cy="budget"
+                         class="nav-link text-white"
+                         :to="toBudget()"
+                         exact-active-class="active-nav"
+                         @click="toggleDropdown">
+              <img src="@/assets/icons/budget.svg">Budjsett
+            </router-link>
+          </li>
           <li class="nav-item">
             <router-link data-cy="store" class="nav-link text-white"
               :to="toStore()" exact-active-class="active-nav">
@@ -83,15 +92,6 @@
                   <img src="@/assets/icons/black_person.svg">Min profil
                 </router-link>
               </li>
-              <li v-if="useUserInfoStore().isPremium">
-                <router-link data-cy="budget"
-                  class="dropdown-item dropdown-username-link"
-                  :to="toBudget()"
-                  exact-active-class="active-link"
-                  @click="toggleDropdown">
-                  <img src="@/assets/icons/budget.svg">Budjsett
-                </router-link>
-              </li>
               <li>
                 <router-link data-cy="friends"
                   class="dropdown-item dropdown-username-link"
@@ -181,7 +181,7 @@ let notificationListRef = ref<NotificationDTO[]>([]);
  * @returns {boolean} True if the current route is one of the active pages, otherwise false.
  */
  function isAnyActivePage(): boolean {
-  const activeRoutes = ['/roadmap', '/leaderboard', '/news', '/shop'];
+  const activeRoutes = ['/roadmap', '/leaderboard', '/news', '/budget-overview', '/shop'];
   return activeRoutes.includes(route.path);
 }
 

src/components/Budget/BudgetBox.vue

@@ -57,7 +57,6 @@ const onBudgetContainerPressed = () => {
 const onBudgetDeleted = () => {
   emit('deletedBudgetEvent');
 }
-
 </script>
 
 <template>
@@ -115,7 +114,7 @@ const onBudgetDeleted = () => {
 }
 
 .container-fluid {
-  border: 4px solid #5959ea;
+  border: 4px solid #003A58;
   min-height: 90px;
   border-radius: 15px;
   transition: transform 150ms ease-in-out, border 200ms ease-in-out;
@@ -123,7 +122,7 @@ const onBudgetDeleted = () => {
 }
 
 .container-fluid:hover {
-  border: 4px solid #0000f1;
+  border: 4px solid #01476b;
   transform: scale(1.03);
 }
 
@@ -175,4 +174,15 @@ div.col-12 p {
   align-self: center;
   justify-self: right;
 }
+
+div.container-fluid.row {
+  display: flex;
+}
+
+@media (max-width: 405px) {
+  .col-4 {
+    width: 100%; /* Make each column take up full width */
+    margin-bottom: 10px; /* Add some spacing between columns */
+  }
+}
 </style>
\ No newline at end of file

src/components/Budget/Modal/ConfirmDeleteModal.vue

@@ -38,7 +38,7 @@ const deleteBudget = async () => {
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header">
-          <h3>Er du sikker på at du vil slette dette budgettet <i>{{ budgetTitle }}?</i></h3>
+          <h3>Er du sikker på at du vil slette dette budgettet {{ budgetTitle }}?</h3>
           <button class="btn btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body">

src/components/Budget/Modal/ImportBudgetModal.vue

@@ -34,15 +34,18 @@ const emitImportBudgetEvent = (budgetId: number) => {
           <button class="btn btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body">
-          <MiniBudgetBox v-for="(item, index) in listOfBudgetResponseDTO"
-                         :key="index"
-                         :budget-id="Number(item.id) || 0"
-                         :budget-title="item.budgetName"
-                         :budget-amount="Number(item.budgetAmount)"
-                         :expense-amount="Number(item.expenseAmount)"
-                         @importBudgetEvent="emitImportBudgetEvent"
-                         data-bs-dismiss="modal">
-          </MiniBudgetBox>
+          <h6 v-if="listOfBudgetResponseDTO.length === 0" class="text-center">Du har ingen budsjetter du kan importere</h6>
+          <div v-else>
+            <MiniBudgetBox v-for="(item, index) in listOfBudgetResponseDTO"
+                           :key="index"
+                           :budget-id="Number(item.id) || 0"
+                           :budget-title="item.budgetName"
+                           :budget-amount="Number(item.budgetAmount)"
+                           :expense-amount="Number(item.expenseAmount)"
+                           @importBudgetEvent="emitImportBudgetEvent"
+                           data-bs-dismiss="modal">
+            </MiniBudgetBox>
+          </div>
         </div>
       </div>
     </div>

src/views/Budget/BudgetOverview.vue

@@ -82,7 +82,9 @@ const goToBudget = (id: number) => {
       </div>
     </div>
     <p class="text-danger">{{ errorMsg }}</p>
-    <ul class="budgetContainer" :key="budgetListKey">
+    <hr>
+    <h5 v-if="budgetList.length === 0" class="text-center">Du har ingen budsjetter</h5>
+    <ul v-else class="budgetContainer" :key="budgetListKey">
       <li v-for="(item, index) in budgetList">
         <budget-box
           :key="index"
@@ -96,23 +98,7 @@ const goToBudget = (id: number) => {
         ></budget-box>
       </li>
     </ul>
-    <nav id="navbar" aria-label="Sidenavigasjon eksempel">
-      <ul class="pagination">
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Forrige">
-            <span aria-hidden="true">&laquo;</span>
-          </a>
-        </li>
-        <li class="page-item"><a class="page-link" href="#">1</a></li>
-        <li class="page-item"><a class="page-link" href="#">2</a></li>
-        <li class="page-item"><a class="page-link" href="#">3</a></li>
-        <li class="page-item">
-          <a class="page-link" href="#" aria-label="Neste">
-            <span aria-hidden="true">&raquo;</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
+
   </div>
 </template>
 

src/views/Budget/BudgetView.vue

@@ -225,7 +225,7 @@ const importBudget = async (budgetId: number) => {
     <h1 class="text-center">{{ title }}</h1>
 
     <div class="button-container">
-      <BaseButton id="goBack" @click="router.push('/budsjett-oversikt')" button-text="Gå tilbake"/>
+      <BaseButton id="goBack" @click="router.push('/budget-overview')" button-text="Gå tilbake"/>
       <BaseButton id="optionButton" button-text="Alternativer" data-bs-toggle="modal" data-bs-target="#modal"/>
     </div>
 
@@ -260,7 +260,7 @@ const importBudget = async (budgetId: number) => {
     <confirm-delete-modal :budget-id="useBudgetStore().getActiveBudgetId"
                           modal-id="confirm-modal"
                           :budgetTitle="title"
-                          @deletedEvent="router.push('/budsjett-oversikt')"/>
+                          @deletedEvent="router.push('/budget-overview')"/>
 
     <import-budget-modal modal-id="import-modal"
                          :listOfBudgetResponseDTO="budgetDTOList"
@@ -298,7 +298,7 @@ const importBudget = async (budgetId: number) => {
         <div class="input-group">
           <span class="input-group-text">Ditt budsjett </span>
           <input type="text" class="form-control" placeholder="Skriv inn ditt budsjett" required v-model="budgetValue">
-          <button type="submit" class="btn btn-primary">Beregn</button>
+          <BaseButton id="calculate-budget" type="submit" class="btn" button-text="Beregn"></BaseButton>
         </div>
       </form>
 
@@ -307,7 +307,7 @@ const importBudget = async (budgetId: number) => {
           <span class="input-group-text">Legg til ny utgift </span>
           <input type="text" class="form-control" placeholder="Navn på utgift" required v-model="expenseDescription">
           <input type="number" min="0" class="form-control" placeholder="Beløp (kr)" required v-model="expenseAmount">
-          <button type="submit" class="btn btn-primary">Beregn</button>
+          <BaseButton id="calculate-expense" type="submit" class="btn" button-text="Beregn"></BaseButton>
         </div>
       </form>
     </div>
@@ -325,6 +325,7 @@ const importBudget = async (budgetId: number) => {
                      @editEvent="editExpense"/>
       </div>
     </div>
+    <h5 v-else class="text-center">Du har ingen utgifter</h5>
 
   </div>
 </template>
@@ -422,4 +423,27 @@ div.info:hover {
   max-height: 100vh;
 }
 
+@media (max-width: 550px) {
+  div.budget-info-container {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 400px) {
+  div.budget-info-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input-group {
+    display: block; /* Change display to block to stack vertically */
+    margin-bottom: 10px; /* Add some spacing between stacked input groups */
+    gap: 5px;
+  }
+
+  .input-group input {
+    min-width: 100%;
+  }
+}
 </style>
\ No newline at end of file