From c1d3d8e4f2a4d3ff98714b1357480258f8af3bc4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 28 Jun 2021 11:16:06 +0200
Subject: [PATCH] styled reset passwords modal

---
 .../components/modal-reset-all-passwords.hbs  | 27 +++++++++----------
 ghost/admin/app/styles/layouts/users.css      | 24 +++++++++++++++++
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/components/modal-reset-all-passwords.hbs b/ghost/admin/app/components/modal-reset-all-passwords.hbs
index 5a1c609d99..0c38357554 100644
--- a/ghost/admin/app/components/modal-reset-all-passwords.hbs
+++ b/ghost/admin/app/components/modal-reset-all-passwords.hbs
@@ -3,23 +3,20 @@
 </header>
 <a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
 
-<div class="modal-body">
-    <p>
-        You're about to end all active staff user sessions and trigger a password reset for everyone (including yourself). Are you sure?
-    </p>
-    <p style="display:flex; column-gap: 0.8em;">
+<div class="modal-body gh-modal-reset-passwords">
+    <p>You're about to end all active staff user sessions and trigger a password reset for everyone (including yourself). Are you sure?</p>
+    <div class="flex mt2 mb2">
+        <div class="for-checkbox">
+            <label class="checkbox">
+                <input type="checkbox" checked={{this.isChecked}} {{on "click" (action "toggleCheckbox")}} class="gh-input" name="checkbox" data-test-checkbox="reset-all-passwords">
+                <span class="input-toggle-component"></span>
+            </label>
+        </div>
         <div>
-            <input type="checkbox" checked={{this.isChecked}} {{on "click" (action "toggleCheckbox")}} name="checkbox" data-test-checkbox="reset-all-passwords">
+            <h4>Yes, end sessions and reset passwords for all users.</h4>
+            <p class="description">Upon submission, you will be logged out. Please check your email to reset your password.</p>
         </div>
-        <div style="flex:1">
-            <div style="margin-bottom: 0.4em">
-                <b>Yes, end sessions and reset passwords for all users.</b>
-            </div>
-            <div>
-                Upon submission, you will be logged out. Please check your email to reset your password.
-            </div>
-        </div>
-    </p>
+    </div>
 </div>
 
 <div class="modal-footer">
diff --git a/ghost/admin/app/styles/layouts/users.css b/ghost/admin/app/styles/layouts/users.css
index 981a80555e..0a16dc2f96 100644
--- a/ghost/admin/app/styles/layouts/users.css
+++ b/ghost/admin/app/styles/layouts/users.css
@@ -241,3 +241,27 @@
     margin: 0;
     width: 100%;
 }
+
+/* Reset all passwords modal
+/* ---------------------------------------------------------- */
+
+.gh-modal-reset-passwords .for-checkbox .input-toggle-component {
+    background: var(--white);
+}
+
+.gh-modal-reset-passwords h4 {
+    font-size: 1.4rem;
+    font-weight: 600;
+    line-height: 1.4em;
+    margin-bottom: .4rem;
+}
+
+.gh-modal-reset-passwords p {
+    margin: 0 0 2em;
+}
+
+.gh-modal-reset-passwords .description {
+    color: var(--midgrey);
+    font-weight: 300;
+    font-size: 1.4rem;
+}
\ No newline at end of file