Added styling to CustomMessages.

frontend/app/js/components/CustomMessages.jsx

@@ -119,7 +119,7 @@ export default class CustomMessages extends Component {
 			else if (type === "success") text = t("customMessages:success");
 
 			return (
-				<div key={ type } className={ type }>
+				<div key={ type } className={ `custom-messages custom-messages-${type}` }>
 					<p>{ text }</p>
 					<ul>
 						{ messages }

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

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

frontend/app/styles/_colors.scss

@@ -5,5 +5,7 @@ $musare_color_secondary_gray: #585858;
 $musare_color_primary_red: #F23232;
 $musare_color_secondary_red: #FF2323;
 $musare_color_white: #FFFFFF;
+$musare_color_green: #329800;
+$musare_color_dark_blue: #4977C8;
 $musare_color_light_gray: #C4C4C4;
 $musare_shadow_color: hsla(0, 0, 0, .2);

frontend/app/styles/main.scss

@@ -27,6 +27,33 @@ h1 {
 main {
 	margin-left: auto;
 	margin-right: auto;
+
+	.custom-messages {
+		border-style: solid;
+
+		&.custom-messages-error {
+			border-color: $musare_color_primary_red;
+			color: $musare_color_primary_red;
+		}
+
+		&.custom-messages-info {
+			border-color: $musare_color_dark_blue;
+			color: $musare_color_dark_blue;
+		}
+
+		&.custom-messages-success {
+			border-color: $musare_color_green;
+			color: $musare_color_green;
+		}
+
+		p {
+			font-weight: 600;
+		}
+
+		ul {
+			list-style-position: inside;
+		}
+	}
 }
 
 @include responsive(smallest) {
@@ -39,6 +66,25 @@ main {
 	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;
+				}
+			}
+		}
 	}
 }
 
@@ -52,6 +98,25 @@ main {
 	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;
+				}
+			}
+		}
 	}
 }
 
@@ -65,6 +130,25 @@ main {
 	main {
 		margin-top: 48px;
 		width: calc(100% - 60px);
+
+		.custom-messages {
+			border-width: 2px;
+			padding: 24px;
+			margin-bottom: 39px;
+
+			p {
+				font-size: 43px;
+				line-height: 57px;
+				margin-bottom: 24px;
+			}
+
+			ul {
+				li {
+					font-size: 34px;
+					line-height: 46px;
+				}
+			}
+		}
 	}
 }
 
@@ -78,6 +162,25 @@ main {
 	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;
+				}
+			}
+		}
 	}
 }