Merge branch 'BC-3844-vue3-webpack' of github.com:hpi-schul-cloud/nux…

…t-client into BC-3844-vue3-webpack
hpi-schul-cloud · Oct 17, 2023 · 78c52c7 · 78c52c7
2 parents 051541d + 91e34df
commit 78c52c7
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 44 deletions.
diff --git a/src/components/administration/AdminMigrationSection.vue b/src/components/administration/AdminMigrationSection.vue
@@ -14,7 +14,7 @@
 				component="p"
 			/>
 			<div v-if="isStartButtonVisible">
-				<v-alert light prominent variant="text" type="info">
+				<v-alert prominent variant="tonal" type="info">
 					<RenderHTML
 						data-testid="migration-info-text"
 						:html="
@@ -83,6 +83,7 @@
 				class="ml-1"
 				color="primary"
 				data-testid="migration-mandatory-switch"
+				:true-icon="mdiCheck"
 				@update:model-value="
 					setMigrationMandatory(!oauthMigration.mandatorySince)
 				"
@@ -133,6 +134,7 @@
 			density="compact"
 			class="ml-1"
 			color="primary"
+			:true-icon="mdiCheck"
 			data-testid="enable-sync-during-migration-switch"
 			@update:model-value="setSchoolFeatures"
 		/>
@@ -148,6 +150,7 @@
 			density="compact"
 			class="ml-1"
 			color="primary"
+			:true-icon="mdiCheck"
 			data-testid="show-outdated-users-switch"
 			@update:model-value="setSchoolFeatures"
 		/>
@@ -188,6 +191,7 @@ import { RenderHTML } from "@feature-render-html";
 import { useI18n } from "vue-i18n";
 import { UserLoginMigration } from "@/store/user-login-migration";
 import { UserLoginMigrationFlags } from "@/store/user-login-migration/user-login-migration-flags";
+import { mdiCheck } from "@mdi/js";
 
 export default defineComponent({
 	name: "AdminMigrationSection",
@@ -365,6 +369,7 @@ export default defineComponent({
 			globalFeatureEnableLdapSyncDuringMigration,
 			officialSchoolNumber,
 			isMigrationActive,
+			mdiCheck,
 		};
 	},
 });

