minor

src/pages/dugnad/App.vue

@@ -84,20 +84,7 @@ const postDataToAPI = (data:any) => {
 
 
 <template>
-  <div class="container">
-    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
-        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
-        <span class="fs-4">Datadugnad</span>
-      </a>
-
-      <ul class="nav nav-pills">
-        <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
-        <li class="nav-item"><a href="#" class="nav-link">Om datadugnad</a></li>
-      </ul>
-    </header>
-
-
+  <div class="flex justify-center mx-auto px-4">
 
     <div v-if="currentStep === 'questions'">
       <HeaderProgress name="Svar på spørsmål" description="Svar på spørsmålene under" :progress="submissions"/>
@@ -111,7 +98,7 @@ const postDataToAPI = (data:any) => {
       <HeaderProgress name="Kontroller bidrag" description="Her er et par bidrag fra andre. Om du ser noe som er feil trykker du på Feil" :progress="submissions"/>
       <CreateValidation :validations="randomValidations" @submitValidations="handleValidationSubmission"/>
     </div>
-    <div v-else-if="currentStep === 'thankYou'">
+    <div class="mt-10 mb-10" v-else-if="currentStep === 'thankYou'">
       <p>Takk for at du deltok!</p>
     </div>
   </div>

src/pages/dugnad/CreateAnswers.vue

@@ -23,17 +23,17 @@ const submitAnswers = () => {
   <div>
     <div  v-for="(question, index) in props.questions" :key="index">
 
-      <div class="col-sm-6">
-              <label for="firstName" class="form-label">{{ question }}</label>
+      <div class="mt-3">
+              <label for="firstName" class="block">{{ question }}</label>
               <input v-model="answers[index]" type="text" class="form-control" required :placeholder="'Answer ' + (index + 1)">
-              <div class="invalid-feedback">
+              <!-- <div class="invalid-feedback">
                 Valid first name is required.
-              </div>
+              </div> -->
           </div>
 
     </div>
     <hr/>
-    <button class="btn btn-success mt-3" @click="submitAnswers">Neste</button>
+    <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" @click="submitAnswers">Neste</button>
   </div>
 </template>
 

src/pages/dugnad/CreateQuestions.vue

@@ -22,18 +22,18 @@ const submitQuestions = () => {
 <template>
   <div>
     <div  v-for="(answer, index) in props.answers" :key="index">
-      <div class="col-sm-6">
+      <div class="mt-3">
               <!-- <label  class="form-label">Spørsmål {{(index + 1)}}</label> -->
               <input  v-model="questions[index]" type="text" class="form-control" required :placeholder="'Spørsmål ' + (index + 1)">
-              <div class="invalid-feedback">
+              <!-- <div class="invalid-feedback">
                 Valid first name is required.
-              </div>
+              </div> -->
               <p  class="form-label">Svar {{ index + 1 }}: {{ answer }}</p>
           </div>
 
     </div>
     <hr/>
-    <button class="btn btn-success" @click="submitQuestions">Neste</button>
+    <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" @click="submitQuestions">Neste</button>
   </div>
 </template>
 

src/pages/dugnad/CreateValidation.vue

@@ -25,16 +25,16 @@ const submitValidations = () => {
 
 <template>
   <div>
-    <div  v-for="(validation, index) in props.validations" :key="index">
+    <div class="mt-2"  v-for="(validation, index) in props.validations" :key="index">
       <div v-if="validation" >
-        <p><strong>Question:</strong> {{ validation.question }}</p>
-        <p><strong>Answer:</strong> {{ validation.answer }}</p>
+        <p> {{ validation.question }}</p>
+        <p> {{ validation.answer }}</p>
       </div>
-      <button class="btn btn-danger btn-sm" @click="setValidation(index, true)">OK</button>
-      <button class="btn btn-success btn-sm" @click="setValidation(index, false)">Feil</button>
+      <button class=" py-2 px-4 rounded-full" @click="setValidation(index, true)">OK</button>
+      <button class=" py-2 px-4 rounded-full" @click="setValidation(index, false)">Feil</button>
     </div>
     <hr/>
-    <button class="btn btn-success" @click="submitValidations">Send inn</button>
+    <button class="mt-3 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" @click="submitValidations">Send inn</button>
   </div>
 </template>
 

src/pages/dugnad/HeaderProgress.vue

@@ -18,8 +18,8 @@ const props = defineProps({
 
 <template>
   <div>
-    <p>{{ props.name }}</p>
-    <p>{{ props.description }}</p>
+    <p class="text-2xl">{{ props.name }}</p>
+    <p class="text-xs">{{ props.description }}</p>
     <!-- <p>Progress: {{ progressPercentage }}%</p> -->
   </div>
 </template>