Skip to content
Snippets Groups Projects
Commit 83652015 authored by Eline Evje's avatar Eline Evje
Browse files

refactor: ran format check

parent b6822b50
Branches feat/signup/config-new-user
No related tags found
3 merge requests!66Final merge,!7Feat/signup/config new user,!4Pipeline fix
Pipeline #274566 passed with warnings
......@@ -3,39 +3,36 @@
<h1 class="mb-16 text-4xl font-bold lg:mb-20">Hvor kjent er du med sparing fra før?</h1>
<div class="grid grid-cols-1 gap-14 mb-20 md:grid-cols-3">
<div
:class="{'border-[var(--green)] border-4': selectedOption === 'litt', 'border-gray-300 border-2': selectedOption !== 'litt'}"
:class="{
'border-[var(--green)] border-4': selectedOption === 'litt',
'border-gray-300 border-2': selectedOption !== 'litt'
}"
class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]-500"
@click="selectOption('litt')"
>
<img
src="@/assets/nose.png"
alt="Litt kjent"
class="h-16 md:h-20"
/>
<img src="@/assets/nose.png" alt="Litt kjent" class="h-16 md:h-20" />
<p class="mt-2 text-lg font-bold">Litt kjent</p>
</div>
<div
:class="{'border-[var(--green)] border-4': selectedOption === 'noe', 'border-gray-300 border-2': selectedOption !== 'noe'}"
:class="{
'border-[var(--green)] border-4': selectedOption === 'noe',
'border-gray-300 border-2': selectedOption !== 'noe'
}"
class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
@click="selectOption('noe')"
>
<img
src="@/assets/head.png"
alt="Noe kjent"
class="h-16 md:h-20"
/>
<img src="@/assets/head.png" alt="Noe kjent" class="h-16 md:h-20" />
<p class="mt-2 text-lg font-bold">Noe kjent</p>
</div>
<div
:class="{'border-[var(--green)] border-4': selectedOption === 'godt', 'border-gray-300 border-2': selectedOption !== 'godt'}"
:class="{
'border-[var(--green)] border-4': selectedOption === 'godt',
'border-gray-300 border-2': selectedOption !== 'godt'
}"
class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
@click="selectOption('godt')"
>
<img
src="@/assets/pig.png"
alt="Godt kjent"
class="h-16 md:h-20"
/>
<img src="@/assets/pig.png" alt="Godt kjent" class="h-16 md:h-20" />
<p class="mt-2 text-lg font-bold">Godt kjent</p>
</div>
</div>
......@@ -60,4 +57,4 @@ const selectOption = (option: string) => {
const onButtonClick = () => {
router.push('/konfigurasjonSteg3')
}
</script>
\ No newline at end of file
</script>
......@@ -21,7 +21,10 @@ const onButtonClick = () => {
</h1>
<div class="grid grid-cols-1 gap-14 mb-20 md:grid-cols-3">
<div
:class="{'border-[var(--green)] border-4': selectedOption === 'litt', 'border-gray-300 border-2': selectedOption !== 'litt'}"
:class="{
'border-[var(--green)] border-4': selectedOption === 'litt',
'border-gray-300 border-2': selectedOption !== 'litt'
}"
class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
@click="selectOption('litt')"
>
......@@ -29,7 +32,10 @@ const onButtonClick = () => {
<p class="text-lg font-bold mt-2">Litt</p>
</div>
<div
:class="{'border-[var(--green)] border-4': selectedOption === 'passe', 'border-gray-300 border-2': selectedOption !== 'passe'}"
:class="{
'border-[var(--green)] border-4': selectedOption === 'passe',
'border-gray-300 border-2': selectedOption !== 'passe'
}"
class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
@click="selectOption('passe')"
>
......@@ -37,7 +43,10 @@ const onButtonClick = () => {
<p class="text-lg font-bold mt-2">Passe</p>
</div>
<div
:class="{'border-[var(--green)] border-4': selectedOption === 'store', 'border-gray-300 border-2': selectedOption !== 'store'}"
:class="{
'border-[var(--green)] border-4': selectedOption === 'store',
'border-gray-300 border-2': selectedOption !== 'store'
}"
class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
@click="selectOption('store')"
>
......
......@@ -13,17 +13,22 @@ const options = ref<Option[]>([
{ name: 'Kantina', amount: null }
])
const onButtonClick = () => {
}
const onButtonClick = () => {}
</script>
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye penger per kjøp bruker du på ...</h1>
<div class="flex flex-col gap-2 mb-6">
<div v-for="(option, index) in options" :key="index"
:class="{'border-[var(--green)] border-4': option.amount !== null && option.amount >= 0, 'border-gray-300 border-2': !(option.amount !== null && option.amount >= 0)}"
class="flex justify-between items-center w-72 p-2 cursor-pointer transition-colors bg-white rounded-lg my-4">
<div
v-for="(option, index) in options"
:key="index"
:class="{
'border-[var(--green)] border-4': option.amount !== null && option.amount >= 0,
'border-gray-300 border-2': !(option.amount !== null && option.amount >= 0)
}"
class="flex justify-between items-center w-72 p-2 cursor-pointer transition-colors bg-white rounded-lg my-4"
>
<p class="text-xl font-bold">{{ option.name }}</p>
<div class="flex items-center">
<input
......@@ -43,5 +48,3 @@ const onButtonClick = () => {
></ContinueButtonComponent>
</div>
</template>
......@@ -6,7 +6,10 @@
v-for="(option, index) in options"
:key="index"
class="flex flex-col items-center justify-center w-72 h-18 p-2.5 cursor-pointer transition-colors bg-white rounded-lg"
:class="{ 'border-[var(--green)] border-4': option.selected, 'border-gray-300 border-2': !option.selected }"
:class="{
'border-[var(--green)] border-4': option.selected,
'border-gray-300 border-2': !option.selected
}"
@click="toggleOption(index)"
>
<p class="text-lg font-bold mt-2">{{ option.name }}</p>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment