BC-820 - Design improvements school admin page

src/components/administration/AdminMigrationSection.vue

@@ -1,8 +1,5 @@
 <template>
 	<div>
-		<h2 class="text-h4 mb-10">
-			{{ t("components.administration.adminMigrationSection.headers") }}
-		</h2>
 		<div v-if="!isGracePeriodExpired" data-testId="migration-control-section">
 			<RenderHTML
 				data-testid="text-description"
@@ -14,32 +11,36 @@
 				component="p"
 			/>
 			<div v-if="isStartButtonVisible">
-				<v-alert light prominent text type="info">
-					<RenderHTML
-						data-testid="migration-info-text"
-						:html="
-							t('components.administration.adminMigrationSection.infoText')
-						"
-						component="span"
-					/>
+				<v-alert light text type="info">
+					<div class="alert-text">
+						<RenderHTML
+							data-testid="migration-info-text"
+							:html="
+								t('components.administration.adminMigrationSection.infoText')
+							"
+							component="span"
+						/>
+					</div>
 				</v-alert>
 			</div>
 			<div v-else-if="isMigrationActive">
-				<v-alert light prominent text type="info">
-					<RenderHTML
-						data-testid="migration-active-status"
-						:html="
-							t(
-								'components.administration.adminMigrationSection.migrationActive'
-							)
-						"
-						component="span"
-					/>
+				<v-alert light text type="info">
+					<div class="alert-text">
+						<RenderHTML
+							data-testid="migration-active-status"
+							:html="
+								t(
+									'components.administration.adminMigrationSection.migrationActive'
+								)
+							"
+							component="span"
+						/>
+					</div>
 				</v-alert>
 			</div>
 			<v-btn
 				v-if="isStartButtonVisible"
-				class="my-5 button-start"
+				class="my-4 button-start"
 				color="primary"
 				depressed
 				:disabled="!officialSchoolNumber"
@@ -54,7 +55,7 @@
 			</v-btn>
 			<v-btn
 				v-if="isEndButtonVisible"
-				class="my-5 button-end"
+				class="my-4 button-end"
 				color="primary"
 				depressed
 				:disabled="!oauthMigration.startedAt"
@@ -161,7 +162,7 @@
 
 <script lang="ts">
 import { MigrationBody } from "@/serverApi/v3";
-import { OauthMigration, School } from "@/store/types/schools";
+import { School } from "@/store/types/schools";
 import {
 	ENV_CONFIG_MODULE_KEY,
 	injectStrict,
@@ -364,3 +365,10 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.alert-text {
+	color: var(--v-black-base) !important;
+	line-height: var(--line-height-lg) !important;
+}
+</style>

src/components/administration/ExternalToolSection.unit.ts

@@ -82,26 +82,6 @@ describe("ExternalToolSection", () => {
 		});
 	});
 
