fix: Adjust styles for Nextcloud 30 (default heading styles)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud · Aug 6, 2024 · 5692209 · 5692209
1 parent dc65d9b
commit 5692209
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -42,15 +42,17 @@ const isLink = computed(() => !!props.href)
 
 .icon {
 	display: flex;
-	flex: 0 0 44px;
-	align-items: center;
+	flex: 0 0 var(--default-clickable-area);
+	align-items: start;
 
 	&:empty {
 		display: none;
 	}
 }
 
 .heading {
+	// While this is semantically a heading, visually it should be bold text
+	font-size: var(--default-font-size);
 	font-weight: bold;
 	margin: 0;
 }

diff --git a/src/components/SlideShow.vue b/src/components/SlideShow.vue
@@ -70,12 +70,12 @@ import type { IPage } from '../pages'
 
 import { translate as t } from '@nextcloud/l10n'
 import { imagePath } from '@nextcloud/router'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import { mdiArrowLeft, mdiArrowRight, mdiClose } from '@mdi/js'
 import { useIsSmallMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 import { computed, ref, useCssModule, watch } from 'vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
-import { mdiArrowLeft, mdiArrowRight, mdiClose } from '@mdi/js'
 
 const props = defineProps<{
 	pages: IPage[]

diff --git a/src/components/WizardPage.vue b/src/components/WizardPage.vue
@@ -37,10 +37,12 @@ defineProps<{
 
 .scroller {
 	overflow-y: scroll;
-	margin-top: calc(var(--default-grid-baseline) * 8);
+	margin-top: calc(4 * var(--default-grid-baseline));
 }
 
 .heading {
+	font-size: 20px;
+	margin-block: 0;
 	text-align: center;
 }
 
@@ -53,8 +55,8 @@ defineProps<{
 .content {
 	display: flex;
 	flex-wrap: wrap;
-	gap: calc(var(--default-grid-baseline) * 6);
+	gap: calc(6 * var(--default-grid-baseline));
 	justify-content: center;
-	margin: calc(var(--default-grid-baseline) * 10) 0;
+	margin: calc(8 * var(--default-grid-baseline)) 0;
 }
 </style>
diff --git a/src/components/pages/KeyNotes.vue b/src/components/pages/KeyNotes.vue
@@ -8,19 +8,19 @@
 		:title="t('firstrunwizard', 'A collaboration platform that puts you in control')">
 		<Card :title="t('firstrunwizard', 'Privacy')"
 			:subtitle="t('firstrunwizard', 'Host your data and files where you decide.')">
-			<NcIconSvgWrapper :path="mdiLock" />
+			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiLock" />
 		</Card>
 		<Card :title="t('firstrunwizard', 'Productivity')"
 			:subtitle="t('firstrunwizard', 'Collaborate and communicate across any platform.')">
-			<NcIconSvgWrapper :path="mdiBriefcaseCheck" />
+			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiBriefcaseCheck" />
 		</Card>
 		<Card :title="t('firstrunwizard', 'Interoperability')"
 			:subtitle="t('firstrunwizard', 'Import and export anything you want with open standards.')">
-			<NcIconSvgWrapper :path="mdiSwapHorizontal" />
+			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiSwapHorizontal" />
 		</Card>
 		<Card :title="t('firstrunwizard', 'Community')"
 			:subtitle="t('firstrunwizard', 'Enjoy constant improvements from a thriving open-source community.')">
-			<NcIconSvgWrapper :path="mdiAccountGroup" />
+			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiAccountGroup" />
 		</Card>
 	</WizardPage>
 </template>
@@ -37,3 +37,9 @@ defineProps<{
 	scrollerClasses?: string | string[] | Record<string, boolean>
 }>()
 </script>
+
+<style module>
+.icon {
+	margin-block: calc((1lh - 20px) / 2);
+}
+</style>
diff --git a/src/components/pages/SharePage.vue b/src/components/pages/SharePage.vue
@@ -10,7 +10,9 @@
 		</NcButton>
 
 		<section :class="$style.share_section">
-			<h2>{{ t('firstrunwizard', 'Share your opinion about Nextcloud Hub {version}', { version: HubRelease.version }) }}</h2>
+			<h3 :class="$style.heading">
+				{{ t('firstrunwizard', 'Share your opinion about Nextcloud Hub {version}', { version: HubRelease.version }) }}
+			</h3>
 			<div :class="$style.share_wrapper">
 				<Card v-for="entry of shareLinks"
 					:key="entry.id"
@@ -92,4 +94,10 @@ const shareLinks = [
 	/* Reduce padding a bit as we only have a single line of text with icon */
 	padding: calc(var(--default-grid-baseline) * 2) !important;
 }
+
+.heading {
+	/* Semantically a heading but visually bold text */
+	font-size: var(--default-font-size);
+	font-weight: bold;
+}
 </style>