diff --git a/src/components/molecules/Alert.vue b/src/components/molecules/Alert.vue
@@ -115,10 +115,10 @@ export default {
 
 :deep(.v-btn__content .v-icon),
 .alert_text {
-	color: var(--v-theme-black) !important;
+	color: rgba(var(--v-theme-black)) !important;
 }
 
-:deep(.v-alert__border) {
+:deep(.v-alert_border) {
 	opacity: 1;
 }
 </style>
diff --git a/src/components/molecules/ImportModal.vue b/src/components/molecules/ImportModal.vue
@@ -79,8 +79,12 @@
 						:disabled="isImportError"
 					></v-text-field>
 					<div v-if="businessError.message !== ''">
-						<v-alert dense variant="outlined" type="error" class="import-error">
-							{{ $t("pages.rooms.importCourse.importError") }}
+						<v-alert
+							density="compact"
+							variant="outlined"
+							type="error"
+							:text="$t('pages.rooms.importCourse.importError')"
+						>
 						</v-alert>
 					</div>
 				</div>
@@ -208,7 +212,7 @@ export default {
 .step-sections {
 	min-height: var(--sidebar-width);
 	font-size: var(--space-md);
-	color: var(--v-black-base);
+	color: rgba(var(--v-theme-black));
 }
 
 .step {

diff --git a/src/components/organisms/administration/SchoolPolicy.vue b/src/components/organisms/administration/SchoolPolicy.vue
@@ -5,14 +5,13 @@
 		</h4>
 		<v-alert
 			v-if="status === 'error'"
-			light
 			prominent
-			variant="text"
+			variant="tonal"
 			type="error"
 			class="mb-6"
 			data-testid="error-alert"
+			:text="t('pages.administration.school.index.schoolPolicy.error')"
 		>
-			{{ t("pages.administration.school.index.schoolPolicy.error") }}
 		</v-alert>
 		<template v-else>
 			<v-progress-linear
@@ -56,6 +55,7 @@
 				>
 					<v-btn
 						icon
+						variant="text"
 						:aria-label="
 							t('pages.administration.school.index.schoolPolicy.edit')
 						"
@@ -71,6 +71,7 @@
 				>
 					<v-btn
 						icon
+						variant="text"
 						:aria-label="
 							t('pages.administration.school.index.schoolPolicy.download')
 						"

diff --git a/src/components/organisms/administration/SchoolPolicyFormDialog.vue b/src/components/organisms/administration/SchoolPolicyFormDialog.vue
@@ -7,13 +7,7 @@
 		</template>
 		<template #content>
 			<v-form ref="policyForm" v-model="isValid">
-				<v-alert
-					light
-					variant="text"
-					type="warning"
-					class="mb-10"
-					:icon="mdiAlert"
-				>
+				<v-alert variant="tonal" type="warning" class="mb-10" :icon="mdiAlert">
 					<div class="replace-alert-text">
 						{{
 							t(
@@ -42,7 +36,7 @@
 					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
 					@blur="onBlur"
 				>
-					<template v-slot:append>
+					<template v-slot:append-inner>
 						<v-icon
 							v-if="!isValid && isTouched"
 							color="var(--v-error-base)"
@@ -56,7 +50,7 @@
 					<div class="button-section button-right">
 						<v-btn
 							class="dialog-closed"
-							variant="text"
+							variant="tonal"
 							@click="cancel"
 							data-testid="cancel-button"
 						>
@@ -66,7 +60,7 @@
 							class="icon-button dialog-confirmed px-6"
 							type="submit"
 							color="primary"
-							variant="flat"
+							flat
 							:disabled="!isValid"
 							@click.prevent="submit"
 							data-testid="submit-button"
@@ -195,7 +189,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .replace-alert-text {
-	color: var(--v-black-base) !important;
+	color: rgba(var(--v-theme-black)) !important;
 }
 
 .button-left {

diff --git a/src/components/organisms/administration/SchoolTerms.vue b/src/components/organisms/administration/SchoolTerms.vue
@@ -5,14 +5,13 @@
 		</h4>
 		<v-alert
 			v-if="status === 'error'"
-			light
 			prominent
-			text
+			variant="tonal"
 			type="error"
 			class="mb-6"
 			data-testid="error-alert"
+			:text="t('pages.administration.school.index.termsOfUse.error')"
 		>
-			{{ t("pages.administration.school.index.termsOfUse.error") }}
 		</v-alert>
 		<template v-else>
 			<v-progress-linear
@@ -54,6 +53,7 @@
 				>
 					<v-btn
 						icon
+						variant="text"
 						:aria-label="t('pages.administration.school.index.termsOfUse.edit')"
 					>
 						<v-icon>$mdiPencilOutline</v-icon>
@@ -67,6 +67,7 @@
 				>
 					<v-btn
 						icon
+						variant="text"
 						:aria-label="
 							t('pages.administration.school.index.termsOfUse.download')
 						"

diff --git a/src/components/organisms/administration/SchoolTermsFormDialog.vue b/src/components/organisms/administration/SchoolTermsFormDialog.vue
@@ -7,7 +7,7 @@
 		</template>
 		<template #content>
 			<v-form ref="termsForm" v-model="isValid">
-				<v-alert light text type="warning" class="mb-10" icon="$mdiAlert">
+				<v-alert variant="tonal" type="warning" class="mb-10" icon="$mdiAlert">
 					<div class="replace-alert-text">
 						{{
 							t(
@@ -34,7 +34,7 @@
 					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
 					@blur="onBlur"
 				>
-					<template v-slot:append>
+					<template v-slot:append-inner>
 						<v-icon
 							v-if="!isValid && isTouched"
 							color="var(--v-error-base)"
@@ -48,8 +48,7 @@
 					<div class="button-section button-right">
 						<v-btn
 							class="dialog-closed"
-							depressed
-							text
+							variant="tonal"
 							@click="cancel"
 							data-testid="cancel-button"
 						>
@@ -59,12 +58,11 @@
 							class="icon-button dialog-confirmed px-6"
 							type="submit"
 							color="primary"
-							depressed
 							:disabled="!isValid"
 							@click.prevent="submit"
 							data-testid="submit-button"
 						>
-							<v-icon dense class="mr-1">$mdiFileReplaceOutline</v-icon>
+							<v-icon class="mr-1">$mdiFileReplaceOutline</v-icon>
 							{{ t("pages.administration.school.index.termsOfUse.replace") }}
 						</v-btn>
 					</div>
@@ -183,7 +181,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .replace-alert-text {
-	color: var(--v-black-base) !important;
+	color: rgba(var(--v-theme-black)) !important;
 }
 
 .button-left {

diff --git a/src/components/rooms/RoomVideoConferenceCard.vue b/src/components/rooms/RoomVideoConferenceCard.vue
@@ -14,8 +14,8 @@
 		<template #footer>
 			<div v-show="!isRunning" class="mt-2">
 				<v-alert
-					dense
-					variant="text"
+					density="compact"
+					variant="tonal"
 					class="ma-0"
 					type="info"
 					data-testId="vc-info-box"

diff --git a/src/pages/administration/Migration.page.vue b/src/pages/administration/Migration.page.vue
@@ -11,7 +11,7 @@
 			:timeout="errorTimeout"
 			top
 			centered
-			color="error darken-3"
+			color="error-darken-3"
 		>
 			{{ $t("pages.administration.migration.error") }}
 			<template #action="{ attrs }">
@@ -89,7 +89,7 @@
 								:ripple="false"
 								elevation="2"
 								class="pa-5 mb-10"
-								color="grey lighten-5"
+								color="grey-lighten-5"
 							>
 								<v-progress-linear
 									v-if="school.inUserMigration && totalImportUsers === 0"
@@ -99,11 +99,11 @@
 									<iframe class="full" :src="helpPageUri"></iframe>
 									<v-alert
 										v-if="!school.inUserMigration || totalImportUsers === 0"
-										dense
+										density="compact"
 										variant="outlined"
 										type="info"
+										:text="$t('pages.administration.migration.tutorialWait')"
 									>
-										{{ $t("pages.administration.migration.tutorialWait") }}
 									</v-alert>
 								</v-card-text>
 								<v-card-actions>
@@ -181,7 +181,7 @@
 								:ripple="false"
 								elevation="2"
 								class="pa-5 mb-10"
-								color="grey lighten-5"
+								color="grey-lighten-5"
 							>
 								<div v-if="!isLoading">
 									<v-card-text>
@@ -330,7 +330,7 @@
 								:ripple="false"
 								elevation="2"
 								class="pa-5 mb-10"
-								color="grey lighten-5"
+								color="grey-lighten-5"
 							>
 								<p>
 									{{ $t("pages.administration.migration.step5.syncReady1") }}

diff --git a/src/pages/administration/SchoolSettings.page.vue b/src/pages/administration/SchoolSettings.page.vue
@@ -4,8 +4,13 @@
 		:breadcrumbs="breadcrumbs"
 		:full-width="false"
 	>
-		<v-alert v-if="schoolError" light prominent variant="text" type="error">
-			{{ $t(schoolError.translationKey) }}
+		<v-alert
+			v-if="schoolError"
+			prominent
+			variant="tonal"
+			type="error"
+			:text="$t(schoolError.translationKey)"
+		>
 		</v-alert>
 		<img
 			v-if="schoolError"
@@ -15,7 +20,7 @@
 			src="@/assets/img/pc_repair.png"
 		/>
 		<div v-if="!schoolError" class="no-school-error">
-			<v-alert light prominent variant="text" type="info">
+			<v-alert prominent variant="tonal" type="info">
 				{{ $t("pages.administration.school.index.info") }}
 				<a href="/administration/school/">
 					{{ $t("pages.administration.school.index.back") }}

diff --git a/src/pages/rooms/tools/RoomExternalToolsOverview.vue b/src/pages/rooms/tools/RoomExternalToolsOverview.vue
@@ -15,13 +15,12 @@
 		</div>
 		<v-alert
 			v-if="apiError && apiError.message"
-			light
 			prominent
-			variant="text"
+			variant="tonal"
 			type="error"
 			data-testId="context-tool-error"
+			:text="apiError.message"
 		>
-			{{ apiError.message }}
 		</v-alert>
 
 		<v-progress-linear