Various style tweaks (#378)

* public button width and color

* improve menu arrow styling

* menu arrow placement

* define project chooser border

* adjustable min width for menus

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

src/components/v-button/v-button.vue

@@ -146,6 +146,7 @@ export default defineComponent({
 	--v-button-background-color-activated: var(--primary);
 	--v-button-background-color-disabled: var(--background-normal);
 	--v-button-font-size: 16px;
+	--v-button-min-width: 140px;
 
 	display: inline-flex;
 	align-items: center;
@@ -169,7 +170,7 @@ export default defineComponent({
 		display: flex;
 		align-items: center;
 		width: var(--v-button-width);
-		min-width: 78px;
+		min-width: var(--v-button-min-width);
 		height: var(--v-button-height);
 		padding: 0 19px;
 		color: var(--v-button-color);
@@ -236,7 +237,7 @@ export default defineComponent({
 			--v-button-height: 28px;
 			--v-button-font-size: 12px;
 
-			min-width: 48px;
+			min-width: 60px;
 			padding: 0 12px;
 		}
 
@@ -244,14 +245,14 @@ export default defineComponent({
 			--v-button-height: 36px;
 			--v-button-font-size: 14px;
 
-			min-width: 64px;
+			min-width: 120px;
 			padding: 0 12px;
 		}
 
 		&.large {
 			--v-button-height: 52px;
 
-			min-width: 92px;
+			min-width: 154px;
 			padding: 0 12px;
 		}
 
@@ -259,7 +260,7 @@ export default defineComponent({
 			--v-button-height: 64px;
 			--v-button-font-size: 18px;
 
-			min-width: 120px;
+			min-width: 180px;
 			padding: 0 12px;
 		}
 

src/components/v-menu/v-menu.vue

@@ -148,6 +148,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-menu {
+	--v-menu-min-width: 100px;
+
 	display: contents;
 }
 
@@ -168,6 +170,7 @@ export default defineComponent({
 	position: absolute;
 	left: -999px;
 	z-index: 5;
+	min-width: var(--v-menu-min-width);
 	transform: translateY(2px);
 	pointer-events: none;
 
@@ -176,15 +179,18 @@ export default defineComponent({
 	}
 
 	.arrow,
-	.arrow::before {
+	.arrow::before,
+	.arrow::after {
 		position: absolute;
-		z-index: -1;
+		z-index: 1;
 		width: 8px;
 		height: 8px;
+		border-radius: 2px;
 	}
 
 	.arrow {
-		&::before {
+		&::before,
+		&::after {
 			background: var(--border-normal);
 			transform: rotate(45deg) scale(0);
 			transition: transform var(--fast) var(--transition-out);
@@ -192,26 +198,47 @@ export default defineComponent({
 			content: '';
 		}
 
-		&.active::before {
+		&.active::before,
+		&.active::after {
 			transform: rotate(45deg) scale(1);
 			transition: transform var(--medium) var(--transition-in);
 		}
+
+		&::after {
+			background: var(--background-subdued);
+		}
 	}
 
 	&[data-placement^='top'] .arrow {
 		bottom: -4px;
+
+		&::after {
+			bottom: 3px;
+		}
 	}
 
 	&[data-placement^='bottom'] .arrow {
 		top: -4px;
+
+		&::after {
+			top: 3px;
+		}
 	}
 
 	&[data-placement^='right'] .arrow {
 		left: -4px;
+
+		&::after {
+			left: 3px;
+		}
 	}
 
 	&[data-placement^='left'] .arrow {
 		right: -4px;
+
+		&::after {
+			right: 3px;
+		}
 	}
 
 	.v-menu-content {

src/routes/login/components/continue-as/continue-as.vue

@@ -4,9 +4,7 @@
 		<template v-else>
 			<p v-html="$t('continue_as', { name })" />
 			<div class="actions">
-				<router-link :to="signOutLink">
-					{{ $t('sign_out') }}
-				</router-link>
+				<router-link :to="signOutLink" class="sign-out">{{ $t('sign_out') }}</router-link>
 				<v-button large @click="hydrateAndLogin">{{ $t('continue') }}</v-button>
 			</div>
 		</template>
@@ -83,5 +81,12 @@ export default defineComponent({
 		align-items: center;
 		justify-content: space-between;
 	}
+	.sign-out {
+		color: var(--foreground-subdued);
+		transition: color var(--fast) var(--transition);
+		&:hover {
+			color: var(--foreground-normal);
+		}
+	}
 }
 </style>

src/routes/login/components/login-form/login-form.vue

@@ -20,7 +20,9 @@
 		</v-notice>
 		<div class="buttons">
 			<v-button type="submit" :loading="loggingIn" large>{{ $t('sign_in') }}</v-button>
-			<router-link :to="forgotLink">{{ $t('forgot_password') }}</router-link>
+			<router-link :to="forgotLink" class="forgot-password">
+				{{ $t('forgot_password') }}
+			</router-link>
 		</div>
 	</form>
 </template>
@@ -90,4 +92,12 @@ export default defineComponent({
 	align-items: center;
 	justify-content: space-between;
 }
+
+.forgot-password {
+	color: var(--foreground-subdued);
+	transition: color var(--fast) var(--transition);
+	&:hover {
+		color: var(--foreground-normal);
+	}
+}
 </style>

src/routes/reset-password/request.vue

@@ -14,7 +14,7 @@
 		</v-notice>
 		<div class="buttons">
 			<v-button type="submit" :loading="sending" large>{{ $t('reset') }}</v-button>
-			<router-link :to="signInLink">{{ $t('sign_in') }}</router-link>
+			<router-link :to="signInLink" class="sign-in">{{ $t('sign_in') }}</router-link>
 		</div>
 	</form>
 </template>
@@ -87,4 +87,12 @@ export default defineComponent({
 .v-notice {
 	margin-bottom: 20px;
 }
+
+.sign-in {
+	color: var(--foreground-subdued);
+	transition: color var(--fast) var(--transition);
+	&:hover {
+		color: var(--foreground-normal);
+	}
+}
 </style>

src/views/private/components/project-chooser/project-chooser.vue

@@ -88,6 +88,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);
 	}
 
 	.v-divider {

src/views/public/components/project-chooser/project-chooser.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-menu v-if="project" show-arrow placement="bottom" close-on-content-click>
+	<v-menu v-if="project" show-arrow placement="bottom-start" close-on-content-click>
 		<template #activator="{ toggle }">
 			<div class="project-chooser" @click="toggle">
 				<div class="public-view-logo" v-if="project && project.logo">
@@ -53,6 +53,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.v-menu {
+	--v-menu-min-width: 300px;
+}
+
 .project-chooser {
 	display: flex;
 	align-items: center;