Re-styled all existing (already styled) pages.

frontend/app/js/components/CustomMessages.jsx

@@ -130,12 +130,14 @@ export default class CustomMessages extends Component {
 	};
 
 	render() {
-		return (
-			<div>
-				{ this.list("error") }
-				{ this.list("info") }
-				{ this.list("success") }
-			</div>
-		);
+		if (this.state.error.length > 0 || this.state.info.length > 0 || this.state.success.length) {
+			return (
+				<div>
+					{this.list("error")}
+					{this.list("info")}
+					{this.list("success")}
+				</div>
+			);
+		} else return null;
 	}
 }

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

@@ -129,7 +129,7 @@ export default class ForgotPassword extends Component {
 		const { t } = this.props;
 
 		return (
-			<main>
+			<main id="forgotPassword">
 				<h1>{ t("forgotPassword:title") }</h1>
 				<div className="steps">
 					<span className={ `step-circle ${ this.state.step === 1 ? "step-circle-active" : "" }` }>1</span>

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

@@ -56,7 +56,7 @@ export default class Login extends Component {
 		const { t } = this.props;
 
 		return (
-			<main>
+			<main id="login">
 				<h1>{ t("login:title") }</h1>
 				<CustomMessages onRef={ ref => (this.messages = ref) } />
 				<CustomInput type="email" name="email" label={ t("general:emailInput") } placeholder={ t("general:emailInput") } onRef={ ref => (this.input.email = ref) } />

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

@@ -69,7 +69,7 @@ export default class Register extends Component {
 		const { t } = this.props;
 
 		return (
-			<main>
+			<main id="register">
 				<h1>{ t("register:title") }</h1>
 				<CustomMessages onRef={ ref => (this.messages = ref) } />
 				<CustomInput type="email" name="email" label={ t("general:emailInput") } placeholder={ t("general:emailInput") } onRef={ ref => (this.input.email = ref) } />

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

@@ -141,7 +141,7 @@ export default class SetPassword extends Component {
 		const { t } = this.props;
 
 		return (
-			<main>
+			<main id="setPassword">
 				<h1>{ t("setPassword:title") }</h1>
 				<CustomMessages onRef={ ref => (this.messages = ref) } />
 				{ this.getActions() }

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

@@ -228,7 +228,7 @@ export default class Settings extends Component {
 		const { t } = this.props;
 
 		return (
-			<main>
+			<main id="settings">
 				<h1>{ t("settings:title") }</h1>
 				<CustomMessages onRef={ ref => (this.messages = ref) } />
 				<div className="sections">

frontend/app/js/views/Home/index.jsx

@@ -16,9 +16,9 @@ export default class Home extends Component {
 		const { t } = this.props;
 
 		return (
-			<div>
+			<main id="homepage">
 				<h2>{ t("home:title") }</h2>
-			</div>
+			</main>
 		);
 	}
 }

frontend/app/js/views/Privacy/index.jsx

@@ -20,7 +20,7 @@ export default class Privacy extends Component {
 		const {t} = this.props;
 
 		return (
-			<main>
+			<main id="privacy">
 				<h1>{t("privacy:title")}</h1>
 				<h3>Last Updated: January 25, 2016</h3>
 

frontend/app/js/views/Profile/index.jsx

@@ -107,7 +107,7 @@ export default class Profile extends Component {
 			(notFound)
 			? <Redirect to={"/404"}/>
 			: (
-				<main>
+				<main id="profile">
 					<h1>{user.username}</h1>
 					<CustomMessages onRef={ref => (this.messages = ref)}/>
 					<p>{ t("profile:aMemberSince") } {user.joinDatePretty}</p>

frontend/app/js/views/Team/index.jsx

@@ -17,7 +17,7 @@ export default class Team extends Component {
 		const { t } = this.props;
 
 		return (
-			<main>
+			<main id="team">
 				<h1>{t("team:title")}</h1>
 
 				<div className="current-members">

frontend/app/js/views/Terms/index.jsx

@@ -20,7 +20,7 @@ export default class Terms extends Component {
 		const {t} = this.props;
 
 		return (
-			<main>
+			<main id="terms">
 				<h1>{t("terms:title")}</h1>
 				<h3>Last Updated: January 25, 2016</h3>
 

frontend/app/styles/_breakpoints.scss

@@ -1,8 +1,8 @@
 @mixin responsive($breakpoint) {
   @if $breakpoint == "smallest" {
-	@media (min-width: 320px) {
+	//@media (min-width: 320px) {
 	  @content;
-	}
+	//}
   }
 
   @else if $breakpoint == "small" {

frontend/app/styles/login.scss

@@ -1,38 +1,12 @@
 @import "colors";
 @import "breakpoints";
 
-p {
-	color: $musare_color_primary_gray;
-}
-
-@include responsive(smallest) {
+main#login {
 	p {
+		color: $musare_color_primary_gray;
+
 		font-size: 12px;
 		line-height: 16px;
-		margin-bottom: 12px;
-	}
-}
-
-@include responsive(small) {
-	p {
-		font-size: 21px;
-		line-height: 28px;
-		margin-bottom: 26px;
-	}
-}
-
-@include responsive(medium) {
-	p {
-		font-size: 31px;
-		line-height: 41px;
-		margin-bottom: 39px;
-	}
-}
-
-@include responsive(large) {
-	p {
-		font-size: 17px;
-		line-height: 22px;
-		margin-bottom: 32px;
+		margin-bottom: 16px;
 	}
 }

frontend/app/styles/main.scss

@@ -30,17 +30,25 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-	text-shadow: 0 3px 6px $musare_shadow_color;
 	color: $musare_color_primary_gray;
 	text-align: center;
+
+	font-size: 32px;
+	line-height: 43px;
+	margin-bottom: 16px;
 }
 
 main {
 	margin-left: auto;
 	margin-right: auto;
 
+	margin-top: 16px;
+	width: 296px;
+
 	.custom-messages {
-		border-style: solid;
+		border: solid 1px;
+		padding: 8px;
+		margin-bottom: 16px;
 
 		&.custom-messages-error {
 			border-color: $musare_color_primary_red;
@@ -59,144 +67,29 @@ main {
 
 		p {
 			font-weight: 600;
+
+			font-size: 16px;
+			line-height: 21px;
+			margin-bottom: 8px;
 		}
 
 		ul {
 			list-style-position: inside;
-		}
-	}
-}
-
-@include responsive(smallest) {
-	h1 {
-		font-size: 32px;
-		line-height: 43px;
-		margin-bottom: 16px;
-	}
-
-	main {
-		margin-top: 16px;
-		width: calc(100% - 20px);
-
-		.custom-messages {
-			border-width: 1px;
-			padding: 8px;
-			margin-bottom: 12px;
-
-			p {
-				font-size: 16px;
-				line-height: 21px;
-				margin-bottom: 8px;
-			}
-
-			ul {
-				li {
-					font-size: 14px;
-					line-height: 19px;
-				}
-			}
-		}
-	}
-}
-
-@include responsive(small) {
-	h1 {
-		font-size: 60px;
-		line-height: 80px;
-		margin-bottom: 52px; // TODO Check if this shouldn't be 32px
-	}
-
-	main {
-		margin-top: 32px;
-		width: calc(100% - 40px);
-
-		.custom-messages {
-			border-width: 2px;
-			padding: 16px;
-			margin-bottom: 26px;
 
-			p {
-				font-size: 29px;
-				line-height: 38px;
-				margin-bottom: 16px;
-			}
-
-			ul {
-				li {
-					font-size: 23px;
-					line-height: 31px;
-				}
+			li {
+				font-size: 14px;
+				line-height: 19px;
 			}
 		}
 	}
-}
-
-@include responsive(medium) {
-	h1 {
-		font-size: 90px;
-		line-height: 120px;
-		margin-bottom: 51px; // TODO Check if this shouldn't be 48px
-	}
-
-	main {
-		margin-top: 48px;
-		width: calc(100% - 60px);
 
-		.custom-messages {
-			border-width: 2px;
-			padding: 24px;
-			margin-bottom: 39px;
+	a {
+		color: $musare_color_primary_blue;
+		text-decoration: none;
+		transition: .1s ease;
 
-			p {
-				font-size: 43px;
-				line-height: 57px;
-				margin-bottom: 24px;
-			}
-
-			ul {
-				li {
-					font-size: 34px;
-					line-height: 46px;
-				}
-			}
+		&:hover, &:active {
+			color: $musare_color_secondary_blue;
 		}
 	}
-}
-
-@include responsive(large) {
-	h1 {
-		font-size: 48px;
-		line-height: 64px;
-		margin-bottom: 32px;
-	}
-
-	main {
-		margin-top: 32px;
-		width: 500px;
-
-		.custom-messages {
-			border-width: 2px;
-			padding: 16px;
-			margin-bottom: 32px;
-
-			p {
-				font-size: 28px;
-				line-height: 37px;
-				margin-bottom: 16px;
-			}
-
-			ul {
-				li {
-					font-size: 24px;
-					line-height: 32px;
-				}
-			}
-		}
-	}
-}
-
-@include responsive(largest) {
-	main {
-		width: 800px;
-	}
 }

frontend/app/styles/navbar.scss

@@ -7,7 +7,12 @@ header {
 	display: flex;
 	justify-content: space-between;
 
+	height: 64px;
+
 	> a {
+		height: 38px;
+		margin: 13px;
+
 		img {
 			height: 100%;
 		}
@@ -27,7 +32,6 @@ header {
 			display: flex;
 			margin-left: auto;
 			margin-right: auto;
-			box-shadow: 0 3px 6px $musare_shadow_color;
 		}
 	}
 
@@ -37,7 +41,6 @@ header {
 
 		a {
 			color: $musare_color_white;
-			text-shadow: 0 3px 6px $musare_shadow_color;
 			display: inline-block;
 			text-decoration: none;
 			text-align: center;
@@ -53,19 +56,12 @@ header {
 }
 
 @include responsive(smallest) {
-	$height: 64px;
-
 	header {
-		height: $height;
-
-		> a {
-			height: 38px;
-			margin: 13px;
-		}
+		height: 64px;
 
 		.hamburger {
-			height: $height;
-			width: $height;
+			height: 64px;
+			width: 64px;
 
 			span {
 				width: 34px;
@@ -85,10 +81,10 @@ header {
 			visibility: hidden;
 			display: none;
 			width: 100%;
-			height: calc(100% - #{$height});
+			height: calc(100% - 64px);
 			flex-direction: column;
 			position: absolute;
-			top: $height;
+			top: 64px;
 
 			&.show {
 				visibility: visible;
@@ -97,109 +93,16 @@ header {
 
 			a {
 				width: 100%;
-				height: $height;
-				line-height: $height;
+				height: 64px;
+				line-height: 64px;
 				font-size: 27px;
 			}
 		}
 	}
 }
 
-@include responsive(small) {
-	$height: 120px;
-
-	header {
-		height: $height;
-
-		> a {
-			height: 64px;
-			margin: 28px;
-		}
-
-		.hamburger {
-			height: $height;
-			width: $height;
-
-			span {
-				width: 64px;
-				height: 3px;
-
-				&:nth-child(2) {
-					margin-top: 22px;
-				}
-
-				&:nth-child(3) {
-					margin-top: 22px;
-				}
-			}
-		}
-
-		navbar {
-			top: $height;
-			height: calc(100% - #{$height});
-
-			a {
-				height: $height;
-				line-height: $height;
-				font-size: 51px; //TODO Change this
-			}
-		}
-	}
-}
-
-@include responsive(medium) {
-	$height: 180px;
-
-	header {
-		height: $height;
-
-		> a {
-			height: 106px;
-			margin: 37px;
-		}
-
-		.hamburger {
-			height: $height;
-			width: $height;
-
-			span {
-				width: 96px;
-				height: 4px;
-
-				&:nth-child(2) {
-					margin-top: 33px;
-				}
-
-				&:nth-child(3) {
-					margin-top: 33px;
-				}
-			}
-		}
-
-		navbar {
-			top: $height;
-			height: calc(100% - #{$height});
-
-			a {
-				height: $height;
-				line-height: $height;
-				font-size: 76px; //TODO Change this
-			}
-		}
-	}
-}
-
 @include responsive(large) {
-	$height: 80px;
-
 	header {
-		height: $height;
-
-		> a {
-			height: 50px;
-			margin: 15px;
-		}
-
 		.hamburger {
 			visibility: hidden;
 			display: none;
@@ -209,15 +112,15 @@ header {
 			visibility: unset;
 			display: flex;
 			flex-direction: row;
-			height: $height;
+			height: 64px;
 			width: unset;
 			position: unset;
 
 			a {
-				height: $height;
-				line-height: $height;
-				font-size: 27px;
-				padding: 0 20px;
+				height: 38px;
+				line-height: 38px;
+				font-size: 29px;
+				padding: 13px;
 			}
 		}
 	}

frontend/app/styles/register.scss

@@ -1,112 +1,40 @@
 @import "colors";
 @import "breakpoints";
 
-main {
+main#register {
 	p {
 		color: $musare_color_primary_gray;
-	}
-
-	#recaptcha {
-		> div {
-			margin-left: auto;
-			margin-right: auto;
-
-			> div {
-				width: 100%;
-				height: 100%;
-			}
-		}
 
-		iframe {
-			transform-origin: 152px 0;
-		}
-	}
-}
-
-@include responsive(smallest) {
-	p {
 		font-size: 12px;
 		line-height: 16px;
-		margin-bottom: 12px;
+		margin-bottom: 16px;
 	}
 
 	#recaptcha {
-		margin-bottom: 12px;
-
-		$scale: 320 / 304;
+		margin-bottom: 16px;
+		$scale: 296 / 304;
 
 		> div {
-			height: 78px * $scale !important;
+			height: 76px * $scale !important;
+			width: unset !important;
 		}
 
 		iframe {
 			transform: scale($scale);
 		}
-	}
-}
-
-@include responsive(small) {
-	p {
-		font-size: 21px;
-		line-height: 28px;
-		margin-bottom: 26px;
-	}
-
-	#recaptcha {
-		margin-bottom: 26px;
-
-		$scale: 600 / 304;
 
 		> div {
-			height: 78px * $scale !important;
-		}
-
-		iframe {
-			transform: scale($scale);
-		}
-	}
-}
-
-@include responsive(medium) {
-	p {
-		font-size: 31px;
-		line-height: 41px;
-		margin-bottom: 39px;
-	}
-
-	#recaptcha {
-		margin-bottom: 39px;
-
-		$scale: 900 / 304;
+			margin-left: auto;
+			margin-right: auto;
 
-		> div {
-			height: 78px * $scale !important;
+			> div {
+				width: 100%;
+				height: 100%;
+			}
 		}
 
 		iframe {
-			transform: scale($scale);
+			transform-origin: 0 0;
 		}
 	}
 }
-
-@include responsive(large) {
-	p {
-		font-size: 17px;
-		line-height: 22px;
-		margin-bottom: 32px;
-	}
-
-	#recaptcha {
-		margin-bottom: 32px;
-
-		$scale: 500 / 304;
-
-		> div {
-			height: 78px * $scale !important;
-		}
-
-		iframe {
-			transform: scale($scale);
-		}
-	}
-}

frontend/app/styles/setPassword.scss

@@ -1,59 +1,35 @@
 @import "colors";
 @import "breakpoints";
 
-.steps {
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	align-items: center;
-
-	.step-circle {
-		background-color: $musare_color_light_gray;
-		border-radius: 100%;
-		color: $musare_color_white;
-	}
-
-	.step-circle-active {
-		background-color: $musare_color_primary_blue;
-	}
-
-	.step-line {
-		background-color: $musare_color_light_gray;
-	}
-}
-
-@include responsive(smallest) {
-	$circle_diameter: 36px;
-
+main#setPassword, main#forgotPassword {
 	.steps {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+
 		margin-bottom: 16px;
 
 		.step-circle {
-			width: $circle_diameter;
-			height: $circle_diameter;
-			line-height: $circle_diameter;
+			background-color: $musare_color_light_gray;
+			border-radius: 100%;
+			color: $musare_color_white;
+
+			width: 36px;
+			height: 36px;
+			line-height: 36px;
 			text-align: center;
 		}
 
+		.step-circle-active {
+			background-color: $musare_color_primary_blue;
+		}
+
 		.step-line {
-			width: calc(50% - #{$circle_diameter * 1.5});
+			background-color: $musare_color_light_gray;
+
+			width: calc(50% - 58px);
 			height: 1px;
 		}
 	}
-}
-
-@include responsive(small) {
-
-}
-
-@include responsive(medium) {
-
-}
-
-@include responsive(large) {
-
-}
-
-@include responsive(largest) {
-
 }

frontend/app/styles/settings.scss

@@ -1,36 +1,14 @@
 @import "colors";
 @import "breakpoints";
 
-main {
+main#settings {
 	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;
+		margin-bottom: 16px;
 	}
 
 	.general-section {
@@ -40,49 +18,6 @@ main {
 	}
 
 	.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
-		}
+		margin-top: 24px;
 	}
 }

frontend/app/styles/specific/button.scss

@@ -1,25 +1,33 @@
 @import "../colors";
 @import "../breakpoints";
 
-button, .button {
-	outline: none;
-	box-shadow: none;
-	border: none;
-	background-color: $musare_color_primary_blue;
-	color: $musare_color_white;
-	text-align: center;
-	display: block;
-	width: 100%;
-	text-decoration: none;
-	transition: .1s ease;
+main {
+	button, .button {
+		outline: none;
+		box-shadow: none;
+		border: none;
+		background-color: $musare_color_primary_blue;
+		color: $musare_color_white;
+		text-align: center;
+		display: block;
+		width: 100%;
+		text-decoration: none;
+		transition: .1s ease;
+
+		font-size: 17px;
+		line-height: 22px;
+		padding: 9px 0;
+		margin-bottom: 16px;
 
-	&:hover, &:focus {
-		background-color: $musare_color_secondary_blue;
-		cursor: pointer;
-	}
+		&:hover, &:focus {
+			background-color: $musare_color_secondary_blue;
+			color: $musare_color_white;
+			cursor: pointer;
+		}
 
-	&[disabled] {
-		opacity: .4;
+		&[disabled] {
+			opacity: .4;
+		}
 	}
 }
 
@@ -39,44 +47,4 @@ button, .button {
 		background-color: $musare_color_secondary_red; //TODO Fix these colors
 		cursor: pointer;
 	}
-}
-
-@include responsive(smallest) {
-	button, .button {
-		font-size: 21px;
-		line-height: 28px;
-		padding: 11px 0;
-		margin-bottom: 16px;
-	}
-}
-
-@include responsive(small) {
-	button, .button {
-		font-size: 39px;
-		line-height: 52px;
-		padding: 22.5px 0;
-		margin-bottom: 26px;
-	}
-}
-
-@include responsive(medium) {
-	button, .button {
-		font-size: 57px;
-		line-height: 76px;
-		padding: 33px 0;
-		margin-bottom: 39px;
-	}
-}
-
-@include responsive(large) {
-	button, .button {
-		font-size: 36px;
-		line-height: 48px;
-		padding: 21px 0;
-		margin-bottom: 32px;
-	}
-}
-
-@include responsive(largest) {
-
 }

frontend/app/styles/specific/form.scss

@@ -4,16 +4,24 @@
 label {
 	color: $musare_color_primary_gray;
 	display: block;
+	margin-bottom: 16px;
 
 	span {
 		display: block;
+		font-size: 12px;
+		line-height: 16px;
+		margin-left: 4px;
+		margin-bottom: 5px;
 	}
 
 	input {
-		border: solid $musare_color_primary_blue;
 		display: block;
 		box-sizing: border-box;
 		width: 100%;
+		border: 1px solid $musare_color_primary_blue;
+		font-size: 15px;
+		line-height: 20px;
+		padding: 10px;
 
 		&.has-validation-errors {
 			border-color: $musare_color_primary_red;
@@ -24,109 +32,8 @@ label {
 		display: block;
 		list-style-position: inside;
 		color: $musare_color_primary_red;
-	}
-}
-
-@include responsive(smallest) {
-	label {
-		margin-bottom: 12px;
-
-		span {
-			font-size: 14px;
-			line-height: 19px;
-			margin-left: 4px;
-			margin-bottom: 4px;
-		}
-
-		input {
-			border-width: 1px;
-			font-size: 19px;
-			line-height: 26px;
-			padding: 12px;
-		}
-
-		ul {
-			margin-top: 4px;
-			font-size: 12px;
-			line-height: 16px;
-		}
-	}
-}
-
-@include responsive(small) {
-	label {
-		margin-bottom: 26px;
-
-		span {
-			font-size: 23px;
-			line-height: 31px;
-			margin-left: 8px;
-			margin-bottom: 8px;
-		}
-
-		input {
-			border-width: 2px;
-			font-size: 32px;
-			line-height: 43px;
-			padding: 26px;
-		}
-
-		ul {
-			margin-top: 8px;
-			font-size: 21px;
-			line-height: 28px;
-		}
-	}
-}
-
-@include responsive(medium) {
-	label {
-		margin-bottom: 39px;
-
-		span {
-			font-size: 34px;
-			line-height: 46px;
-			margin-left: 12px;
-			margin-bottom: 12px;
-		}
-
-		input {
-			border-width: 3px;
-			font-size: 48px;
-			line-height: 64px;
-			padding: 39px;
-		}
-
-		ul {
-			margin-top: 12px;
-			font-size: 31px;
-			line-height: 41px;
-		}
-	}
-}
-
-@include responsive(large) {
-	label {
-		margin-bottom: 32px;
-
-		span {
-			font-size: 18px;
-			line-height: 24px;
-			margin-left: 4px;
-			margin-bottom: 12px;
-		}
-
-		input {
-			border-width: 2px;
-			font-size: 27px;
-			line-height: 36px;
-			padding: 27px;
-		}
-
-		ul {
-			margin-top: 8px;
-			font-size: 17px;
-			line-height: 22px;
-		}
+		margin-top: 4px;
+		font-size: 12px;
+		line-height: 16px;
 	}
 }