Added styling to register page.

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

@@ -5,6 +5,8 @@ import CustomMessages from "components/CustomMessages.jsx";
 import PropTypes from "prop-types";
 import { translate } from "react-i18next";
 
+import "register.scss";
+
 import io from "io";
 import config from "config";
 
@@ -68,7 +70,7 @@ export default class Register extends Component {
 		const { t } = this.props;
 
 		return (
-			<div>
+			<main>
 				<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) } />
@@ -77,8 +79,8 @@ 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 href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>{ t("register:registerWithGitHub") }</a>
-			</div>
+				<a className="button github-button" href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>{ t("register:registerWithGitHub") }</a>
+			</main>
 		);
 	}
 }

frontend/app/styles/login.scss

@@ -23,8 +23,8 @@ p {
 
 @include responsive(medium) {
 	p {
-		font-size: 31;
-		line-height: 41;
+		font-size: 31px;
+		line-height: 41px;
 		margin-bottom: 39px;
 	}
 }

frontend/app/styles/register.scss

@@ -0,0 +1,116 @@
+@import "colors";
+@import "breakpoints";
+
+main {
+	p {
+		color: $musare_color_primary_gray;
+	}
+
+	#recaptcha {
+		> div {
+			margin-left: auto;
+			margin-right: auto;
+
+			> div {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		iframe {
+			transform-origin: 152px 0;
+		}
+	}
+
+	.github-button {
+		background-color: $musare_color_secondary_gray;
+	}
+}
+
+@include responsive(smallest) {
+	p {
+		font-size: 12px;
+		line-height: 16px;
+		margin-bottom: 12px;
+	}
+
+	#recaptcha {
+		margin-bottom: 12px;
+
+		$scale: 320 / 304;
+
+		> div {
+			height: 78px * $scale !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;
+
+		> div {
+			height: 78px * $scale !important;
+		}
+
+		iframe {
+			transform: scale($scale);
+		}
+	}
+}
+
+@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);
+		}
+	}
+}