feat: reduce header sizes in calendar modal

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
nextcloud · Jul 23, 2024 · 3bd39a1 · 3bd39a1
1 parent 56004aa
commit 3bd39a1
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/components/AppNavigation/EditCalendarModal.vue b/src/components/AppNavigation/EditCalendarModal.vue
@@ -6,7 +6,9 @@
 <template>
 	<NcModal v-if="!!calendarsStore.editCalendarModal && calendar" size="normal" @close="closeModal">
 		<div class="edit-calendar-modal">
-			<h2>{{ $t('calendar', 'Edit calendar') }}</h2>
+			<h3 class="edit-calendar-modal__header">
+				{{ $t('calendar', 'Edit calendar') }}
+			</h3>
 
 			<div class="edit-calendar-modal__name-and-color">
 				<div class="edit-calendar-modal__name-and-color__color">
@@ -30,9 +32,9 @@
 				</NcCheckboxRadioSwitch>
 			</template>
 			<template v-if="canBeShared">
-				<h2 class="edit-calendar-modal__sharing-header">
+				<h3 class="edit-calendar-modal__sharing-header">
 					{{ $t('calendar', 'Share calendar') }}
-				</h2>
+				</h3>
 
 				<div class="edit-calendar-modal__sharing">
 					<SharingSearch :calendar="calendar" />
@@ -275,6 +277,16 @@ export default {
 	display: flex;
 	flex-direction: column;
 
+	&__header {
+		margin-top: 0;
+	}
+
+	&__header,
+	&__sharing-header {
+		// Same font size the header of NcDialog (no variable available a this point)
+		font-size: 21px;
+	}
+
 	&__name-and-color {
 		display: flex;
 		align-items: center;