Various style tweaks (#449)

* 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/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>

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;

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 {

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>