Merge branch 'master' into fix/setting/accessibility-title

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

24 files changed, 160 insertions, 233 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/filepicker.html b/core/templates/filepicker.html
index 91514010cb3..484a6e12d2b 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,6 +1,6 @@
 <div id="{dialog_name}" title="{title}">
 	<span class="dirtree breadcrumb">
-		<span class="actions creatable"><a href="#" class="icon icon-add button button-add"></a>
+		<span class="actions creatable"><a href="#" class="icon icon-add button button-add" aria-label="{newtext}"></a>
 			<nav class="menu popovermenu bubble menu-left newFolderMenu">
 				<ul><li>
 				<form class="filenameform">
@@ -13,8 +13,7 @@
 
 	</span>
 
-	<input type="checkbox" class="hidden-visually" id="picker-showgridview" checked="checked" />
-	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist"></label>
+	<button id="picker-showgridview" class="icon-toggle-pictures"></button>
 	<div class="filelist-container">
 		<div class="emptycontent">
 			<div class="icon-folder"></div>
@@ -23,28 +22,28 @@
 		<table id="picker-filestable" class="filelist list-container view-grid">
 			<thead>
 				<tr>
-					<th id="headerName" class="column-name">
-						<div id="headerName-container">
-							<a class="name sort columntitle" data-sort="name">
+					<th class="column-name">
+						<div id="column-name-container">
+							<a class="name sort columntitle" data-sort="name" tabindex="0">
 								<span>{nameCol}</span>
 								<span class="sort-indicator hidden icon-triangle-n"></span>
 							</a>
 						</div>
 					</th>
-					<th id="headerSize" class="column-size">
-						<a class="size sort columntitle" data-sort="size">
+					<th class="column-size">
+						<a class="size sort columntitle" data-sort="size" tabindex="0">
 							<span>{sizeCol}</span>
 							<span class="sort-indicator hidden icon-triangle-n"></span></a>
 					</th>
-					<th id="headerDate" class="column-mtime">
-						<a id="modified" class="columntitle" data-sort="mtime">
+					<th class="column-mtime">
+						<a id="modified" class="columntitle" data-sort="mtime" tabindex="0">
 							<span>{modifiedCol}</span>
 							<span class="sort-indicator hidden icon-triangle-n"></span></a>
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr data-entryname="{filename}" data-type="{type}">
+				<tr data-entryname="{filename}" data-type="{type}" tabindex="0">
 					<td class="filename"
 						style="background-image:url({icon})">
 						<span class="filename-parts">
