Merge pull request #1184 from nextcloud/fix/nc30-styles

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

js/firstrunwizard-about.mjs

@@ -1,3 +1,3 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'css/firstrunwizard-main.css')])))=>i.map(i=>d[i]);
 /*! third party licenses: js/vendor.LICENSE.txt */
-import{_ as a}from"./modulepreload-polyfill.chunk.mjs";document.addEventListener("DOMContentLoaded",function(){const o=document.querySelector("#firstrunwizard_about button"),t=()=>{document.querySelector("#firstrunwizard_about button").addEventListener("click",async function(e){var n;e.stopPropagation(),e.preventDefault();const r=(n=document.querySelector('[aria-controls="header-menu-user-menu"]'))!=null?n:void 0,{open:u}=await a(async()=>{const{open:i}=await import("./main.chunk.mjs");return{open:i}},__vite__mapDeps([0,1]),import.meta.url);u(r),OC.hideMenus(()=>!1)})};o?t():window._nc_event_bus.subscribe("core:user-menu:mounted",t)});
+import{_ as a}from"./modulepreload-polyfill.chunk.mjs";document.addEventListener("DOMContentLoaded",function(){const e=()=>document.querySelector("#firstrunwizard_about"),n=()=>{e().addEventListener("click",async function(t){var o;t.stopPropagation(),t.preventDefault();const r=(o=document.querySelector('[aria-controls="header-menu-user-menu"]'))!=null?o:void 0,{open:u}=await a(async()=>{const{open:i}=await import("./main.chunk.mjs");return{open:i}},__vite__mapDeps([0,1]),import.meta.url);u(r),OC.hideMenus(()=>!1)})};e()?n():window._nc_event_bus.subscribe("core:user-menu:mounted",n)});

src/app-menu.js

@@ -10,12 +10,10 @@ import 'vite/modulepreload-polyfill'
  * Handle adding the first-run-wizard as an app menu entry
  */
 document.addEventListener('DOMContentLoaded', function() {
-	const aboutEntry = document.querySelector('#firstrunwizard_about button')
+	const aboutEntry = () => document.querySelector('#firstrunwizard_about')
 
 	const addListener = () => {
-		const aboutEntry = document.querySelector('#firstrunwizard_about button')
-
-		aboutEntry.addEventListener('click', async function(event) {
+		aboutEntry().addEventListener('click', async function(event) {
 			event.stopPropagation()
 			event.preventDefault()
 			const focusReturn = document.querySelector('[aria-controls="header-menu-user-menu"]') ?? undefined
@@ -25,7 +23,7 @@ document.addEventListener('DOMContentLoaded', function() {
 		})
 	}
 
-	if (aboutEntry) {
+	if (aboutEntry()) {
 		addListener()
 	} else {
 		window._nc_event_bus.subscribe('core:user-menu:mounted', addListener)

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;
 }

src/components/SlideShow.vue

@@ -70,12 +70,11 @@ 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 { mdiArrowLeft, mdiArrowRight, mdiClose } from '@mdi/js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
 const props = defineProps<{
 	pages: IPage[]

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>

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>

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>