diff --git a/src/assets/icons/budget.svg b/src/assets/icons/budget.svg
index f00f6f4ef6e38c66edae2300e881f6fbedfaaca4..0ca9f7a2d6dcd6d93d8276717c72b9fc567e4757 100644
--- a/src/assets/icons/budget.svg
+++ b/src/assets/icons/budget.svg
@@ -1 +1 @@
-<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
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 9af55cb30ee505ad64ae4acf3fa3b8b27df5d888..3b820b62aea14514beae57dd731d43876115eceb 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/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);
}
diff --git a/src/components/Budget/BudgetBox.vue b/src/components/Budget/BudgetBox.vue
index 96fafc1b3aeb446457e638722c6899067fb17b14..3cece123e089bf16cf13d733e1d3c1cc3b111ee4 100644
--- a/src/components/Budget/BudgetBox.vue
+++ b/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
diff --git a/src/components/Budget/Modal/ConfirmDeleteModal.vue b/src/components/Budget/Modal/ConfirmDeleteModal.vue
index 5d8b19f87074ee47704de0c480c65186bf92a3e8..9fe9ee282a36ae49eb7d2d215bd81f7b58ae5635 100644
--- a/src/components/Budget/Modal/ConfirmDeleteModal.vue
+++ b/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">
diff --git a/src/components/Budget/Modal/ImportBudgetModal.vue b/src/components/Budget/Modal/ImportBudgetModal.vue
index cd39a0434c49def5f87bdc311c55d8c753253e7f..ad4b706885b8a1ab4a6c11409f9b411d7380010d 100644
--- a/src/components/Budget/Modal/ImportBudgetModal.vue
+++ b/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>
diff --git a/src/views/Budget/BudgetOverview.vue b/src/views/Budget/BudgetOverview.vue
index 1eea4fe5ce22bf6b5d7599b353f45612e6730409..f4e058c745a0bb1de9697a0cb7b0c952a1d409aa 100644
--- a/src/views/Budget/BudgetOverview.vue
+++ b/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">«</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">»</span>
- </a>
- </li>
- </ul>
- </nav>
+
</div>
</template>
diff --git a/src/views/Budget/BudgetView.vue b/src/views/Budget/BudgetView.vue
index e06214ebd9bccb12b5370a936974462a7901ceab..cdf5440dad6c225ef69a85d6cf130b74ee99c30b 100644
--- a/src/views/Budget/BudgetView.vue
+++ b/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