Unify settings designfeature/settings-design-improvements

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>

18 files changed, 27 insertions, 22 deletions

diff --git a/apps/federation/templates/settings-admin.php b/apps/federation/templates/settings-admin.php
index dabd341ce72..c02f128628b 100644
--- a/apps/federation/templates/settings-admin.php
+++ b/apps/federation/templates/settings-admin.php
@@ -12,7 +12,7 @@ use OCA\Federation\TrustedServers;
 script('federation', 'settings-admin');
 style('federation', 'settings-admin')
 ?>
-<div id="ocFederationSettings" class="section">
+<div id="ocFederationSettings" class="settings-section">
 	<h2><?php p($l->t('Trusted servers')); ?></h2>
 	<p class="settings-hint"><?php p($l->t('Federation allows you to connect with other trusted servers to exchange the account directory. For example this will be used to auto-complete external accounts for federated sharing. It is not necessary to add a server as trusted server in order to create a federated share.')); ?></p>
 
diff --git a/apps/files/src/components/PersonalSettings.vue b/apps/files/src/components/PersonalSettings.vue
index b076b0c1e3d..33aafa9f18b 100644
--- a/apps/files/src/components/PersonalSettings.vue
+++ b/apps/files/src/components/PersonalSettings.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div id="files-personal-settings" class="section">
+	<div id="files-personal-settings" class="settings-section">
 		<h2>{{ t('files', 'Files') }}</h2>
 		<TransferOwnershipDialogue />
 	</div>
diff --git a/apps/files/templates/settings-personal.php b/apps/files/templates/settings-personal.php
index 06ea218f3b0..554a08ccd01 100644
--- a/apps/files/templates/settings-personal.php
+++ b/apps/files/templates/settings-personal.php
@@ -8,5 +8,5 @@
 script(\OCA\Files\AppInfo\Application::APP_ID, 'personal-settings');
 
 ?>
-<div id="files-personal-settings" class="section">
+<div id="files-personal-settings" class="settings-section">
 </div>
