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>
2026-01-27 21:17:56 -05:00 · 2020-04-09 19:27:07 -04:00
parent 7485a97a3b
commit 7c0976441d
28 changed files with 100 additions and 66 deletions
--- 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 {
--- 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', () => {
--- 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);
 		}
 	}

--- 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;
 	}
--- 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 {
--- 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 {
--- 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 {
--- 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>
--- 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;
 						}
 					}
 				}
--- 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;
--- 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},
--- 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>
--- 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,
--- 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;
 		}
--- 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;
 			}
 		}
 	}
--- 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;
--- 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);
 		}
 	}

--- 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: '';
 		}

--- 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 {
--- 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);
 			}
 		}
 	}
--- 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.",
--- 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>
--- 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;
 }
--- 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>
--- 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;
 }

--- 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);
--- 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;
--- 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>