Style configuration

src/views/ConfigurationView.vue

@@ -74,9 +74,9 @@ const categoryName = ref('');
 const allSelected = computed(() => form.values.categories.every(category => category.selected))
 console.log(allSelected)
 
-//TODO: Implement chooseAll functionality
-//TODO: Implement save button
-//TODO: Implement card functionality and form
+const saved = () => {
+  alert('Lagret!');
+}
 
 </script>
 
@@ -86,15 +86,15 @@ console.log(allSelected)
     <div>
       <h1 class="text-3xl font-bold text-center md:text-left md:pl-10">Konfigurasjon</h1>
       <form @submit.prevent="onSubmit" class="flex flex-col md:flex-row space-y-8 px-8 gap-4 justify-center pt-7" >
-        <div class="flex flex-col items-start mr-4 md:mt-40 space-y-8">
+        <div class="flex flex-col items-center mr-4 md:mt-20 space-y-8">
           <FormField v-slot="{ componentField }" name="savingLevel">
             <FormItem>
               <FormLabel>Hvor mye vet du om sparing?</FormLabel>
               <FormControl>
                 <ToggleGroup class="mt-4" :isPreview="true" type="single" variant="outline" v-bind="componentField">
-                  <ToggleGroupItem :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
-                  <ToggleGroupItem :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
-                  <ToggleGroupItem :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
+                  <ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
+                  <ToggleGroupItem class="bg-primary" :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
+                  <ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
                 </ToggleGroup>
               </FormControl>
             </FormItem>
@@ -105,16 +105,16 @@ console.log(allSelected)
               <FormLabel>Velg hvor mye du er villig til å endre vaner</FormLabel>
               <FormControl>
                 <ToggleGroup class="mt-4" :isPreview="true" type="single" variant="outline" v-bind="componentField">
-                  <ToggleGroupItem :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
-                  <ToggleGroupItem :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
-                  <ToggleGroupItem :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
+                  <ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LITTLE">Lite</ToggleGroupItem>
+                  <ToggleGroupItem class="bg-primary" :value="IntensityLevel.SOME">Noe</ToggleGroupItem>
+                  <ToggleGroupItem class="bg-primary" :value="IntensityLevel.A_LOT">Mye</ToggleGroupItem>
                 </ToggleGroup>
               </FormControl>
             </FormItem>
           </FormField>
 
           <div>
-            <Button class="theme1" type="button" @click="themeStore.setTheme('theme1')">
+            <Button class="theme1 mr-2" type="button" @click="themeStore.setTheme('theme1')">
               Tema 1
             </Button>
             <Button class="theme2" type="button" @click="themeStore.setTheme('theme2')">
@@ -123,7 +123,7 @@ console.log(allSelected)
           </div>
         </div>
 
-        <div class="items-center">
+        <div class="items-center border-4 border-primary p-4 rounded-3xl">
           <div class="flex justify-between mb-4 mr-3">
             <div class="flex items-center space-x-1">
               <Checkbox id="chooseAll" @update:checked="selectAllCategories" :checked="allSelected"/>
@@ -163,7 +163,7 @@ console.log(allSelected)
               <div class="grid grid-cols-2 gap-4">
                 <Card class="hover:opacity-75 w-full h-30" v-for="(category, index) in form.values.categories" :key="index"
                       @click="() => form.setFieldValue(`categories.${index}.selected`, !category.selected)"
-                      :class="{ 'border-solid border-2 border-indigo-600'
+                      :class="{ 'border-solid border-2 border-primary-dark'
                 : category.selected }">
                   <CardHeader>
                     <CardTitle>{{ category.name }}</CardTitle>
@@ -179,7 +179,7 @@ console.log(allSelected)
         </div>
       </form>
       <div class="flex justify-center pt-4 mt-auto">
-        <Button id="save" type="submit" class="">Lagre</Button>
+        <Button @click="saved" id="save" type="submit" class="">Lagre</Button>
       </div>
     </div>
   </MainLayout>