Skip to content

Commit 2cc24bd

Browse files
LewisYoulLewisYoul
committed
feature/Format sign in and up modals
1 parent 4d6ac00 commit 2cc24bd

File tree

9 files changed

+94
-33
lines changed

9 files changed

+94
-33
lines changed

‎app/assets/stylesheets/buttons.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11
@import './variables.scss';
22

33
.button {
4+
&--sign-in {
5+
color: $color-white;
6+
border: 1px solid $color-dark-blue;
7+
background-color: $color-dark-blue;
8+
width: 100%;
9+
padding-top: 8px;
10+
padding-bottom: 8px;
11+
cursor: pointer;
12+
13+
&:hover { background-color: $color-light-blue; }
14+
}
15+
16+
&--sign-up {
17+
color: $color-white;
18+
width: 100%;
19+
padding-top: 8px;
20+
padding-bottom: 8px;
21+
cursor: pointer;
22+
border: 1px solid $color-primary;
23+
background-color: $color-primary;
24+
25+
&:hover {
26+
background-color: $color-primary-hover;
27+
}
28+
}
29+
430
&--cta {
531
color: $color-primary;
632
border-radius: 2px;

‎app/assets/stylesheets/form.scss

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
input {
1515
width: 100%;
1616
box-sizing: border-box;
17-
padding: 6px;
17+
padding: 8px 12px;
1818
border-radius: 2px;
1919
border: 1px solid lightgrey;
2020
font-size: 14px;
@@ -42,9 +42,18 @@
4242
}
4343

4444
&--registration {
45-
width: 300px;
45+
width: 400px;
4646
margin: 0 auto;
4747

48+
input[type="checkbox"] {
49+
margin: 0;
50+
}
51+
52+
a {
53+
font-weight: 500;
54+
color: $color-primary;
55+
}
56+
4857
h1 {
4958
margin-bottom: 0;
5059
font-weight: normal;
@@ -58,11 +67,15 @@
5867
background-color: $color-light;
5968
padding: 20px;
6069
margin-top: 40px;
61-
margin-bottom: 90px;
70+
margin-bottom: 80px;
71+
}
6272

63-
&--button {
64-
width: 100%;
65-
}
73+
&-remember-me {
74+
display: flex;
75+
justify-content: space-between;
76+
font-size: 14px;
77+
font-weight: 100;
78+
margin-bottom: 20px;
6679
}
6780
}
6881
}

‎app/assets/stylesheets/helpers.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
.no-margin-bottom { margin-bottom: 0px; }
3535
.no-margin-top { margin-top: 0px; }
3636
.margin-top { margin-top: 16px }
37-
.margin-top { margin-top: 16px }
37+
.margin-bottom { margin-bottom: 16px }
3838
.margin-left {
3939
margin-left: 16px;
4040

‎app/assets/stylesheets/variables.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
$color-primary: #3AAFA9;
2+
$color-primary-hover: #51b9b4;
23
$color-secondary: #2B7A78;
34
$color-purple: #b853ba;
45
$color-light: #DEF2F1;
@@ -9,3 +10,6 @@ $color-grey: #808080;
910
$color-grey-light: #E6ECF0;
1011
$color-hover: #F2F2F2;
1112
$color-pink: #FFD8DE;
13+
14+
$color-dark-blue: #003F63;
15+
$color-light-blue: #27658a;

‎app/javascript/controllers/registrations_controller.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,15 @@ export default class extends Controller {
1212
this.toast.display(data.message)
1313
}
1414

15+
presentModal(event) {
16+
this.modal.present(event.target.dataset.modalUrl)
17+
}
18+
1519
get toast() {
1620
return document.getElementById('toast').toast
1721
}
22+
23+
get modal() {
24+
return document.getElementById('modal').modal
25+
}
1826
}

‎app/javascript/controllers/sessions_controller.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,15 @@ export default class extends Controller {
1313
this.toast.display(data.message)
1414
}
1515

16+
presentModal(event) {
17+
this.modal.present(event.target.dataset.modalUrl)
18+
}
19+
1620
get toast() {
1721
return document.getElementById('toast').toast
1822
}
23+
24+
get modal() {
25+
return document.getElementById('modal').modal
26+
}
1927
}

‎app/views/users/modals/sign_in.html.erb

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="form--registration" data-controller="sessions">
22
<h1 class="text-center">Sign in to your account</h1>
3-
<p class="text-center">Don't have an account yet? Sign up</p>
3+
<p class="text-center">Don't have an account yet? <a data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->sessions#presentModal">Sign up</a></p>
44

