Skip to content

Commit 2b56468

Browse files
ImTheKaiImTheKai
committed
Reworked the Sign In style to match a more modern style
Signed-off-by: Kai Wagner <kai.wagner@percona.com>
1 parent 28a3f7a commit 2b56468

File tree

3 files changed

+185
-17
lines changed

3 files changed

+185
-17
lines changed

‎app/assets/stylesheets/application.postcss.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
@import "components/form.css";
1111
@import "components/navigation.css";
12+
@import "components/session.css";
1213
@import "components/sidebar.css";
1314
@import "components/topics.css";
1415
@import "components/avatars.css";

‎app/assets/stylesheets/components/session.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
.session-page {
2+
min-height: calc(100vh - var(--nav-height));
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
padding: var(--spacing-10) var(--spacing-4) var(--spacing-12);
7+
background: var(--color-bg-container);
8+
}
9+
10+
.session-card {
11+
width: 100%;
12+
max-width: 420px;
13+
padding: var(--spacing-12) var(--spacing-4);
14+
border: none;
15+
background: transparent;
16+
box-shadow: none;
17+
}
18+
19+
.session-title {
20+
margin: 0 0 var(--spacing-8);
21+
font-size: var(--font-size-2xl);
22+
font-weight: var(--font-weight-semibold);
23+
color: var(--color-text-primary);
24+
}
25+
26+
.session-oauth {
27+
margin-bottom: var(--spacing-6);
28+
}
29+
30+
.session-oauth-button {
31+
position: relative;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
gap: var(--spacing-3);
36+
width: 100%;
37+
padding: var(--spacing-3) var(--spacing-6);
38+
border-radius: 999px;
39+
border: var(--border-width) solid var(--color-border);
40+
background: var(--color-bg-card);
41+
color: var(--color-text-primary);
42+
font-size: var(--font-size-sm);
43+
font-weight: var(--font-weight-medium);
44+
text-decoration: none;
45+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
46+
}
47+
48+
.session-oauth-button:hover {
49+
border-color: var(--color-primary-300);
50+
box-shadow: var(--shadow-sm);
51+
transform: translateY(-1px);
52+
}
53+
54+
.session-oauth-icon {
55+
position: absolute;
56+
left: var(--spacing-5);
57+
display: inline-flex;
58+
align-items: center;
59+
}
60+
61+
.session-oauth-svg {
62+
display: block;
63+
}
64+
65+
.session-divider {
66+
display: flex;
67+
align-items: center;
68+
gap: var(--spacing-4);
69+
margin: var(--spacing-6) 0 var(--spacing-4);
70+
color: var(--color-text-muted);
71+
font-size: var(--font-size-xs);
72+
letter-spacing: 0.08em;
73+
}
74+
75+
.session-divider::before,
76+
.session-divider::after {
77+
content: "";
78+
flex: 1;
79+
height: 1px;
80+
background: var(--color-border);
81+
}
82+
83+
.session-form {
84+
margin-top: var(--spacing-2);
85+
}
86+
87+
.session-field {
88+
margin-bottom: var(--spacing-4);
89+
}
90+
91+
.session-input {
92+
width: 100%;
93+
padding: var(--spacing-4) var(--spacing-6);
94+
border-radius: 999px;
95+
border: var(--border-width) solid var(--color-border);
96+
background: var(--color-bg-input);
97+
font-size: var(--font-size-sm);
98+
margin: 0;
99+
}
100+
101+
.session-input:focus {
102+
outline: none;
103+
border-color: var(--color-border-focus);
104+
box-shadow: var(--shadow-focus);
105+
}
106+
107+
.session-actions {
108+
margin-top: var(--spacing-6);
109+
}
110+
111+
.session-submit {
112+
width: 100%;
113+
padding: var(--spacing-4);
114+
border: none;
115+
border-radius: 999px;
116+
background: #d9480f;
117+
color: #ffffff;
118+
font-size: var(--font-size-sm);
119+
font-weight: var(--font-weight-semibold);
120+
cursor: pointer;
121+
transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
122+
}
123+
124+
.session-submit:hover {
125+
background: #bf3f0c;
126+
box-shadow: var(--shadow-sm);
127+
transform: translateY(-1px);
128+
}
129+
130+
.session-links {
131+
margin-top: var(--spacing-6);
132+
display: flex;
133+
flex-direction: column;
134+
align-items: center;
135+
gap: var(--spacing-2);
136+
font-size: var(--font-size-sm);
137+
}
138+
139+
.session-link {
140+
color: var(--color-text-link);
141+
text-decoration: none;
142+
}
143+
144+
.session-link:hover {
145+
color: var(--color-text-link-hover);
146+
text-decoration: underline;
147+
}
148+
149+
@media (max-width: 480px) {
150+
.session-card {
151+
padding: var(--spacing-10) var(--spacing-2);
152+
}
153+
154+
.session-title {
155+
margin-bottom: var(--spacing-6);
156+
}
157+
}

