Added styling to setPassword/forgotPassword page.

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

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 
+import "setPassword.scss";
+
 import CustomInput from "components/CustomInput.jsx";
 import CustomErrors from "components/CustomMessages.jsx";
 
@@ -35,7 +37,7 @@ export default class ForgotPassword extends Component {
 			{ this.props.t("forgotPassword:requestResetCode") }
 		</button>);
 		const iAlreadyHaveAResetCodeButton = (<button key="skipRequestResetCode" onClick={ this.skipRequestResetCode }>
-			{ this.props.t("forgotPassword:requestResetCode") }
+			{ this.props.t("forgotPassword:iAlreadyHaveAResetCode") }
 		</button>);
 
 		const resetCodeInput = <CustomInput key="resetCode" type="uniqueCode" name="resetCode" label={ this.props.t("general:resetCodeInput") } placeholder={ this.props.t("general:resetCodeInput") } onRef={ ref => (this.input.resetCode = ref) } />;
@@ -129,18 +131,18 @@ export default class ForgotPassword extends Component {
 		const { t } = this.props;
 
 		return (
-			<div>
+			<main>
 				<h1>{ t("forgotPassword:title") }</h1>
 				<div className="steps">
-					<span className={ `step-circle-1 ${ this.state.step === 1 ? "step-circle-active" : "" }` }>1</span>
-					<span className="step-line-1" />
-					<span className={ `step-circle-2 ${ this.state.step === 2 ? "step-circle-active" : "" }` }>2</span>
-					<span className="step-line-2" />
-					<span className={ `step-circle-3 ${ this.state.step === 3 ? "step-circle-active" : "" }` }>3</span>
+					<span className={ `step-circle ${ this.state.step === 1 ? "step-circle-active" : "" }` }>1</span>
+					<span className="step-line" />
+					<span className={ `step-circle ${ this.state.step === 2 ? "step-circle-active" : "" }` }>2</span>
+					<span className="step-line" />
+					<span className={ `step-circle ${ this.state.step === 3 ? "step-circle-active" : "" }` }>3</span>
 				</div>
 				<CustomErrors onRef={ ref => (this.messages = ref) } />
 				{ this.getActions() }
-			</div>
+			</main>
 		);
 	}
 }

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

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 
+import "setPassword.scss";
+
 import CustomInput from "components/CustomInput.jsx";
 import CustomMessages from "components/CustomMessages.jsx";
 
@@ -141,11 +143,11 @@ export default class SetPassword extends Component {
 		const { t } = this.props;
 
 		return (
-			<div>
+			<main>
 				<h1><h1>{ t("setPassword:title") }</h1></h1>
 				<CustomMessages onRef={ ref => (this.messages = ref) } />
 				{ this.getActions() }
-			</div>
+			</main>
 		);
 	}
 }

frontend/app/styles/_colors.scss

@@ -5,4 +5,5 @@ $musare_color_secondary_gray: #585858;
 $musare_color_primary_red: #F23232;
 $musare_color_secondary_red: #FF2323;
 $musare_color_white: #FFFFFF;
+$musare_color_light_gray: #C4C4C4;
 $musare_shadow_color: hsla(0, 0, 0, .2);

frontend/app/styles/login.scss

@@ -1,6 +1,5 @@
 @import "colors";
 @import "breakpoints";
-@import "specific/button";
 
 p {
 	color: $musare_color_primary_gray;

frontend/app/styles/setPassword.scss

@@ -0,0 +1,59 @@
+@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;
+
+	.steps {
+		margin-bottom: 16px;
+
+		.step-circle {
+			width: $circle_diameter;
+			height: $circle_diameter;
+			line-height: $circle_diameter;
+			text-align: center;
+		}
+
+		.step-line {
+			width: calc(50% - #{$circle_diameter * 1.5});
+			height: 1px;
+		}
+	}
+}
+
+@include responsive(small) {
+
+}
+
+@include responsive(medium) {
+
+}
+
+@include responsive(large) {
+
+}
+
+@include responsive(largest) {
+
+}

frontend/webpack.config.js

@@ -32,7 +32,7 @@ const plugins = [
 	new webpack.NamedModulesPlugin(),
 	new CleanupPlugin(["dist"], {
 		verbose: true,
-		dry: true,
+		dry: false,
 		watch: true,
 	}),
 	new webpack.LoaderOptionsPlugin({