1 files changed, 33 insertions, 11 deletions

diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue
index 015a7480c72..e4a1acd3e2a 100644
--- a/apps/theming/src/components/ItemPreview.vue
+++ b/apps/theming/src/components/ItemPreview.vue
@@ -1,13 +1,22 @@
+<!--
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
 	<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>
+			<p class="theming__preview-explanation">
+				{{ theme.description }}
+			</p>
 			<span v-if="enforced" class="theming__preview-warning" role="note">
 				{{ t('theming', 'Theme selection is enforced') }}
 			</span>
-			<NcCheckboxRadioSwitch class="theming__preview-toggle"
+
+			<!-- Only show checkbox if we can change themes -->
+			<NcCheckboxRadioSwitch v-show="!enforced"
+				class="theming__preview-toggle"
 				:checked.sync="checked"
 				:disabled="enforced"
 				:name="name"
@@ -20,7 +29,7 @@
 
 <script>
 import { generateFilePath } from '@nextcloud/router'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 
 export default {
 	name: 'ItemPreview',
@@ -67,6 +76,10 @@ export default {
 				return this.selected
 			},
 			set(checked) {
+				if (this.enforced) {
+					return
+				}
+
 				console.debug('Changed theme', this.theme.id, checked)
 
 				// If this is a radio, we can only enable
@@ -83,6 +96,10 @@ export default {
 
 	methods: {
 		onToggle() {
+			if (this.enforced) {
+				return
+			}
+
 			if (this.switchType === 'radio') {
 				this.checked = true
 				return
@@ -95,14 +112,14 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@use 'sass:math';
+
 .theming__preview {
 	// We make previews on 16/10 screens
 	--ratio: 16;
-
 	position: relative;
 	display: flex;
 	justify-content: flex-start;
-	max-width: 800px;
 
 	&,
 	* {
@@ -113,7 +130,7 @@ export default {
 		flex-basis: calc(16px * var(--ratio));
 		flex-shrink: 0;
 		height: calc(10px * var(--ratio));
-		margin-right: var(--gap);
+		margin-inline-end: var(--gap);
 		cursor: pointer;
 		border-radius: var(--border-radius);
 		background-repeat: no-repeat;
@@ -121,25 +138,30 @@ export default {
 		background-size: cover;
 	}
 
+	&-explanation {
+		margin-bottom: 10px;
+	}
+
 	&-description {
 		display: flex;
 		flex-direction: column;
 
+		h3 {
+			font-weight: bold;
+			margin-bottom: 0;
+		}
+
 		label {
 			padding: 12px 0;
 		}
 	}
 
-	&--default {
-		grid-column: span 2;
-	}
-
 	&-warning {
 		color: var(--color-warning);
 	}
 }
 
-@media (max-width: (1024px / 1.5)) {
+@media (max-width: math.div(1024px, 1.5)) {
 	.theming__preview {
 		flex-direction: column;