web/user: experiment with some slightly different styles (#6405)

* web/user: experiment with some slightly different styles

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* rework application card

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix color and expand

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix expansion

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/common/styles/authentik.css

@@ -9,6 +9,9 @@
     --ak-dark-background-light: #1c1e21;
     --ak-dark-background-light-ish: #212427;
     --ak-dark-background-lighter: #2b2e33;
+
+    /* PatternFly likes to override global variables for some reason */
+    --ak-global--Color--100: var(--pf-global--Color--100);
 }
 
 ::-webkit-scrollbar {

web/src/common/styles/theme-dark.css

@@ -1,11 +1,12 @@
-body {
-    background-color: var(--ak-dark-background) !important;
-}
 :root {
     --pf-global--Color--100: var(--ak-dark-foreground) !important;
+    --ak-global--Color--100: var(--ak-dark-foreground) !important;
     --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
     --pf-global--link--Color: var(--ak-dark-foreground-link) !important;
 }
+body {
+    background-color: var(--ak-dark-background) !important;
+}
 .pf-c-radio {
     --pf-c-radio__label--Color: var(--ak-dark-foreground);
 }

web/src/user/LibraryApplication.ts

@@ -1,5 +1,6 @@
 import { truncateWords } from "@goauthentik/common/utils";
 import { AKElement, rootInterface } from "@goauthentik/elements/Base";
+import "@goauthentik/elements/Expand";
 import { UserInterface } from "@goauthentik/user/UserInterface";
 
 import { msg } from "@lit/localize";
@@ -32,27 +33,47 @@ export class LibraryApplication extends AKElement {
             PFButton,
             PFAvatar,
             css`
-                .pf-c-card {
+                :host {
-                    height: 100%;
+                    --icon-height: 4rem;
+                    --icon-border: 0.25rem;
                 }
-                i.pf-icon {
+                .pf-c-card {
-                    height: 36px;
+                    --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
                 }
                 .pf-c-avatar {
                     --pf-c-avatar--BorderRadius: 0;
+                    --pf-c-avatar--Height: calc(
+                        var(--icon-height) + var(--icon-border) + var(--icon-border)
+                    );
+                    --pf-c-avatar--Width: calc(
+                        var(--icon-height) + var(--icon-border) + var(--icon-border)
+                    );
                 }
                 .pf-c-card__header {
-                    min-height: 60px;
                     justify-content: space-between;
+                    flex-direction: column;
                 }
                 .pf-c-card__header a {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
-                    margin-right: 0.25em;
+                }
+                .icon {
+                    font-size: var(--icon-height);
+                    color: var(--ak-global--Color--100);
+                    padding: var(--icon-border);
+                    max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                    line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                }
+                .expander {
+                    flex-grow: 1;
+                }
+                .pf-c-card__title {
+                    text-align: center;
+                    /* This is not ideal as it hard limits us to 2 lines of text for the title
+                    of the application. In theory that should be fine for most cases, but ideally
+                    we don't do this */
+                    height: 48px;
                 }
             `,
         ];
@@ -62,7 +83,7 @@ export class LibraryApplication extends AKElement {
         if (this.application?.metaIcon) {
             if (this.application.metaIcon.startsWith("fa://")) {
                 const icon = this.application.metaIcon.replaceAll("fa://", "");
-                return html`<i class="fas ${icon}"></i>`;
+                return html`<i class="icon fas ${icon}"></i>`;
             }
             return html`<img
                 class="app-icon pf-c-avatar"
@@ -70,7 +91,7 @@ export class LibraryApplication extends AKElement {
                 alt="${msg("Application Icon")}"
             />`;
         }
-        return html`<i class="fas fa-share-square"></i>`;
+        return html`<span class="icon">${this.application?.name.charAt(0).toUpperCase()}</span>`;
     }
 
     render(): TemplateResult {
@@ -82,7 +103,7 @@ export class LibraryApplication extends AKElement {
             class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected
                 ? "pf-m-selectable pf-m-selected"
                 : ""}"
-            style="background: ${this.background} !important"
+            style=${this.background !== "" ? `background: ${this.background} !important` : ""}
         >
             <div class="pf-c-card__header">
                 <a
@@ -91,32 +112,31 @@ export class LibraryApplication extends AKElement {
                 >
                     ${this.renderIcon()}
                 </a>
-                ${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser
-                    ? html`
-                          <a
-                              class="pf-c-button pf-m-control pf-m-small"
-                              href="/if/admin/#/core/applications/${this.application?.slug}"
-                          >
-                              <i class="fas fa-pencil-alt"></i>
-                          </a>
-                      `
-                    : html``}
             </div>
             <div class="pf-c-card__title">
-                <p>
+                <a
-                    <a
+                    href="${ifDefined(this.application.launchUrl ?? "")}"
-                        href="${ifDefined(this.application.launchUrl ?? "")}"
+                    target="${ifDefined(this.application.openInNewTab ? "_blank" : undefined)}"
-                        target="${ifDefined(this.application.openInNewTab ? "_blank" : undefined)}"
+                    >${this.application.name}</a
-                        >${this.application.name}</a
+                >
-                    >
+            </div>
-                </p>
+            <div class="expander"></div>
+            <ak-expand>
                 <div class="pf-c-content">
                     <small>${this.application.metaPublisher}</small>
                 </div>
-            </div>
+                ${truncateWords(this.application.metaDescription || "", 10)}
-            <div class="pf-c-card__body">
+                ${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser
-                ${truncateWords(this.application.metaDescription || "", 35)}
+                    ? html`
-            </div>
+                          <a
+                              class="pf-c-button pf-m-control pf-m-small pf-m-block"
+                              href="/if/admin/#/core/applications/${this.application?.slug}"
+                          >
+                              <i class="fas fa-pencil-alt"></i>&nbsp;${msg("Edit")}
+                          </a>
+                      `
+                    : html``}
+            </ak-expand>
         </div>`;
     }
 }

web/src/user/UserInterface.ts

@@ -73,12 +73,22 @@ export class UserInterface extends Interface {
                     z-index: auto !important;
                     background-color: transparent !important;
                 }
+                .pf-c-page__header {
+                    background-color: transparent !important;
+                    box-shadow: none !important;
+                    color: black !important;
+                }
+                :host([theme="dark"]) .pf-c-page__header {
+                    color: var(--ak-dark-foreground) !important;
+                }
+                .pf-c-page__header-tools-item .fas,
+                .pf-c-notification-badge__count,
+                .pf-c-page__header-tools-group .pf-c-button {
+                    color: var(--ak-global--Color--100) !important;
+                }
                 .pf-c-page {
                     background-color: transparent;
                 }
-                .background-wrapper {
-                    background-color: var(--pf-c-page--BackgroundColor) !important;
-                }
                 .display-none {
                     display: none;
                 }
@@ -96,6 +106,15 @@ export class UserInterface extends Interface {
                     z-index: -1;
                     top: 0;
                     left: 0;
+                    background-color: var(--pf-c-page--BackgroundColor) !important;
+                }
+                .background-default-slant {
+                    background-color: white; /*var(--ak-accent);*/
+                    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
+                    height: 50vh;
+                }
+                :host([theme="dark"]) .background-default-slant {
+                    background-color: black;
                 }
                 ak-locale-context {
                     display: flex;
@@ -158,7 +177,11 @@ export class UserInterface extends Interface {
         return html` <ak-locale-context>
             <ak-enterprise-status interface="user"></ak-enterprise-status>
             <div class="pf-c-page">
-                <div class="background-wrapper" style="${this.uiConfig.theme.background}"></div>
+                <div class="background-wrapper" style="${this.uiConfig.theme.background}">
+                    ${this.uiConfig.theme.background === ""
+                        ? html`<div class="background-default-slant"></div>`
+                        : html``}
+                </div>
                 <header class="pf-c-page__header">
                     <div class="pf-c-page__header-brand">
                         <a href="#/" class="pf-c-page__header-brand-link">
@@ -215,7 +238,7 @@ export class UserInterface extends Interface {
                                                   ? "pf-m-unread"
                                                   : ""}"
                                           >
-                                              <i class="pf-icon-bell" aria-hidden="true"></i>
+                                              <i class="fas fa-bell" aria-hidden="true"></i>
                                               <span class="pf-c-notification-badge__count"
                                                   >${this.notificationsCount}</span
                                               >
@@ -244,7 +267,7 @@ export class UserInterface extends Interface {
                             </div>
                             ${this.me.user.isSuperuser
                                 ? html`<a
-                                      class="pf-c-button pf-m-primary pf-m-small pf-u-display-none pf-u-display-block-on-md"
+                                      class="pf-c-button pf-m-secondary pf-m-small pf-u-display-none pf-u-display-block-on-md"
                                       href="/if/admin"
                                   >
                                       ${msg("Admin interface")}