diff --git a/apps/files_external/templates/settings.php b/apps/files_external/templates/settings.php
index 6d6e9fd5b85..f163ae4bd72 100644
--- a/apps/files_external/templates/settings.php
+++ b/apps/files_external/templates/settings.php
@@ -105,7 +105,7 @@ function writeParameterInput($parameter, $options, $classes = []) {
 <?php
 	$canCreateNewLocalStorage = \OC::$server->getConfig()->getSystemValue('files_external_allow_create_new_local', true);
 ?>
-<form data-can-create="<?php echo $canCreateMounts?'true':'false' ?>" data-can-create-local="<?php echo $canCreateNewLocalStorage?'true':'false' ?>" id="files_external" class="section" data-encryption-enabled="<?php echo $_['encryptionEnabled']?'true': 'false'; ?>">
+<form data-can-create="<?php echo $canCreateMounts?'true':'false' ?>" data-can-create-local="<?php echo $canCreateNewLocalStorage?'true':'false' ?>" id="files_external" class="settings-section" data-encryption-enabled="<?php echo $_['encryptionEnabled']?'true': 'false'; ?>">
 	<h2 class="inlineblock" data-anchor-name="external-storage"><?php p($l->t('External storage')); ?></h2>
 	<a target="_blank" rel="noreferrer" class="icon-info" title="<?php p($l->t('Open documentation'));?>" href="<?php p(link_to_docs('admin-external-storage')); ?>"></a>
 	<p class="settings-hint"><?php p($l->t('External storage enables you to mount external storage services and devices as secondary Nextcloud storage devices. You may also allow people to mount their own external storage services.')); ?></p>
diff --git a/apps/files_sharing/src/components/PersonalSettings.vue b/apps/files_sharing/src/components/PersonalSettings.vue
index e3fe603c342..baaa8ff3234 100644
--- a/apps/files_sharing/src/components/PersonalSettings.vue
+++ b/apps/files_sharing/src/components/PersonalSettings.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="!enforceAcceptShares || allowCustomDirectory" id="files-sharing-personal-settings" class="section">
+	<div v-if="!enforceAcceptShares || allowCustomDirectory" id="files-sharing-personal-settings" class="settings-section">
 		<h2>{{ t('files_sharing', 'Sharing') }}</h2>
 		<p v-if="!enforceAcceptShares">
 			<input id="files-sharing-personal-settings-accept"
diff --git a/apps/files_sharing/templates/Settings/personal.php b/apps/files_sharing/templates/Settings/personal.php
index 30caeb16206..58d99a8fbda 100644
--- a/apps/files_sharing/templates/Settings/personal.php
+++ b/apps/files_sharing/templates/Settings/personal.php
@@ -25,5 +25,5 @@ declare(strict_types=1);
 script(\OCA\Files_Sharing\AppInfo\Application::APP_ID, 'personal-settings');
 
 ?>
-<div id="files-sharing-personal-settings" class="section">
+<div id="files-sharing-personal-settings" class="settings-section">
 </div>
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 04111cda4f7..27fb86c255a 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -559,8 +559,11 @@ span.usersLastLoginTooltip {
 }
 
 /* SETTINGS SECTIONS */
-.section {
-	margin-bottom: 0;
+.settings-section:not(.settings-vue), .section {
+	display: block;
+	padding: 0 0 calc(var(--default-grid-baseline)* 5) 0;
+	margin: calc(var(--default-grid-baseline)* 7);
+	width: min(900px, 100% - var(--default-grid-baseline)* 7* 2);
 	/* section divider lines, none needed for last one */
 	&:not(:last-child) {
 		border-bottom: 1px solid var(--color-border);
@@ -578,6 +581,7 @@ span.usersLastLoginTooltip {
 	}
 }
 
+
 /* LOG */
 #log {
 	white-space: normal;
diff --git a/apps/settings/src/components/AuthTokenSection.vue b/apps/settings/src/components/AuthTokenSection.vue
index a1689846130..d147d5c20a5 100644
--- a/apps/settings/src/components/AuthTokenSection.vue
+++ b/apps/settings/src/components/AuthTokenSection.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div id="security" class="section">
+	<div id="security" class="settings-section">
 		<h2>{{ t('settings', 'Devices & sessions', {}, undefined, {sanitize: false}) }}</h2>
 		<p class="settings-hint hidden-when-empty">
 			{{ t('settings', 'Web, desktop and mobile clients currently logged in to your account.') }}
diff --git a/apps/settings/src/components/BasicSettings/ProfileSettings.vue b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
index b64adb7bcf2..fb6900562e6 100644
--- a/apps/settings/src/components/BasicSettings/ProfileSettings.vue
+++ b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div id="profile-settings"
-		class="section">
+		class="settings-section">
 		<h2 class="inlineblock">
 			{{ t('settings', 'Profile') }}
 		</h2>
diff --git a/apps/settings/src/components/WebAuthn/Section.vue b/apps/settings/src/components/WebAuthn/Section.vue
index 7e9c75b9264..6827f5ca52f 100644
--- a/apps/settings/src/components/WebAuthn/Section.vue
+++ b/apps/settings/src/components/WebAuthn/Section.vue
@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<div id="security-webauthn" class="section">
+	<NcSettingsSection id="security-webauthn">
 		<h2>{{ t('settings', 'Passwordless Authentication') }}</h2>
 		<p class="settings-hint hidden-when-empty">
 			{{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }}
@@ -47,20 +47,20 @@
 			:is-https="isHttps"
 			:is-localhost="isLocalhost"
 			@added="deviceAdded" />
-	</div>
+	</NcSettingsSection>
 </template>
 
 <script>
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import '@nextcloud/password-confirmation/dist/style.css'
 import sortBy from 'lodash/fp/sortBy.js'
 
 import AddDevice from './AddDevice.vue'
 import Device from './Device.vue'
 import logger from '../../logger.ts'
 import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.js'
+import { NcSettingsSection } from '@nextcloud/vue'
 
 const sortByName = sortBy('name')
 
@@ -69,6 +69,7 @@ export default {
 		AddDevice,
 		Device,
 		NcNoteCard,
+		NcSettingsSection,
 	},
 	props: {
 		initialDevices: {
diff --git a/apps/settings/templates/settings/admin/additional-mail.php b/apps/settings/templates/settings/admin/additional-mail.php
index 14e0498cffe..2e048232ade 100644
--- a/apps/settings/templates/settings/admin/additional-mail.php
+++ b/apps/settings/templates/settings/admin/additional-mail.php
@@ -50,7 +50,7 @@ $mail_sendmailmode = [
 
 ?>
 
-<div class="section" id="mail_general_settings">
+<div class="settings-section" id="mail_general_settings">
 	<form id="mail_general_settings_form" class="mail_settings">
 		<h2><?php p($l->t('Email server'));?></h2>
 		<a 	target="_blank"
diff --git a/apps/settings/templates/settings/admin/overview.php b/apps/settings/templates/settings/admin/overview.php
index 0a097e0f6ee..4172fdd1296 100644
--- a/apps/settings/templates/settings/admin/overview.php
+++ b/apps/settings/templates/settings/admin/overview.php
@@ -27,7 +27,7 @@
 
 ?>
 
-<div id="security-warning" class="section">
+<div id="security-warning" class="settings-section">
 	<div class="security-warning__heading">
 		<h2><?php p($l->t('Security & setup warnings'));?></h2>
 		<a 	target="_blank"
@@ -71,7 +71,7 @@
 
 </div>
 
-<div id="version" class="section">
+<div id="version" class="settings-section">
 	<!-- should be the last part, so Updater can follow if enabled (it has no heading therefore). -->
 	<h2><?php p($l->t('Version'));?></h2>
 	<p><strong><a href="<?php print_unescaped($theme->getBaseUrl()); ?>" rel="noreferrer noopener" target="_blank">Nextcloud Hub 8</a> (<?php p(OC_Util::getHumanVersion()) ?>)</strong></p>
diff --git a/apps/settings/templates/settings/personal/development.notice.php b/apps/settings/templates/settings/personal/development.notice.php
index a8a807b2dde..f4f011cbef1 100644
--- a/apps/settings/templates/settings/personal/development.notice.php
+++ b/apps/settings/templates/settings/personal/development.notice.php
@@ -1,4 +1,4 @@
-<div class="section development-notice">
+<div class="settings-section development-notice">
 	<p>
 		<a href="<?php p($_['reasons-use-nextcloud-pdf-link']); ?>" id="open-reasons-use-nextcloud-pdf" class="link-button icon-file" target="_blank"><?php p($l->t('Reasons to use Nextcloud in your organization'));?></a>
 	</p>
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index cff69e5b621..bf518835a1d 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -36,7 +36,7 @@ script('settings', [
 ]);
 ?>
 <?php if (!$_['isFairUseOfFreePushService']) : ?>
-	<div class="section">
+	<div class="settings-section">
 		<div class="warning">
 			<?php p($l->t('This community release of Nextcloud is unsupported and instant notifications are unavailable.')); ?>
 		</div>
diff --git a/apps/settings/templates/settings/personal/security/authtokens.php b/apps/settings/templates/settings/personal/security/authtokens.php
index e90698f5eaf..d7bc517dbea 100644
--- a/apps/settings/templates/settings/personal/security/authtokens.php
+++ b/apps/settings/templates/settings/personal/security/authtokens.php
@@ -26,4 +26,4 @@ script('settings', 'vue-settings-personal-security');
 
 ?>
 
-<div id="security-authtokens" class="section"></div>
+<div id="security-authtokens" class="settings-section"></div>
diff --git a/apps/settings/templates/settings/personal/security/twofactor.php b/apps/settings/templates/settings/personal/security/twofactor.php
index 0ec402bd613..9b86d1920d4 100644
--- a/apps/settings/templates/settings/personal/security/twofactor.php
+++ b/apps/settings/templates/settings/personal/security/twofactor.php
@@ -24,7 +24,7 @@ declare(strict_types=1);
 
 ?>
 
-<div id="two-factor-auth" class="section">
+<div id="two-factor-auth" class="settings-section">
 	<h2><?php p($l->t('Two-Factor Authentication'));?></h2>
 	<a target="_blank" rel="noreferrer noopener" class="icon-info"
 	   title="<?php p($l->t('Open documentation'));?>"
diff --git a/apps/settings/templates/settings/personal/security/webauthn.php b/apps/settings/templates/settings/personal/security/webauthn.php
index 74e219a5211..0f9b10779ea 100644
--- a/apps/settings/templates/settings/personal/security/webauthn.php
+++ b/apps/settings/templates/settings/personal/security/webauthn.php
@@ -26,4 +26,4 @@ script('settings', 'vue-settings-personal-webauthn');
 
 ?>
 
-<div id="security-webauthn" class="section"></div>
+<div id="security-webauthn" class="settings-section"></div>
diff --git a/apps/user_ldap/templates/settings.php b/apps/user_ldap/templates/settings.php
index 4fb24655000..347c7314268 100644
--- a/apps/user_ldap/templates/settings.php
+++ b/apps/user_ldap/templates/settings.php
@@ -59,7 +59,7 @@ style('user_ldap', 'settings');
 
 ?>
 
-<form id="ldap" class="section" action="#" method="post">
+<form id="ldap" class="settings-section" action="#" method="post">
 	<h2><?php p($l->t('LDAP/AD integration')); ?></h2>
 
 	<div id="ldapSettings">