Improve theming layout

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

apps/theming/src/UserThemes.vue

@@ -12,6 +12,9 @@
 				:unique="themes.length === 1"
 				type="theme"
 				@change="changeTheme" />
+		</div>
+
+		<div class="theming__preview-list">
 			<ItemPreview v-for="theme in fonts"
 				:key="theme.id"
 				:selected="theme.enabled"
@@ -150,8 +153,8 @@ export default {
 	},
 }
 </script>
-<style lang="scss" scoped>
 
+<style lang="scss" scoped>
 .theming {
 	// Limit width of settings sections for readability
 	p {

apps/theming/src/components/ItemPreview.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="theming__preview">
-		<div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" />
+	<div :class="'theming__preview--' + theme.id" class="theming__preview">
+		<div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" @click="onToggle" />
 		<div class="theming__preview-description">
 			<h3>{{ theme.title }}</h3>
 			<p>{{ theme.description }}</p>
@@ -80,14 +80,25 @@ export default {
 			},
 		},
 	},
+
+	methods: {
+		onToggle() {
+			if (this.switchType === 'radio') {
+				this.checked = true
+				return
+			}
+
+			// Invert state
+			this.checked = !this.checked
+		},
+	},
 }
 </script>
 <style lang="scss" scoped>
-// We make previews on 16/10 screens
-$ratio: 16;
-
 .theming__preview {
+	// We make previews on 16/10 screens
 	--ratio: 16;
+
 	position: relative;
 	display: flex;
 	justify-content: flex-start;
@@ -103,6 +114,7 @@ $ratio: 16;
 		flex-shrink: 0;
 		height: calc(10px * var(--ratio));
 		margin-right: var(--gap);
+		cursor: pointer;
 		border-radius: var(--border-radius);
 		background-repeat: no-repeat;
 		background-position: top left;
@@ -118,6 +130,10 @@ $ratio: 16;
 		}
 	}
 
+	&--default {
+		grid-column: span 2;
+	}
+
 	&-warning {
 		color: var(--color-warning);
 	}