Component styling update

src/components/BaseComponents/CommunityHeader.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center justify-between mx-4">
     <div class="flex-1 min-w-0">
       <h2
-        class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
+        class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
       >
         {{ community.name }}
       </h2>

src/components/CommunityComponents/NewCommunityForm.vue

 <template>
   <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
     <!-- Component heading -->
-    <h3
-      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    <div
+      class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
     >
       Opprett ny gruppe
-    </h3>
+    </div>
 
     <!-- Radio boxes -->
     <div class="mt-6">

src/components/FormComponents/LoginForm.vue

 <template>
   <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full">
     <div class="px-6 py-4 mt-4">
-      <h3
-        class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+      <div
+        class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
       >
         Logg på
-      </h3>
+      </div>
 
       <div>
         <div

src/components/FormComponents/NewPasswordForm.vue

@@ -3,7 +3,7 @@
       class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
 
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</h3>
+    <div class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</div>
 
     <div
       id="firstPasswordField"

src/components/FormComponents/RegisterForm.vue

@@ -2,11 +2,11 @@
   <div
     class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
   >
-    <h3
-      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    <div
+      class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
     >
-      Opprett ny bruker
-    </h3>
+      Opprett ny konto
+    </div>
 
     <form @submit.prevent>
       <div class="grid grid-cols-1 gap-6 mt-4">
@@ -157,7 +157,7 @@
       </div>
 
       <div class="flex justify-end mt-6">
-        <Button @click="submit" :text="'Lagre'"></Button>
+        <Button @click="submit" :text="'Opprett'"></Button>
       </div>
     </form>
   </div>

src/components/FormComponents/ResetPasswordForm.vue

 <template>
   <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
 
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</h3>
+    <div class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</div>
 
     <div
       id="emailField"

src/components/ItemComponents/NewItemForm.vue

 <template>
   <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
     <!-- Component heading -->
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</h3>
+    <div class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</div>
 
     <!-- Title -->
     <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">

src/views/CommunityViews/CommunityView.vue

 <template>
   <div v-if="loggedIn">
     <div class="flex flex-row p-4 relative">
-      <p class="capitalize font-bold w-full">Mine felleskap</p>
+      <p class="text-xl md:text-2xl text-gray-600 font-medium w-full">Mine felleskap</p>
       <UserAddIcon
         class="cursor-pointer max-h-6 max-w-6 float-right grow"
         @click="$router.push('/newCommunity')"
@@ -11,7 +11,7 @@
     </div>
     <CommunityList :communities="myCommunities" :member="true" />
   </div>
-  <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
+  <p class="text-xl md:text-2xl text-gray-600 font-medium w-full m-4">Offentlige felleskap</p>
   <CommunityList :communities="publicCommunities" :member="false" />
 </template>