From 7c0976441d576da4e21c992e84d17dbdeeee759d Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Thu, 9 Apr 2020 19:27:07 -0400
Subject: [PATCH] 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/components/v-button/v-button.vue            |  8 ++++----
 src/components/v-checkbox/v-checkbox.test.ts    |  2 +-
 src/components/v-checkbox/v-checkbox.vue        |  8 ++++----
 src/components/v-dialog/v-dialog.vue            |  8 ++++----
 src/components/v-divider/v-divider.vue          |  6 +++---
 src/components/v-form/v-form.vue                |  4 +++-
 src/components/v-input/v-input.vue              |  6 +++---
 src/components/v-list/v-list-item-content.vue   |  5 +++--
 src/components/v-list/v-list-item-hint.vue      | 10 +++++-----
 src/components/v-list/v-list-item-icon.vue      |  6 +++---
 src/components/v-list/v-list-item.vue           |  9 +++++++--
 src/components/v-list/v-list.vue                |  9 +++++++--
 src/components/v-menu/use-popper.ts             |  2 +-
 src/components/v-menu/v-menu.vue                | 14 +++++++++++++-
 src/components/v-modal/v-modal.vue              |  2 +-
 src/components/v-overlay/v-overlay.vue          |  2 +-
 src/components/v-radio/v-radio.vue              |  6 +++---
 .../v-table/table-header/table-header.vue       | 17 ++++++++++-------
 src/components/v-table/table-row/table-row.vue  |  8 ++++++--
 src/components/v-table/v-table.vue              |  4 ++--
 src/lang/en-US/index.json                       |  2 +-
 .../components/navigation/navigation.vue        |  2 +-
 .../data-model/collections/collections.vue      |  6 +-----
 .../components/field-select/field-select.vue    | 12 +++++++++---
 .../fields-management/fields-management.vue     |  2 +-
 src/styles/_variables.scss                      |  2 +-
 src/styles/themes/_light.scss                   |  2 +-
 .../components/drawer-detail/drawer-detail.vue  |  2 +-
 28 files changed, 100 insertions(+), 66 deletions(-)

diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index ff1ff11b3e..b16a2020b1 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -144,7 +144,7 @@ export default defineComponent({
 	--v-button-color-disabled: var(--foreground-subdued);
 	--v-button-background-color: var(--primary);
 	--v-button-background-color-activated: var(--primary);
-	--v-button-background-color-disabled: var(--background-subdued);
+	--v-button-background-color-disabled: var(--background-normal);
 	--v-button-font-size: 16px;
 
 	display: inline-flex;
@@ -245,14 +245,14 @@ export default defineComponent({
 			--v-button-font-size: 14px;
 
 			min-width: 64px;
-			padding: 0 16px;
+			padding: 0 12px;
 		}
 
 		&.large {
 			--v-button-height: 52px;
 
 			min-width: 92px;
-			padding: 0 23px;
+			padding: 0 12px;
 		}
 
 		&.x-large {
@@ -260,7 +260,7 @@ export default defineComponent({
 			--v-button-font-size: 18px;
 
 			min-width: 120px;
-			padding: 0 32px;
+			padding: 0 12px;
 		}
 
 		&.icon {
diff --git a/src/components/v-checkbox/v-checkbox.test.ts b/src/components/v-checkbox/v-checkbox.test.ts
index cdec10d8e1..91ed351768 100644
--- a/src/components/v-checkbox/v-checkbox.test.ts
+++ b/src/components/v-checkbox/v-checkbox.test.ts
@@ -17,7 +17,7 @@ describe('Checkbox', () => {
 			},
 		});
 
-		expect(component.find('span[class="label type-label"]').text()).toContain('Turn me on');
+		expect(component.find('span[class="label type-text"]').text()).toContain('Turn me on');
 	});
 
 	it('Renders as checked when inputValue `true` is given', () => {
diff --git a/src/components/v-checkbox/v-checkbox.vue b/src/components/v-checkbox/v-checkbox.vue
index dc52a11b31..65fa657ceb 100644
--- a/src/components/v-checkbox/v-checkbox.vue
+++ b/src/components/v-checkbox/v-checkbox.vue
@@ -9,7 +9,7 @@
 		:class="{ checked: isChecked }"
 	>
 		<v-icon :name="icon" />
-		<span class="label type-label">
+		<span class="label type-text">
 			<slot name="label">{{ label }}</slot>
 		</span>
 	</button>
@@ -106,7 +106,7 @@ export default defineComponent({
 	}
 
 	& .v-icon {
-		--v-icon-color: var(--border-normal);
+		--v-icon-color: var(--foreground-subdued);
 	}
 
 	&:disabled {
@@ -117,13 +117,13 @@ export default defineComponent({
 		}
 
 		.v-icon {
-			--v-icon-color: var(--border-normal);
+			--v-icon-color: var(--foreground-subdued);
 		}
 	}
 
 	&:not(:disabled):hover {
 		.v-icon {
-			--v-icon-color: var(--border-normal);
+			--v-icon-color: var(--foreground-subdued);
 		}
 	}
 
diff --git a/src/components/v-dialog/v-dialog.vue b/src/components/v-dialog/v-dialog.vue
index 49806f8021..6da40c2fca 100644
--- a/src/components/v-dialog/v-dialog.vue
+++ b/src/components/v-dialog/v-dialog.vue
@@ -76,12 +76,12 @@ export default defineComponent({
 	height: 100%;
 	transition: opacity var(--medium) var(--transition);
 
-	.v-card {
-		--v-card-min-width: 400px;
-		--v-card-padding: 24px;
+	::v-deep .v-card {
+		--v-card-min-width: 540px;
+		--v-card-padding: 20px;
 	}
 
-	.v-sheet {
+	::v-deep .v-sheet {
 		--v-sheet-padding: 24px;
 		--v-sheet-max-width: 560px;
 	}
diff --git a/src/components/v-divider/v-divider.vue b/src/components/v-divider/v-divider.vue
index 91ed1fb373..b62ba4f13b 100644
--- a/src/components/v-divider/v-divider.vue
+++ b/src/components/v-divider/v-divider.vue
@@ -24,7 +24,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-divider {
-	--v-divider-color: var(--border-normal);
+	--v-divider-color: var(--border-subdued);
 	--v-divider-label-color: var(--foreground-subdued);
 
 	display: flex;
@@ -49,8 +49,8 @@ export default defineComponent({
 	}
 
 	&.inset:not(.vertical) {
-		max-width: calc(100% - 52px);
-		margin-left: 52px;
+		max-width: calc(100% - 16px);
+		margin-left: 8px;
 	}
 
 	&.vertical {
diff --git a/src/components/v-form/v-form.vue b/src/components/v-form/v-form.vue
index 34de0e02d5..854b7f60fc 100644
--- a/src/components/v-form/v-form.vue
+++ b/src/components/v-form/v-form.vue
@@ -27,7 +27,7 @@
 					</div>
 				</template>
 
-				<v-list>
+				<v-list dense>
 					<v-list-item
 						@click="setValue(field, null)"
 						:disabled="values[field.field] === null"
@@ -340,6 +340,8 @@ export default defineComponent({
 
 	.required {
 		--v-icon-color: var(--primary);
+
+		margin-left: -2px;
 	}
 
 	.ctx-arrow {
diff --git a/src/components/v-input/v-input.vue b/src/components/v-input/v-input.vue
index b4d6e2cdc8..20ced5333c 100644
--- a/src/components/v-input/v-input.vue
+++ b/src/components/v-input/v-input.vue
@@ -105,7 +105,7 @@ export default defineComponent({
 		&:hover {
 			color: var(--foreground-normal);
 			background-color: var(--background-page);
-			border-color: var(--border-normal);
+			border-color: var(--border-normal-alt);
 		}
 
 		&:focus-within {
@@ -116,8 +116,8 @@ export default defineComponent({
 
 		&.disabled {
 			color: var(--foreground-subdued);
-			background-color: var(--background-normal-alt);
-			border-color: var(--border-normal-alt);
+			background-color: var(--background-subdued);
+			border-color: var(--border-normal);
 		}
 
 		input {
diff --git a/src/components/v-list/v-list-item-content.vue b/src/components/v-list/v-list-item-content.vue
index b15afb9f79..79454e789d 100644
--- a/src/components/v-list/v-list-item-content.vue
+++ b/src/components/v-list/v-list-item-content.vue
@@ -28,7 +28,8 @@
 			flex-basis: 100%;
 			flex-grow: 1;
 			flex-shrink: 0;
-			line-height: 1.1;
+			line-height: 1;
+
 			&:not(:last-child) {
 				margin-bottom: 2px;
 			}
@@ -37,7 +38,7 @@
 
 	.v-list.dense &,
 	.v-list-item.dense & {
-		--v-list-item-content-padding: 8px 0;
+		--v-list-item-content-padding: 4px 0;
 	}
 }
 </style>
diff --git a/src/components/v-list/v-list-item-hint.vue b/src/components/v-list/v-list-item-hint.vue
index 89f33eff3c..375fd17c6d 100644
--- a/src/components/v-list/v-list-item-hint.vue
+++ b/src/components/v-list/v-list-item-hint.vue
@@ -23,7 +23,7 @@ export default defineComponent({
 
 	display: inline-flex;
 	align-self: center;
-	margin: 12px 0;
+	margin: 8px 0;
 	color: var(--foreground-subdued);
 
 	&:not(:only-child) {
@@ -49,14 +49,14 @@ export default defineComponent({
 			}
 			&.dense {
 				#{$this} {
-					margin-top: 8px;
-					margin-bottom: 8px;
+					margin-top: 4px;
+					margin-bottom: 4px;
 					&:not(:only-child) {
 						&:first-child {
-							margin-right: 8px;
+							margin-right: 16px;
 						}
 						&:last-child {
-							margin-left: 8px;
+							margin-left: 16px;
 						}
 					}
 				}
diff --git a/src/components/v-list/v-list-item-icon.vue b/src/components/v-list/v-list-item-icon.vue
index d0b5600813..8aca952a6f 100644
--- a/src/components/v-list/v-list-item-icon.vue
+++ b/src/components/v-list/v-list-item-icon.vue
@@ -23,7 +23,7 @@ export default defineComponent({
 
 	display: inline-flex;
 	align-self: center;
-	margin: 12px 0;
+	margin: 8px 0;
 
 	&:not(:only-child) {
 		&:first-child {
@@ -48,8 +48,8 @@ export default defineComponent({
 			}
 			&.dense {
 				#{$this} {
-					margin-top: 8px;
-					margin-bottom: 8px;
+					margin-top: 4px;
+					margin-bottom: 4px;
 					&:not(:only-child) {
 						&:first-child {
 							margin-right: 8px;
diff --git a/src/components/v-list/v-list-item.vue b/src/components/v-list/v-list-item.vue
index a8541b188c..97b34f16a6 100644
--- a/src/components/v-list/v-list-item.vue
+++ b/src/components/v-list/v-list-item.vue
@@ -65,11 +65,13 @@ export default defineComponent({
 	--v-list-item-two-line-min-height-dense: 36px;
 	--v-list-item-three-line-min-height-dense: 52px;
 	--v-list-item-padding: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
+	--v-list-item-padding-dense: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
+	--v-list-item-margin-dense: 2px 0;
 	--v-list-item-min-width: none;
 	--v-list-item-max-width: none;
 	--v-list-item-min-height: var(--v-list-item-one-line-min-height);
 	--v-list-item-max-height: auto;
-	--v-list-item-border-radius: 0;
+	--v-list-item-border-radius: var(--border-radius);
 	--v-list-item-margin-bottom: 0;
 	--v-list-item-color: var(--v-list-color, var(--foreground-normal));
 	--v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-normal));
@@ -141,6 +143,9 @@ export default defineComponent({
 		.v-list.dense {
 			& #{$this} {
 				--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+
+				margin: var(--v-list-item-margin-dense);
+				padding: var(--v-list-item-padding-dense);
 				&.one-line {
 					--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
 				}
@@ -158,7 +163,7 @@ export default defineComponent({
 				--v-list-item-padding: 0 8px;
 				--v-list-item-border-radius: 4px;
 				&:not(:last-child):not(:only-child) {
-					--v-list-item-margin-bottom: 8px;
+					--v-list-item-margin-bottom: 4px;
 				}
 			}
 			&.dense #{$this},
diff --git a/src/components/v-list/v-list.vue b/src/components/v-list/v-list.vue
index 26c2a720dd..e799213841 100644
--- a/src/components/v-list/v-list.vue
+++ b/src/components/v-list/v-list.vue
@@ -52,7 +52,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-list {
-	--v-list-padding: 8px 0;
+	--v-list-padding: 4px 0;
 	--v-list-max-height: none;
 	--v-list-max-width: none;
 	--v-list-min-width: none;
@@ -75,7 +75,12 @@ export default defineComponent({
 	border-radius: var(--border-radius);
 
 	&.nav {
-		--v-list-padding: 8px;
+		--v-list-padding: 12px;
+	}
+
+	::v-deep .v-divider {
+		max-width: calc(100% - 16px);
+		margin: 8px;
 	}
 }
 </style>
diff --git a/src/components/v-menu/use-popper.ts b/src/components/v-menu/use-popper.ts
index f5de0ec06c..b2a3406661 100644
--- a/src/components/v-menu/use-popper.ts
+++ b/src/components/v-menu/use-popper.ts
@@ -56,7 +56,7 @@ export function usePopper(
 			{
 				...offset,
 				options: {
-					offset: options.value.attached ? [0, -2] : [0, 8],
+					offset: options.value.attached ? [0, 0] : [0, 8],
 				},
 			},
 			preventOverflow,
diff --git a/src/components/v-menu/v-menu.vue b/src/components/v-menu/v-menu.vue
index ad08ab0cbe..5e3c87afb6 100644
--- a/src/components/v-menu/v-menu.vue
+++ b/src/components/v-menu/v-menu.vue
@@ -153,12 +153,22 @@ export default defineComponent({
 
 .v-menu-activator {
 	display: contents;
+	&::before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 2px;
+		height: 2px;
+		background: var(--border-normal);
+		content: '';
+	}
 }
 
 .v-menu-popper {
 	position: absolute;
 	left: -999px;
 	z-index: 5;
+	transform: translateY(2px);
 	pointer-events: none;
 
 	&.active {
@@ -206,6 +216,7 @@ export default defineComponent({
 
 	.v-menu-content {
 		max-height: 50vh;
+		padding: 0 4px;
 		overflow-x: hidden;
 		overflow-y: auto;
 		background-color: var(--background-subdued);
@@ -287,11 +298,12 @@ export default defineComponent({
 		transform: scaleY(1) scaleX(1);
 		opacity: 1;
 		transition-timing-function: cubic-bezier(0, 0, 0.2, 1.5);
-		transition-duration: var(--medium);
+		transition-duration: var(--fast);
 	}
 
 	&.attached {
 		.v-menu-content {
+			border-top: none;
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
 		}
diff --git a/src/components/v-modal/v-modal.vue b/src/components/v-modal/v-modal.vue
index ba1012c066..84dbd079bd 100644
--- a/src/components/v-modal/v-modal.vue
+++ b/src/components/v-modal/v-modal.vue
@@ -162,7 +162,7 @@ export default defineComponent({
 			overflow: auto;
 
 			@include breakpoint(medium) {
-				padding: 24px;
+				padding: 32px;
 			}
 		}
 	}
diff --git a/src/components/v-overlay/v-overlay.vue b/src/components/v-overlay/v-overlay.vue
index 9a308fc419..2cb0f535f2 100644
--- a/src/components/v-overlay/v-overlay.vue
+++ b/src/components/v-overlay/v-overlay.vue
@@ -33,7 +33,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-overlay {
-	--v-overlay-color: rgba(38, 50, 56, 0.75);
+	--v-overlay-color: rgba(38, 50, 56, 0.9);
 	--v-overlay-z-index: 500;
 
 	position: fixed;
diff --git a/src/components/v-radio/v-radio.vue b/src/components/v-radio/v-radio.vue
index cd4b03f6bc..74b2ddb154 100644
--- a/src/components/v-radio/v-radio.vue
+++ b/src/components/v-radio/v-radio.vue
@@ -80,7 +80,7 @@ export default defineComponent({
 	}
 
 	& .v-icon {
-		--v-icon-color: var(--border-normal);
+		--v-icon-color: var(--foreground-subdued);
 	}
 
 	&:disabled {
@@ -91,13 +91,13 @@ export default defineComponent({
 		}
 
 		.v-icon {
-			--v-icon-color: var(--border-normal);
+			--v-icon-color: var(--foreground-subdued);
 		}
 	}
 
 	&:not(:disabled):hover {
 		.v-icon {
-			--v-icon-color: var(--border-normal);
+			--v-icon-color: var(--foreground-subdued);
 		}
 	}
 
diff --git a/src/components/v-table/table-header/table-header.vue b/src/components/v-table/table-header/table-header.vue
index 82992a800e..434acf3a14 100644
--- a/src/components/v-table/table-header/table-header.vue
+++ b/src/components/v-table/table-header/table-header.vue
@@ -218,12 +218,12 @@ export default defineComponent({
 .table-header {
 	.cell {
 		position: relative;
-		height: 48px;
-		padding: 0 20px;
+		height: 50px; // +2px for bottom border
+		padding: 0 12px;
 		font-weight: 500;
 		font-size: 14px;
 		background-color: var(--background-page);
-		border-bottom: 1px solid var(--border-normal);
+		border-bottom: 2px solid var(--border-subdued);
 
 		&.select,
 		&.sort {
@@ -246,15 +246,17 @@ export default defineComponent({
 	}
 
 	.sortable {
+		cursor: pointer;
 		.sort-icon {
 			margin-left: 4px;
+			color: var(--foreground-subdued);
 			transform: scaleY(-1);
 			opacity: 0;
 			transition: opacity var(--fast) var(--transition);
 		}
 
 		&:hover .sort-icon {
-			opacity: 0.5;
+			opacity: 1;
 		}
 
 		&.sort-asc,
@@ -298,11 +300,12 @@ export default defineComponent({
 
 		&::after {
 			position: relative;
+			top: 20%;
 			left: 2px;
 			display: block;
-			width: 1px;
-			height: 100%;
-			background-color: var(--border-normal);
+			width: 2px;
+			height: 60%;
+			background-color: var(--border-subdued);
 			content: '';
 		}
 
diff --git a/src/components/v-table/table-row/table-row.vue b/src/components/v-table/table-row/table-row.vue
index b01a85dfdf..120345ffdb 100644
--- a/src/components/v-table/table-row/table-row.vue
+++ b/src/components/v-table/table-row/table-row.vue
@@ -95,18 +95,22 @@ export default defineComponent({
 <style lang="scss" scoped>
 .table-row {
 	.cell {
-		padding: 0 20px;
+		padding: 0 0 0 12px;
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background-color: var(--background-page);
-		border-bottom: 1px solid var(--background-normal-alt);
+		border-bottom: 2px solid var(--border-subdued);
 
 		&.select,
 		&.sort {
 			display: flex;
 			align-items: center;
 		}
+
+		&:last-child {
+			padding: 0 12px 0 12px;
+		}
 	}
 
 	&.subdued .cell {
diff --git a/src/components/v-table/v-table.vue b/src/components/v-table/v-table.vue
index 0b6cce7f6b..3d27f55f7e 100644
--- a/src/components/v-table/v-table.vue
+++ b/src/components/v-table/v-table.vue
@@ -364,7 +364,7 @@ export default defineComponent({
 				--v-progress-linear-height: 2px;
 
 				position: relative;
-				top: -1px;
+				top: -2px;
 			}
 
 			th {
@@ -379,11 +379,11 @@ export default defineComponent({
 		}
 
 		.loading-text {
-			color: var(--foreground-subdued);
 			text-align: center;
 
 			td {
 				padding: 16px;
+				color: var(--foreground-subdued);
 			}
 		}
 	}
diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json
index fa131d4b27..898eb92bad 100644
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -301,7 +301,7 @@
   "db_user": "Database User",
   "default": "Default",
   "delete": "Delete",
-  "delete_are_you_sure": "Are you sure you want to delete this item? This action can not be undone.",
+  "delete_are_you_sure": "This action is permanent and can not be undone. Are you sure you would like to proceed?",
   "delete_bookmark": "Delete Bookmark",
   "delete_bookmark_body": "Are you sure you want to delete this bookmark? This action cannot be undone.",
   "delete_collection_are_you_sure": "Are you sure you want to delete this collection? This action can not be undone.",
diff --git a/src/modules/collections/components/navigation/navigation.vue b/src/modules/collections/components/navigation/navigation.vue
index cda6b4a499..3cdd2aa8f2 100644
--- a/src/modules/collections/components/navigation/navigation.vue
+++ b/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>
diff --git a/src/modules/settings/routes/data-model/collections/collections.vue b/src/modules/settings/routes/data-model/collections/collections.vue
index c02b6ecc73..87a17d10dd 100644
--- a/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/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;
 }
diff --git a/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue b/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
index bdb07a6485..f7ed211762 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
+++ b/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>
diff --git a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue b/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
index a380c997b0..c1e7a080a8 100644
--- a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
+++ b/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;
 }
 
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 4405bc5865..2d657fc4aa 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -3,7 +3,7 @@
 	--white: #fff;
 	--black: #090C0D;
 	--module-background: #13181A;
-	--module-background-alt: #090C0D;
+	--module-background-alt: #000;
 	--module-icon: #607D8B;
 	--module-icon-alt: #FFF;
 	--transition: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index 399191c686..e9a1462b3e 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -2,7 +2,7 @@
 
 @mixin light {
 	--border-normal: #D6DFE2;
-	--border-normal-alt: #BDCCD2;
+	--border-normal-alt: #90A4AE;
 	--border-subdued: #ECEFF1;
 
 	--foreground-normal: #263238;
diff --git a/src/views/private/components/drawer-detail/drawer-detail.vue b/src/views/private/components/drawer-detail/drawer-detail.vue
index a2e0fde5fe..56d46391d2 100644
--- a/src/views/private/components/drawer-detail/drawer-detail.vue
+++ b/src/views/private/components/drawer-detail/drawer-detail.vue
@@ -85,7 +85,7 @@ export default defineComponent({
 	}
 
 	.content {
-		padding: 12px;
+		padding: 20px;
 	}
 }
 </style>