From 4a56b5e8276a760a3bb9159f9cc638271ff7bdad Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 26 Dec 2021 14:53:23 +0100
Subject: [PATCH] web: fix background for modals on light theme

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/forms/ConfirmationForm.ts | 4 ++--
 web/src/elements/forms/DeleteBulkForm.ts   | 6 +++---
 web/src/elements/forms/DeleteForm.ts       | 6 +++---
 web/src/elements/forms/ModalForm.ts        | 4 ++--
 web/src/pages/groups/MemberSelectModal.ts  | 4 ++--
 web/src/pages/users/GroupSelectModal.ts    | 4 ++--
 web/src/pages/users/UserActiveForm.ts      | 4 ++--
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/src/elements/forms/ConfirmationForm.ts b/web/src/elements/forms/ConfirmationForm.ts
index ed5b463ba..aecb87eae 100644
--- a/web/src/elements/forms/ConfirmationForm.ts
+++ b/web/src/elements/forms/ConfirmationForm.ts
@@ -55,14 +55,14 @@ export class ConfirmationForm extends ModalButton {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
+        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">
                         <slot name="header"></slot>
                     </h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 <form class="pf-c-form pf-m-horizontal">
                     <slot class="pf-c-content" name="body"></slot>
                 </form>
diff --git a/web/src/elements/forms/DeleteBulkForm.ts b/web/src/elements/forms/DeleteBulkForm.ts
index 7ec4dc782..37494674e 100644
--- a/web/src/elements/forms/DeleteBulkForm.ts
+++ b/web/src/elements/forms/DeleteBulkForm.ts
@@ -177,12 +177,12 @@ export class DeleteBulkForm extends ModalButton {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
+        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 <form class="pf-c-form pf-m-horizontal">
                     <p class="pf-c-title">
                         ${t`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`}
@@ -190,7 +190,7 @@ export class DeleteBulkForm extends ModalButton {
                     <slot name="notice"></slot>
                 </form>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 <ak-delete-objects-table
                     .objects=${this.objects}
                     .usedBy=${this.usedBy}
diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts
index 481629b41..84b3a9ea4 100644
--- a/web/src/elements/forms/DeleteForm.ts
+++ b/web/src/elements/forms/DeleteForm.ts
@@ -71,12 +71,12 @@ export class DeleteForm extends ModalButton {
         } else {
             objName = "";
         }
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
+        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 <form class="pf-c-form pf-m-horizontal">
                     <p>${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}</p>
                 </form>
@@ -88,7 +88,7 @@ export class DeleteForm extends ModalButton {
                               return html``;
                           }
                           return html`
-                              <section class="pf-c-modal-box__body pf-c-page__main-section">
+                              <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                                   <form class="pf-c-form pf-m-horizontal">
                                       <p>${t`The following objects use ${objName} `}</p>
                                       <ul class="pf-c-list">
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index adef5706a..10f0d74ae 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -58,14 +58,14 @@ export class ModalForm extends ModalButton {
         return html`${this.loading
                 ? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
                 : html``}
-            <section class="pf-c-modal-box__header pf-c-page__main-section">
+            <section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">
                         <slot name="header"></slot>
                     </h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 <slot name="form"></slot>
             </section>
             <footer class="pf-c-modal-box__footer">
diff --git a/web/src/pages/groups/MemberSelectModal.ts b/web/src/pages/groups/MemberSelectModal.ts
index f19c30a61..addaebed2 100644
--- a/web/src/pages/groups/MemberSelectModal.ts
+++ b/web/src/pages/groups/MemberSelectModal.ts
@@ -63,12 +63,12 @@ export class MemberSelectTable extends TableModal<User> {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
+        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">${t`Select users to add`}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 ${this.renderTable()}
             </section>
             <footer class="pf-c-modal-box__footer">
diff --git a/web/src/pages/users/GroupSelectModal.ts b/web/src/pages/users/GroupSelectModal.ts
index 6e63a81ec..d7162a3f0 100644
--- a/web/src/pages/users/GroupSelectModal.ts
+++ b/web/src/pages/users/GroupSelectModal.ts
@@ -61,12 +61,12 @@ export class GroupSelectModal extends TableModal<Group> {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
+        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">${t`Select groups to add user to`}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 ${this.renderTable()}
             </section>
             <footer class="pf-c-modal-box__footer">
diff --git a/web/src/pages/users/UserActiveForm.ts b/web/src/pages/users/UserActiveForm.ts
index 29b3eb998..5d499618a 100644
--- a/web/src/pages/users/UserActiveForm.ts
+++ b/web/src/pages/users/UserActiveForm.ts
@@ -25,12 +25,12 @@ export class UserActiveForm extends DeleteForm {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
+        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">${t`Update ${this.objectLabel}`}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-c-page__main-section">
+            <section class="pf-c-modal-box__body pf-c-page__main-section pf-m-light">
                 <form class="pf-c-form pf-m-horizontal">
                     <p>
                         ${t`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`}