Added styling to login page.

frontend/app/js/components/CustomInput.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 const i18next = require("i18next");
+import "specific/form.scss";
 
 const t = i18next.t;
 

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

@@ -5,6 +5,8 @@ import CustomMessages from "components/CustomMessages.jsx";
 import PropTypes from "prop-types";
 import { translate } from "react-i18next";
 
+import "login.scss";
+
 import io from "io";
 import config from "config";
 
@@ -55,18 +57,18 @@ export default class Login extends Component {
 		const { t } = this.props;
 
 		return (
-			<div>
+			<main>
 				<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) } />
 				<CustomInput type="password" name="password" label={ t("general:passwordInput") } placeholder={ t("general:passwordInput") } onRef={ ref => (this.input.password = ref) } />
 				<p>{ t("login:byLoggingIn", { termsOfService: <a href="/terms">{ t("general:termsOfService") }</a>, privacyPolicy: <a href="/privacy">{ t("general:privacyPolicy") }</a> }) }</p>
 				<button onClick={ this.login }>{ t("login:login") }</button>
-				<a href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>
+				<a href={ `${ config.serverDomain }/auth/github/authorize` } className="button" onClick={ this.githubRedirect }>
 					{ t("login:loginWithGitHub") }
 				</a>
-				<a href="/reset_password">{ t("login:forgotPassword") }</a>
-			</div>
+				<a href="/reset_password" className="button">{ t("login:forgotPassword") }</a>
+			</main>
 		);
 	}
 }

frontend/app/styles/_colors.scss

@@ -1,4 +1,8 @@
 $musare_color_primary_blue: #2FBEFF;
 $musare_color_secondary_blue: #00AFFF;
+$musare_color_primary_gray: #4A4A4A;
+$musare_color_secondary_gray: #585858;
+$musare_color_primary_red: #F23232;
+$musare_color_secondary_red: #FF2323;
 $musare_color_white: #FFFFFF;
 $musare_shadow_color: hsla(0, 0, 0, .2);

frontend/app/styles/login.scss

@@ -0,0 +1,39 @@
+@import "colors";
+@import "breakpoints";
+@import "specific/button";
+
+p {
+	color: $musare_color_primary_gray;
+}
+
+@include responsive(smallest) {
+	p {
+		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: 31;
+		line-height: 41;
+		margin-bottom: 39px;
+	}
+}
+
+@include responsive(large) {
+	p {
+		font-size: 17px;
+		line-height: 22px;
+		margin-bottom: 32px;
+	}
+}

frontend/app/styles/main.scss

@@ -1,9 +1,12 @@
 // @import "musare-theme";
+@import "colors";
+@import "breakpoints";
 
 html, body {
 	margin: 0;
 	padding: 0;
 	font-family: "Segoe UI";
+	min-width: 320px;
 }
 
 * {
@@ -11,8 +14,75 @@ html, body {
 	margin: 0;
 }
 
-button {
-	outline: none;
-	box-shadow: none;
-	border: none;
+h1, h2, h3, h4, h5, h6 {
+	font-weight: normal;
+}
+
+h1 {
+	text-shadow: 0 3px 6px $musare_shadow_color;
+	color: $musare_color_primary_gray;
+	text-align: center;
+}
+
+main {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@include responsive(smallest) {
+	h1 {
+		font-size: 32px;
+		line-height: 43px;
+		margin-bottom: 16px;
+	}
+
+	main {
+		margin-top: 16px;
+		width: calc(100% - 20px);
+	}
+}
+
+@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);
+	}
+}
+
+@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);
+	}
+}
+
+@include responsive(large) {
+	h1 {
+		font-size: 48px;
+		line-height: 64px;
+		margin-bottom: 32px;
+	}
+
+	main {
+		margin-top: 32px;
+		width: 500px;
+	}
+}
+
+@include responsive(largest) {
+	main {
+		width: 800px;
+	}
 }

frontend/app/styles/navbar.scss

@@ -1,5 +1,6 @@
 @import "colors";
 @import "breakpoints";
+@import "specific/button";
 
 header {
 	background-color: $musare_color_primary_blue;

frontend/app/styles/specific/button.scss

@@ -0,0 +1,64 @@
+@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;
+
+	&:hover, &:focus {
+		background-color: $musare_color_secondary_blue;
+		cursor: pointer;
+	}
+
+	&[disabled] {
+		opacity: .4;
+	}
+}
+
+@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: 11px 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

@@ -0,0 +1,132 @@
+@import "../colors";
+@import "../breakpoints";
+
+label {
+	color: $musare_color_primary_gray;
+	display: block;
+
+	span {
+		display: block;
+	}
+
+	input {
+		border: solid $musare_color_primary_blue;
+		display: block;
+		box-sizing: border-box;
+		width: 100%;
+
+		&.has-validation-errors {
+			border-color: $musare_color_primary_red;
+		}
+	}
+
+	ul {
+		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;
+		}
+	}
+}