Skip to content

Commit 4d6ac00

Browse files
LewisYoulLewisYoul
committed
styling/Add styles to sign in form
1 parent 39b38ee commit 4d6ac00

File tree

8 files changed

+88
-47
lines changed

8 files changed

+88
-47
lines changed

‎app/assets/stylesheets/base.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ pre {
1414
font-size: 14px;
1515
}
1616

17-
h2, h3, span, p { font-weight: 100; }
17+
h1, h2, h3, span, p { font-weight: 100; }
1818

1919
a {
2020
text-decoration: none;

‎app/assets/stylesheets/buttons.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
font-family: Helvetica, sans-serif;
1010
text-decoration: none;
1111
background-color: $color-white;
12-
margin-left: 6px;
1312

1413
&:hover {
1514
text-decoration: none;
@@ -82,7 +81,8 @@
8281

8382
&-blue {
8483
@extend .button--cta;
85-
84+
85+
color: $color-white;
8686
border: 1px solid #003F63;
8787
background-color: #003F63;
8888
}

‎app/assets/stylesheets/form-field.scss‎

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

3-
.form-field {
4-
margin-bottom: 20px;
53

6-
label {
7-
display: block;
8-
margin-bottom: 8px;
9-
}
10-
11-
input {
12-
width: 100%;
13-
box-sizing: border-box;
14-
padding: 6px;
15-
border-radius: 2px;
16-
border: 1px solid lightgrey;
17-
font-size: 14px;
18-
display: block;
19-
font-weight: inherit;
20-
}
21-
22-
textarea {
23-
width: 100%;
24-
box-sizing: border-box;
25-
padding: 6px;
26-
border-radius: 2px;
27-
border: 1px solid lightgrey;
28-
font-size: 14px;
29-
display: block;
30-
font-family: Helvetica, sans-serif;
31-
font-weight: inherit;
32-
}
33-
34-
&--no-margin-top {
35-
@extend .form-field;
36-
37-
margin-top: 0px;
38-
}
39-
}

‎app/assets/stylesheets/form.scss‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import './variables.scss';
2+
3+
.form {
4+
&--field {
5+
margin-bottom: 20px;
6+
7+
label {
8+
display: block;
9+
font-size: 14px;
10+
margin-bottom: 6px;
11+
font-weight: 100;
12+
}
13+
14+
input {
15+
width: 100%;
16+
box-sizing: border-box;
17+
padding: 6px;
18+
border-radius: 2px;
19+
border: 1px solid lightgrey;
20+
font-size: 14px;
21+
display: block;
22+
font-weight: inherit;
23+
}
24+
25+
textarea {
26+
width: 100%;
27+
box-sizing: border-box;
28+
padding: 6px;
29+
border-radius: 2px;
30+
border: 1px solid lightgrey;
31+
font-size: 14px;
32+
display: block;
33+
font-family: Helvetica, sans-serif;
34+
font-weight: inherit;
35+
}
36+
37+
&--no-margin-top {
38+
@extend .form--field;
39+
40+
margin-top: 0px;
41+
}
42+
}
43+
44+
&--registration {
45+
width: 300px;
46+
margin: 0 auto;
47+
48+
h1 {
49+
margin-bottom: 0;
50+
font-weight: normal;
51+
}
52+
53+
p {
54+
font-size: 14px;
55+
}
56+
57+
&-form {
58+
background-color: $color-light;
59+
padding: 20px;
60+
margin-top: 40px;
61+
margin-bottom: 90px;
62+
63+
&--button {
64+
width: 100%;
65+
}
66+
}
67+
}
68+
}

‎app/assets/stylesheets/helpers.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
}
4444
}
4545
.margin-right { margin-right: 16px }
46+
.margin-auto { margin: 0 auto; }
4647

4748
.text-center { text-align: center; }
4849

‎app/javascript/controllers/registrations_controller.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default class extends Controller {
44
onSignUpSuccess(event) {
55
const [data, status, xhr] = event.detail;
66
const urlWithToast = encodeURI(`${location.toString()}?notice=${data.message}`)
7+
Turbolinks.visit(urlWithToast)
78
}
89

910
onSignUpError(event) {

‎app/javascript/controllers/sessions_controller.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default class extends Controller {
55
onSignInSuccess(event) {
66
const [data, status, xhr] = event.detail;
77
const urlWithToast = encodeURI(`${location.toString()}?notice=${data.message}`)
8+
Turbolinks.visit(urlWithToast)
89
}
910

1011
onSignInError(event) {

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
1-
<div data-controller="sessions">
2-
<h2 class="text-center">Sign in to your account</h2>
1+
<div class="form--registration" data-controller="sessions">
2+
<h1 class="text-center">Sign in to your account</h1>
3+
<p class="text-center">Don't have an account yet? Sign up</p>
34

4-
<%= form_for @user, url: user_session_path, remote: true, html: { data: { type: "json", action: "ajax:success->sessions#onSignInSuccess ajax:error->sessions#onSignInError" } } do |f| %>
5-
<div class="field">
6-
<%= f.label :email %><br />
5+
<%= 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| %>
6+
<div class="form--field">
7+
<%= f.label :email, 'Email Address' %>
78
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
89
</div>
910

10-
<div class="field">
11-
<%= f.label :password %><br />
11+
<div class="form--field">
12+
<%= f.label :password %>
1213
<%= f.password_field :password, autocomplete: "current-password" %>
1314
</div>
1415

16+
<%# <div class="form--field"> %>
17+
<%# <%= f.check_box :remember_me %>
18+
<%# <%= f.label :remember_me %>
19+
<%# </div> %>
20+
1521
<div class="actions">
16-
<%= f.submit "Log in" %>
22+
<%= f.submit "SIGN IN", class: "form--registration-form--button button--cta-blue" %>
1723
</div>
1824
<% end %>
1925
</div>

0 commit comments

Comments
 (0)