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>

17 files changed, 120 insertions, 130 deletions

diff --git a/core/templates/403.php b/core/templates/403.php
index 1ee3569ed03..d41d6cd3083 100644
--- a/core/templates/403.php
+++ b/core/templates/403.php
@@ -9,11 +9,9 @@ if (!isset($_)) {//standalone  page is not supported anymore - redirect to /
 }
 // @codeCoverageIgnoreEnd
 ?>
-<ul>
-	<li class='error'>
-		<?php p($l->t('Access forbidden')); ?><br>
+<div class="guest-box">
+	<h2><?php p($l->t('Access forbidden')); ?></h2>
 		<p class='hint'><?php if (isset($_['message'])) {
 	p($_['message']);
 }?></p>
-	</li>
 </ul>
diff --git a/core/templates/404-profile.php b/core/templates/404-profile.php
index 867d5d8a1d3..30d03507654 100644
--- a/core/templates/404-profile.php
+++ b/core/templates/404-profile.php
@@ -17,7 +17,7 @@ if (!isset($_)) { //standalone  page is not supported anymore - redirect to /
 	<?php print_unescaped($_['content']) ?>
 <?php else : ?>
 	<div class="body-login-container update">
-		<div class="icon-big icon-error icon-white"></div>
+		<div class="icon-big icon-error"></div>
 		<h2><?php p($l->t('Profile not found')); ?></h2>
 		<p class="infogroup"><?php p($l->t('The profile does not exist.')); ?></p>
 		<p><a class="button primary" href="<?php p(\OC::$server->getURLGenerator()->linkTo('', 'index.php')) ?>">
diff --git a/core/templates/404.php b/core/templates/404.php
index 10c49f34b6c..64595c9a092 100644
--- a/core/templates/404.php
+++ b/core/templates/404.php
@@ -16,7 +16,7 @@ if (!isset($_)) {//standalone  page is not supported anymore - redirect to /
 	<?php print_unescaped($_['content']) ?>
 <?php else: ?>
 	<div class="body-login-container update">
-		<div class="icon-big icon-search icon-white"></div>
+		<div class="icon-big icon-search"></div>
 		<h2><?php p($l->t('File not found')); ?></h2>
 		<p class="infogroup"><?php p($l->t('The document could not be found on the server. Maybe the share was deleted or has expired?')); ?></p>
 		<p><a class="button primary" href="<?php p(\OC::$server->getURLGenerator()->linkTo('', 'index.php')) ?>">
diff --git a/core/templates/error.php b/core/templates/error.php
index c6f7706edc1..2e5488ae8db 100644
--- a/core/templates/error.php
+++ b/core/templates/error.php
@@ -1,4 +1,4 @@
-<div class="error">
+<div class="guest-box">
 	<h2><?php p($l->t('Error')) ?></h2>
 	<ul>
 	<?php foreach ($_["errors"] as $error):?>
diff --git a/core/templates/exception.php b/core/templates/exception.php
index c8a26220092..d26e9ff4f94 100644
--- a/core/templates/exception.php
+++ b/core/templates/exception.php
@@ -20,7 +20,7 @@ function print_exception(Throwable $e, \OCP\IL10N $l): void {
 }
 
 ?>
-<div class="error error-wide">
+<div class="guest-box wide">
 	<h2><?php p($l->t('Internal Server Error')) ?></h2>
 	<p><?php p($l->t('The server was unable to complete your request.')) ?></p>
 	<p><?php p($l->t('If this happens again, please send the technical details below to the server administrator.')) ?></p>
diff --git a/core/templates/installation.php b/core/templates/installation.php
index 0137466c9f1..b08f1cd9ac1 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -5,7 +5,7 @@ script('core', 'install');
 <input type='hidden' id='hasSQLite' value='<?php p($_['hasSQLite']) ?>'>
 <input type='hidden' id='hasPostgreSQL' value='<?php p($_['hasPostgreSQL']) ?>'>
 <input type='hidden' id='hasOracle' value='<?php p($_['hasOracle']) ?>'>
-<form action="index.php" method="post">
+<form action="index.php" method="post" class="guest-box">
 <input type="hidden" name="install" value="true">
 	<?php if (count($_['errors']) > 0): ?>
 	<fieldset class="warning">
@@ -47,14 +47,15 @@ script('core', 'install');
 				value="<?php p($_['adminpass']); ?>"
 				autocomplete="off" autocapitalize="none" autocorrect="off" required>
 			<label for="adminpass" class="infield"><?php p($l->t('Password')); ?></label>
-			<input type="checkbox" id="show" class="hidden-visually" name="show" aria-label="<?php p($l->t('Show password')); ?>">
-			<label for="show"></label>
+			<button id="show" class="toggle-password" aria-label="<?php p($l->t('Show password')); ?>">
+				<img src="<?php print_unescaped(image_path('', 'actions/toggle.svg')); ?>" alt="<?php p($l->t('Toggle password visibility')); ?>">
+			</button>
 		</p>
 	</fieldset>
 
 	<?php if (!$_['directoryIsSet'] or !$_['dbIsSet'] or count($_['errors']) > 0): ?>
 	<fieldset id="advancedHeader">
-		<legend><a id="showAdvanced" tabindex="0" href="#"><?php p($l->t('Storage & database')); ?><img src="<?php print_unescaped(image_path('', 'actions/caret-white.svg')); ?>" /></a></legend>
+		<legend><a id="showAdvanced" tabindex="0" href="#"><?php p($l->t('Storage & database')); ?><img src="<?php print_unescaped(image_path('', 'actions/caret.svg')); ?>" /></a></legend>
 	</fieldset>
 	<?php endif; ?>
 
@@ -108,13 +109,14 @@ script('core', 'install');
 					autocomplete="off" autocapitalize="none" autocorrect="off">
 			</p>
 			<p class="groupmiddle">
-				<input type="password" name="dbpass" id="dbpass" data-typetoggle="#dbpassword-toggle"
+				<input type="password" name="dbpass" id="dbpass"
 					placeholder="<?php p($l->t('Database password')); ?>"
 					value="<?php p($_['dbpass']); ?>"
 					autocomplete="off" autocapitalize="none" autocorrect="off">
 				<label for="dbpass" class="infield"><?php p($l->t('Database password')); ?></label>
-				<input type="checkbox" id="dbpassword-toggle" class="hidden-visually" name="dbpassword-toggle" aria-label="<?php p($l->t('Show password')); ?>">
-				<label for="dbpassword-toggle"></label>
+				<button id="show" class="toggle-password" aria-label="<?php p($l->t('Show password')); ?>">
+					<img src="<?php print_unescaped(image_path('', 'actions/toggle.svg')); ?>" alt="<?php p($l->t('Toggle password visibility')); ?>">
+				</button>
 			</p>
 			<p class="groupmiddle">
 				<label for="dbname" class="infield"><?php p($l->t('Database name')); ?></label>
@@ -151,7 +153,7 @@ script('core', 'install');
 	<?php endif; ?>
 
 	<?php if (!$_['dbIsSet'] or count($_['errors']) > 0): ?>
-		<fieldset id="sqliteInformation" class="warning">
+		<fieldset id="sqliteInformation" class="notecard warning">
 			<legend><?php p($l->t('Performance warning'));?></legend>
 			<p><?php p($l->t('You chose SQLite as database.'));?></p>
 			<p><?php p($l->t('SQLite should only be used for minimal and development instances. For production we recommend a different database backend.'));?></p>
diff --git a/core/templates/installation_forbidden.php b/core/templates/installation_forbidden.php
index 743d14b1330..4cb4d9c057c 100644
--- a/core/templates/installation_forbidden.php
+++ b/core/templates/installation_forbidden.php
@@ -1,6 +1,6 @@
-<div class="error">
+<div class="guest-box">
 	<h2><?php p($l->t('Error')) ?></h2>
-	<p>
+	<p class="text-left">
 		<?php p($l->t('It looks like you are trying to reinstall your Nextcloud. However the file CAN_INSTALL is missing from your config directory. Please create the file CAN_INSTALL in your config folder to continue.')) ?>
 	</p>
 </div>
diff --git a/core/templates/installation_incomplete.php b/core/templates/installation_incomplete.php
index 867f637d701..fbceb10780c 100644
--- a/core/templates/installation_incomplete.php
+++ b/core/templates/installation_incomplete.php
@@ -1,6 +1,6 @@
-<div class="error">
+<div class="guest-box">
 	<h2><?php p($l->t('Error')) ?></h2>
-	<p>
+	<p class="text-left">
 		<?php p($l->t('Could not remove CAN_INSTALL from the config folder. Please remove this file manually.')) ?>
 	</p>
 </div>
diff --git a/core/templates/login.php b/core/templates/login.php
index 6b4b9285240..58da839fbba 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -3,14 +3,6 @@
 script('core', 'login');
 ?>
 
-<div id="login"></div>
-
-<?php if (!empty($_['alt_login'])) { ?>
-    <div id="alternative-logins" class="alternative-logins">
-        <?php foreach ($_['alt_login'] as $login): ?>
-            <a class="button <?php p($login['style'] ?? ''); ?>" href="<?php print_unescaped($login['href']); ?>" >
-                <?php p($login['name']); ?>
-            </a>
-        <?php endforeach; ?>
-    </div>
-<?php } ?>
+<div>
+	<div id="login"></div>
+</div>
diff --git a/core/templates/loginflow/authpicker.php b/core/templates/loginflow/authpicker.php
index a7d4faa67bf..4e06af94348 100644
--- a/core/templates/loginflow/authpicker.php
+++ b/core/templates/loginflow/authpicker.php
@@ -36,12 +36,12 @@ $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/>
 
diff --git a/core/templates/loginflow/grant.php b/core/templates/loginflow/grant.php
index 04fdced1c62..6e09be17eeb 100644
--- a/core/templates/loginflow/grant.php
+++ b/core/templates/loginflow/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).', [
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).', [
diff --git a/core/templates/publicshareauth.php b/core/templates/publicshareauth.php
index 449216bb6f6..4af292b2dc5 100644
--- a/core/templates/publicshareauth.php
+++ b/core/templates/publicshareauth.php
@@ -1,80 +1,82 @@
 <?php
 	/** @var array $_ */
 	/** @var \OCP\IL10N $l */