55
<%= form_for @user, url: user_session_path, remote: true, html: { data: { type: "json", action: "ajax:success->sessions#onSignInSuccess ajax:error->sessions#onSignInError" }, class: "form--registration-form" } do |f| %>
66
<div class="form--field">
7-
<%= f.label :email, 'Email Address' %>
7+
<%= f.label :email, 'Email address' %>
88
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
99
</div>
1010

@@ -13,13 +13,16 @@
1313
<%= f.password_field :password, autocomplete: "current-password" %>
1414
</div>
1515

16-
<%# <div class="form--field"> %>
17-
<%# <%= f.check_box :remember_me %>
18-
<%# <%= f.label :remember_me %>
19-
<%# </div> %>
16+
<div class="form--registration-remember-me">
17+
<div class="flex v-center" >
18+
<%= f.check_box :remember_me, checked: true %>
19+
<%= f.label :remember_me, class: "margin-left--tiny" %>
20+
</div>
21+
<a data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->sessions#presentModal">Forgot your password?</a>
22+
</div>
2023

2124
<div class="actions">
22-
<%= f.submit "SIGN IN", class: "form--registration-form--button button--cta-blue" %>
25+
<%= f.submit "SIGN IN", class: "button--sign-in" %>
2326
</div>
2427
<% end %>
2528
</div>

‎app/views/users/modals/sign_in_sign_up.html.erb

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
<div >
2-
<h2 class="text-center">You need to sign in to do that</h2>
1+
<div class="form--registration">
2+
<h1 class="text-center">Sign in to continue</h1>
33
<p class="text-center">Create an account to stay in the loop!</p>
44

5-
<div class="flex h-center">
6-
<div style="width: 50%;" data-controller="users">
7-
<button data-modal-url="<%= users_modals_sign_in_path %>" data-action="click->users#presentModal" style="width: 100%;" class="button--cta-blue">Log In</button>
8-
<button data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->users#presentModal" style="width: 100%;" class="button--cta-transparent margin-top">Sign Up</button>
9-
</div>
5+
<div class="form--registration-form" data-controller="users">
6+
<button data-modal-url="<%= users_modals_sign_in_path %>" data-action="click->users#presentModal" class="button--sign-in">SIGN IN</button>
7+
<button data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->users#presentModal" class="margin-top button--sign-up">SIGN UP</button>
108
</div>
119
</div>

‎app/views/users/modals/sign_up.html.erb

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
1-
<div data-controller="registrations">
2-
<h2 class="text-center">Create an Account</h2>
1+
<div class="form--registration" data-controller="registrations">
2+
<h1 class="text-center">Sign up for an account</h1>
3+
<p class="text-center">Already have an account? <a data-modal-url="<%= users_modals_sign_in_path %>" data-action="click->registrations#presentModal">Sign in</a></p>
34

4-
<%= form_for @user, url: user_registration_path, remote: true, html: { data: { type: "json", action: "ajax:success->registrations#onSignUpSuccess ajax:error->registrations#onSignUpError" } } do |f| %>
5+
<%= form_for @user, url: user_registration_path, remote: true, html: { data: { type: "json", action: "ajax:success->registrations#onSignUpSuccess ajax:error->registrations#onSignUpError" }, class: "form--registration-form" } do |f| %>
56
<%# <%= render "devise/shared/error_messages", resource: @user %>
67

7-
<div class="field">
8-
<%= f.label :name %><br />
8+
<div class="form--field">
9+
<%= f.label :name %>
910
<%= f.text_field :name, autofocus: true, autocomplete: "name" %>
1011
</div>
1112

12-
<div class="field">
13-
<%= f.label :email %><br />
13+
<div class="form--field">
14+
<%= f.label :email %>
1415
<%= f.email_field :email, autocomplete: "email" %>
1516
</div>
1617

17-
<div class="field">
18+
<div class="form--field">
1819
<%= f.label :password %>
1920
<% if @minimum_password_length %>
2021
<em>(<%= @minimum_password_length %> characters minimum)</em>
21-
<% end %><br />
22+
<% end %>
2223
<%= f.password_field :password, autocomplete: "new-password" %>
2324
</div>
2425

25-
<div class="field">
26-
<%= f.label :password_confirmation %><br />
26+
<div class="form--field">
27+
<%= f.label :password_confirmation %>
2728
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
2829
</div>
2930

3031
<div class="actions">
31-
<%= f.submit "Sign up" %>
32+
<%= f.submit "SIGN UP", class: "button--sign-in" %>
3233
</div>
3334
<% end %>
3435
</div>

0 commit comments

Comments
 (0)