🎨

src/client/app/mobile/views/components/ui-container.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="ukygtjoj" :class="{ naked, inDeck, inNakedDeckColumn, hideHeader: !showHeader }">
+<div class="ukygtjoj" :class="{ naked, inNakedDeckColumn, hideHeader: !showHeader, shadow: $store.state.device.useShadow }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -36,9 +36,6 @@ export default Vue.extend({
 		},
 	},
 	inject: {
-		inDeck: {
-			default: false
-		},
 		inNakedDeckColumn: {
 			default: false
 		}
@@ -60,13 +57,12 @@ export default Vue.extend({
 .ukygtjoj
 	overflow hidden
 
-	&.inDeck
-		box-shadow none !important
-
 	&:not(.inNakedDeckColumn)
 		background var(--face)
 		border-radius 8px
-		box-shadow 0 4px 16px rgba(#000, 0.1)
+
+		&.shadow
+			box-shadow 0 4px 16px rgba(#000, 0.1)
 
 		& + .ukygtjoj
 			margin-top 16px

src/client/app/mobile/views/pages/settings.vue

@@ -15,6 +15,8 @@
 
 				<section>
 					<ui-switch v-model="darkmode">{{ $t('dark-mode') }}</ui-switch>
+					<ui-switch v-model="useShadow">{{ $t('use-shadow') }}</ui-switch>
+					<ui-switch v-model="roundedCorners">{{ $t('rounded-corners') }}</ui-switch>
 					<ui-switch v-model="circleIcons">{{ $t('circle-icons') }}</ui-switch>
 					<section>
 						<header>{{ $t('@.line-width') }}</header>
@@ -214,6 +216,16 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 		},
 
+		useShadow: {
+			get() { return this.$store.state.device.useShadow; },
+			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
+		},
+
+		roundedCorners: {
+			get() { return this.$store.state.device.roundedCorners; },
+			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
+		},
+
 		useOsDefaultEmojis: {
 			get() { return this.$store.state.device.useOsDefaultEmojis; },
 			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }