Merge pull request #476 from internet4000/fix/login-style

improve login/signup styles
internet4000 · Dec 8, 2020 · a8acb57 · a8acb57
2 parents cff23c2 + be3401f
commit a8acb57
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/app/auth/login/template.hbs b/app/auth/login/template.hbs
@@ -1,15 +1,19 @@
 <div class="Sections Sections--center">
-	<section class="Section">
-		<header class="Manchet">
-			<h1>
-				Log in <small>to Radio4000</small>
-			</h1>
-			<p class="u-tc">
-				No account? <a href="{{href-to 'auth.signup'}}">Sign up</a> &rarr;
-			</p>
-		</header>
-		<div class="Container Container--small">
-			{{user-login onLogin=(action "submitLogin")}}
-		</div>
+	<section class="Section Section--flex Section--flexCenter">
+		<article class="Aside Aside--login">
+			<header class="Manchet">
+				<h1>
+					Log in <small>to Radio4000</small>
+				</h1>
+			</header>
+			<div>
+				{{user-login onLogin=(action "submitLogin")}}
+			</div>
+		</article>
+	</section>
+	<section>
+		<p class="u-tc">
+			No account? &rarr; <a class="Btn Btn--primary" href="{{href-to 'auth.signup'}}">Sign up</a> !
+		</p>
 	</section>
 </div>
diff --git a/app/auth/signup/template.hbs b/app/auth/signup/template.hbs
@@ -1,12 +1,14 @@
 <div class="Sections Sections--center">
 	<section class="Section Section--flex Section--flexCenter">
-		<div class="Manchet">
-			<h1><small>Create a</small> Radio4000 account</h1>
-			<p class="u-tc">&larr; looking to {{link-to "login" "auth.login" }}?</p>
-		</div>
-		<div class="Container">
-			{{user-signup onSignup=(action "signup")}}
-		</div>
+		<article class="Aside Aside--signup">
+			<div class="Manchet">
+				<h1><small>Create a</small> Radio4000 account</h1>
+				<p class="u-tc">&larr; looking to {{link-to "login" "auth.login" }}?</p>
+			</div>
+			<div>
+				{{user-signup onSignup=(action "signup")}}
+			</div>
+		</article>
 	</section>
 
 	<section class="Section">

diff --git a/app/components/user-signup/template.hbs b/app/components/user-signup/template.hbs
@@ -16,14 +16,16 @@
 			{{input type="password" value=v placeholder="Use a (new) and strong password " required="required"}}
 		{{/form-group}}
 
-		{{user-agreements onAgreed=(action 'signUserAgreement')}}
+		{{user-agreements
+				onAgreed=(action 'signUserAgreement')
+				class="Form-group"}}
 
 		{{#btn-group class="Form-group BtnGroup BtnGroup--right"}}
 			<button
 				disabled={{cannotEmailSignUp}}
 				type="submit"
-				class="Btn Btn--large"
-				title="Add track to your radio">
+				class="Btn Btn--large Btn--primary"
+				title="Register a radio4000.com account">
 				{{if submitTask.isIdle "Sign Up" "Signing Up…"}}
 			</button>
 		{{/btn-group}}

diff --git a/app/styles/components/_aside.scss b/app/styles/components/_aside.scss
@@ -1,3 +1,20 @@
+.Aside--login,
+.Aside--signup {
+	padding: 1.5rem 1rem;
+	margin: 1rem;
+	@media (min-width: $layout-m) {
+		padding: 2rem;
+	}
+}
+
+.Aside--login {
+	background-color: $mediumlightgray;
+}
+
+.Aside--signup {
+	background-color: $bleach;
+}
+
 .Aside--navigation {
 	display: none;
 	position: fixed;