Merge pull request coralproject#4181 from coralproject/fix/CORL-2775-…

…match-ban-modal-design [CORL-2775] match ban modal design
Lammland · May 23, 2023 · 656058d · 656058d
2 parents 671afd7 + 00054e1
commit 656058d
Show file tree

Hide file tree

Showing 9 changed files with 204 additions and 140 deletions.
diff --git a/src/core/client/admin/components/BanModal.css b/src/core/client/admin/components/BanModal.css
@@ -12,6 +12,26 @@ $ban-modal-text: var(--palette-text-500);
   height: calc(12 * var(--mini-unit));
 }
 
-.sitesToggle {
+.domainBanHeader {
+  margin-bottom: var(--spacing-2);
+}
+
+.form {
   margin-bottom: var(--spacing-3);
 }
+
+.banFromHeader {
+  margin-bottom: var(--spacing-2);
+}
+
+.sitesOptions {
+  margin-bottom: var(--spacing-1);
+}
+
+.banDomainOption {
+  margin: var(--spacing-1) 0;
+}
+
+.customizeMessage {
+  align-self: flex-start;
+}
diff --git a/src/core/client/admin/components/BanModal.spec.tsx b/src/core/client/admin/components/BanModal.spec.tsx
@@ -137,7 +137,7 @@ it("creates domain ban for unmoderated domain while updating user ban status", a
   const modal = getBanModal(container, user);
 
   const banDomainButton = within(modal).getByLabelText(
-    `Ban all new accounts on test.com`
+    `Ban all new commenter accounts from test.com`
   );
   userEvent.click(banDomainButton);
   screen.debug(banDomainButton);
@@ -173,7 +173,7 @@ test.each(gteOrgMods)(
     const modal = getBanModal(container, commenterUser);
 
     const banDomainButton = within(modal).getByLabelText(
-      `Ban all new accounts on test.com`
+      `Ban all new commenter accounts from test.com`
     );
 
     expect(banDomainButton).toBeInTheDocument();
@@ -199,7 +199,7 @@ test.each(siteMods)(
     const modal = getBanModal(container, commenterUser);
 
     const banDomainButton = within(modal).queryByText(
-      `Ban all new accounts on test.com`
+      `Ban all new commenter accounts from test.com`
     );
 
     expect(banDomainButton).toBeNull();
@@ -234,7 +234,7 @@ it("does not display ban domain option for moderated domain", async () => {
   const modal = getBanModal(container, user);
 
   const banDomainButton = within(modal).queryByText(
-    `Ban all new accounts on test.com`
+    `Ban all new commenter accounts from test.com`
   );
 
   expect(banDomainButton).not.toBeInTheDocument();
@@ -280,7 +280,7 @@ test.each([...PROTECTED_EMAIL_DOMAINS.values()])(
     const modal = getBanModal(container, user);
 
     const banDomainButton = within(modal).queryByText(
-      `Ban all new accounts on test.com`
+      `Ban all new commenter accounts from test.com`
     );
 
     expect(banDomainButton).not.toBeInTheDocument();