Merge branch 'text_fix' into 'main'

Text fix

See merge request !150

src/components/ChatComponents/RentalMessage.vue

 <template>
   <div class="message-container">
-    <div class="message">
+    <div class="message bg-gray-100 ring-1 ring-gray-300">
       <div class="info">
         <div class="text">
           <h2 class="header">Ny utleie forespørsel</h2>
@@ -135,7 +135,6 @@ export default {
   display: block;
   flex-direction: column;
   width: 100%;
-  background: #d1d5db;
   border-radius: 10px;
   padding: 10px;
   max-width: 50%;

src/components/CommunityComponents/CommunityList.vue

 <template>
   <!-- A list conatining all the communities -->
-  <p v-if="!communities.length" class="flex place-content-center text-gray-400">
+  <p v-if="!communities.length" class="flex place-content-center text-gray-400 mt-8">
     Ingen grupper
   </p>
   <ul v-else>

src/components/CommunityComponents/CommunityListItem.vue

@@ -55,7 +55,7 @@
         class="h-10 w-10 flex flex-col justify-center items-center ml-2 mr-2"
       >
         <UserGroupIcon
-          alt="Felleskapets bilde"
+          alt="Bilde"
           class="h-10 w-10 text-primary-dark"
         />
       </div>
@@ -65,7 +65,7 @@
       >
         <img
           :src="community.picture"
-          alt="Fellsekaps bilde"
+          alt="Bilde"
           class="rounded-md"
         />
       </div>

src/components/ItemComponents/ItemCard.vue

 <template>
-  <div class="mt-5 px-5">
+  <div class="mt-5 px-3">
     <div
-      class="w-full h-full rounded bg-gray-200 overflow-hidden display:inline-block correct-size"
+      class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer"
     >
       <div class="relative h-0 pb-[66.7%]">
         <img
-          class="w-full h-full absolute inset-0"
+          class="w-full h-full object-contain absolute"
           :src="item.img || require('../../assets/default-product.png')"
           alt="Item image"
         />

src/components/ItemComponents/NewItemForm.vue

@@ -105,7 +105,7 @@
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
         id="priceLabel"
-        >Pris</label
+        >Pris per dag</label
       >
       <input
         type="number"

src/components/ItemComponents/SearchItemList.vue

@@ -17,7 +17,7 @@
         type="text"
         id="searchInput"
         class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
-        placeholder="Search"
+        placeholder="Søk"
         v-model="search"
       />
     </div>

src/components/UserProfileComponents/UserItems.vue

@@ -3,7 +3,7 @@
     Mine gjenstander
   </div>
   <!-- Search field -->
-  <div class="relative" id="searchComponent">
+  <div class="relative mx-4" id="searchComponent">
     <span class="absolute inset-y-0 left-0 flex items-center pl-3">
       <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
         <path
@@ -20,12 +20,12 @@
       type="text"
       id="searchInput"
       class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
-      placeholder="Search"
+      placeholder="Søk"
       v-model="search"
       @change="searchWritten"
     />
   </div>
-  <div class="absolute inset-x-0 px-5 py-3">
+  <div class="absolute inset-x-0">
     <!-- ItemCards -->
     <div class="flex items-center justify-center w-screen">
       <!-- Shows items based on pagination -->
@@ -39,18 +39,18 @@
           v-for="item in visibleItems"
           :key="item"
         >
+          <div class="w-full">
           <ItemCard
             id="ItemCardPage"
-            class="ItemCard w-fit h-fit"
+            class="ItemCard w-full h-full"
             :item="item"
           />
-
-          <TripleDotButton class="DotButton" @click="openDotMenu(item)">
-          </TripleDotButton>
+        </div>
+          <TripleDotButton class="DotButton" @click="openDotMenu(item)"/>
 
           <div
             v-show="item.toggle"
-            class="options z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+            class="options z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 pt-4 pl-12"
           >
             <ul
               class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
@@ -109,9 +109,11 @@
         v-if="showSearchedItems"
       >
         <div class="cardContainer" v-for="item in searchedItems" :key="item">
-          <ItemCard id="ItemCardSearch" class="ItemCard" :item="item" />
-          <TripleDotButton class="DotButton" @click="openDotMenu(item)">
-          </TripleDotButton>
+          <div class="w-full">
+          <ItemCard id="ItemCardSearch" class="ItemCard w-full h-full" :item="item" />
+          </div>
+          <TripleDotButton class="DotButton" @click="openDotMenu(item)"/>
+
 
           <div
             v-show="item.toggle"

src/views/CommunityViews/CommunityView.vue

@@ -48,7 +48,7 @@
           type="text"
           id="searchInput"
           class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
-          placeholder="Search"
+          placeholder="Søk"
           v-model="search"
           @change="searchWritten"
         />

tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap

@@ -13,7 +13,7 @@ exports[`CommunityListItem component renders correctly 1`] = `
       class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
     >
       <img
-        alt="Fellsekaps bilde"
+        alt="Bilde"
         class="rounded-md"
         src="string"
       />

tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap

@@ -23,7 +23,7 @@ exports[`CommunityList component renders correctly 1`] = `
             class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
           >
             <img
-              alt="Fellsekaps bilde"
+              alt="Bilde"
               class="rounded-md"
               src="string"
             />
@@ -74,7 +74,7 @@ exports[`CommunityList component renders correctly 1`] = `
             class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
           >
             <img
-              alt="Fellsekaps bilde"
+              alt="Bilde"
               class="rounded-md"
               src="string"
             />

tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap

@@ -2,17 +2,17 @@
 
 exports[`ItemCard component renders correctly 1`] = `
 <div
-  class="mt-5 px-5"
+  class="mt-5 px-3"
 >
   <div
-    class="w-full h-full rounded bg-gray-200 overflow-hidden display:inline-block correct-size"
+    class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer"
   >
     <div
       class="relative h-0 pb-[66.7%]"
     >
       <img
         alt="Item image"
-        class="w-full h-full absolute inset-0"
+        class="w-full h-full object-contain absolute"
         src="String"
       />
     </div>

tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap

@@ -148,7 +148,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
       id="priceLabel"
     >
-      Pris
+      Pris per dag
     </label>
     <input
       class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"

tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap

@@ -28,7 +28,7 @@ exports[`SearchItemListComponent elements rendering renders correctly 1`] = `
     <input
       class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
       id="searchInput"
-      placeholder="Search"
+      placeholder="Søk"
       type="text"
     />
   </div>

tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap

@@ -13,7 +13,7 @@ exports[`UserItems component renders correctly 1`] = `
   </div>
   <!-- Search field -->
   <div
-    class="relative"
+    class="relative mx-4"
     id="searchComponent"
   >
     <span
@@ -36,12 +36,12 @@ exports[`UserItems component renders correctly 1`] = `
     <input
       class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
       id="searchInput"
-      placeholder="Search"
+      placeholder="Søk"
       type="text"
     />
   </div>
   <div
-    class="absolute inset-x-0 px-5 py-3"
+    class="absolute inset-x-0"
   >
     <!-- ItemCards -->
     <div