Added styling to settings page.

frontend/app/js/views/Auth/Register/index.jsx

@@ -79,7 +79,7 @@ export default class Register extends Component {
 				<div id="recaptcha" />
 				<p>{ t("register:byLoggingIn", { termsOfService: <a href="/terms">{ t("general:termsOfService") }</a>, privacyPolicy: <a href="/privacy">{ t("general:privacyPolicy") }</a> }) }</p>
 				<button onClick={ this.register }>{ t("register:register") }</button>
-				<a className="button github-button" href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>{ t("register:registerWithGitHub") }</a>
+				<a className="button gray-button" href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>{ t("register:registerWithGitHub") }</a>
 			</main>
 		);
 	}

frontend/app/js/views/Auth/Settings/index.jsx

@@ -6,6 +6,7 @@ import { NavLink } from "react-router-dom";
 import { translate } from "react-i18next";
 
 import config from "config";
+import "settings.scss";
 
 import CustomInput from "components/CustomInput.jsx";
 import CustomMessages from "components/CustomMessages.jsx";
@@ -197,15 +198,15 @@ export default class Settings extends Component {
 	linkButtons = () => {
 		const newPassword = <CustomInput key="newPassword" type="password" name="newPassword" label={ this.props.t("general:newPasswordInput") } placeholder={ this.props.t("general:newPasswordInput") } onRef={ ref => (this.input.newPassword = ref) } />;
 		const changePasswordButton = <button key="changePassword" onClick={ this.changePassword }>{ this.props.t("settings:changePassword") }</button>;
-		const linkPassword = <NavLink key="linkPassword" to="/settings/setpassword" >{ this.props.t("settings:addAPasswordToAccount") }</NavLink>;
-		const linkGitHub = <a key="linkGitHub" href={ config.serverDomain + "/auth/github/link" }>{ this.props.t("settings:linkGitHubToAccount") }</a>;
+		const linkPassword = <NavLink key="linkPassword" className="button" to="/settings/setpassword" >{ this.props.t("settings:addAPasswordToAccount") }</NavLink>;
+		const linkGitHub = <a key="linkGitHub" className="gray-button" href={ config.serverDomain + "/auth/github/link" }>{ this.props.t("settings:linkGitHubToAccount") }</a>;
 		const unlinkGitHub = (
-			<button key="unlinkGitHub" onClick={ this.unlinkGitHub }>
+			<button key="unlinkGitHub" className="red-button" onClick={ this.unlinkGitHub }>
 				{ this.props.t("settings:removeLoggingInWithGitHub") }
 			</button>
 		);
 		const unlinkPassword = (
-			<button key="unlinkPassword" onClick={ this.unlinkPassword }>
+			<button key="unlinkPassword" className="red-button" onClick={ this.unlinkPassword }>
 				{ this.props.t("settings:removeLoggingInWithPassword") }
 			</button>
 		);
@@ -228,21 +229,23 @@ export default class Settings extends Component {
 		const { t } = this.props;
 
 		return (
-			<div>
+			<main>
 				<h1>{ t("settings:title") }</h1>
 				<CustomMessages onRef={ ref => (this.messages = ref) } />
-				<div>
-					<h2>{ this.props.t("settings:general") }</h2>
-					<CustomInput type="email" name="email" label={ this.props.t("general:emailInput") } placeholder={ this.props.t("general:emailInput") } onRef={ ref => (this.input.email = ref) } />
-					<CustomInput type="username" name="username" label={ this.props.t("general:usernameInput") } placeholder={ this.props.t("general:usernameInput") } onRef={ ref => (this.input.username = ref) } />
-					<button onClick={ this.saveChanges }>{ this.props.t("settings:saveChanges") }</button>
+				<div className="sections">
+					<div className="section general-section">
+						<h2>{ this.props.t("settings:general") }</h2>
+						<CustomInput type="email" name="email" label={ this.props.t("general:emailInput") } placeholder={ this.props.t("general:emailInput") } onRef={ ref => (this.input.email = ref) } />
+						<CustomInput type="username" name="username" label={ this.props.t("general:usernameInput") } placeholder={ this.props.t("general:usernameInput") } onRef={ ref => (this.input.username = ref) } />
+						<button onClick={ this.saveChanges }>{ this.props.t("settings:saveChanges") }</button>
+					</div>
+					<div className="section security-section">
+						<h2>{ this.props.t("settings:security") }</h2>
+						{ this.linkButtons() }
+						<button className="red-button" onClick={ this.logOutEverywhere }>{ this.props.t("settings:logOutEverywhere") }</button>
+					</div>
 				</div>
-				<div>
-					<h2>{ this.props.t("settings:security") }</h2>
-					{ this.linkButtons() }
-					<button onClick={ this.logOutEverywhere }>{ this.props.t("settings:logOutEverywhere") }</button>
-				</div>
-			</div>
+			</main>
 		);
 	}
 }

frontend/app/styles/register.scss

@@ -21,10 +21,6 @@ main {
 			transform-origin: 152px 0;
 		}
 	}
-
-	.github-button {
-		background-color: $musare_color_secondary_gray;
-	}
 }
 
 @include responsive(smallest) {

frontend/app/styles/settings.scss

@@ -0,0 +1,88 @@
+@import "colors";
+@import "breakpoints";
+
+main {
+	h2 {
+		color: $musare_color_primary_gray;
+		text-align: center;
+	}
+}
+
+@include responsive(smallest) {
+	h2 {
+		font-size: 20px;
+		line-height: 27px;
+		margin-bottom: 12px;
+	}
+
+	.general-section {
+		button:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.security-section {
+		margin-top: 16px;
+	}
+}
+
+@include responsive(small) {
+	h2 {
+		font-size: 35px;
+		line-height: 47px;
+		margin-bottom: 26px;
+	}
+
+	.general-section {
+		button:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.security-section {
+		margin-top: 34px;
+	}
+}
+
+@include responsive(medium) {
+	h2 {
+		font-size: 52px;
+		line-height: 69px;
+		margin-bottom: 39px;
+	}
+
+	.general-section {
+		button:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.security-section {
+		margin-top: 51px;
+	}
+}
+
+@include responsive(large) {
+	main {
+		width: 100%;
+	}
+
+	h2 {
+		font-size: 28px;
+		line-height: 37px;
+		margin-bottom: 32px;
+	}
+
+	.sections {
+		display: flex;
+		width: 100%;
+
+		.section {
+			width: 50%;
+			margin-right: 50px;
+			margin-left: 50px;
+			margin-top: 0;
+			// TODO Remove after ranges have been introduced
+		}
+	}
+}

frontend/app/styles/specific/button.scss

@@ -23,6 +23,14 @@ button, .button {
 	}
 }
 
+.gray-button {
+	background-color: $musare_color_secondary_gray;
+}
+
+.red-button {
+	background-color: $musare_color_primary_red;
+}
+
 @include responsive(smallest) {
 	button, .button {
 		font-size: 21px;
@@ -45,7 +53,7 @@ button, .button {
 	button, .button {
 		font-size: 57px;
 		line-height: 76px;
-		padding: 11px 0;
+		padding: 33px 0;
 		margin-bottom: 39px;
 	}
 }