From 28868e60f870afb53675145e2ec11cb08e642ec7 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Fri, 10 Sep 2021 15:01:58 -0400
Subject: [PATCH] Various style updates (#7972)

* fix card selection dot always being on

* new mapbox styles

* updated styles for field notes

* update bookmark icon

* increase currrent user avatar opactiy

* Clean up info notes

* divider style updates

* divider rule styling

* notice styling

* update revision drawer pane order

* tighten up revision drawer list

* notice copy updates

* revision spacing

* revision date divider styling

* shorter revision date in drawer dropdown

* add no value to revision diffs

* v-detail icons

* revisions styling

* fix sort icon hover

* adjust global and private vertical form spacing

* reduce navigation and v-list sizing

* slightly reduce module and info sidebar size
---
 app/src/components/v-avatar/v-avatar.vue      |  2 +-
 app/src/components/v-button/v-button.vue      |  2 +-
 app/src/components/v-detail/v-detail.vue      |  2 +-
 app/src/components/v-form/form-field.vue      |  7 ++--
 app/src/components/v-info/v-info.vue          |  1 +
 app/src/components/v-list/v-list-item.vue     |  4 +--
 app/src/components/v-notice/v-notice.vue      |  5 +++
 .../presentation-divider.vue                  |  4 ++-
 app/src/lang/translations/en-US.yaml          |  9 ++---
 app/src/layouts/cards/components/card.vue     | 34 +++++++++++++------
 app/src/layouts/cards/components/header.vue   |  3 +-
 .../components/navigation-bookmark.vue        |  2 +-
 app/src/styles/_type-styles.scss              |  4 +++
 app/src/styles/_variables.scss                |  2 +-
 app/src/styles/mixins/type-styles.scss        |  9 +++++
 app/src/utils/geometry/basemap.ts             |  4 +--
 .../components/header-bar/header-bar.vue      |  4 +--
 .../module-bar-avatar/module-bar-avatar.vue   |  2 +-
 .../module-bar-logo/module-bar-logo.vue       | 12 +++----
 .../components/module-bar/module-bar.vue      |  2 +-
 .../components/project-info/project-info.vue  |  2 +-
 .../revisions-drawer-detail/revision-item.vue |  4 +--
 .../revisions-drawer-detail.vue               | 11 ++++--
 .../revisions-drawer-picker.vue               |  2 +-
 .../revisions-drawer-updates-change.vue       | 22 +++++++++---
 .../revisions-drawer-updates.vue              |  2 +-
 .../revisions-drawer.vue                      | 12 +++----
 .../sidebar-button/sidebar-button.vue         |  4 +--
 .../sidebar-detail/sidebar-detail.vue         |  8 ++---
 app/src/views/private/private-view.vue        | 11 +++---
 30 files changed, 120 insertions(+), 72 deletions(-)

diff --git a/app/src/components/v-avatar/v-avatar.vue b/app/src/components/v-avatar/v-avatar.vue
index 3257c69630..ec1e5f1ecf 100644
--- a/app/src/components/v-avatar/v-avatar.vue
+++ b/app/src/components/v-avatar/v-avatar.vue
@@ -65,7 +65,7 @@ body {
 }
 
 .large {
-	--v-avatar-size: 64px;
+	--v-avatar-size: 60px;
 }
 
 .x-large {
diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button/v-button.vue
index e94c11012d..764030538a 100644
--- a/app/src/components/v-button/v-button.vue
+++ b/app/src/components/v-button/v-button.vue
@@ -314,7 +314,7 @@ export default defineComponent({
 }
 
 .x-large {
-	--v-button-height: 64px;
+	--v-button-height: 60px;
 	--v-button-font-size: 18px;
 	--v-button-min-width: 180px;
 
diff --git a/app/src/components/v-detail/v-detail.vue b/app/src/components/v-detail/v-detail.vue
index fca5a29c9f..03167c464c 100644
--- a/app/src/components/v-detail/v-detail.vue
+++ b/app/src/components/v-detail/v-detail.vue
@@ -2,7 +2,7 @@
 	<div class="v-detail" :class="{ disabled }">
 		<slot name="activator" v-bind="{ active: internalActive, enable, disable, toggle }">
 			<v-divider @click="internalActive = !internalActive">
-				<v-icon v-if="!disabled" :name="internalActive ? 'unfold_less' : 'unfold_more'" small />
+				<v-icon v-if="!disabled" :name="internalActive ? 'expand_more' : 'chevron_right'" small />
 				<slot name="title">{{ label }}</slot>
 			</v-divider>
 		</slot>
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index f5730b0e50..19833c6777 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -50,7 +50,7 @@
 			</v-card>
 		</v-dialog>
 
-		<small v-if="field.meta && field.meta.note" v-md="field.meta.note" class="note" />
+		<small v-if="field.meta && field.meta.note" v-md="field.meta.note" class="type-note" />
 
 		<small v-if="validationError" class="validation-error">
 			{{ validationMessage }}
@@ -217,12 +217,11 @@ export default defineComponent({
 	position: relative;
 }
 
-.note {
+.type-note {
+	position: relative;
 	display: block;
 	max-width: 520px;
 	margin-top: 4px;
-	color: var(--foreground-subdued);
-	font-style: italic;
 }
 
 .invalid {
diff --git a/app/src/components/v-info/v-info.vue b/app/src/components/v-info/v-info.vue
index cd269a0fa5..f4ab85a386 100644
--- a/app/src/components/v-info/v-info.vue
+++ b/app/src/components/v-info/v-info.vue
@@ -79,6 +79,7 @@ export default defineComponent({
 .content {
 	max-width: 300px;
 	color: var(--foreground-subdued);
+	line-height: 22px;
 
 	&:not(:last-child) {
 		margin-bottom: 24px;
diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index 82678525cb..1e1ef3aad0 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -130,11 +130,11 @@ export default defineComponent({
 body {
 	--v-list-item-padding-large: 0 8px;
 	--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
-	--v-list-item-margin-large: 4px 0;
+	--v-list-item-margin-large: 2px 0;
 	--v-list-item-margin: 2px 0;
 	--v-list-item-min-width: none;
 	--v-list-item-max-width: none;
-	--v-list-item-min-height-large: 40px;
+	--v-list-item-min-height-large: 36px;
 	--v-list-item-min-height: 32px;
 	--v-list-item-max-height: auto;
 	--v-list-item-border-radius: var(--border-radius);
diff --git a/app/src/components/v-notice/v-notice.vue b/app/src/components/v-notice/v-notice.vue
index 39800654e4..e22ad5719d 100644
--- a/app/src/components/v-notice/v-notice.vue
+++ b/app/src/components/v-notice/v-notice.vue
@@ -64,6 +64,7 @@ body {
 	min-height: var(--input-height);
 	padding: 12px 16px;
 	color: var(--v-notice-color);
+	line-height: 22px;
 	background-color: var(--v-notice-background-color);
 	border-radius: var(--border-radius);
 }
@@ -72,6 +73,10 @@ body {
 	--v-icon-color: var(--v-notice-icon-color);
 }
 
+.v-icon.left {
+	margin-right: 16px;
+}
+
 .info {
 	--v-notice-icon-color: var(--primary);
 	--v-notice-background-color: var(--background-normal);
diff --git a/app/src/interfaces/presentation-divider/presentation-divider.vue b/app/src/interfaces/presentation-divider/presentation-divider.vue
index b5d6ef0e76..d182c916a4 100644
--- a/app/src/interfaces/presentation-divider/presentation-divider.vue
+++ b/app/src/interfaces/presentation-divider/presentation-divider.vue
@@ -3,6 +3,7 @@
 		:class="{ margin: icon || title }"
 		:style="{
 			'--v-divider-label-color': color,
+			'--v-divider-color': 'var(--border-subdued)',
 		}"
 		large
 		:inline-title="inlineTitle"
@@ -39,6 +40,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .margin {
-	margin-top: 20px;
+	margin-top: 40px;
+	margin-bottom: -10px;
 }
 </style>
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 1ff37c5142..07c0ffb751 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -150,9 +150,9 @@ fields_for_role: 'Fields the {role} Role can {action}.'
 validation_for_role: 'Field {action} rules the {role} Role must obey.'
 presets_for_role: 'Field value defaults for the {role} Role.'
 presentation_and_aliases: Presentation & Aliases
-revision_post_update: Here is what this item looked like after the update...
-changes_made: These are the specific changes that were made...
-no_relational_data: Keep in mind that this does not include relational data.
+revision_post_update: Here is what this item looked like after the update.
+changes_made: Below are the specific changes made in this revision.
+no_relational_data: Keep in mind that relational data is not included here.
 hide_field_on_detail: Hide Field on Detail
 show_field_on_detail: Show Field on Detail
 delete_field: Delete Field
@@ -391,7 +391,7 @@ no_files_copy: There are no files here.
 user_count: 'No Users | One User | {count} Users'
 no_users_copy: There are no users in this role yet.
 webhooks_count: 'No Webhooks | One Webhook | {count} Webhooks'
-no_webhooks_copy: There are no webhooks yet.
+no_webhooks_copy: No webhooks have been configured yet. Get started by creating one below.
 all_items: All Items
 any: Any
 csv: CSV
@@ -992,6 +992,7 @@ field_options:
     actions_delete: Delete
     actions_login: Login
 no_fields_in_collection: 'There are no fields in "{collection}" yet'
+no_value: No value
 do_nothing: Do Nothing
 generate_and_save_uuid: Generate and Save UUID
 save_current_user_id: Save Current User ID
diff --git a/app/src/layouts/cards/components/card.vue b/app/src/layouts/cards/components/card.vue
index 2517b2320f..df32c5a4ea 100644
--- a/app/src/layouts/cards/components/card.vue
+++ b/app/src/layouts/cards/components/card.vue
@@ -1,12 +1,12 @@
 <template>
 	<div
 		class="card"
-		:class="{ loading, readonly, selected: item && modelValue.includes(item[itemKey]) }"
+		:class="{ loading, readonly, selected: item && modelValue.includes(item[itemKey]), 'select-mode': selectMode }"
 		@click="handleClick"
 	>
 		<v-icon class="selector" :name="selectionIcon" @click.stop="toggleSelection" />
 		<div class="header">
-			<div class="selection-indicator" :class="{ 'select-mode': selectMode }"></div>
+			<div class="selection-fade"></div>
 			<v-skeleton-loader v-if="loading" />
 			<template v-else>
 				<p v-if="type || imgError" class="type type-title">{{ type }}</p>
@@ -223,7 +223,7 @@ export default defineComponent({
 			height: 100%;
 		}
 
-		.selection-indicator {
+		.selection-fade {
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -242,10 +242,6 @@ export default defineComponent({
 				background-image: linear-gradient(-180deg, rgba(38, 50, 56, 0.1) 10%, rgba(38, 50, 56, 0));
 				content: '';
 			}
-
-			&.select-mode {
-				opacity: 1;
-			}
 		}
 	}
 
@@ -272,11 +268,23 @@ export default defineComponent({
 		left: 0px;
 		z-index: 3;
 		margin: 4px;
-		opacity: 0.5;
+		opacity: 0;
 		transition: opacity var(--fast) var(--transition), color var(--fast) var(--transition);
 
 		&:hover {
-			opacity: 1;
+			opacity: 1 !important;
+		}
+	}
+
+	&.select-mode {
+		.selector {
+			opacity: 0.5;
+		}
+
+		.header {
+			.selection-fade {
+				opacity: 1;
+			}
 		}
 	}
 
@@ -294,16 +302,20 @@ export default defineComponent({
 
 		.header {
 			border-width: 12px;
+
+			.selection-fade {
+				opacity: 1;
+			}
 		}
 	}
 
 	&:hover {
 		.selector {
-			opacity: 1;
+			opacity: 0.5;
 		}
 
 		.header {
-			.selection-indicator {
+			.selection-fade {
 				opacity: 1;
 			}
 		}
diff --git a/app/src/layouts/cards/components/header.vue b/app/src/layouts/cards/components/header.vue
index e867c6fc49..1a24869b21 100644
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -204,8 +204,7 @@ export default defineComponent({
 		}
 
 		&:hover {
-			--v-icon-color: var(--foreground-normal);
-
+			color: var(--foreground-normal);
 			cursor: pointer;
 		}
 	}
diff --git a/app/src/modules/collections/components/navigation-bookmark.vue b/app/src/modules/collections/components/navigation-bookmark.vue
index d41553b5ae..0150570cd3 100644
--- a/app/src/modules/collections/components/navigation-bookmark.vue
+++ b/app/src/modules/collections/components/navigation-bookmark.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-list-item :to="bookmark.to" query class="bookmark" @contextmenu.prevent.stop="activateContextMenu">
-		<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
+		<v-list-item-icon><v-icon name="bookmark_outline" /></v-list-item-icon>
 		<v-list-item-content>
 			<v-text-overflow :text="bookmark.bookmark" />
 		</v-list-item-content>
diff --git a/app/src/styles/_type-styles.scss b/app/src/styles/_type-styles.scss
index 3ad3325796..e8604b2d16 100644
--- a/app/src/styles/_type-styles.scss
+++ b/app/src/styles/_type-styles.scss
@@ -18,3 +18,7 @@
 .type-text {
 	@include type-text;
 }
+
+.type-note {
+	@include type-note;
+}
diff --git a/app/src/styles/_variables.scss b/app/src/styles/_variables.scss
index be74c38e63..7d5bf464fe 100644
--- a/app/src/styles/_variables.scss
+++ b/app/src/styles/_variables.scss
@@ -19,5 +19,5 @@
 	--form-column-width: 300px;
 	--form-column-max-width: 380px;
 	--form-horizontal-gap: 32px;
-	--form-vertical-gap: 48px;
+	--form-vertical-gap: 40px;
 }
diff --git a/app/src/styles/mixins/type-styles.scss b/app/src/styles/mixins/type-styles.scss
index 89e3b7b4e9..b47d0680eb 100644
--- a/app/src/styles/mixins/type-styles.scss
+++ b/app/src/styles/mixins/type-styles.scss
@@ -28,3 +28,12 @@
 	font-style: normal;
 	line-height: 22px;
 }
+
+@mixin type-note {
+	color: var(--foreground-subdued);
+	font-weight: 500;
+	font-size: 13px;
+	font-family: var(--family-sans-serif);
+	font-style: italic;
+	line-height: 18px;
+}
diff --git a/app/src/utils/geometry/basemap.ts b/app/src/utils/geometry/basemap.ts
index 9e903ab126..acf04e3653 100644
--- a/app/src/utils/geometry/basemap.ts
+++ b/app/src/utils/geometry/basemap.ts
@@ -104,11 +104,11 @@ function getDefaultMapboxBasemap(): BasemapSource {
 	const defaultMapboxBasemap: BasemapSource = {
 		name: 'Mapbox',
 		type: 'style',
-		url: 'mapbox://styles/mapbox/light-v10',
+		url: 'mapbox://styles/directus/cktaiz31c509n18nrxj63zdy6',
 	};
 
 	if (getTheme() === 'dark') {
-		defaultMapboxBasemap.url = 'mapbox://styles/mapbox/dark-v10';
+		defaultMapboxBasemap.url = 'mapbox://styles/directus/cktaixyhk2joh17lrb5i8zs22';
 	}
 
 	return defaultMapboxBasemap;
diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar/header-bar.vue
index ba050d5296..289b489365 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar/header-bar.vue
@@ -96,9 +96,9 @@ export default defineComponent({
 	align-items: center;
 	justify-content: flex-start;
 	width: 100%;
-	height: 65px;
+	height: 61px;
 	margin: 0;
-	padding: 0 12px;
+	padding: 0 10px;
 	background-color: var(--background-page);
 	box-shadow: 0;
 	transition: box-shadow var(--medium) var(--transition), margin var(--fast) var(--transition);
diff --git a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
index 425a4912b4..7741c4d026 100644
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -85,7 +85,7 @@ export default defineComponent({
 		overflow: visible;
 
 		.avatar-image {
-			opacity: 0.5;
+			opacity: 0.8;
 			transition: opacity var(--fast) var(--transition);
 		}
 
diff --git a/app/src/views/private/components/module-bar-logo/module-bar-logo.vue b/app/src/views/private/components/module-bar-logo/module-bar-logo.vue
index 8a71054222..2db81ffd73 100644
--- a/app/src/views/private/components/module-bar-logo/module-bar-logo.vue
+++ b/app/src/views/private/components/module-bar-logo/module-bar-logo.vue
@@ -80,16 +80,16 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 64px;
-	height: 64px;
+	width: 60px;
+	height: 60px;
 	padding: 12px;
 	background-color: var(--brand);
 
 	.v-progress-linear {
 		position: absolute;
-		right: 12px;
+		right: 10px;
 		bottom: 5px;
-		left: 12px;
+		left: 10px;
 		width: 40px;
 	}
 
@@ -102,8 +102,8 @@ export default defineComponent({
 
 	.logo {
 		position: absolute;
-		top: 20px;
-		left: 12px;
+		top: 18px;
+		left: 10px;
 		width: 40px;
 		height: 32px;
 		margin: 0 auto;
diff --git a/app/src/views/private/components/module-bar/module-bar.vue b/app/src/views/private/components/module-bar/module-bar.vue
index 078b53151f..5bd856bc3f 100644
--- a/app/src/views/private/components/module-bar/module-bar.vue
+++ b/app/src/views/private/components/module-bar/module-bar.vue
@@ -103,7 +103,7 @@ body {
 .module-bar {
 	display: flex;
 	flex-direction: column;
-	width: 64px;
+	width: 60px;
 	height: 100%;
 	background-color: var(--module-background);
 
diff --git a/app/src/views/private/components/project-info/project-info.vue b/app/src/views/private/components/project-info/project-info.vue
index 4f1d744b2c..374c8c49ba 100644
--- a/app/src/views/private/components/project-info/project-info.vue
+++ b/app/src/views/private/components/project-info/project-info.vue
@@ -28,7 +28,7 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	width: 100%;
-	height: 64px;
+	height: 60px;
 	padding: 0 20px;
 	color: var(--foreground-normal-alt);
 	text-align: left;
diff --git a/app/src/views/private/components/revisions-drawer-detail/revision-item.vue b/app/src/views/private/components/revisions-drawer-detail/revision-item.vue
index 73e41118d9..cf4874f9d6 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revision-item.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revision-item.vue
@@ -77,7 +77,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .revision-item {
 	position: relative;
-	margin-bottom: 16px;
+	margin-bottom: 12px;
 	margin-left: 16px;
 
 	.header {
@@ -126,7 +126,7 @@ export default defineComponent({
 		top: -4px;
 		left: -24px;
 		z-index: 1;
-		width: calc(100% + 28px);
+		width: calc(100% + 32px);
 		height: calc(100% + 10px);
 		background-color: var(--background-normal-alt);
 		border-radius: var(--border-radius);
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
index 17b8c7088c..b5093feb85 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
@@ -238,15 +238,20 @@ export default defineComponent({
 }
 
 .v-divider {
+	--v-divider-color: var(--background-normal-alt);
+
 	position: sticky;
 	top: 0;
 	z-index: 3;
 	margin-top: 8px;
-	margin-bottom: 8px;
+	margin-right: -8px;
+	margin-bottom: 6px;
+	margin-left: -8px;
 	padding-top: 8px;
-	padding-bottom: 8px;
+	padding-right: 8px;
+	padding-left: 8px;
 	background-color: var(--background-normal);
-	box-shadow: 0 0 4px 2px var(--background-normal);
+	box-shadow: 0 0 2px 2px var(--background-normal);
 
 	&:first-of-type {
 		margin-top: 0;
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
index 7526abad2a..9f81b751c6 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
@@ -85,7 +85,7 @@ export default defineComponent({
 		return { internalCurrent, options, selectedOption };
 
 		async function getFormattedDate(revision: Revision) {
-			const date = await localizedFormat(new Date(revision!.activity.timestamp), String(t('date-fns_date')));
+			const date = await localizedFormat(new Date(revision!.activity.timestamp), String(t('date-fns_date_short')));
 			const time = await localizedFormat(new Date(revision!.activity.timestamp), String(t('date-fns_time')));
 
 			return `${date} (${time})`;
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
index 6b109ee5ae..a669b40fa1 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
@@ -3,13 +3,17 @@
 		<v-icon :name="added ? 'add' : 'remove'" />
 		<div class="delta">
 			<span v-for="(part, index) in changesFiltered" :key="index" :class="{ changed: part.added || part.removed }">
-				{{ part.value }}
+				<template v-if="part.value">{{ part.value }}</template>
+				<template v-else>
+					<span class="no-value">{{ t('no_value') }}</span>
+				</template>
 			</span>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
+import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
 
 type Change = {
@@ -35,6 +39,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const { t } = useI18n();
 		const changesFiltered = computed(() => {
 			return props.changes.filter((change) => {
 				if (props.added === true) {
@@ -50,7 +55,7 @@ export default defineComponent({
 			return props.changes.length === 2; // before/after
 		});
 
-		return { changesFiltered, wholeThing };
+		return { t, changesFiltered, wholeThing };
 	},
 });
 </script>
@@ -59,13 +64,13 @@ export default defineComponent({
 .change-line {
 	position: relative;
 	width: 100%;
-	padding: 8px 12px 8px 52px;
+	padding: 8px 12px 8px 40px;
 	border-radius: var(--border-radius);
 
 	.v-icon {
 		position: absolute;
-		top: 6px;
-		left: 12px;
+		top: 8px;
+		left: 8px;
 	}
 }
 
@@ -79,6 +84,7 @@ export default defineComponent({
 .added {
 	color: var(--success);
 	background-color: var(--success-alt);
+	border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
 
 	.changed {
 		background-color: var(--success-25);
@@ -88,12 +94,18 @@ export default defineComponent({
 .deleted {
 	color: var(--danger);
 	background-color: var(--danger-alt);
+	border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
 
 	.changed {
 		background-color: var(--danger-25);
 	}
 }
 
+.no-value {
+	font-style: italic;
+	opacity: 0.25;
+}
+
 .no-highlight .changed {
 	background-color: transparent;
 }
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
index 819b329d71..805e39e4df 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
@@ -110,7 +110,7 @@ export default defineComponent({
 }
 
 .change-line {
-	margin-bottom: 4px;
+	margin-bottom: 0px;
 }
 
 .v-notice {
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index 239868c482..43da9a400e 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -20,12 +20,12 @@
 			</template>
 
 			<div class="content">
-				<revisions-drawer-preview v-if="currentTab[0] === 'revision_preview'" :revision="currentRevision" />
 				<revisions-drawer-updates
 					v-if="currentTab[0] === 'updates_made'"
 					:revision="currentRevision"
 					:revisions="revisions"
 				/>
+				<revisions-drawer-preview v-if="currentTab[0] === 'revision_preview'" :revision="currentRevision" />
 			</div>
 
 			<template #actions>
@@ -73,7 +73,7 @@ export default defineComponent({
 		const internalActive = useSync(props, 'active', emit);
 		const internalCurrent = useSync(props, 'current', emit);
 
-		const currentTab = ref(['revision_preview']);
+		const currentTab = ref(['updates_made']);
 
 		const currentRevision = computed(() => {
 			return props.revisions.find((revision) => revision.id === props.current);
@@ -87,14 +87,14 @@ export default defineComponent({
 		});
 
 		const tabs = [
-			{
-				text: t('revision_preview'),
-				value: 'revision_preview',
-			},
 			{
 				text: t('updates_made'),
 				value: 'updates_made',
 			},
+			{
+				text: t('revision_preview'),
+				value: 'revision_preview',
+			},
 		];
 
 		return { t, internalActive, internalCurrent, currentRevision, currentTab, tabs, revert };
diff --git a/app/src/views/private/components/sidebar-button/sidebar-button.vue b/app/src/views/private/components/sidebar-button/sidebar-button.vue
index 3b04048f35..374f30b0eb 100644
--- a/app/src/views/private/components/sidebar-button/sidebar-button.vue
+++ b/app/src/views/private/components/sidebar-button/sidebar-button.vue
@@ -48,7 +48,7 @@ export default defineComponent({
 	position: relative;
 	flex-shrink: 0;
 	width: 100%;
-	height: 64px;
+	height: 60px;
 	color: var(--foreground-normal-alt);
 	background-color: var(--background-normal-alt);
 
@@ -56,7 +56,7 @@ export default defineComponent({
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 64px;
+		width: 60px;
 		height: 100%;
 	}
 
diff --git a/app/src/views/private/components/sidebar-detail/sidebar-detail.vue b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
index 907120beb3..61a9b21fdd 100644
--- a/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
+++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
@@ -86,7 +86,7 @@ body {
 		flex-shrink: 0;
 		justify-content: space-between;
 		width: 100%;
-		height: 64px;
+		height: 60px;
 		color: var(--sidebar-detail-color);
 		background-color: var(--background-normal-alt);
 
@@ -96,7 +96,7 @@ body {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 64px;
+			width: 60px;
 			height: 100%;
 		}
 
@@ -118,8 +118,8 @@ body {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 64px;
-		height: 64px;
+		width: 60px;
+		height: 60px;
 		color: var(--foreground-normal);
 		cursor: pointer;
 		transition: opacity var(--fast) var(--transition), color var(--fast) var(--transition);
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index 1c8d1ca656..da3b25192e 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -206,7 +206,6 @@ export default defineComponent({
 		--border-radius: 6px;
 		--input-height: 60px;
 		--input-padding: 16px; // (60 - 4 - 24) / 2
-		--form-vertical-gap: 52px;
 
 		position: relative;
 		flex-grow: 1;
@@ -238,7 +237,7 @@ export default defineComponent({
 		top: 0;
 		right: 0;
 		z-index: 30;
-		width: 284px;
+		width: 280px;
 		height: 100%;
 		overflow: hidden;
 		background-color: var(--background-normal);
@@ -256,23 +255,23 @@ export default defineComponent({
 		.flex-container {
 			display: flex;
 			flex-direction: column;
-			width: 284px;
+			width: 280px;
 			height: 100%;
 		}
 
 		@media (min-width: 960px) {
-			transform: translateX(calc(100% - 64px));
+			transform: translateX(calc(100% - 60px));
 		}
 
 		@media (min-width: 1260px) {
 			position: relative;
-			flex-basis: 64px;
+			flex-basis: 60px;
 			flex-shrink: 0;
 			transform: none;
 			transition: flex-basis var(--slow) var(--transition);
 
 			&.is-open {
-				flex-basis: 284px;
+				flex-basis: 280px;
 				transform: none;
 			}
 		}