diff --git a/core/templates/installation.php b/core/templates/installation.php
index 0137466c9f1..45d9cfc9252 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('core', '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/layout.base.php b/core/templates/layout.base.php
index 0eb80098889..d8a54bfec2e 100644
--- a/core/templates/layout.base.php
+++ b/core/templates/layout.base.php
@@ -7,9 +7,9 @@
 		</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 		<meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>">
-		<link rel="icon" href="<?php print_unescaped(image_path('', 'favicon.ico')); /* IE11+ supports png */ ?>">
-		<link rel="apple-touch-icon" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>">
-		<link rel="mask-icon" sizes="any" href="<?php print_unescaped(image_path('', 'favicon-mask.svg')); ?>" color="<?php p($theme->getColorPrimary()); ?>">
+		<link rel="icon" href="<?php print_unescaped(image_path('core', 'favicon.ico')); /* IE11+ supports png */ ?>">
+		<link rel="apple-touch-icon" href="<?php print_unescaped(image_path('core', 'favicon-touch.png')); ?>">
+		<link rel="mask-icon" sizes="any" href="<?php print_unescaped(image_path('core', 'favicon-mask.svg')); ?>" color="<?php p($theme->getColorPrimary()); ?>">
 		<?php emit_css_loading_tags($_); ?>
 		<?php emit_script_loading_tags($_); ?>
 		<?php print_unescaped($_['headers']); ?>
diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php
index 980d9abb7c4..c275d9746b7 100644
--- a/core/templates/layout.guest.php
+++ b/core/templates/layout.guest.php
@@ -7,17 +7,20 @@
  data-requesttoken="<?php p($_['requesttoken']); ?>">
 		<meta charset="utf-8">
 		<title>
-		<?php p($theme->getTitle()); ?>
+			<?php
+				p(!empty($_['pageTitle']) ? $_['pageTitle'] . ' – ' : '');
+				p($theme->getTitle());
+			?>
 		</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 		<?php if ($theme->getiTunesAppId() !== '') { ?>
 		<meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
 		<?php } ?>
 		<meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>">
-		<link rel="icon" href="<?php print_unescaped(image_path('', 'favicon.ico')); /* IE11+ supports png */ ?>">
-		<link rel="apple-touch-icon" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>">
-		<link rel="mask-icon" sizes="any" href="<?php print_unescaped(image_path('', 'favicon-mask.svg')); ?>" color="<?php p($theme->getColorPrimary()); ?>">
-		<link rel="manifest" href="<?php print_unescaped(image_path('', 'manifest.json')); ?>">
+		<link rel="icon" href="<?php print_unescaped(image_path('core', 'favicon.ico')); /* IE11+ supports png */ ?>">
+		<link rel="apple-touch-icon" href="<?php print_unescaped(image_path('core', 'favicon-touch.png')); ?>">
+		<link rel="mask-icon" sizes="any" href="<?php print_unescaped(image_path('core', 'favicon-mask.svg')); ?>" color="<?php p($theme->getColorPrimary()); ?>">
+		<link rel="manifest" href="<?php print_unescaped(image_path('core', 'manifest.json')); ?>">
 		<?php emit_css_loading_tags($_); ?>
 		<?php emit_script_loading_tags($_); ?>
 		<?php print_unescaped($_['headers']); ?>
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 17752de10cd..7cff44fbc04 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -31,9 +31,11 @@
 <?php foreach ($_['initialStates'] as $app => $initialState) { ?>
 	<input type="hidden" id="initial-state-<?php p($app); ?>" value="<?php p(base64_encode($initialState)); ?>">
 <?php }?>
-	<div id="notification-container">
-		<div id="notification"></div>
+	<div id="skip-actions">
+		<?php if ($_['id-app-content'] !== null) { ?><a href="<?php p($_['id-app-content']); ?>" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a><?php } ?>
+		<?php if ($_['id-app-navigation'] !== null) { ?><a href="<?php p($_['id-app-navigation']); ?>" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a><?php } ?>
 	</div>
+
 	<header id="header">
 		<div class="header-left">
 			<span id="nextcloud">
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index ecb0c614dd4..6fccfb6fa40 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -23,7 +23,8 @@ $getUserAvatar = static function (int $size) use ($_): string {
 				p($theme->getTitle());
 			?>
 		</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
 		<?php if ($theme->getiTunesAppId() !== '') { ?>
 		<meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
 		<?php } ?>
@@ -50,12 +51,11 @@ $getUserAvatar = static function (int $size) use ($_): string {
 			<input type="hidden" id="initial-state-<?php p($app); ?>" value="<?php p(base64_encode($initialState)); ?>">
 		<?php }?>
 
-		<a href="#app-content" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a>
-		<a href="#app-navigation" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a>
-
-		<div id="notification-container">
-			<div id="notification"></div>
+		<div id="skip-actions">
+			<?php if ($_['id-app-content'] !== null) { ?><a href="<?php p($_['id-app-content']); ?>" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a><?php } ?>
+			<?php if ($_['id-app-navigation'] !== null) { ?><a href="<?php p($_['id-app-navigation']); ?>" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a><?php } ?>
 		</div>
+
 		<header role="banner" id="header">
 			<div class="header-left">
 				<a href="<?php print_unescaped($_['logoUrl'] ?: link_to('', 'index.php')); ?>"
@@ -67,75 +67,12 @@ $getUserAvatar = static function (int $size) use ($_): string {
 					</div>
 				</a>
 
-				<ul id="appmenu">
-					<?php foreach ($_['navigation'] as $entry): ?>
-						<li data-id="<?php p($entry['id']); ?>" class="hidden" tabindex="-1">
-							<a href="<?php print_unescaped($entry['href']); ?>"
-								<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?>
-								<?php if ($entry['active']): ?> class="active"<?php endif; ?>
-								aria-label="<?php p($entry['name']); ?>">
-									<svg width="24" height="20" viewBox="0 0 24 20" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
-										<defs>
-											<mask id="hole">
-												<rect width="100%" height="100%" fill="white"/>
-												<circle r="4.5" cx="21" cy="3" fill="black"/>
-											</mask>
-										</defs>
-										<image x="2" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image>
-										<circle class="app-icon-notification" r="3" cx="21" cy="3" fill="red"/>
-									</svg>
-								<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div>
-								<span>
-									<?php p($entry['name']); ?>
-								</span>
-							</a>
-						</li>
-					<?php endforeach; ?>
-					<li id="more-apps" class="menutoggle"
-						aria-haspopup="true" aria-controls="navigation" aria-expanded="false">
-						<a href="#" aria-label="<?php p($l->t('More apps')); ?>">
-							<div class="icon-more-white"></div>
-							<span><?php p($l->t('More')); ?></span>
-						</a>
-					</li>
-				</ul>
-
-				<nav role="navigation">
-					<div id="navigation" style="display: none;"  aria-label="<?php p($l->t('More apps menu')); ?>">
-						<div id="apps">
-							<ul>
-								<?php foreach ($_['navigation'] as $entry): ?>
-									<li data-id="<?php p($entry['id']); ?>">
-									<a href="<?php print_unescaped($entry['href']); ?>"
-										<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?>
-										<?php if ($entry['active']): ?> class="active"<?php endif; ?>
-										aria-label="<?php p($entry['name']); ?>">
-										<svg width="20" height="20" viewBox="0 0 16 16" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
-											<defs>
-												<filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter>
-												<mask id="hole">
-													<rect width="100%" height="100%" fill="white"/>
-													<circle r="4.5" cx="17" cy="3" fill="black"/>
-												</mask>
-											</defs>
-											<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image>
-											<circle class="app-icon-notification" r="3" cx="17" cy="3" fill="red"/>
-										</svg>
-										<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div>
-										<span class="app-title"><?php p($entry['name']); ?></span>
-									</a>
-									</li>
-								<?php endforeach; ?>
-							</ul>
-						</div>
-					</div>
-				</nav>
-
+				<nav id="header-left__appmenu"></nav>
 			</div>
 
 			<div class="header-right">
-				<div id="notifications"></div>
 				<div id="unified-search"></div>
+				<div id="notifications"></div>
 				<div id="contactsmenu">
 					<div class="menutoggle" tabindex="0" role="button"
 					aria-haspopup="true" aria-controls="contactsmenu-menu" aria-expanded="false">
@@ -146,7 +83,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
 				</div>
 				<div id="settings">
 					<div id="expand" tabindex="0" role="button" class="menutoggle"
-						aria-label="<?php p($l->t('Settings'));?>"
+						aria-label="<?php p($l->t('Open settings menu'));?>"
 						aria-haspopup="true" aria-controls="expanddiv" aria-expanded="false">
 						<div id="avatardiv-menu" class="avatardiv<?php if ($_['userAvatarSet']) {
 				print_unescaped(' avatardiv-shown');
@@ -169,12 +106,11 @@ $getUserAvatar = static function (int $size) use ($_): string {
 							<?php } ?>
 						</div>
 					</div>
-					<nav class="settings-menu" id="expanddiv" style="display:none;"
-						aria-label="<?php p($l->t('Settings menu'));?>">
+					<nav class="settings-menu" id="expanddiv" style="display:none;">
 					<ul>
 					<?php foreach ($_['settingsnavigation'] as $entry):?>
 						<li data-id="<?php p($entry['id']); ?>">
-							<a href="<?php print_unescaped($entry['href']); ?>"
+							<a href="<?php print_unescaped($entry['href'] !== '' ? $entry['href'] : '#'); ?>"
 								<?php if ($entry["active"]): ?> class="active"<?php endif; ?>>
 								<img alt="" src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>">
 								<?php p($entry['name']) ?>
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..68c53818a92 100644
--- a/core/templates/loginflow/authpicker.php
+++ b/core/templates/loginflow/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->linkToRoute('core.ClientFlowLogin.grantPage', ['stateToken' => $_['stateToken'], 'clientIdentifier' => $_['clientIdentifier'], 'oauthState' => $_['oauthState'], 'user' => $_['user'], 'direct' => $_['direct']])) ?>">
+		<form id="login-form" action="<?php p($urlGenerator->linkToRoute('core.ClientFlowLogin.grantPage', ['stateToken' => $_['stateToken'], 'clientIdentifier' => $_['clientIdentifier'], 'oauthState' => $_['oauthState'], 'user' => $_['user'], 'direct' => $_['direct']])) ?>" 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.ClientFlowLogin.apptokenRedirect')); ?>" method="post" id="app-token-login-field" class="hidden">
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..b7ff617bd30 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 id="login-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 74303ce02ea..4af292b2dc5 100644
--- a/core/templates/publicshareauth.php
+++ b/core/templates/publicshareauth.php
@@ -1,83 +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"><?php p($l->t('The password is wrong. Try again.')); ?></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()): ?>
-	<input type="button"
-		id="request-password-button-not-talk"
-		value="<?php p($l->t('Request password')); ?>"
-		class="primary" />
-<?php endif; ?>
-
-<!-- back to showShare button -->
-<form method="get">
-	<fieldset>
-		<input type="submit"
-			id="request-password-back-button"
-			value="<?php p($l->t('Back')); ?>"
-			class="primary"
-<?php if (isset($_['identityOk'])): ?>
-			style="display:block;" />
-<?php else: ?>
-			style="display:none;" />
-<?php endif; ?>
-	</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/twofactorsetupselection.php b/core/templates/twofactorsetupselection.php
index 837d171a80d..fe4e3517351 100644
--- a/core/templates/twofactorsetupselection.php
+++ b/core/templates/twofactorsetupselection.php
@@ -24,7 +24,7 @@ declare(strict_types=1);
 
 ?>
 <div class="body-login-container update">
-	<h2 class="two-factor-header"><?php p($l->t('Setup two-factor authentication')) ?></h2>
+	<h2 class="two-factor-header"><?php p($l->t('Set up two-factor authentication')) ?></h2>
 	<?php p($l->t('Enhanced security is enforced for your account. Choose which provider to set up:')) ?>
 	<ul>
 	<?php foreach ($_['providers'] as $provider): ?>
diff --git a/core/templates/untrustedDomain.php b/core/templates/untrustedDomain.php
index 75054106ab2..1ae8b73d9b8 100644
--- a/core/templates/untrustedDomain.php
+++ b/core/templates/untrustedDomain.php
@@ -1,6 +1,6 @@
 <?php /** @var array $_ */ ?>
 
-<div class="error">
+<div class="guest-box">
 	<h2><?php p($l->t('Access through untrusted domain')); ?></h2>
 
 	<p>
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>