‎app/views/sessions/new.html.slim‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
1-
h1 Sign in
1+
.session-page
2+
.session-card
3+
h1.session-title Log In
24

3-
= form_with url: session_path, method: :post, local: true, data: { turbo: false } do |f|
4-
.field
5-
= label_tag :email
6-
= email_field_tag :email
7-
.field
8-
= label_tag :password
9-
= password_field_tag :password
10-
.actions
11-
= submit_tag 'Sign in'
5+
.session-oauth
6+
= link_to '/auth/google_oauth2', class: 'session-oauth-button' do
7+
span.session-oauth-icon aria-hidden="true"
8+
svg.session-oauth-svg width="18" height="18" viewBox="0 0 48 48"
9+
path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.6 32.6 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.8 1.1 7.9 2.9l5.7-5.7C34.5 6.1 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c11 0 20-9 20-20 0-1.3-.1-2.2-.4-3.5z"
10+
path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16.2 19 14 24 14c3 0 5.8 1.1 7.9 2.9l5.7-5.7C34.5 6.1 29.5 4 24 4 16.2 4 9.5 8.3 6.3 14.7z"
11+
path fill="#4CAF50" d="M24 44c5.1 0 9.9-1.9 13.5-5.1l-6.2-5.1C29.3 35.6 26.8 36.5 24 36.5c-5.1 0-9.4-3.4-11-8.1l-6.5 5C9.7 39.7 16.4 44 24 44z"
12+
path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-1.1 3.1-3.3 5.7-6.1 7.4l6.2 5.1C39.1 36.9 44 31.1 44 24c0-1.3-.1-2.2-.4-3.5z"
13+
span.session-oauth-label Continue with Google
1214

13-
.oauth
14-
p or
15-
= link_to 'Sign in with Google', '/auth/google_oauth2', class: 'button google'
15+
.session-divider
16+
span OR
1617

17-
.links
18-
= link_to 'Register', new_registration_path
19-
| ·
20-
= link_to 'Forgot password?', new_password_path
18+
= form_with url: session_path, method: :post, local: true, data: { turbo: false }, class: 'session-form' do |f|
19+
.session-field
20+
= label_tag :email, 'Email', class: 'visually-hidden'
21+
= email_field_tag :email, nil, placeholder: 'Email', autocomplete: 'username', class: 'session-input'
22+
.session-field
23+
= label_tag :password, 'Password', class: 'visually-hidden'
24+
= password_field_tag :password, nil, placeholder: 'Password', autocomplete: 'current-password', class: 'session-input'
25+
.session-actions
26+
= submit_tag 'Log In', class: 'session-submit'
27+
28+
.session-links
29+
= link_to 'Forgot your password?', new_password_path, class: 'session-link'
30+
= link_to 'Register', new_registration_path, class: 'session-link'

0 commit comments

Comments
 (0)