-	describe("headers is called", () => {
-		describe("when table is rendered", () => {
-			it("should display dataTableHeaders in v-data-table", () => {
-				const { wrapper } = setup();
-
-				const vueWrapperArray = wrapper
-					.find(".v-data-table-header")
-					.findAll("th");
-
-				expect(vueWrapperArray.at(0).find("span").text()).toEqual(
-					"common.labels.name"
-				);
-				expect(vueWrapperArray.at(1).find("span").text()).toEqual(
-					"components.administration.externalToolsSection.table.header.status"
-				);
-				expect(vueWrapperArray.at(2).find("span").text()).toEqual("");
-			});
-		});
-	});
-
 	describe("items is called", () => {
 		const setupItems = () => {
 			const firstToolName = "Test";
@@ -136,6 +116,24 @@ describe("ExternalToolSection", () => {
 			};
 		};
 
+		describe("when table is rendered", () => {
+			it("should display dataTableHeaders in v-data-table", () => {
+				const { wrapper } = setupItems();
+
+				const vueWrapperArray = wrapper
+					.find(".v-data-table-header")
+					.findAll("th");
+
+				expect(vueWrapperArray.at(0).find("span").text()).toEqual(
+					"common.labels.name"
+				);
+				expect(vueWrapperArray.at(1).find("span").text()).toEqual(
+					"components.administration.externalToolsSection.table.header.status"
+				);
+				expect(vueWrapperArray.at(2).find("span").text()).toEqual("");
+			});
+		});
+
 		describe("when external tools were loaded", () => {
 			it("names should be rendered in the datatable", () => {
 				const { wrapper, firstToolName, secondToolName } = setupItems();
@@ -209,7 +207,7 @@ describe("ExternalToolSection", () => {
 
 						await deleteButton.trigger("click");
 
-						expect(wrapper.find("p").text()).toContain(firstToolName);
+						expect(wrapper.findAll("p").at(1).text()).toContain(firstToolName);
 					});
 				});
 

src/components/administration/ExternalToolSection.vue

@@ -1,9 +1,10 @@
 <template>
 	<div>
-		<h2 class="text-h4 mb-10">
-			{{ t("components.administration.externalToolsSection.header") }}
-		</h2>
+		<p class="mb-6">
+			{{ t("components.administration.externalToolsSection.info") }}
+		</p>
 		<v-data-table
+			v-if="items.length"
 			:disable-pagination="true"
 			:hide-default-footer="true"
 			:items="items"
@@ -36,7 +37,7 @@
 			</template>
 		</v-data-table>
 		<v-btn
-			class="my-5 button-save"
+			class="mt-8 mb-4 button-save float-right"
 			color="primary"
 			depressed
 			:to="{ name: 'administration-tool-config-overview' }"

src/components/organisms/administration/AuthSystems.vue

@@ -1,8 +1,5 @@
 <template>
-	<section>
-		<h2 class="text-h4 mb-10">
-			{{ $t("pages.administration.school.index.authSystems.title") }}
-		</h2>
+	<div>
 		<v-text-field
 			v-if="customLoginLinkEnabled && !hasSystems"
 			id="school-login-link-0"
@@ -111,7 +108,7 @@
 		<v-btn
 			v-if="hasSystemCreatePermission"
 			color="primary"
-			class="my-8 add-ldap"
+			class="mt-8 mb-4 add-ldap float-right"
 			depressed
 			to="/administration/ldap/config"
 		>
@@ -129,7 +126,7 @@
 					$t("pages.administration.school.index.authSystems.deleteAuthSystem")
 				}}
 			</h2>
-			<template slot="content">
+			<template #content>
 				<p class="text-md mt-2">
 					{{
 						$t(
@@ -139,7 +136,7 @@
 				</p>
 			</template>
 		</v-custom-dialog>
-	</section>
+	</div>
 </template>
 
 <script>

src/components/organisms/administration/GeneralSettings.unit.js

@@ -156,11 +156,11 @@ describe("GeneralSettings", () => {
 			const ele = wrapper.find(searchStrings.languagesSelect);
 			expect(ele.vm.$props.items).toHaveLength(3);
 			expect(ele.vm.$props.items[0].name).toStrictEqual("Deutsch");
-			expect(ele.vm.$props.items[0].abbreveation).toStrictEqual("de");
+			expect(ele.vm.$props.items[0].abbreviation).toStrictEqual("de");
 			expect(ele.vm.$props.items[1].name).toStrictEqual("Englisch");
-			expect(ele.vm.$props.items[1].abbreveation).toStrictEqual("en");
+			expect(ele.vm.$props.items[1].abbreviation).toStrictEqual("en");
 			expect(ele.vm.$props.items[2].name).toStrictEqual("Spanisch");
-			expect(ele.vm.$props.items[2].abbreveation).toStrictEqual("es");
+			expect(ele.vm.$props.items[2].abbreviation).toStrictEqual("es");
 		});
 	});