Redesign guest pages for better accessibility

- Use white box and put content on it
- Improve focus indicator

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

2 files changed, 5 insertions, 5 deletions

diff --git a/core/templates/loginflowv2/authpicker.php b/core/templates/loginflowv2/authpicker.php
index 8caa42f2ce8..53730e5b1ac 100644
--- a/core/templates/loginflowv2/authpicker.php
+++ b/core/templates/loginflowv2/authpicker.php
@@ -36,19 +36,19 @@ $urlGenerator = $_['urlGenerator'];
 		])) ?>
 	</p>
 
-	<span class="warning">
+	<div class="notecard warning">
 		<h3><?php p($l->t('Security warning')) ?></h3>
 		<p>
 			<?php p($l->t('If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed and instead contact your system administrator.')) ?>
 		</p>
-	</span>
+	</div>
 
 	<br/>
 
 	<p id="redirect-link">
-		<a href="<?php p($urlGenerator->linkToRouteAbsolute('core.ClientFlowLoginV2.grantPage', ['stateToken' => $_['stateToken'], 'user' => $_['user']])) ?>">
+		<form action="<?php p($urlGenerator->linkToRouteAbsolute('core.ClientFlowLoginV2.grantPage', ['stateToken' => $_['stateToken'], 'user' => $_['user']])) ?>" method="get">
 			<input type="submit" class="login primary icon-confirm-white" value="<?php p($l->t('Log in')) ?>">
-		</a>
+		</form>
 	</p>
 
 	<form action="<?php p($urlGenerator->linkToRouteAbsolute('core.ClientFlowLoginV2.apptokenRedirect')); ?>" method="post" id="app-token-login-field" class="hidden">
diff --git a/core/templates/loginflowv2/grant.php b/core/templates/loginflowv2/grant.php
index 19005a20e2c..567c3b4e776 100644
--- a/core/templates/loginflowv2/grant.php
+++ b/core/templates/loginflowv2/grant.php
@@ -27,7 +27,7 @@ style('core', 'login/authpicker');
 $urlGenerator = $_['urlGenerator'];
 ?>
 
-<div class="picker-window">
+<div class="picker-window small">
 	<h2><?php p($l->t('Account access')) ?></h2>
 	<p class="info">
 		<?php p($l->t('Currently logged in as %1$s (%2$s).', [