-	style('core', 'guest');
-	style('core', 'publicshareauth');
-	script('core', 'publicshareauth');
+	\OCP\Util::addStyle('core', 'guest');
+	\OCP\Util::addStyle('core', 'publicshareauth');
+	\OCP\Util::addScript('core', 'publicshareauth');
 ?>
 
-<!-- password prompt form. It should be hidden when we show the email prompt form -->
-<?php if (!isset($_['identityOk'])): ?>
-	<form method="post" id="password-input-form">
-<?php else: ?>
-	<form method="post" id="password-input-form" style="display:none;">
-<?php endif; ?>
-	<fieldset class="warning">
-		<?php if (!isset($_['wrongpw'])): ?>
-			<div class="warning-info"><?php p($l->t('This share is password-protected')); ?></div>
-		<?php endif; ?>
-		<?php if (isset($_['wrongpw'])): ?>
-			<div class="warning wrongPasswordMsg"><?php p($l->t('The password is wrong or expired. Please try again or request a new one.')); ?></div>
-		<?php endif; ?>
-		<p>
-			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
-			<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
-			<input type="password" name="password" id="password"
-				placeholder="<?php p($l->t('Password')); ?>" value=""
-				autocomplete="new-password" autocapitalize="off" autocorrect="off"
-				autofocus />
-			<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
-			<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
-			<input type="submit" id="password-submit"
-				class="svg icon-confirm input-button-inline" value="" disabled="disabled" />
-		</p>
-	</fieldset>
-</form>
-
-<!-- email prompt form. It should initially be hidden -->
-<?php if (isset($_['identityOk'])): ?>
-	<form method="post" id="email-input-form">
-<?php else: ?>
-	<form method="post" id="email-input-form" style="display:none;">
-<?php endif; ?>
-	<fieldset class="warning">
-		<div class="warning-info" id="email-prompt"><?php p($l->t('Please type in your email address to request a temporary password')); ?></div>
-		 <p>
-			<input type="email" id="email" name="identityToken" placeholder="<?php p($l->t('Email address')); ?>" />
-			<input type="submit" id="password-request" name="passwordRequest" class="svg icon-confirm input-button-inline" value="" disabled="disabled"/>
-			<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
-			<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
-			<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
-		</p>
-		<?php if (isset($_['identityOk'])): ?>
-			<?php if ($_['identityOk']): ?>
-				<div class="warning-info" id="identification-success"><?php p($l->t('Password sent!')); ?></div>
-			<?php else: ?>
-				<div class="warning" id="identification-failure"><?php p($l->t('You are not authorized to request a password for this share')); ?></div>
+<div class="guest-box">
+	<!-- password prompt form. It should be hidden when we show the email prompt form -->
+	<?php if (!isset($_['identityOk'])): ?>
+		<form method="post" id="password-input-form">
+	<?php else: ?>
+		<form method="post" id="password-input-form" style="display:none;">
+	<?php endif; ?>
+		<fieldset class="warning">
+			<?php if (!isset($_['wrongpw'])): ?>
+				<div class="warning-info"><?php p($l->t('This share is password-protected')); ?></div>
 			<?php endif; ?>
