From 8d0fd6fa9dcec39db34c0dd350ac7adc40361787 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 9 May 2023 00:43:22 +0200
Subject: fix(login): Make login form and footer look like a dashboard panel

Also adjust border radius to match new main content box.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 core/css/guest.scss      |  2 +-
 core/src/views/Login.vue | 40 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/core/css/guest.scss b/core/css/guest.scss
index 08137f1c630..f8435d1e911 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -797,7 +797,7 @@ a.legal {
 	color: var(--color-main-text);
 	background-color: var(--color-main-background);
 	padding: $guest-container-padding;
-	border-radius: var(--border-radius-large);
+	border-radius: var(--body-container-radius);
 	box-shadow: 0 0 10px var(--color-box-shadow);
 	display: inline-block;
 }
diff --git a/core/src/views/Login.vue b/core/src/views/Login.vue
index 4afa81d0dfa..539c1db308e 100644
--- a/core/src/views/Login.vue
+++ b/core/src/views/Login.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<div class="guest-box login-box">
-		<div v-if="!hideLoginForm || directLogin">
+		<template v-if="!hideLoginForm || directLogin">
 			<transition name="fade" mode="out-in">
 				<div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''">
 					<LoginForm :username.sync="user"
@@ -93,14 +93,14 @@
 						@done="passwordResetFinished" />
 				</div>
 			</transition>
-		</div>
-		<div v-else>
+		</template>
+		<template v-else>
 			<transition name="fade" mode="out-in">
 				<NcNoteCard type="warning" :title="t('core', 'Login form is disabled.')">
 					{{ t('core', 'Please contact your administrator.') }}
 				</NcNoteCard>
 			</transition>
-		</div>
+		</template>
 
 		<div id="alternative-logins" class="alternative-logins">
 			<NcButton v-for="(alternativeLogin, index) in alternativeLogins"
@@ -193,7 +193,9 @@ body {
 }
 
 .login-box {
-	width: 300px;
+	// Same size as dashboard panels
+	width: 320px;
+	box-sizing: border-box;
 
 	&__link {
 		display: block;
@@ -203,6 +205,34 @@ body {
 		font-weight: normal !important;
 	}
 }
+
+// Same look like a dashboard panel
+.login-box.guest-box, footer {
+	color: var(--color-main-text);
+	background-color: var(--color-main-background-blur);
+	-webkit-backdrop-filter: var(--filter-background-blur);
+	backdrop-filter: var(--filter-background-blur);
+}
+
+footer {
+	// Usually the same size as the login box, but allow longer texts
+	min-width: 320px;
+	box-sizing: border-box;
+	// align with login box
+	box-shadow: 0 0 10px var(--color-box-shadow);
+	// set border to pill style and adjust padding for it
+	border-radius: var(--border-radius-pill);
+	padding: 6px 24px;
+	// always show above bottom
+	margin-bottom: 1rem;
+	min-height: unset;
+
+	// reset margin to reduce height of pill
+	p.info {
+		margin: auto 0px;
+	}
+}
+
 .fade-enter-active, .fade-leave-active {
 	transition: opacity .3s;
 }
-- 
cgit v1.2.3