Font fixes and design update for theme picker

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

2 files changed, 23 insertions, 9 deletions

diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index 78115021412..1fd6cb20866 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -1,5 +1,5 @@
 <template>
-	<SettingsSection class="theming" :title="t('themes', 'Appaerance and accessibility')">
+	<SettingsSection class="theming" :title="t('themes', 'Appearance and accessibility')">
 		<p v-html="description" />
 		<p v-html="descriptionDetail" />
 
@@ -166,9 +166,20 @@ export default {
 	}
 
 	&__preview-list {
+		--gap: 30px;
+
+		display: grid;
+		margin-top: var(--gap);
+		column-gap: var(--gap);
+		row-gap: var(--gap);
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+@media (max-width: 1440px) {
+	.theming__preview-list {
 		display: flex;
 		flex-direction: column;
-		max-width: 800px;
 	}
 }
 
diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue
index 997d66a037e..0ed7dfc7858 100644
--- a/apps/theming/src/components/ItemPreview.vue
+++ b/apps/theming/src/components/ItemPreview.vue
@@ -75,13 +75,15 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+// We make previews on 16/10 screens
+$ratio: 16;
 
 .theming__preview {
+	--ratio: 16;
 	position: relative;
 	display: flex;
 	justify-content: flex-start;
-	height: 140px;
-	margin-top: 3em;
+	max-width: 800px;
 
 	&,
 	* {
@@ -89,9 +91,10 @@ export default {
 	}
 
 	&-image {
-		flex-basis: 200px;
+		flex-basis: calc(16px * var(--ratio));
 		flex-shrink: 0;
-		margin-right: 30px;
+		height: calc(10px * var(--ratio));
+		margin-right: var(--gap);
 		border-radius: var(--border-radius);
 		background-repeat: no-repeat;
 		background-position: top left;
@@ -108,12 +111,12 @@ export default {
 	}
 }
 
-@media (max-width: (1024 / 2)) {
+@media (max-width: (1024px / 1.5)) {
 	.theming__preview {
-		display: unset;
+		flex-direction: column;
 
 		&-image {
-			height: 150px;
+			margin: 0;
 		}
 	}
 }