Skip to content

Commit 178f7fb

Browse files
tvdeyentvdeyen
authored
Merge pull request #229 from AlchemyCMS/login-dark
New login screen with dark mode support
2 parents 6b70755 + 7adb1a4 commit 178f7fb

8 files changed

Lines changed: 103 additions & 47 deletions

File tree

‎app/assets/builds/alchemy-devise.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/builds/alchemy-devise.css.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/assets/stylesheets/alchemy-devise/login.scss‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
body.user_sessions,
22
body.passwords {
3-
background-color: var(--color-blue_dark);
4-
color: var(--color-white);
5-
6-
a {
7-
color: var(--color-white);
8-
}
9-
103
#errors,
114
.message.info {
125
border-color: transparent;
@@ -17,21 +10,25 @@ body.passwords {
1710
}
1811
}
1912

20-
#logo {
21-
width: 275px;
22-
height: auto;
23-
margin: 0 0 1em 164px;
13+
.logo-box {
14+
width: 250px;
15+
margin: 0 10px 1.5em 200px;
16+
17+
svg {
18+
width: 200px;
19+
height: auto;
20+
}
2421
}
2522

2623
.login_signup_box {
2724
position: absolute;
28-
width: 450px;
2925
top: 50%;
3026
left: 50%;
31-
transform: translate(-60%, -50%);
32-
--form-field-label-color: var(--color-white);
33-
--button-secondary-bg-color: var(--color-blue_dark);
34-
--button-secondary-hover-bg-color: var(--color-blue_medium);
27+
transform: translate(-50%, -50%);
28+
29+
alchemy-message {
30+
margin-left: var(--form-left-column-width);
31+
}
3532

3633
.no-js & {
3734
display: none;
@@ -41,12 +38,25 @@ body.passwords {
4138
margin-left: 157px;
4239
}
4340

44-
.link {
45-
text-align: right;
46-
}
47-
48-
button.secondary {
49-
color: var(--color-white);
50-
border-color: var(--color-white);
41+
.submit {
42+
display: flex;
43+
align-items: center;
44+
justify-content: space-between;
45+
gap: var(--spacing-4);
46+
margin-left: var(--form-left-column-width);
47+
padding-left: var(--spacing-0);
48+
49+
> a {
50+
display: inline-flex;
51+
align-items: center;
52+
gap: var(--spacing-0);
53+
54+
&:hover {
55+
alchemy-icon {
56+
transform: translateX(-2px);
57+
transition: transform var(--transition-duration);
58+
}
59+
}
60+
}
5161
}
5262
}

‎app/views/alchemy/admin/passwords/edit.html.erb‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
<% end %>
44

55
<div class="login_signup_box">
6-
<%= image_tag 'alchemy/alchemy-logo.svg', id: 'logo' %>
6+
<%= render "alchemy/admin/user_sessions/logo" %>
77
<% if @user.errors.blank? %>
88
<%= render_message do %>
9-
<h1><%= Alchemy.t('Password reset') %></h1>
9+
<p>
10+
<strong><%= Alchemy.t('Password reset') %></strong>
11+
</p>
1012
<p><%= Alchemy.t('Please enter a new password') %></p>
1113
<% end %>
1214
<% else %>
@@ -18,11 +20,14 @@
1820
<%= f.hidden_field :reset_password_token %>
1921
<%= f.input :password, autofocus: true, label: Alchemy.t("New password") %>
2022
<%= f.input :password_confirmation, label: Alchemy.t("Confirm new password") %>
21-
<div class="input link">
22-
<small>
23-
<%= link_to Alchemy.t(:back), alchemy.admin_login_path %>
24-
</small>
23+
<div class="submit">
24+
<%= link_to alchemy.admin_login_path do %>
25+
<%= render_icon("arrow-left-s", size: "1x") %>
26+
<%= Alchemy.t(:login) %>
27+
<% end %>
28+
<button type="submit">
29+
<%= Alchemy.t("Change password") %>
30+
</button>
2531
</div>
26-
<%= f.submit Alchemy.t("Change password") %>
2732
<% end %>
2833
</div>

‎app/views/alchemy/admin/passwords/new.html.erb‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
<% end %>
44

55
<div class="login_signup_box">
6-
<%= image_tag 'alchemy/alchemy-logo.svg', id: 'logo' %>
6+
<%= render "alchemy/admin/user_sessions/logo" %>
77
<% if @user.errors.blank? %>
88
<%= render_message do %>
9-
<h1><%= Alchemy.t('Password reset') %></h1>
9+
<p>
10+
<strong><%= Alchemy.t('Password reset') %></strong>
11+
</p>
1012
<p><%= Alchemy.t('Please enter your email address') %></p>
1113
<% end %>
1214
<% else %>
@@ -18,11 +20,14 @@
1820
<%= f.input :email,
1921
autofocus: true,
2022
input_html: {value: params[:email]} %>
21-
<div class="input link">
22-
<small>
23-
<%= link_to Alchemy.t(:back), alchemy.admin_login_path %>
24-
</small>
23+
<div class="submit">
24+
<%= link_to alchemy.admin_login_path do %>
25+
<%= render_icon("arrow-left-s", size: "1x") %>
26+
<%= Alchemy.t(:login) %>
27+
<% end %>
28+
<button type="submit">
29+
<%= Alchemy.t("Send reset instructions") %>
30+
</button>
2531
</div>
26-
<%= f.submit Alchemy.t("Send reset instructions"), input_html: {class: 'secondary'} %>
2732
<% end %>
2833
</div>

‎app/views/alchemy/admin/user_sessions/_logo.html.erb‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div class="logo-box">
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
width="267"
5+
height="91"
6+
viewBox="0 0 267 91"
7+
>
8+
<path
9+
d="M261.749 29.77h-9.812l-.72 2.738a193.53 193.53 0 0 0-.802 3.217c-.334-1.384-.604-2.5-.767-3.162l-.685-2.792H234.075c-1.102-.371-2.338-.564-3.705-.564-2.537 0-4.557.864-6.104 1.934-1.406-1.15-3.402-1.934-6.221-1.934-1.341 0-2.524.242-3.564.625l-.006-.061H201.334v4.17c-2.345-3.051-5.884-4.735-10.401-4.735-4.196 0-8.831 1.936-11.655 6.784-1.194-3.746-3.896-6.784-9.557-6.784-1.385 0-2.626.24-3.727.617v-12.19l-4.204.623-6.934 1.027-3.132.464v10.324a22.109 22.109 0 0 0-6.086-.864c-5.96 0-9.341 2.652-11.128 4.876-.108.133-.2.284-.303.422V17.633l-4.207.623-6.933 1.027-3.131.464v24.04l-5.118-18.709-.739-2.701H99.863l-.745 2.686L95.854 36.8 80.915 21.597a2.922 2.922 0 0 0-2.823-.776l-18.554 4.875a2.918 2.918 0 0 0-.634-.981L39.437 4.906a2.927 2.927 0 0 0-2.826-.777L9.797 11.173a2.92 2.92 0 0 0-2.073 2.054L.372 40.078a2.922 2.922 0 0 0 .735 2.818L20.6 62.705a2.921 2.921 0 0 0 2.822.774l9.259-2.43-3.051 11.1a2.921 2.921 0 0 0 .735 2.821l10.94 11.122a2.92 2.92 0 0 0 2.822.778l15.08-3.953a2.919 2.919 0 0 0 2.077-2.055l3.536-12.978.316.324a2.928 2.928 0 0 0 2.064.872c.254.001.508-.031.761-.098l20.839-5.48H103.275l.72-2.733.82-3.121h3.794l.822 3.122.718 2.732h24.059v-4.307c.07.092.133.194.207.282 1.729 2.119 5.001 4.643 10.76 4.643 2.735 0 4.945-.705 6.55-1.415v.797H180.119v-4.383c2.392 3.007 5.737 4.495 9.134 4.885-1.602 1.106-3.095 2.759-4.467 4.952-2.161 3.454-3.211 6.441-3.211 9.137 0 2.014.524 3.774 1.562 5.236 1.388 1.967 3.57 3.053 6.143 3.053.226 0 .384-.016.896-.073.142-.014.243-.025.312-.03 1.014-.043 2.078-.446 4.047-1.521.468-.248.973-.622 2.077-1.656.966 3.029 2.97 3.501 4.119 3.501 2.479 0 4.354-1.665 4.575-4.057.007-.045.041-.233.189-.649.774 1.335 2.059 2.415 4.188 2.415 2.658 0 4.791-2.088 6.555-4.378.065.155.132.312.203.47 1.794 4.082 4.646 4.694 6.185 4.694.76 0 1.52-.168 2.307-.503.228.213.463.419.726.605a6.818 6.818 0 0 0 3.993 1.302c2.273 0 4.515-.764 6.661-2.274 3.357-2.369 4.061-5.111 4.061-6.996 0-2.266-1.092-4.215-3.014-5.406a4.177 4.177 0 0 0 2.142-1.312c.918 1.27 1.794 2.475 2.303 3.129l1.917 2.468 2.74-1.503.268-.144c2.382-1.291 7.335-3.979 9.847-12.048l8.677-27.888 1.479-4.759h-4.984z"
10+
fill="transparent"
11+
/>
12+
<path
13+
fill="currentColor"
14+
d="M102.705 26.102h8.626l9.245 33.793h-7.549l-1.541-5.856h-9.448l-1.541 5.856h-7.189l9.397-33.793zm.411 23.008h7.291c-1.282-5.857-2.925-12.841-3.594-16.487-.719 3.647-2.362 10.63-3.697 16.487zm27.472 10.786h-6.931V22.969l6.931-1.026v37.953zm22.187-1.748c-.977.409-3.545 2.364-7.549 2.364-6.883 0-10.682-4.314-10.682-13.405 0-9.554 3.953-14.176 11.143-14.176 2.878 0 5.239.719 6.163 1.079l-.822 5.083c-.666-.256-2.517-.822-4.365-.822-3.388 0-4.981 2.62-4.981 8.579 0 6.061 1.747 8.267 4.775 8.267 2.108 0 4.008-1.128 4.726-1.386l1.592 4.417zm2.671-35.179l6.931-1.026v14.943h.105c.717-.667 3.079-3.954 7.291-3.954 4.826 0 6.728 2.979 6.728 9.193v17.771h-6.934V43.819c0-3.801-.616-4.879-2.721-4.879-2.107 0-3.853 2.157-4.47 2.876v18.079h-6.931V22.969zm44.73 35.026c-.771.514-3.956 2.518-9.038 2.518-5.957 0-10.785-3.852-10.785-13.097 0-9.811 4.775-14.484 10.63-14.484 5.854 0 9.963 3.646 9.963 12.273 0 1.851-.257 3.339-.309 3.597h-13.401c.05 4.571 2.311 6.469 5.235 6.469 2.773 0 5.086-1.231 6.319-1.795l1.386 4.519zm-12.941-13.509h7.034c0-5.237-1.437-6.624-3.338-6.624-1.798 0-3.646 1.643-3.696 6.624zm17.82-10.989h6.107l.31 3.543c.772-.925 2.722-4.109 6.624-4.109 2.98 0 4.828 1.027 5.598 4.057.874-1.181 3.03-4.057 6.728-4.057 4.468 0 6.37 2.517 6.37 9.141v17.823h-6.883V42.637c0-2.311-.358-3.697-2.158-3.697-1.797 0-3.183 2.054-3.543 2.876v18.079h-6.625V42.637c0-2.311-.358-3.697-2.157-3.697-1.796 0-3.131 2.003-3.542 2.876v18.079h-6.828V33.497zm56.744 0l-8.679 27.887c-2.156 6.934-6.213 8.886-8.37 10.067-.718-.926-2.414-3.287-3.081-4.213.771-.668 4.467-2.566 5.546-6.778l-8.318-26.963h7.239c.771 3.132 3.545 14.688 4.314 19.002.821-4.417 3.545-15.87 4.367-19.002h6.982z"
15+
/>
16+
<g>
17+
<path
18+
fill="currentColor"
19+
d="M193.986 68.011c.319 0 .667.193 1.031.578.897.95 1.506 1.125 2.353.546.367-.254.548-.633.508-1.05-.054-.799-.66-1.456-1.799-1.957-.818-.364-1.438-.541-1.896-.541-2.436.013-4.74 1.736-6.854 5.116-1.807 2.889-2.722 5.389-2.722 7.435 0 1.336.326 2.474.969 3.379.796 1.128 1.983 1.701 3.526 1.701.029 0 .213-.016.555-.054.268-.028.427-.045.47-.046.306 0 .867-.139 2.703-1.14.226-.117.704-.468 2.439-2.166 1.932-1.896 2.285-2.549 2.366-2.884.084-.275.01-.583-.22-.921-.238-.344-.523-.518-.838-.518a.786.786 0 0 0-.708.429c-.872 1.35-1.932 2.444-3.146 3.266-1.295.868-2.615 1.308-3.923 1.308-.778 0-1.671-.234-1.671-2.074 0-1.427.742-3.47 2.211-6.08 1.621-2.872 3.183-4.327 4.646-4.327zm30.25 10.553c-.354 0-.695.247-1.103.798-.301.408-.535.409-.654.408-.259-.01-1.135-.388-1.441-4.977l-.305-4.414c-.25-1.795-.915-2.704-1.979-2.704-.68 0-1.78.545-4.245 4.804a46.07 46.07 0 0 1-2.457 3.695c-.936 1.256-1.511 1.87-1.856 2.171-.082-.436-.124-.979-.124-1.635 0-.533.027-1.253.081-2.143.055-.995.089-1.633.101-1.925.039-2.004-.251-3.293-.885-3.941a1.569 1.569 0 0 0-1.157-.483c-1.114 0-2.453 1.26-4.214 3.968-.44.683-1.144 1.88-2.093 3.565.149-2.311.529-4.59 1.141-6.795.071-.267.054-.669-.433-1.089-.33-.287-.703-.436-1.107-.436-.863 0-1.277 1.173-1.539 2.19-.313 1.16-.526 2.592-.635 4.245-.119 1.754-.181 3.891-.181 6.36 0 .357.075.868.233 1.577.203.807.5 1.631 1.17 1.631.813 0 1.32-.423 1.381-1.157.113-1.165 1.095-3.422 2.918-6.71 1.54-2.804 2.334-3.953 2.701-4.42 0 .089 0 .194-.005.32-.15 3.265-.211 5.245-.182 5.886.105 2.516.823 3.792 2.139 3.792 1.21 0 2.685-1.261 4.636-3.968.255-.355 2.324-3.588 3.537-5.488.234-.37.414-.648.545-.854.012.086.021.184.031.293.052.55.064 1.329.038 2.328v2.002c.01 1.115.313 2.354.903 3.685.812 1.851 1.907 2.786 3.252 2.786.459 0 .972-.164 1.575-.502.819-.475 1.234-1.083 1.234-1.804.001-.652-.392-1.059-1.021-1.059zm6.628-4.902c-2.19 0-2.468-.365-2.475-.365 0-.874.821-2.04 2.372-3.37 1.809-1.556 2.828-1.882 3.366-1.882.036 0 .073.003.123.006.072.004.298.046.826.328.721.386.872.415 1.009.415.727 0 1.163-.494 1.163-1.324 0-.631-.425-1.187-1.268-1.647-.651-.35-1.201-.517-1.684-.517-1.572 0-3.401 1.039-5.592 3.175-2.195 2.138-3.262 3.892-3.262 5.361 0 .738.509 1.313 1.518 1.711.65.258 1.33.402 2.023.432l3.86.141c.473.023.891.157 1.28.407.556.367.619.737.619.983 0 .86-1.161 1.629-2.133 2.122-1.358.688-2.57 1.035-3.598 1.035-.625 0-.625-.247-.625-.444 0-.104.017-.197.054-.283.126-.3.213-.694.266-1.218l.035-.339-.312-.132c-.656-.279-1.311.032-1.813.841-.316.495-.47.93-.47 1.33 0 .904.4 1.646 1.192 2.199a3.557 3.557 0 0 0 2.134.712c1.598 0 3.218-.569 4.811-1.693 1.794-1.263 2.701-2.733 2.701-4.371.002-2.398-2.057-3.613-6.12-3.613z"
20+
/>
21+
</g>
22+
<g fill-rule="evenodd" clip-rule="evenodd" fill="currentColor">
23+
<path
24+
d="M47.632 51.588L23.382 57.956 5.754 40.043 12.401 15.762 36.65 9.393 54.254 27.305z"
25+
/>
26+
<path
27+
d="M57.42 79.029L43.781 82.603 33.888 72.543 37.632 58.91 51.244 55.334 61.138 65.395z"
28+
/>
29+
<path
30+
d="M86.963 59.079L67.775 64.128 53.829 49.94 59.066 30.726 78.277 25.679 92.223 39.865z"
31+
/>
32+
</g>
33+
</svg>
34+
<small><%= Alchemy.version %></small>
35+
</div>

‎app/views/alchemy/admin/user_sessions/new.html.erb‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@
33
<% end %>
44

55
<div class="login_signup_box">
6-
<%= image_tag 'alchemy/alchemy-logo.svg', id: 'logo' %>
6+
<%= render "alchemy/admin/user_sessions/logo" %>
7+
<%= render_message do %>
8+
<p>
9+
<strong><%= Alchemy.t('modules.user_sessions') %></strong>
10+
</p>
11+
<p><%= Alchemy.t('welcome_please_identify_notice') %></p>
12+
<% end %>
713
<%= alchemy_form_for :user, url: {action: 'create'}, id: 'login', data: { turbo: false } do |f| %>
814
<%= f.input Devise.authentication_keys.first, autofocus: true %>
915
<%= f.input :password %>
10-
<div class="input link">
11-
<small>
12-
<%= link_to Alchemy.t('Forgot your password?'), admin_new_password_path %>
13-
</small>
14-
</div>
1516
<div class="submit">
16-
<button class="secondary"><%= Alchemy.t(:login) %></button>
17+
<%= link_to Alchemy.t('Forgot your password?'), admin_new_password_path %>
18+
<button type="submit"><%= Alchemy.t(:login) %></button>
1719
</div>
1820
<% end %>
1921
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"author": "Thomas von Deyen",
44
"license": "BSD-3-Clause",
55
"scripts": {
6-
"build": "sass --style=compressed --source-map --load-path app/assets/stylesheets app/assets/stylesheets/alchemy-devise.scss:app/assets/builds/alchemy-devise.css"
6+
"build": "sass --style=compressed --no-source-map --load-path app/assets/stylesheets app/assets/stylesheets/alchemy-devise.scss:app/assets/builds/alchemy-devise.css"
77
},
88
"devDependencies": {
99
"sass": "^1.77.8"

0 commit comments

Comments
 (0)