diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index 9d36eafc7790593410c54a64a51c3406cb1eeed7..d405e03f83db080f399ac4480ea1d501f2a7929a 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/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>
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index d9bf923296a42c70521274ba6dcc5e275b75bb22..0a756fcd785cbaf623af7b4612d26ee63d1642d1 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,50 +1,50 @@
<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-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
>
Opprett ny gruppe
- </h3>
+ </div>
<!-- Radio boxes -->
<div class="mt-6">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="radioBoxLabel"
- >Synlighet</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="radioBoxLabel"
+ >Synlighet</label
>
<div class="form-check">
<input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- type="radio"
- name="flexRadioDefault"
- id="flexRadioOpen"
- value="Ã…pen"
- @change="checkRadioButton($event)"
- checked
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ type="radio"
+ name="flexRadioDefault"
+ id="flexRadioOpen"
+ value="Ã…pen"
+ @change="checkRadioButton($event)"
+ checked
/>
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioOpen"
- id="radioBoxOpenLabel"
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioOpen"
+ id="radioBoxOpenLabel"
>
Ã…pen
</label>
</div>
<div class="form-check">
<input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- type="radio"
- name="flexRadioDefault"
- id="flexRadioPrivate"
- value="Privat"
- @change="checkRadioButton($event)"
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ type="radio"
+ name="flexRadioDefault"
+ id="flexRadioPrivate"
+ value="Privat"
+ @change="checkRadioButton($event)"
/>
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioPrivate"
- id="radioBoxPrivateLabel"
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioPrivate"
+ id="radioBoxPrivateLabel"
>
Privat
</label>
@@ -54,23 +54,23 @@
<!-- Title -->
<div class="mt-6" :class="{ error: v$.group.name.$errors.length }">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="titleLabel"
- >Gruppenavn</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="titleLabel"
+ >Gruppenavn</label
>
<input
- type="text"
- id="title"
- 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"
- v-model="v$.group.name.$model"
- required
+ type="text"
+ id="title"
+ 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"
+ v-model="v$.group.name.$model"
+ required
/>
<!-- error message for title-->
<div
- class="text-error"
- v-for="(error, index) of v$.group.name.$errors"
- :key="index"
+ class="text-error"
+ v-for="(error, index) of v$.group.name.$errors"
+ :key="index"
>
<div class="text-error text-sm">
{{ error.$message }}
@@ -81,21 +81,22 @@
<!-- Place -->
<div class="mt-6" :class="{ error: v$.group.place.$errors.length }">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >By/Sted</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="positionLabel"
+ >By/Sted</label
>
<input
- type="text"
- 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"
- v-model="v$.group.place.$model"
- required
+ type="text"
+ 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"
+ v-model="v$.group.place.$model"
+ required
/>
<!-- error message for place-->
<div
- class="text-error"
- v-for="(error, index) of v$.group.place.$errors"
- :key="index"
+ class="text-error"
+ v-for="(error, index) of v$.group.place.$errors"
+ :key="index"
>
<div class="text-error text-sm">
{{ error.$message }}
@@ -106,23 +107,23 @@
<!-- Description -->
<div class="mt-6" :class="{ error: v$.group.description.$errors.length }">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="descriptionLabel"
- >Beskrivelse</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="descriptionLabel"
+ >Beskrivelse</label
>
<textarea
- id="description"
- rows="4"
- v-model="v$.group.description.$model"
- 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"
- required
+ id="description"
+ rows="4"
+ v-model="v$.group.description.$model"
+ 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"
+ required
></textarea>
<!-- error message for description -->
<div
- class="text-error"
- v-for="(error, index) of v$.group.description.$errors"
- :key="index"
+ class="text-error"
+ v-for="(error, index) of v$.group.description.$errors"
+ :key="index"
>
<div class="text-error text-sm">
{{ error.$message }}
@@ -133,19 +134,19 @@
<!-- Images -->
<div class="mt-6">
<label
- class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
+ class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+ id="imageLabel"
>
Bilde
</label>
<input
- type="file"
- ref="file"
- style="display: none"
- @change="addImage"
- multiple
- accept="image/png, image/jpeg"
+ type="file"
+ ref="file"
+ style="display: none"
+ @change="addImage"
+ multiple
+ accept="image/png, image/jpeg"
/>
<!-- Button for adding an image -->
@@ -171,9 +172,9 @@
<!-- Save item button -->
<div class="flex justify-center mt-10 float-right">
<Button
- @click="saveClicked"
- id="saveButton"
- :text="'Lagre'"
+ @click="saveClicked"
+ id="saveButton"
+ :text="'Lagre'"
>
</Button>
</div>
@@ -201,32 +202,32 @@ export default {
group: {
name: {
required: helpers.withMessage(
- () => "Navnt kan ikke være tom",
- required
+ () => "Navnt kan ikke være tom",
+ required
),
max: helpers.withMessage(
- () => `Navnet kan være på max 50 tegn`,
- maxLength(50)
+ () => `Navnet kan være på max 50 tegn`,
+ maxLength(50)
),
},
place: {
required: helpers.withMessage(
- () => "Stedsnavn kan ikke være tom",
- required
+ () => "Stedsnavn kan ikke være tom",
+ required
),
max: helpers.withMessage(
- () => `Stednavn kan være på max 50 tegn`,
- maxLength(50)
+ () => `Stednavn kan være på max 50 tegn`,
+ maxLength(50)
),
},
description: {
required: helpers.withMessage(
- () => "Beskrivelsen kan ikke være tom",
- required
+ () => "Beskrivelsen kan ikke være tom",
+ required
),
max: helpers.withMessage(
- () => `Beskrivelsen kan inneholde max 200 tegn`,
- maxLength(200)
+ () => `Beskrivelsen kan inneholde max 200 tegn`,
+ maxLength(200)
),
},
},
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index a3c4dd2f9e049ec7b1fe18c68427659223bbd9d7..9bd28d962bc2bebea069c4515535485a3c991ad9 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,11 +1,11 @@
<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-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
>
Logg på
- </h3>
+ </div>
<div>
<div
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index 667da928ac0430fea928a78723f73af715622209..0675e051a873b2717bb96a3cc4a43fb4f4e67114 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/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"
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index a2fc3c208a551402412bb31dffc3e73fac640275..c79d4c0af2b58a9a901a908ac9d12490317d8584 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/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-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" id="registerLabel"
>
- 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>
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index a3232e339f78a7ce82eee0a3199b966d9bc90178..5443c3c0bab2cc57db4b1a3425a3e781343c1f69 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -1,7 +1,7 @@
<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"
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index 729fd689dcd9243eed3341d1d897af49d432bccf..7c2b5f5a085567b00c1dbf2b1a6905639c5ce778 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -1,7 +1,7 @@
<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-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10">Opprett ny utleie</div>
<!-- Title -->
<div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
@@ -43,7 +43,7 @@
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"
>
<option class="text-gray-400" value="" disabled selected>
- Select a category
+ Velg en kategori
</option>
<option
v-for="category in categories"
@@ -69,8 +69,27 @@
<!-- Select Group -->
<div class="mb-6">
<label
- class="block text-sm font-medium text-gray-900 dark:text-gray-400"
- >Grupper</label>
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="selectCommunityLabel"
+ >Gruppe</label
+ >
+ <select
+ v-model="v$.item.selectGroup.$model"
+ 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"
+ >
+ <option class="text-gray-400" value="" disabled selected>
+ Velg en gruppe
+ </option>
+ <option
+ v-for="group in groups"
+ :key="group"
+ class="text-gray-900 text-sm"
+ >
+ {{ group }}
+ </option>
+ </select>
+
+ <!-- error message for select box -->
<div
class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
>
@@ -152,6 +171,7 @@
<div class="mb-6" :class="{ error: v$.item.address.$errors.length }">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="addressLabel"
>Adresse</label
>
<input
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 97b774a1c48dc778df7996ae32c0e743e7435f6e..2c988245f6333e1cf07dd2efba9a6055668bb9c3 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,24 +1,23 @@
<template>
<div v-if="loggedIn">
<div class="flex flex-row p-4 relative">
- <p class="capitalize font-bold w-full">Mine felleskap</p>
+ <div class="text-xl md:text-2xl text-gray-600 font-medium w-full">Mine grupper</div>
<UserAddIcon
- class="cursor-pointer max-h-6 max-w-6 float-right grow"
- @click="$router.push('/newCommunity')"
- v-if="loggedIn"
- alt="Lag ett nytt felleskap"
+ class="cursor-pointer max-h-6 max-w-6 float-right grow"
+ @click="$router.push('/newCommunity')"
+ alt="Opprett ny gruppe"
/>
</div>
- <CommunityList :communities="myCommunities" :member="true" />
+ <CommunityList :communities="myCommunities" :member="true"/>
</div>
- <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
- <CommunityList :communities="publicCommunities" :member="false" />
+ <p class="text-xl md:text-2xl text-gray-600 font-medium w-full p-4">Offentlige grupper</p>
+ <CommunityList :communities="publicCommunities" :member="false"/>
</template>
<script>
import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
-import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
-import { UserAddIcon } from "@heroicons/vue/outline";
+import {getMyGroups, getVisibleGroups} from "@/utils/apiutil";
+import {UserAddIcon} from "@heroicons/vue/outline";
export default {
name: "HomeView",
@@ -42,7 +41,7 @@ export default {
// Remove all of the user's communities from the public communities arrays
this.publicCommunities = this.publicCommunities.filter(
- (val) => !this.myCommunities.includes(val)
+ (val) => !this.myCommunities.includes(val)
);
},
};
diff --git a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
index 142860bf75a1138bfa4351ffb688c9982f01adbe..9accd167543e4b2291397821c4aeaedf42804313 100644
--- a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
+++ b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
@@ -17,7 +17,7 @@ describe("RegisterFormComponent", () => {
});
it("renders the h2 text correctly", () => {
- expect(wrapper.find("h3").text()).toBe("Opprett ny bruker");
+ expect(wrapper.find("#registerLabel").text()).toBe("Opprett ny konto");
});
it("has a button", () => {