-		<?php endif; ?>
-	</fieldset>
-</form>
-
-<!-- request password button -->
-<?php if (!isset($_['identityOk']) && $_['share']->getShareType() === $_['share']::TYPE_EMAIL && !$_['share']->getSendPasswordByTalk()): ?>
-	<a id="request-password-button-not-talk"><?php p($l->t('Forgot password?')); ?></a>
-<?php endif; ?>
-
-<!-- back to showShare button -->
-<form method="get">
-	<fieldset>
-		<a
-			href=""
-			id="request-password-back-button"
-<?php if (isset($_['identityOk'])): ?>
-			style="display:block;">
-<?php else: ?>
-			style="display:none;">
-<?php endif; ?>
-			<?php p($l->t('Back')); ?></a>
-	</fieldset>
-</form>
+			<?php if (isset($_['wrongpw'])): ?>
+				<div class="warning wrongPasswordMsg"><?php p($l->t('The password is wrong or expired. Please try again or request a new one.')); ?></div>
+			<?php endif; ?>
+			<p>
+				<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
+				<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
+				<input type="password" name="password" id="password"
+					placeholder="<?php p($l->t('Password')); ?>" value=""
+					autocomplete="new-password" autocapitalize="off" autocorrect="off"
+					autofocus />
+				<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
+				<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
+				<input type="submit" id="password-submit"
+					class="svg icon-confirm input-button-inline" value="" disabled="disabled" />
+			</p>
+		</fieldset>
+	</form>
+	
+	<!-- email prompt form. It should initially be hidden -->
+	<?php if (isset($_['identityOk'])): ?>
+		<form method="post" id="email-input-form">
+	<?php else: ?>
+		<form method="post" id="email-input-form" style="display:none;">
+	<?php endif; ?>
+		<fieldset class="warning">
+			<div class="warning-info" id="email-prompt"><?php p($l->t('Please type in your email address to request a temporary password')); ?></div>
+			 <p>
+				<input type="email" id="email" name="identityToken" placeholder="<?php p($l->t('Email address')); ?>" />
+				<input type="submit" id="password-request" name="passwordRequest" class="svg icon-confirm input-button-inline" value="" disabled="disabled"/>
+				<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
+				<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
+				<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
+			</p>
+			<?php if (isset($_['identityOk'])): ?>
+				<?php if ($_['identityOk']): ?>
+					<div class="warning-info" id="identification-success"><?php p($l->t('Password sent!')); ?></div>
+				<?php else: ?>
+					<div class="warning" id="identification-failure"><?php p($l->t('You are not authorized to request a password for this share')); ?></div>
+				<?php endif; ?>
+			<?php endif; ?>
+		</fieldset>
+	</form>
+	
+	<!-- request password button -->
+	<?php if (!isset($_['identityOk']) && $_['share']->getShareType() === $_['share']::TYPE_EMAIL && !$_['share']->getSendPasswordByTalk()): ?>
+		<a id="request-password-button-not-talk"><?php p($l->t('Forgot password?')); ?></a>
+	<?php endif; ?>
+	
+	<!-- back to showShare button -->
+	<form method="get">
+		<fieldset>
+			<a
+				href=""
+				id="request-password-back-button"
+	<?php if (isset($_['identityOk'])): ?>
+				style="display:block;">
+	<?php else: ?>
+				style="display:none;">
+	<?php endif; ?>
+				<?php p($l->t('Back')); ?></a>
+		</fieldset>
+	</form>
+</div>
diff --git a/core/templates/update.admin.php b/core/templates/update.admin.php
index b285a7296bf..daa6229c4c7 100644
--- a/core/templates/update.admin.php
+++ b/core/templates/update.admin.php
@@ -1,4 +1,4 @@
-<div class="update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
+<div class="guest-box update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
 	<div class="updateOverview">
 		<?php if ($_['isAppsOnlyUpgrade']) { ?>
 		<h2 class="title"><?php p($l->t('App update required')); ?></h2>
@@ -7,7 +7,7 @@
 			[$_['productName'], $_['version']])); ?></h2>
 		<?php } ?>
 		<?php if (!empty($_['appsToUpgrade'])) { ?>
-		<div class="infogroup">
+		<div class="text-left">
 			<span><?php p($l->t('The following apps will be updated:')); ?></span>
 			<ul class="content appList">
 				<?php foreach ($_['appsToUpgrade'] as $appInfo) { ?>
@@ -17,7 +17,7 @@
 		</div>
 		<?php } ?>
 		<?php if (!empty($_['incompatibleAppsList'])) { ?>
-		<div class="infogroup">
+		<div class="text-left">
 			<span><?php p($l->t('These incompatible apps will be disabled:')) ?></span>
 			<ul class="content appList">
 				<?php foreach ($_['incompatibleAppsList'] as $appInfo) { ?>
@@ -31,15 +31,13 @@
 			<?php p($l->t('The theme %s has been disabled.', [$_['oldTheme']])) ?>
 		</div>
 		<?php } ?>
-		<div class="infogroup bold">
+		<div class="text-left margin-top bold">
 			<?php p($l->t('Please make sure that the database, the config folder and the data folder have been backed up before proceeding.')) ?>
 		</div>
-		<input class="updateButton primary" type="button" value="<?php p($l->t('Start update')) ?>">
-		<div class="infogroup">
-			<em>
+		<input class="updateButton primary margin-top" type="button" value="<?php p($l->t('Start update')) ?>">
+		<div class="notecard warning">
 			<?php p($l->t('To avoid timeouts with larger installations, you can instead run the following command from your installation directory:')) ?>
 			<pre>./occ upgrade</pre>
-			</em>
 		</div>
 	</div>
 
diff --git a/core/templates/update.use-cli.php b/core/templates/update.use-cli.php
index 6e6d19483db..66cce4e521f 100644
--- a/core/templates/update.use-cli.php
+++ b/core/templates/update.use-cli.php
@@ -1,23 +1,21 @@
-<div class="update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
+<div class="guest-box update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
 	<div class="updateOverview">
 		<h2 class="title"><?php p($l->t('Update needed')) ?></h2>
-		<div class="infogroup">
+		<div class="text-left">
 			<?php if ($_['tooBig']) {
 	p($l->t('Please use the command line updater because you have a big instance with more than 50 users.'));
 } else {
 	p($l->t('Please use the command line updater because automatic updating is disabled in the config.php.'));
 } ?><br><br>
 			<?php
-			print_unescaped($l->t('For help, see the  <a target="_blank" rel="noreferrer noopener" href="%s">documentation</a>.', [link_to_docs('admin-cli-upgrade')])); ?><br><br>
+			print_unescaped($l->t('For help, see the  <a target="_blank" rel="noreferrer noopener" href="%s">documentation</a>.', [link_to_docs('admin-cli-upgrade')])); ?>
 		</div>
 	</div>
 
 	<?php if ($_['tooBig']) { ?>
-		<div class="warning updateAnyways">
+		<div class="notecard warning">
 			<p><?php p($l->t('I know that if I continue doing the update via web UI has the risk, that the request runs into a timeout and could cause data loss, but I have a backup and know how to restore my instance in case of a failure.')); ?></p>
-			<a href="?IKnowThatThisIsABigInstanceAndTheUpdateRequestCouldRunIntoATimeoutAndHowToRestoreABackup=IAmSuperSureToDoThis" class="button updateAnywaysButton"><?php p($l->t('Upgrade via web on my own risk')); ?></a>
+			<a class="button error margin-top" href="?IKnowThatThisIsABigInstanceAndTheUpdateRequestCouldRunIntoATimeoutAndHowToRestoreABackup=IAmSuperSureToDoThis"><?php p($l->t('Upgrade via web on my own risk')); ?></a>
 		</div>
 	<?php } ?>
-
-
 </div>
diff --git a/core/templates/update.user.php b/core/templates/update.user.php
index 2c6ffd43444..1cb527bb9c8 100644
--- a/core/templates/update.user.php
+++ b/core/templates/update.user.php
@@ -1,5 +1,5 @@
-<div class="body-login-container">
-	<div class="icon-big icon-error-white"></div>
+<div class="guest-box">
+	<div class="icon-big icon-error"></div>
 	<h2><?php p($l->t('Maintenance mode', [$theme->getName()])) ?></h2>
 	<p><?php p($l->t('This %s instance is currently in maintenance mode, which may take a while.', [$theme->getName()])) ?> <?php p($l->t('This page will refresh itself when the instance is available again.')) ?></p>
 	<p><?php p($l->t('Contact your system administrator if this message persists or appeared unexpectedly.')) ?></p>