margin, padding, size, and color tweaks (#374)

* margin, padding, size, and color tweaks

* Remove commented out code

* Use pointer-events instead of double click event

* Use v-deep for v-sheet in v-dialog

* Add newline

* Fix stylelint complaint

* Fix tests

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

src/modules/collections/components/navigation/navigation.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-list nav dense>
+	<v-list nav>
 		<v-list-item v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
 			<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
 			<v-list-item-content>

src/modules/settings/routes/data-model/collections/collections.vue

@@ -28,7 +28,7 @@
 
 			<template #item.collection="{ item }">
 				<span class="collection" :class="{ hidden: item.hidden }">
-					{{ item.collection }}
+					{{ item.name }}
 				</span>
 			</template>
 
@@ -93,10 +93,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.collection {
-	font-family: var(--family-monospace);
-}
-
 .icon ::v-deep i {
 	vertical-align: baseline;
 }

src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue

@@ -56,7 +56,7 @@
 					</v-card-actions>
 				</v-card>
 			</v-dialog>
-			<v-divider inset />
+			<v-divider />
 			<v-list-item @click="setWidth('half')" :disabled="hidden || field.width === 'half'">
 				<v-list-item-icon><v-icon name="border_vertical" /></v-list-item-icon>
 				<v-list-item-content>{{ $t('half_width') }}</v-list-item-content>
@@ -69,7 +69,7 @@
 				<v-list-item-icon><v-icon name="aspect_ratio" /></v-list-item-icon>
 				<v-list-item-content>{{ $t('fill_width') }}</v-list-item-content>
 			</v-list-item>
-			<v-divider inset />
+			<v-divider />
 			<v-list-item @click="$emit('toggle-visibility', field)">
 				<template v-if="field.hidden_detail === false">
 					<v-list-item-icon><v-icon name="visibility_off" /></v-list-item-icon>
@@ -229,6 +229,12 @@ export default defineComponent({
 }
 
 .v-input.hidden {
-	--background-page: var(--background-normal);
+	--background-page: var(--background-subdued);
+}
+
+.v-icon {
+	--v-icon-color: var(--foreground-subdued);
+
+	pointer-events: none;
 }
 </style>

src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue

@@ -253,7 +253,7 @@ export default defineComponent({
 .visible,
 .hidden {
 	display: grid;
-	grid-gap: 24px 36px;
+	grid-gap: 20px 32px;
 	grid-template-columns: 1fr 1fr;
 }