From 1f5932d65bd87a10dfb2807add7b45edaa6dc563 Mon Sep 17 00:00:00 2001
From: Jens L <jens@goauthentik.io>
Date: Wed, 23 Aug 2023 19:24:21 +0200
Subject: [PATCH] web/user: fix user settings elements not being in cards
 (#6608)

this broke some theming on the light theme

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 .../user/user-settings/UserSettingsPage.ts    | 46 +++++++++++++------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts
index 8f447c4df..cd9718066 100644
--- a/web/src/user/user-settings/UserSettingsPage.ts
+++ b/web/src/user/user-settings/UserSettingsPage.ts
@@ -116,43 +116,63 @@ export class UserSettingsPage extends AKElement {
                         data-tab-title="${msg("Sessions")}"
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <ak-user-session-list
-                            targetUser=${ifDefined(
-                                rootInterface<UserInterface>()?.me?.user.username,
-                            )}
-                        ></ak-user-session-list>
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__body">
+                                <ak-user-session-list
+                                    targetUser=${ifDefined(
+                                        rootInterface<UserInterface>()?.me?.user.username,
+                                    )}
+                                ></ak-user-session-list>
+                            </div>
+                        </div>
                     </section>
                     <section
                         slot="page-consents"
                         data-tab-title="${msg("Consent")}"
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <ak-user-consent-list
-                            userId=${ifDefined(rootInterface<UserInterface>()?.me?.user.pk)}
-                        ></ak-user-consent-list>
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__body">
+                                <ak-user-consent-list
+                                    userId=${ifDefined(rootInterface<UserInterface>()?.me?.user.pk)}
+                                ></ak-user-consent-list>
+                            </div>
+                        </div>
                     </section>
                     <section
                         slot="page-mfa"
                         data-tab-title="${msg("MFA Devices")}"
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <ak-user-settings-mfa
-                            .userSettings=${this.userSettings}
-                        ></ak-user-settings-mfa>
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__body">
+                                <ak-user-settings-mfa
+                                    .userSettings=${this.userSettings}
+                                ></ak-user-settings-mfa>
+                            </div>
+                        </div>
                     </section>
                     <section
                         slot="page-sources"
                         data-tab-title="${msg("Connected services")}"
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <ak-user-settings-source></ak-user-settings-source>
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__body">
+                                <ak-user-settings-source></ak-user-settings-source>
+                            </div>
+                        </div>
                     </section>
                     <section
                         slot="page-tokens"
                         data-tab-title="${msg("Tokens and App passwords")}"
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <ak-user-token-list></ak-user-token-list>
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__body">
+                                <ak-user-token-list></ak-user-token-list>
+                            </div>
+                        </div>
                     </section>
                 </ak-tabs>
             </main>