diff --git a/src/views/ConfigAccountNumberView.vue b/src/views/ConfigAccountNumberView.vue
index 4bd7792521fe37be1cb0c8781d1ef0416ec92648..ef650a7178ad5b1ec25644fbe3193b9822e83e91 100644
--- a/src/views/ConfigAccountNumberView.vue
+++ b/src/views/ConfigAccountNumberView.vue
@@ -1,5 +1,7 @@
<template>
- <div class="flex flex-col items-center justify-center min-h-screen text-center">
+ <div
+ class="flex flex-col items-center justify-center min-h-screen md:pt-10 pt-4 pb-24 text-center"
+ >
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">
Legg til kontonummer for sparekonto og brukskonto
</h1>
diff --git a/src/views/ConfigFamiliarWithSavingsView.vue b/src/views/ConfigFamiliarWithSavingsView.vue
index 63b13ee4190dab6312e3e32f5fa126ad3de5e5f1..ecbd66aa41acbc1aa29f2fd9405ec17cb0c00213 100644
--- a/src/views/ConfigFamiliarWithSavingsView.vue
+++ b/src/views/ConfigFamiliarWithSavingsView.vue
@@ -1,7 +1,8 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
<h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
- Hvor kjent er du med sparing fra før?</h1>
+ Hvor kjent er du med sparing fra før?
+ </h1>
<div class="grid grid-cols-1 gap-8 mb-16 sm:gap-14 sm:mb-20 md:grid-cols-3">
<div
:class="{
diff --git a/src/views/ConfigSpendingItemsAmountView.vue b/src/views/ConfigSpendingItemsAmountView.vue
index f0095d20c053d9c752afd478dd8fde6f169918ee..aa77feb1371de00b5a70dfe7815dd86e77f939c5 100644
--- a/src/views/ConfigSpendingItemsAmountView.vue
+++ b/src/views/ConfigSpendingItemsAmountView.vue
@@ -1,65 +1,74 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center relative">
- <h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du per kjøp på ...</h1>
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
- <div
- v-if="showFirstBox"
- class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
- >
+ <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
+ Hvor mye bruker du per kjøp på ...
+ </h1>
+ <div class="w-full flex justify-center">
+ <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
<div
- v-for="(option, index) in firstBoxOptions"
- :key="`option-${index}`"
- class="w-full my-4"
+ v-if="showFirstBox"
+ class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+ :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+ :style="{ minWidth: '400px', maxWidth: '400px' }"
>
- <div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.type }}</p>
- <div class="flex items-center w-2/3">
- <input
- v-model="amounts[index]"
- @input="filterAmount(index, $event)"
- class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
- :class="{
- 'border-gray-300': !amounts[index],
- 'border-[var(--green)]': amounts[index]
- }"
- />
- <p class="text-xl font-bold ml-2">kr</p>
+ <div
+ v-for="(option, index) in firstBoxOptions"
+ :key="`first-option-${index}`"
+ class="w-full my-4"
+ >
+ <div class="flex justify-between items-center">
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+ <div class="flex items-center w-2/3">
+ <input
+ v-model="amounts[index]"
+ @input="filterAmount(index, $event)"
+ class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+ :class="{
+ 'border-gray-300': !amounts[index],
+ 'border-[var(--green)]': amounts[index]
+ }"
+ />
+ <p class="text-xl font-bold ml-2">kr</p>
+ </div>
</div>
</div>
</div>
- </div>
- <div
- v-if="showSecondBox"
- class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
- >
<div
- v-for="(option, index) in secondBoxOptions"
- :key="`option-${index}`"
- class="w-full my-4"
+ v-if="showSecondBox"
+ class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+ :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+ :style="{ minWidth: '400px', maxWidth: '400px' }"
>
- <div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.type }}</p>
- <div class="flex items-center w-2/3">
- <input
- v-model="amounts[index + 6]"
- @input="filterAmount(index + 6, $event)"
- class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
- :class="{
- 'border-gray-300': !amounts[index + 6],
- 'border-[var(--green)]': amounts[index + 6]
- }"
- />
- <p class="text-xl font-bold ml-2">kr</p>
+ <div
+ v-for="(option, index) in secondBoxOptions"
+ :key="`second-option-${index}`"
+ class="w-full my-4"
+ >
+ <div class="flex justify-between items-center">
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+ <div class="flex items-center w-2/3">
+ <input
+ v-model="amounts[index + firstBoxOptions.length]"
+ @input="filterAmount(index + firstBoxOptions.length, $event)"
+ class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+ :class="{
+ 'border-gray-300': !amounts[index + firstBoxOptions.length],
+ 'border-[var(--green)]':
+ amounts[index + firstBoxOptions.length]
+ }"
+ />
+ <p class="text-xl font-bold ml-2">kr</p>
+ </div>
</div>
</div>
</div>
</div>
</div>
- <div class="absolute bottom-36 right-4">
+ <div class="w-full text-right">
<ContinueButtonComponent
@click="onButtonClick"
:disabled="!isAllAmountsFilled"
- class="px-10 py-3 text-2xl font-bold mb-4"
+ class="px-10 py-3 text-2xl font-bold mb-20 mt-10 sm:mb-12 sm:mt-10"
></ContinueButtonComponent>
</div>
</div>
diff --git a/src/views/ConfigSpendingItemsTotalAmountView.vue b/src/views/ConfigSpendingItemsTotalAmountView.vue
index 7d0c5a2be7c4f8f7f006f9cfc6e1e9cc264993e0..098ba86faec729bcbc8450ad91268d7e65d82536 100644
--- a/src/views/ConfigSpendingItemsTotalAmountView.vue
+++ b/src/views/ConfigSpendingItemsTotalAmountView.vue
@@ -1,65 +1,74 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center relative">
- <h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du totalt per uke på ...</h1>
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
- <div
- v-if="showFirstBox"
- class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
- >
+ <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
+ Hvor mye bruker du per uke på ...
+ </h1>
+ <div class="w-full flex justify-center">
+ <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
<div
- v-for="(option, index) in firstBoxOptions"
- :key="`option-${index}`"
- class="w-full my-4"
+ v-if="showFirstBox"
+ class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+ :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+ :style="{ minWidth: '400px', maxWidth: '400px' }"
>
- <div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.type }}</p>
- <div class="flex items-center w-2/3">
- <input
- v-model="amounts[index]"
- @input="filterAmount(index, $event)"
- class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
- :class="{
- 'border-gray-300': !amounts[index],
- 'border-[var(--green)]': amounts[index]
- }"
- />
- <p class="text-xl font-bold ml-2">kr</p>
+ <div
+ v-for="(option, index) in firstBoxOptions"
+ :key="`first-option-${index}`"
+ class="w-full my-4"
+ >
+ <div class="flex justify-between items-center">
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+ <div class="flex items-center w-2/3">
+ <input
+ v-model="amounts[index]"
+ @input="filterAmount(index, $event)"
+ class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+ :class="{
+ 'border-gray-300': !amounts[index],
+ 'border-[var(--green)]': amounts[index]
+ }"
+ />
+ <p class="text-xl font-bold ml-2">kr</p>
+ </div>
</div>
</div>
</div>
- </div>
- <div
- v-if="showSecondBox"
- class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
- >
<div
- v-for="(option, index) in secondBoxOptions"
- :key="`option-${index}`"
- class="w-full my-4"
+ v-if="showSecondBox"
+ class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+ :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+ :style="{ minWidth: '400px', maxWidth: '400px' }"
>
- <div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.type }}</p>
- <div class="flex items-center w-2/3">
- <input
- v-model="amounts[index + 6]"
- @input="filterAmount(index + 6, $event)"
- class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
- :class="{
- 'border-gray-300': !amounts[index + 6],
- 'border-[var(--green)]': amounts[index + 6]
- }"
- />
- <p class="text-xl font-bold ml-2">kr</p>
+ <div
+ v-for="(option, index) in secondBoxOptions"
+ :key="`second-option-${index}`"
+ class="w-full my-4"
+ >
+ <div class="flex justify-between items-center">
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+ <div class="flex items-center w-2/3">
+ <input
+ v-model="amounts[index + firstBoxOptions.length]"
+ @input="filterAmount(index + firstBoxOptions.length, $event)"
+ class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+ :class="{
+ 'border-gray-300': !amounts[index + firstBoxOptions.length],
+ 'border-[var(--green)]':
+ amounts[index + firstBoxOptions.length]
+ }"
+ />
+ <p class="text-xl font-bold ml-2">kr</p>
+ </div>
</div>
</div>
</div>
</div>
</div>
- <div class="absolute bottom-36 right-4">
+ <div class="w-full text-right">
<ContinueButtonComponent
@click="onButtonClick"
:disabled="!isAllAmountsFilled"
- class="px-10 py-3 text-2xl font-bold mb-4"
+ class="px-10 py-3 text-2xl font-bold mb-20 mt-10 sm:mb-12 sm:mt-10"
></ContinueButtonComponent>
</div>
</div>
diff --git a/src/views/ConfigSpendingItemsView.vue b/src/views/ConfigSpendingItemsView.vue
index 810a7c521bd008344035e0c5a8207c6c4522dc78..fbeda5f09011b4a3f8639d752c02eab917c32e14 100644
--- a/src/views/ConfigSpendingItemsView.vue
+++ b/src/views/ConfigSpendingItemsView.vue
@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen text-center">
- <h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hva bruker du mye penger på?</h1>
+ <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">Hva bruker du mye penger på?</h1>
<div class="flex flex-wrap justify-center gap-8 mb-8">
<div
- class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
+ class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
>
<div
v-for="buttonText in [
@@ -32,7 +32,7 @@
</div>
</div>
<div
- class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
+ class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
>
<div
v-for="(option, index) in customOptions"
@@ -53,11 +53,11 @@
</div>
</div>
</div>
- <div class="w-full text-right mb-0 mt-0" style="position: relative; top: -92px; right: 8px">
+ <div class="w-full text-right">
<ContinueButtonComponent
@click="onButtonClick"
:disabled="!isFormValid"
- class="px-10 py-3 text-2xl font-bold mb-4 mr-2"
+ class="px-10 py-3 text-2xl font-bold mt-36 mr-4 sm:mb-12 sm:mt-10"
></ContinueButtonComponent>
</div>
</div>