fix(LandingPageWidgets): increase spacing between sections and icon c…

…ontrast Signed-off-by: Jonas <[email protected]>
nextcloud · Aug 2, 2023 · 157c7ab · 157c7ab
1 parent 4ff1437
commit 157c7ab
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/src/components/Page/LandingPageWidgets.vue b/src/components/Page/LandingPageWidgets.vue
@@ -26,7 +26,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .landing-page-widgets {
 	margin: auto;
 	padding-left: 12px;

diff --git a/src/components/Page/LandingPageWidgets/RecentPageTile.vue b/src/components/Page/LandingPageWidgets/RecentPageTile.vue
@@ -2,13 +2,13 @@
 	<router-link :to="pagePath(page)" class="recent-page-tile">
 		<div class="recent-page-tile__rectangle">
 			<template v-if="isTemplate">
-				<PageTemplateIcon :size="36" fill-color="var(--color-background-darker)" />
+				<PageTemplateIcon :size="36" fill-color="var(--color-text-maxcontrast)" />
 			</template>
 			<template v-else-if="page.emoji">
 				{{ page.emoji }}
 			</template>
 			<template v-else>
-				<PageIcon :size="36" fill-color="var(--color-background-darker)" />
+				<PageIcon :size="36" fill-color="var(--color-text-maxcontrast)" />
 			</template>
 		</div>
 		<div class="recent-page-tile__title">

diff --git a/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue b/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="recent-pages-widget">
-		<WidgetHeading :title="t('collectives', 'Recent pages')" />
+		<WidgetHeading :title="t('collectives', 'Recent pages')" :first="true" />
 		<div class="recent-pages-widget-container">
 			<div ref="pageslider" class="recent-pages-widget-pages">
 				<RecentPageTile v-for="page in trimmedRecentPages"

diff --git a/src/components/Page/LandingPageWidgets/WidgetHeading.vue b/src/components/Page/LandingPageWidgets/WidgetHeading.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="widget-heading">
+	<div class="widget-heading" :class="{'first': first}">
 		{{ title }}
 	</div>
 </template>
@@ -13,15 +13,23 @@ export default {
 			type: String,
 			required: true,
 		},
+		first: {
+			type: Boolean,
+			default: false,
+		},
 	},
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .widget-heading {
-	padding: 30px 0 12px 0;
+	padding: 36px 0 12px 0;
 	font-size: 20px;
 	font-weight: bold;
 	color: var(--color-text-maxcontrast);
+
+	&.first {
+		padding-top: 24px;
+	}
 }
 </style>