From ae64f20578cc53da7ef42d2ad108cbb213c9c62c Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Wed, 22 Apr 2020 13:19:20 -0400
Subject: [PATCH] Various style tweaks (#449)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* secondary action button style

will apply to other modules if we like this

* card styling

filled grid
static gaps
improved selections/hovering

* action button colors

* dialog styling

* updated pagination

* choose layout name

* move page count to footer

* card footer

* correct list group icon orientation

* move card size to header

* header icon color

* radios are not labels

* clean up projcet chooser styling

* don’t collapse pagination when empty

* logout style and tooltips

* correct css variable

* layout translation key

* use general “per page” translation
---
 src/components/v-button/v-button.vue          |   8 +-
 src/components/v-card/v-card-actions.vue      |   2 +-
 src/components/v-card/v-card-text.vue         |   1 +
 src/components/v-dialog/v-dialog.vue          |   1 +
 src/components/v-list/v-list-group.vue        |   4 +-
 src/components/v-pagination/v-pagination.vue  | 108 +++++------
 src/components/v-radio/v-radio.vue            |   2 +-
 src/lang/en-US/index.json                     |   2 +-
 src/layouts/cards/cards.vue                   |  80 +++++---
 src/layouts/cards/components/card.vue         | 173 ++++++++++--------
 src/layouts/cards/components/header.vue       |  11 ++
 src/layouts/tabular/tabular.vue               |  65 ++++---
 .../collections/routes/browse/browse.vue      |  20 +-
 .../collections/routes/detail/detail.vue      |  23 ++-
 .../collections/routes/overview/overview.vue  |   8 +-
 .../components/add-folder/add-folder.vue      |   6 +-
 src/modules/files/routes/browse/browse.vue    |  18 +-
 src/modules/files/routes/detail/detail.vue    |  12 +-
 .../data-model/collections/collections.vue    |   2 +-
 .../routes/data-model/fields/fields.vue       |   8 +-
 src/modules/settings/routes/global/global.vue |   2 +-
 .../settings/routes/roles/browse/browse.vue   |  14 +-
 .../settings/routes/roles/detail/detail.vue   |  14 +-
 .../routes/webhooks/browse/browse.vue         |  14 +-
 .../routes/webhooks/detail/detail.vue         |  14 +-
 src/modules/users/routes/browse/browse.vue    |  18 +-
 src/modules/users/routes/detail/detail.vue    |  12 +-
 .../layout-drawer-detail.vue                  |   2 +-
 .../module-bar-avatar/module-bar-avatar.vue   |  15 +-
 .../project-chooser/project-chooser.vue       |   7 +-
 src/views/private/private-view.vue            |   2 +-
 31 files changed, 414 insertions(+), 254 deletions(-)

diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index f5898dcff7..e1830616e7 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -253,8 +253,8 @@ export default defineComponent({
 			--v-button-height: 28px;
 			--v-button-font-size: 12px;
 			--v-button-font-weight: 600;
+			--v-button-min-width: 60px;
 
-			min-width: 60px;
 			padding: 0 12px;
 			border-radius: 4px;
 		}
@@ -262,23 +262,23 @@ export default defineComponent({
 		&.small {
 			--v-button-height: 36px;
 			--v-button-font-size: 14px;
+			--v-button-min-width: 120px;
 
-			min-width: 120px;
 			padding: 0 12px;
 		}
 
 		&.large {
 			--v-button-height: 52px;
+			--v-button-min-width: 154px;
 
-			min-width: 154px;
 			padding: 0 12px;
 		}
 
 		&.x-large {
 			--v-button-height: 64px;
 			--v-button-font-size: 18px;
+			--v-button-min-width: 180px;
 
-			min-width: 180px;
 			padding: 0 12px;
 		}
 
diff --git a/src/components/v-card/v-card-actions.vue b/src/components/v-card/v-card-actions.vue
index 5dfb61bcc6..c17a11bc55 100644
--- a/src/components/v-card/v-card-actions.vue
+++ b/src/components/v-card/v-card-actions.vue
@@ -9,7 +9,7 @@
 	padding: var(--v-card-padding);
 
 	& ::v-deep > .v-button + .v-button {
-		margin-left: 8px;
+		margin-left: 12px;
 	}
 }
 </style>
diff --git a/src/components/v-card/v-card-text.vue b/src/components/v-card/v-card-text.vue
index fbbc250450..448ac10f37 100644
--- a/src/components/v-card/v-card-text.vue
+++ b/src/components/v-card/v-card-text.vue
@@ -6,5 +6,6 @@
 .v-card-text {
 	padding: var(--v-card-padding);
 	padding-top: 0;
+	padding-bottom: 12px;
 }
 </style>
diff --git a/src/components/v-dialog/v-dialog.vue b/src/components/v-dialog/v-dialog.vue
index 6da40c2fca..36f7179f41 100644
--- a/src/components/v-dialog/v-dialog.vue
+++ b/src/components/v-dialog/v-dialog.vue
@@ -79,6 +79,7 @@ export default defineComponent({
 	::v-deep .v-card {
 		--v-card-min-width: 540px;
 		--v-card-padding: 20px;
+		--v-card-background-color: var(--background-page);
 	}
 
 	::v-deep .v-sheet {
diff --git a/src/components/v-list/v-list-group.vue b/src/components/v-list/v-list-group.vue
index fd30a3c7b5..4f5f5400c1 100644
--- a/src/components/v-list/v-list-group.vue
+++ b/src/components/v-list/v-list-group.vue
@@ -4,7 +4,7 @@
 			<slot name="activator" :active="groupActive" />
 
 			<v-list-item-icon class="activator-icon" :class="{ active: groupActive }">
-				<v-icon name="chevron_left" @click.stop.prevent="toggle" />
+				<v-icon name="chevron_right" @click.stop.prevent="toggle" />
 			</v-list-item-icon>
 		</v-list-item>
 
@@ -64,7 +64,7 @@ export default defineComponent({
 		transition: transform var(--medium) var(--transition);
 
 		&.active {
-			transform: rotate(-90deg);
+			transform: rotate(90deg);
 		}
 	}
 
diff --git a/src/components/v-pagination/v-pagination.vue b/src/components/v-pagination/v-pagination.vue
index 609a4b4b7f..62dd2a4777 100644
--- a/src/components/v-pagination/v-pagination.vue
+++ b/src/components/v-pagination/v-pagination.vue
@@ -1,58 +1,49 @@
 <template>
 	<div class="v-pagination">
+		<v-button v-if="value !== 1" :disabled="disabled" secondary icon small @click="toPrev">
+			<v-icon name="chevron_left" />
+		</v-button>
+
 		<v-button
-			class="double"
-			v-if="showFirstLast"
-			:disabled="disabled || value === 1"
-			secondary
-			outlined
-			icon
-			small
+			v-if="showFirstLast && value > Math.ceil(totalVisible / 2)"
 			@click="toPage(1)"
+			secondary
+			small
+			:disabled="disabled"
 		>
-			<v-icon name="chevron_left" />
-			<v-icon name="chevron_left" />
+			1
 		</v-button>
 
-		<v-button :disabled="disabled || value === 1" secondary outlined icon small @click="toPrev">
-			<v-icon name="chevron_left" />
-		</v-button>
+		<span v-if="showFirstLast && value > Math.ceil(totalVisible / 2) + 1" class="gap">...</span>
 
 		<v-button
-			icon
-			small
 			v-for="page in visiblePages"
 			:key="page"
 			:class="{ active: value === page }"
 			@click="toPage(page)"
 			secondary
+			small
 			:disabled="disabled"
 		>
 			{{ page }}
 		</v-button>
 
-		<v-button
-			:disabled="disabled || value === length"
-			secondary
-			outlined
-			icon
-			small
-			@click="toNext"
-		>
-			<v-icon name="chevron_right" />
-		</v-button>
+		<span v-if="showFirstLast && value < length - Math.ceil(totalVisible / 2)" class="gap">
+			...
+		</span>
 
 		<v-button
-			v-if="showFirstLast"
-			:disabled="disabled || value === length"
-			class="double"
-			secondary
-			outlined
-			icon
-			small
+			v-if="showFirstLast && value < length - Math.ceil(totalVisible / 2)"
+			:class="{ active: value === length }"
 			@click="toPage(length)"
+			secondary
+			small
+			:disabled="disabled"
 		>
-			<v-icon name="chevron_right" />
+			{{ length }}
+		</v-button>
+
+		<v-button v-if="value !== length" :disabled="disabled" secondary icon small @click="toNext">
 			<v-icon name="chevron_right" />
 		</v-button>
 	</div>
@@ -136,41 +127,38 @@ export default defineComponent({
 .v-pagination {
 	--v-pagination-active-color: var(--primary);
 
+	.gap {
+		margin: 0 4px;
+		color: var(--foreground-subdued);
+	}
+
 	.v-button {
+		--v-button-background-color-hover: var(--background-subdued);
+		--v-button-background-color: var(--background-subdued);
+		--v-button-color: var(--foreground-subdued);
+
+		margin: 0 2px;
 		vertical-align: middle;
 
-		&:not(:first-child):not(:last-child) {
-			margin: 0 2px;
-		}
-
-		&.double {
-			position: relative;
-
-			& ::v-deep {
-				.content {
-					display: grid;
-					grid-template-rows: 1fr;
-					grid-template-columns: 1fr;
-				}
-
-				.v-icon {
-					grid-row: 1;
-					grid-column: 1;
-
-					&:first-child {
-						left: -4px;
-					}
-
-					&:last-child {
-						right: -4px;
-					}
-				}
+		& ::v-deep {
+			.small {
+				--v-button-min-width: 32px;
 			}
 		}
 
+		&:first-child {
+			margin-left: 0;
+		}
+
+		&:last-child {
+			margin-right: 0;
+		}
+
 		&.active {
-			--v-button-background-color: var(--v-pagination-active-color);
-			--v-button-color: var(--foreground-inverted);
+			--v-button-background-color-hover: var(--primary-25);
+			--v-button-color-hover: var(--primary);
+			--v-button-background-color: var(--primary-25);
+			--v-button-color: var(--primary);
 		}
 	}
 }
diff --git a/src/components/v-radio/v-radio.vue b/src/components/v-radio/v-radio.vue
index 74b2ddb154..7709646c96 100644
--- a/src/components/v-radio/v-radio.vue
+++ b/src/components/v-radio/v-radio.vue
@@ -8,7 +8,7 @@
 		@click="emitValue"
 	>
 		<v-icon :name="icon" />
-		<span class="label type-label">
+		<span class="label type-text">
 			<slot name="label">{{ label }}</slot>
 		</span>
 	</button>
diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json
index 092fe052c0..79934e44b4 100644
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -240,7 +240,7 @@
 	"upload_file_indeterminate": "Uploading File | Uploading files {done}/{total}",
 	"upload_file_success": "File Uploaded | {count} Files Uploaded",
 	"upload_file_failed": "Couldn't Upload File | Couldn't Upload Files",
-	"view_type": "View As...",
+	"layout_type": "Layout Type",
 	"setup": "Setup",
 
 	"none": "None",
diff --git a/src/layouts/cards/cards.vue b/src/layouts/cards/cards.vue
index ec939cd30e..cdacb76142 100644
--- a/src/layouts/cards/cards.vue
+++ b/src/layouts/cards/cards.vue
@@ -1,17 +1,6 @@
 <template>
 	<div class="layout-cards" :style="{ '--size': size + 'px' }">
 		<portal to="drawer">
-			<drawer-detail icon="crop_square" :title="$t('layouts.cards.size')">
-				<v-slider v-model="size" :min="100" :max="200" :step="1" />
-			</drawer-detail>
-			<drawer-detail icon="format_list_numbered" :title="$t('per_page')">
-				<v-select
-					full-width
-					@input="limit = +$event"
-					:value="`${limit}`"
-					:items="['10', '25', '50', '100', '250']"
-				/>
-			</drawer-detail>
 			<drawer-detail icon="settings" :title="$t('setup')">
 				<div class="setting">
 					<div class="label type-text">{{ $t('layouts.cards.image_source') }}</div>
@@ -61,7 +50,12 @@
 			</drawer-detail>
 		</portal>
 
-		<cards-header :fields="availableFields" :selection.sync="_selection" :sort.sync="sort" />
+		<cards-header
+			:fields="availableFields"
+			:size.sync="size"
+			:selection.sync="_selection"
+			:sort.sync="sort"
+		/>
 
 		<div class="grid">
 			<template v-if="loading">
@@ -89,14 +83,26 @@
 			</card>
 		</div>
 
-		<div class="pagination" v-if="totalPages > 1">
-			<v-pagination
-				:length="totalPages"
-				:total-visible="5"
-				show-first-last
-				:value="page"
-				@input="toPage"
-			/>
+		<div class="footer">
+			<div class="pagination">
+				<v-pagination
+					v-if="totalPages > 1"
+					:length="totalPages"
+					:total-visible="7"
+					show-first-last
+					:value="page"
+					@input="toPage"
+				/>
+			</div>
+
+			<div class="per-page">
+				<span>{{ $t('layouts.tabular.per_page') }}</span>
+				<v-select
+					@input="limit = +$event"
+					:value="`${limit}`"
+					:items="['10', '25', '50', '100', '250']"
+				/>
+			</div>
 		</div>
 
 		<v-info
@@ -343,8 +349,10 @@ export default defineComponent({
 
 .grid {
 	display: grid;
-	grid-gap: calc(0.1666666667 * var(--size)) 24px;
-	grid-template-columns: repeat(auto-fit, var(--size));
+	grid-gap: 32px 24px;
+	grid-template-columns: repeat(auto-fit, minmax(var(--size), 1fr));
+	justify-content: stretch;
+	justify-items: stretch;
 }
 
 .v-info {
@@ -359,11 +367,27 @@ export default defineComponent({
 	margin-bottom: 12px;
 }
 
-.pagination {
-	position: sticky;
-	left: 0;
-	width: 100%;
-	padding: 32px;
-	text-align: center;
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-top: 40px;
+
+	.pagination {
+		display: inline-block;
+	}
+
+	.per-page {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		width: 240px;
+		color: var(--foreground-subdued);
+
+		span {
+			width: auto;
+			margin-right: 4px;
+		}
+	}
 }
 </style>
diff --git a/src/layouts/cards/components/card.vue b/src/layouts/cards/components/card.vue
index b301f1fd9e..5fa4c479f1 100644
--- a/src/layouts/cards/components/card.vue
+++ b/src/layouts/cards/components/card.vue
@@ -2,7 +2,7 @@
 	<div class="card" :class="{ loading }" @click="handleClick">
 		<div class="header" :class="{ selected: value.includes(item) }">
 			<div class="selection-indicator" :class="{ 'select-mode': selectMode }">
-				<v-icon :name="selectionIcon" @click.stop="toggleSelection" />
+				<v-icon class="selector" :name="selectionIcon" @click.stop="toggleSelection" />
 			</div>
 			<v-skeleton-loader v-if="loading" />
 			<template v-else>
@@ -151,94 +151,119 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.card {
-	cursor: pointer;
+.loading {
+	.header {
+		margin-bottom: 8px;
+	}
 }
 
-.header {
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: var(--size);
-	height: var(--size);
-	overflow: hidden;
-	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+.card {
+	cursor: pointer;
 
-	&.selected {
-		background-color: var(--background-normal-alt);
-	}
-
-	.image {
-		position: absolute;
-		top: 0;
-		left: 0;
+	.header {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
+		overflow: hidden;
+		background-color: var(--background-normal);
+		border-radius: var(--border-radius);
 
-	.svg {
-		width: 50%;
-		height: 50%;
-		object-fit: contain;
-	}
-
-	.type {
-		color: var(--foreground-subdued);
-		text-transform: uppercase;
-	}
-
-	.v-icon {
-		--v-icon-color: var(--foreground-subdued);
-	}
-
-	::v-deep .v-skeleton-loader {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-
-	.selection-indicator {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 1;
-		width: 100%;
-		height: 30%;
-		opacity: 0;
-		transition: opacity var(--fast) var(--transition);
-
-		&:hover,
-		&.select-mode {
-			opacity: 1;
+		&::after {
+			display: block;
+			padding-bottom: 100%;
+			content: '';
 		}
 
-		.v-icon {
-			--v-icon-color: var(--white);
-
-			margin: 5%;
-		}
-
-		&::before {
+		.image {
 			position: absolute;
 			top: 0;
 			left: 0;
 			width: 100%;
 			height: 100%;
-			background-image: linear-gradient(-180deg, #263238 10%, rgba(38, 50, 56, 0));
-			opacity: 0.3;
-			content: '';
+			object-fit: contain;
+		}
+
+		.svg {
+			width: 50%;
+			height: 50%;
+			object-fit: contain;
+		}
+
+		.type {
+			color: var(--foreground-subdued);
+			text-transform: uppercase;
+		}
+
+		.v-icon {
+			--v-icon-color: var(--foreground-subdued);
+		}
+
+		::v-deep .v-skeleton-loader {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		.selection-indicator {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 1;
+			width: 100%;
+			height: 48px;
+			opacity: 0;
+			transition: opacity var(--fast) var(--transition);
+
+			&.select-mode {
+				opacity: 1;
+			}
+
+			.selector {
+				--v-icon-color: var(--white);
+
+				margin: 8px;
+				opacity: 0.5;
+				transition: opacity var(--fast) var(--transition);
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			&::before {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background-image: linear-gradient(
+					-180deg,
+					rgba(38, 50, 56, 0.2) 10%,
+					rgba(38, 50, 56, 0)
+				);
+				content: '';
+			}
+		}
+
+		&.selected {
+			.selection-indicator {
+				.selector {
+					opacity: 1;
+				}
+			}
 		}
 	}
-}
 
-.loading {
-	.header {
-		margin-bottom: 8px;
+	&:hover {
+		.header {
+			.selection-indicator {
+				opacity: 1;
+			}
+		}
 	}
 }
 
diff --git a/src/layouts/cards/components/header.vue b/src/layouts/cards/components/header.vue
index eeba4c4c8e..732f131efd 100644
--- a/src/layouts/cards/components/header.vue
+++ b/src/layouts/cards/components/header.vue
@@ -7,6 +7,7 @@
 			</div>
 		</div>
 		<div class="end">
+			<v-slider class="size-selector" v-model="_size" :min="100" :max="200" :step="1" />
 			<v-menu show-arrow placement="bottom">
 				<template #activator="{ toggle }">
 					<div class="sort-selector" @click="toggle">
@@ -46,6 +47,10 @@ export default defineComponent({
 			type: Array as PropType<Field[]>,
 			required: true,
 		},
+		size: {
+			type: Number,
+			required: true,
+		},
 		sort: {
 			type: String,
 			required: true,
@@ -57,6 +62,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
+		const _size = useSync(props, 'size', emit);
 		const _sort = useSync(props, 'sort', emit);
 		const _selection = useSync(props, 'selection', emit);
 		const descending = computed(() => props.sort.startsWith('-'));
@@ -77,6 +83,7 @@ export default defineComponent({
 			descending,
 			toggleDescending,
 			sortField,
+			_size,
 			_sort,
 			_selection,
 			sortKey,
@@ -117,6 +124,10 @@ export default defineComponent({
 	align-items: center;
 	color: var(--foreground-subdued);
 
+	.size-selector {
+		margin-right: 16px;
+	}
+
 	.sort-selector {
 		margin-right: 8px;
 	}
diff --git a/src/layouts/tabular/tabular.vue b/src/layouts/tabular/tabular.vue
index 41f7993be9..be9290a413 100644
--- a/src/layouts/tabular/tabular.vue
+++ b/src/layouts/tabular/tabular.vue
@@ -48,15 +48,6 @@
 					]"
 				/>
 			</drawer-detail>
-
-			<drawer-detail icon="format_list_numbered" :title="$t('layouts.tabular.per_page')">
-				<v-select
-					full-width
-					@input="limit = +$event"
-					:value="`${limit}`"
-					:items="['10', '25', '50', '100', '250']"
-				/>
-			</drawer-detail>
 		</portal>
 
 		<v-table
@@ -78,14 +69,26 @@
 			@update:sort="onSortChange"
 		>
 			<template #footer>
-				<div class="pagination" v-if="totalPages > 1">
-					<v-pagination
-						:length="totalPages"
-						:total-visible="5"
-						show-first-last
-						:value="page"
-						@input="toPage"
-					/>
+				<div class="footer">
+					<div class="pagination">
+						<v-pagination
+							v-if="totalPages > 1"
+							:length="totalPages"
+							:total-visible="7"
+							show-first-last
+							:value="page"
+							@input="toPage"
+						/>
+					</div>
+
+					<div class="per-page">
+						<span>{{ $t('per_page') }}</span>
+						<v-select
+							@input="limit = +$event"
+							:value="`${limit}`"
+							:items="['10', '25', '50', '100', '250']"
+						/>
+					</div>
 				</div>
 			</template>
 		</v-table>
@@ -413,12 +416,28 @@ export default defineComponent({
 	display: contents;
 }
 
-.pagination {
-	position: sticky;
-	left: 0;
-	width: 100%;
-	padding: 32px;
-	text-align: center;
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 32px 0;
+
+	.pagination {
+		display: inline-block;
+	}
+
+	.per-page {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		width: 240px;
+		color: var(--foreground-subdued);
+
+		span {
+			width: auto;
+			margin-right: 4px;
+		}
+	}
 }
 
 .v-info {
diff --git a/src/modules/collections/routes/browse/browse.vue b/src/modules/collections/routes/browse/browse.vue
index 9bd7a1f71a..d844e5b621 100644
--- a/src/modules/collections/routes/browse/browse.vue
+++ b/src/modules/collections/routes/browse/browse.vue
@@ -2,7 +2,7 @@
 	<collections-not-found v-if="!currentCollection || collection.startsWith('directus_')" />
 	<private-view v-else :title="currentCollection.name">
 		<template #title-outer:prepend>
-			<v-button rounded icon secondary :to="collectionsLink">
+			<v-button class="header-icon" rounded icon secondary :to="collectionsLink">
 				<v-icon :name="currentCollection.icon" />
 			</v-button>
 		</template>
@@ -230,13 +230,23 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 
 .action-batch {
-	--v-button-background-color: var(--warning);
-	--v-button-background-color-hover: var(--warning-150);
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
+}
+
+.header-icon.secondary {
+	--v-button-background-color: var(--background-normal);
+	--v-button-background-color-activated: var(--background-normal);
+	--v-button-background-color-hover: var(--background-normal-alt);
 }
 
 .layout {
diff --git a/src/modules/collections/routes/detail/detail.vue b/src/modules/collections/routes/detail/detail.vue
index 91363779d9..9982f454f0 100644
--- a/src/modules/collections/routes/detail/detail.vue
+++ b/src/modules/collections/routes/detail/detail.vue
@@ -9,10 +9,17 @@
 		"
 	>
 		<template #title-outer:prepend>
-			<v-button v-if="collectionInfo.single" rounded icon secondary disabled>
+			<v-button
+				v-if="collectionInfo.single"
+				class="header-icon"
+				rounded
+				icon
+				secondary
+				disabled
+			>
 				<v-icon :name="collectionInfo.icon" />
 			</v-button>
-			<v-button v-else rounded icon secondary exact :to="backLink">
+			<v-button v-else class="header-icon" rounded icon secondary exact :to="backLink">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -235,8 +242,16 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
+}
+
+.header-icon.secondary {
+	--v-button-background-color: var(--background-normal);
+	--v-button-color-disabled: var(--foreground-normal);
+	--v-button-color-activated: var(--foreground-normal);
 }
 
 .v-form {
diff --git a/src/modules/collections/routes/overview/overview.vue b/src/modules/collections/routes/overview/overview.vue
index 39f950b8c7..86e5bae84f 100644
--- a/src/modules/collections/routes/overview/overview.vue
+++ b/src/modules/collections/routes/overview/overview.vue
@@ -1,7 +1,9 @@
 <template>
 	<private-view class="collections-overview" :title="$tc('collection', 2)">
 		<template #title-outer:prepend>
-			<v-button rounded disabled icon secondary><v-icon name="box" /></v-button>
+			<v-button class="header-icon" rounded disabled icon secondary>
+				<v-icon name="box" />
+			</v-button>
 		</template>
 
 		<template #navigation>
@@ -65,6 +67,10 @@ export default defineComponent({
 	}
 }
 
+.header-icon {
+	--v-button-color-disabled: var(--foreground-normal);
+}
+
 .v-table {
 	padding: var(--content-padding);
 	padding-top: 0;
diff --git a/src/modules/files/components/add-folder/add-folder.vue b/src/modules/files/components/add-folder/add-folder.vue
index 711903e5b9..90d9dfefb6 100644
--- a/src/modules/files/components/add-folder/add-folder.vue
+++ b/src/modules/files/components/add-folder/add-folder.vue
@@ -76,9 +76,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .add-new {
-	--v-button-background-color: var(--primary-alt);
+	--v-button-background-color: var(--primary-25);
 	--v-button-color: var(--primary);
-	--v-button-background-color-hover: var(--primary);
-	--v-button-color-hover: var(--foreground-inverted);
+	--v-button-background-color-hover: var(--primary-50);
+	--v-button-color-hover: var(--primary);
 }
 </style>
diff --git a/src/modules/files/routes/browse/browse.vue b/src/modules/files/routes/browse/browse.vue
index 35de939015..1d72ef9d29 100644
--- a/src/modules/files/routes/browse/browse.vue
+++ b/src/modules/files/routes/browse/browse.vue
@@ -1,7 +1,7 @@
 <template>
 	<private-view :title="$t('files')">
 		<template #title-outer:prepend>
-			<v-button rounded disabled icon secondary>
+			<v-button class="header-icon" rounded disabled icon secondary>
 				<v-icon name="folder" />
 			</v-button>
 		</template>
@@ -226,13 +226,21 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 
 .action-batch {
-	--v-button-background-color: var(--warning);
-	--v-button-background-color-hover: var(--warning-150);
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
+}
+
+.header-icon {
+	--v-button-color-disabled: var(--foreground-normal);
 }
 
 .layout {
diff --git a/src/modules/files/routes/detail/detail.vue b/src/modules/files/routes/detail/detail.vue
index 2f14d51705..21cfcb8769 100644
--- a/src/modules/files/routes/detail/detail.vue
+++ b/src/modules/files/routes/detail/detail.vue
@@ -1,7 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('files') })">
 		<template #title-outer:prepend>
-			<v-button rounded icon secondary exact :to="breadcrumb[0].to">
+			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -187,8 +187,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
+}
+
+.header-icon.secondary {
+	--v-button-background-color: var(--background-normal);
 }
 
 .v-form {
diff --git a/src/modules/settings/routes/data-model/collections/collections.vue b/src/modules/settings/routes/data-model/collections/collections.vue
index 8d90cc90dd..050260a1ed 100644
--- a/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/src/modules/settings/routes/data-model/collections/collections.vue
@@ -234,6 +234,6 @@ export default defineComponent({
 
 .header-icon {
 	--v-button-color-disabled: var(--warning);
-	--v-button-background-color-disabled: var(--warning-alt);
+	--v-button-background-color-disabled: var(--warning-25);
 }
 </style>
diff --git a/src/modules/settings/routes/data-model/fields/fields.vue b/src/modules/settings/routes/data-model/fields/fields.vue
index e80979f874..5e957e443a 100644
--- a/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/src/modules/settings/routes/data-model/fields/fields.vue
@@ -179,11 +179,13 @@ export default defineComponent({
 
 .header-icon {
 	--v-button-color-disabled: var(--warning);
-	--v-button-background-color-disabled: var(--warning-alt);
+	--v-button-background-color-disabled: var(--warning-25);
 }
 
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 </style>
diff --git a/src/modules/settings/routes/global/global.vue b/src/modules/settings/routes/global/global.vue
index 17b5eb186c..af99480357 100644
--- a/src/modules/settings/routes/global/global.vue
+++ b/src/modules/settings/routes/global/global.vue
@@ -65,6 +65,6 @@ export default defineComponent({
 
 .header-icon {
 	--v-button-color-disabled: var(--warning);
-	--v-button-background-color-disabled: var(--warning-alt);
+	--v-button-background-color-disabled: var(--warning-25);
 }
 </style>
diff --git a/src/modules/settings/routes/roles/browse/browse.vue b/src/modules/settings/routes/roles/browse/browse.vue
index 4673ac175a..f8c61ee721 100644
--- a/src/modules/settings/routes/roles/browse/browse.vue
+++ b/src/modules/settings/routes/roles/browse/browse.vue
@@ -163,13 +163,17 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 
 .action-batch {
-	--v-button-background-color: var(--warning);
-	--v-button-background-color-hover: var(--warning-150);
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
 }
 
 .layout {
@@ -178,6 +182,6 @@ export default defineComponent({
 
 .header-icon {
 	--v-button-color-disabled: var(--warning);
-	--v-button-background-color-disabled: var(--warning-alt);
+	--v-button-background-color-disabled: var(--warning-25);
 }
 </style>
diff --git a/src/modules/settings/routes/roles/detail/detail.vue b/src/modules/settings/routes/roles/detail/detail.vue
index 49f60b9249..ff97538314 100644
--- a/src/modules/settings/routes/roles/detail/detail.vue
+++ b/src/modules/settings/routes/roles/detail/detail.vue
@@ -1,7 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('roles') })">
 		<template #title-outer:prepend>
-			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
+			<v-button class="header-icon" rounded icon exact :to="breadcrumb[0].to">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -197,8 +197,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 
 .roles {
@@ -206,8 +208,10 @@ export default defineComponent({
 }
 
 .header-icon {
-	--v-button-color-disabled: var(--warning);
-	--v-button-background-color-disabled: var(--warning-alt);
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
 }
 
 .title {
diff --git a/src/modules/settings/routes/webhooks/browse/browse.vue b/src/modules/settings/routes/webhooks/browse/browse.vue
index 0ddddb2a25..85563d8803 100644
--- a/src/modules/settings/routes/webhooks/browse/browse.vue
+++ b/src/modules/settings/routes/webhooks/browse/browse.vue
@@ -163,13 +163,17 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 
 .action-batch {
-	--v-button-background-color: var(--warning);
-	--v-button-background-color-hover: var(--warning-150);
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
 }
 
 .layout {
@@ -178,6 +182,6 @@ export default defineComponent({
 
 .header-icon {
 	--v-button-color-disabled: var(--warning);
-	--v-button-background-color-disabled: var(--warning-alt);
+	--v-button-background-color-disabled: var(--warning-25);
 }
 </style>
diff --git a/src/modules/settings/routes/webhooks/detail/detail.vue b/src/modules/settings/routes/webhooks/detail/detail.vue
index 6207c6ceff..aa29bb8d0d 100644
--- a/src/modules/settings/routes/webhooks/detail/detail.vue
+++ b/src/modules/settings/routes/webhooks/detail/detail.vue
@@ -1,7 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('webhooks') })">
 		<template #title-outer:prepend>
-			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
+			<v-button class="header-icon" rounded icon exact :to="breadcrumb[0].to">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -187,8 +187,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 
 .v-form {
@@ -196,7 +198,9 @@ export default defineComponent({
 }
 
 .header-icon {
-	--v-button-color-disabled: var(--warning);
-	--v-button-background-color-disabled: var(--warning-alt);
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
 }
 </style>
diff --git a/src/modules/users/routes/browse/browse.vue b/src/modules/users/routes/browse/browse.vue
index b18a5f2686..41f64ff38b 100644
--- a/src/modules/users/routes/browse/browse.vue
+++ b/src/modules/users/routes/browse/browse.vue
@@ -1,7 +1,7 @@
 <template>
 	<private-view :title="$t('users')">
 		<template #title-outer:prepend>
-			<v-button rounded disabled icon secondary>
+			<v-button class="header-icon" rounded disabled icon secondary>
 				<v-icon name="people" />
 			</v-button>
 		</template>
@@ -223,13 +223,21 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
 }
 
 .action-batch {
-	--v-button-background-color: var(--warning);
-	--v-button-background-color-hover: var(--warning-150);
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
+}
+
+.header-icon {
+	--v-button-color-disabled: var(--foreground-normal);
 }
 
 .layout {
diff --git a/src/modules/users/routes/detail/detail.vue b/src/modules/users/routes/detail/detail.vue
index 4bc3c2de42..71035e5121 100644
--- a/src/modules/users/routes/detail/detail.vue
+++ b/src/modules/users/routes/detail/detail.vue
@@ -1,7 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('users') })">
 		<template #title-outer:prepend>
-			<v-button rounded icon secondary exact :to="breadcrumb[0].to">
+			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -187,8 +187,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .action-delete {
-	--v-button-background-color: var(--danger);
-	--v-button-background-color-hover: var(--danger-dark);
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
+}
+
+.header-icon.secondary {
+	--v-button-background-color: var(--background-normal);
 }
 
 .v-form {
diff --git a/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue b/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
index 0309766e49..d3e474cb31 100644
--- a/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
+++ b/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail :icon="currentLayout.icon" :title="$t('view_type')">
+	<drawer-detail :icon="currentLayout.icon" :title="$t('layout_type')">
 		<v-select :items="layouts" item-text="name" item-value="id" v-model="viewType" full-width />
 	</drawer-detail>
 </template>
diff --git a/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
index b641a2e3c6..bd0d4163e5 100644
--- a/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -2,7 +2,15 @@
 	<v-hover class="module-bar-avatar" v-slot="{ hover }">
 		<v-dialog v-model="signOutActive">
 			<template #activator="{ on }">
-				<v-button @click="on" tile icon x-large :class="{ show: hover }" class="sign-out">
+				<v-button
+					@click="on"
+					tile
+					icon
+					x-large
+					:class="{ show: hover }"
+					class="sign-out"
+					v-tooltip.right="$t('sign_out')"
+				>
 					<v-icon name="logout" />
 				</v-button>
 			</template>
@@ -19,7 +27,7 @@
 		</v-dialog>
 
 		<router-link :to="userProfileLink">
-			<v-avatar tile x-large>
+			<v-avatar tile x-large v-tooltip.right="userFullName">
 				<img v-if="avatarURL" :src="avatarURL" :alt="userFullName" />
 				<v-icon v-else name="account_circle" />
 			</v-avatar>
@@ -80,6 +88,9 @@ export default defineComponent({
 }
 
 .sign-out {
+	--v-button-background-color: var(--module-background-alt);
+	--v-button-background-color-hover: var(--warning);
+
 	position: absolute;
 	top: 0;
 	left: 0;
diff --git a/src/views/private/components/project-chooser/project-chooser.vue b/src/views/private/components/project-chooser/project-chooser.vue
index 32c13b0aa7..23964f9d13 100644
--- a/src/views/private/components/project-chooser/project-chooser.vue
+++ b/src/views/private/components/project-chooser/project-chooser.vue
@@ -93,8 +93,10 @@ export default defineComponent({
 
 		.icon {
 			color: var(--foreground-subdued);
+			transform: rotate(0deg);
 			opacity: 0;
-			transition: opacity var(--fast) var(--transition);
+			transition: opacity var(--fast) var(--transition),
+				transform var(--medium) var(--transition);
 		}
 
 		&:hover .icon {
@@ -103,6 +105,7 @@ export default defineComponent({
 	}
 
 	&.active .toggle .icon {
+		transform: rotate(180deg);
 		opacity: 1;
 	}
 
@@ -116,7 +119,7 @@ export default defineComponent({
 		padding: 20px;
 		padding-top: 0;
 		background-color: var(--background-normal-alt);
-		box-shadow: 0px 4px 12px 0px rgba(38, 50, 56, 0.1);
+		box-shadow: 0px 8px 12px 0px rgba(38, 50, 56, 0.25);
 	}
 
 	.v-divider {
diff --git a/src/views/private/private-view.vue b/src/views/private/private-view.vue
index 3f4c3ab1fa..53490c4281 100644
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -357,7 +357,7 @@ export default defineComponent({
 	}
 
 	@include breakpoint(small) {
-		--content-padding: 32px 32px 160px 32px;
+		--content-padding: 32px 32px 132px 32px;
 	}
 }
 </style>