Merge pull request #11538 from nextcloud/heading-bold

Set headings to Semibold for better information architecture

7 files changed, 44 insertions, 30 deletions

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 0a66225d7e3..1423705ffc9 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -170,7 +170,6 @@ thead {
 	position: relative;
 	font-weight: 300;
 	font-size: 11px;
-	opacity: .57;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
diff --git a/core/css/apps.scss b/core/css/apps.scss
index f294f8aa512..a9e5a41910f 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -18,16 +18,20 @@
 
 /* BASE STYLING ------------------------------------------------------------ */
 
+h2,
+h3,
+h4 {
+	font-weight: 600;
+}
+
 h2 {
 	font-size: 20px;
-	font-weight: 300;
 	margin-bottom: 12px;
 	line-height: 140%;
 }
 
 h3 {
 	font-size: 15px;
-	font-weight: 300;
 	margin: 12px 0;
 }
 
@@ -842,7 +846,7 @@ $popovericon-size: 16px;
 		// Required right-distance is half menu icon size + right padding
 		// = 16px/2 + 14px = 22px
 		// popover right margin is 5px, arrow width is 9px to center and border is 1px
-		// 22px - 9px - 5px - 1px = 7px 
+		// 22px - 9px - 5px - 1px = 7px
 		right: 7px;
 		/* change this to adjust the arrow position */
 		border: solid transparent;
diff --git a/core/css/guest.css b/core/css/guest.css
index 4645e97910f..47ceb7b93e0 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -53,15 +53,19 @@ em {
 }
 
 /* heading styles */
+h2,
+h3,
+h4 {
+	font-weight: 600;
+}
+
 h2 {
 	font-size: 20px;
-	font-weight: 300;
 	margin-bottom: 12px;
 	line-height: 140%;
 }
 h3 {
 	font-size: 15px;
-	font-weight: 300;
 	margin: 12px 0;
 }
 
diff --git a/core/css/header.scss b/core/css/header.scss
index 5fb4889d8f2..d974c2992e9 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -212,7 +212,7 @@
 .header-appname {
 	color: var(--color-primary-text);
 	font-size: 16px;
-	font-weight: 300;
+	font-weight: 600;
 	margin: 0;
 	padding: 0;
 	padding-right: 5px;
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 48d7b555f09..c4405f9fffe 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -104,6 +104,11 @@ input {
 	display: inline-grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr 1fr 1fr;
+
+	/* Same font-weight exception as for .personal-settings-container */
+	> div h3 {
+		font-weight: 300;
+	}
 }
 
 .personal-show-container {
@@ -213,12 +218,14 @@ select {
 		clear: both;
 	}
 	> div {
-		h2 {
+		h3 {
 			position: relative;
 			display: inline-flex;
 			flex-wrap: nowrap;
 			justify-content: flex-start;
 			width: 100%;
+			font-weight: 300;
+
 			> label {
 				white-space: nowrap;
 				text-overflow: ellipsis;
diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js
index d20d7bb78b6..e2781833ed7 100644
--- a/settings/js/federationsettingsview.js
+++ b/settings/js/federationsettingsview.js
@@ -62,7 +62,7 @@
 		render: function() {
 			var self = this;
 			_.each(this._inputFields, function(field) {
-				var $icon = self.$('#' + field + 'form h2 > .federation-menu');
+				var $icon = self.$('#' + field + 'form h3 > .federation-menu');
 				var scopeMenu = new OC.Settings.FederationScopeMenu({field: field});
 
 				self.listenTo(scopeMenu, 'select:scope', function(scope) {
@@ -189,8 +189,8 @@
 		},
 
 		_setFieldScopeIcon: function(field, scope) {
-			var $icon = this.$('#' + field + 'form > h2 .icon-federation-menu');
-			
+			var $icon = this.$('#' + field + 'form > h3 .icon-federation-menu');
+
 			$icon.removeClass('icon-password');
 			$icon.removeClass('icon-contacts-dark');
 			$icon.removeClass('icon-link');
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index a0d766f88f3..9919df521f6 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -40,14 +40,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
 	<div id="personal-settings-avatar-container" class="personal-settings-container">
 		<div>
 			<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
-				<h2>
+				<h3>
 					<label><?php p($l->t('Profile picture')); ?></label>
 					<div class="federation-menu">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
 					</div>
-				</h2>
+				</h3>
 				<div id="displayavatar">
 					<div class="avatardiv"></div>
 					<div class="warning hidden"></div>
@@ -75,7 +75,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			</form>
 		</div>
 		<div class="personal-settings-setting-box personal-settings-group-box section">
-			<h2><?php p($l->t('Details')); ?></h2>
+			<h3><?php p($l->t('Details')); ?></h3>
 			<div id="groups" class="personal-info icon-user">
 				<p><?php p($l->t('You are a member of the following groups:')); ?></p>
 				<p id="groups-groups">
@@ -102,14 +102,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
 	<div class="personal-settings-container">
 		<div class="personal-settings-setting-box">
 			<form id="displaynameform" class="section">
-				<h2>
+				<h3>
 					<label for="displayname"><?php p($l->t('Full name')); ?></label>
 					<div class="federation-menu">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
 					</div>
-				</h2>
+				</h3>
 				<input type="text" id="displayname" name="displayname"
 					<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
 					   value="<?php p($_['displayName']) ?>"
@@ -126,14 +126,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		</div>
 		<div class="personal-settings-setting-box">
 			<form id="emailform" class="section">
-				<h2>
+				<h3>
 					<label for="email"><?php p($l->t('Email')); ?></label>
 					<div class="federation-menu">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
 					</div>
-				</h2>
+				</h3>
 				<div class="verify <?php if ($_['email'] === ''  || $_['emailScope'] !== 'public') p('hidden'); ?>">
 					<img id="verify-email" title="<?php p($_['emailMessage']); ?>" data-status="<?php p($_['emailVerification']) ?>" src="
 				<?php
@@ -169,14 +169,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<?php if (!empty($_['phone']) || $_['lookupServerUploadEnabled']) { ?>
 		<div class="personal-settings-setting-box">
 			<form id="phoneform" class="section">
-				<h2>
+				<h3>
 					<label for="phone"><?php p($l->t('Phone number')); ?></label>
 					<div class="federation-menu">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
 					</div>
-				</h2>
+				</h3>
 				<input type="tel" id="phone" name="phone" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
 					   value="<?php p($_['phone']) ?>"
 					   placeholder="<?php p($l->t('Your phone number')); ?>"
@@ -191,14 +191,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<?php if (!empty($_['address']) || $_['lookupServerUploadEnabled']) { ?>
 		<div class="personal-settings-setting-box">
 			<form id="addressform" class="section">
-				<h2>
+				<h3>
 					<label for="address"><?php p($l->t('Address')); ?></label>
 					<div class="federation-menu">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
 					</div>
-				</h2>
+				</h3>
 				<input type="text" id="address" name="address" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"');  ?>
 					   placeholder="<?php p($l->t('Your postal address')); ?>"
 					   value="<?php p($_['address']) ?>"
@@ -213,14 +213,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<?php if (!empty($_['website']) || $_['lookupServerUploadEnabled']) { ?>
 		<div class="personal-settings-setting-box">
 			<form id="websiteform" class="section">
-				<h2>
+				<h3>
 					<label for="website"><?php p($l->t('Website')); ?></label>
 					<div class="federation-menu">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
 					</div>
-				</h2>
+				</h3>
 				<?php if($_['lookupServerUploadEnabled']) { ?>
 				<div class="verify <?php if ($_['website'] === ''  || $_['websiteScope'] !== 'public') p('hidden'); ?>">
 					<img id="verify-website" title="<?php p($_['websiteMessage']); ?>" data-status="<?php p($_['websiteVerification']) ?>" src="
@@ -262,14 +262,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<?php if (!empty($_['twitter']) || $_['lookupServerUploadEnabled']) { ?>
 		<div class="personal-settings-setting-box">
 			<form id="twitterform" class="section">
-				<h2>
+				<h3>
 					<label for="twitter"><?php p($l->t('Twitter')); ?></label>
 					<div class="federation-menu">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
 						</span>
 					</div>
-				</h2>
+				</h3>
 				<?php if($_['lookupServerUploadEnabled']) { ?>
 				<div class="verify <?php if ($_['twitter'] === ''  || $_['twitterScope'] !== 'public') p('hidden'); ?>">
 					<img id="verify-twitter" title="<?php p($_['twitterMessage']); ?>" data-status="<?php p($_['twitterVerification']) ?>" src="
@@ -314,9 +314,9 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<div class="personal-settings-setting-box personal-settings-language-box">
 			<?php if (isset($_['activelanguage'])) { ?>
 				<form id="language" class="section">
-					<h2>
+					<h3>
 						<label for="languageinput"><?php p($l->t('Language'));?></label>
-					</h2>
+					</h3>
 					<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
 						<option value="<?php p($_['activelanguage']['code']);?>">
 							<?php p($_['activelanguage']['name']);?>
@@ -343,9 +343,9 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<div class="personal-settings-setting-box personal-settings-locale-box">
 			<?php if (isset($_['activelocale'])) { ?>
 				<form id="locale" class="section">
-					<h2>
+					<h3>
 						<label for="localeinput"><?php p($l->t('Locale'));?></label>
-					</h2>
+					</h3>
 					<select id="localeinput" name="lang" data-placeholder="<?php p($l->t('Locale'));?>">
 						<option value="<?php p($_['activelocale']['code']);?>">
 							<?php p($_['activelocale']['name']);?>