From 5829fcd68534885ffee8762d54b203b53d771621 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Mon, 1 Oct 2018 23:37:29 +0200
Subject: [PATCH 1/4] Change heading weights from Light to Semibold for better
 information architecture

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files_sharing/css/public.scss |  1 -
 core/css/apps.scss                 | 10 +++++++---
 core/css/guest.css                 |  8 ++++++--
 core/css/header.scss               |  6 +++---
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 50dfa3e9c5..c524283317 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -164,7 +164,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 f294f8aa51..a9e5a41910 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 fc926688c4..1d5b266eda 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -48,15 +48,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 4c0f05f9cc..1356ef4266 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -213,7 +213,7 @@
 .header-appname {
 	color: var(--color-primary-text);
 	font-size: 16px;
-	font-weight: 300;
+	font-weight: 600;
 	margin: 0;
 	padding: 0;
 	padding-right: 5px;
@@ -357,12 +357,12 @@ nav[role='navigation'] {
 		&:active {
 			color: var(--color-primary-text);
 
-			#expandDisplayName, 
+			#expandDisplayName,
 			.avatardiv{
 				border-radius: 50%;
 				border: 2px solid var(--color-primary-text);
 				margin: -2px;
-			} 
+			}
 			.avatardiv{
 				background-color: var(--color-primary-text);
 			}

From b93ee7f515d4bb4eedb7c3657549e5fde2ea67aa Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 2 Oct 2018 12:02:09 +0200
Subject: [PATCH 2/4] Change h2 to h3 on personal settings page

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/css/settings.scss                    |  4 +-
 .../settings/personal/personal.info.php       | 38 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 22e999061f..fb7f5a22a8 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -213,7 +213,7 @@ select {
 		clear: both;
 	}
 	> div {
-		h2 {
+		h3 {
 			position: relative;
 			display: inline-flex;
 			flex-wrap: nowrap;
@@ -1569,4 +1569,4 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			user-select: none;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index a0d766f88f..9919df521f 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']);?>

From ba17caaec02953193efcf3966dd66105920cdd93 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 2 Oct 2018 16:20:37 +0200
Subject: [PATCH 3/4] Font-weight exception, use light for personal settings h3

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/css/settings.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index fb7f5a22a8..a45423e0d5 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 {
@@ -219,6 +224,8 @@ select {
 			flex-wrap: nowrap;
 			justify-content: flex-start;
 			width: 100%;
+			font-weight: 300;
+
 			> label {
 				white-space: nowrap;
 				text-overflow: ellipsis;

From 26e952f3f245b44da6e15f21979b3b1243727651 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 2 Oct 2018 16:20:53 +0200
Subject: [PATCH 4/4] Fix federation-menu Javascript to use h3

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/js/federationsettingsview.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js
index d20d7bb78b..e2781833ed 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');