web: remove common_styles

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/pages/LibraryPage.ts

@@ -6,8 +6,15 @@ import { Application, CoreApi } from "authentik-api";
 import { AKResponse } from "../api/Client";
 import { DEFAULT_CONFIG } from "../api/Config";
 import { me } from "../api/Users";
-import { COMMON_STYLES } from "../common/styles";
 import { loading, truncate } from "../utils";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import AKGlobal from "../authentik.css";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 
 @customElement("ak-library-app")
 export class LibraryApplication extends LitElement {
@@ -15,7 +22,7 @@ export class LibraryApplication extends LitElement {
     application?: Application;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFCard, PFAvatar,
             css`
                 a {
                     height: 100%;
@@ -36,7 +43,7 @@ export class LibraryApplication extends LitElement {
                     margin-right: 0.25em;
                 }
             `
-        );
+        ];
     }
 
     render(): TemplateResult {
@@ -75,7 +82,7 @@ export class LibraryPage extends LitElement {
     apps?: AKResponse<Application>;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFEmptyState, PFTitle, PFPage, PFContent, AKGlobal].concat(css`
             :host,
             main {
                 height: 100%;

web/src/pages/admin-overview/AdminOverviewPage.ts

@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/charts/AdminLoginsChart";
 import "../../elements/cards/AggregatePromiseCard";
@@ -14,11 +13,15 @@ import "./cards/UserCountStatusCard";
 import "./cards/VersionStatusCard";
 import "./cards/WorkerStatusCard";
 
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+
 @customElement("ak-admin-overview")
 export class AdminOverviewPage extends LitElement {
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFGallery, PFPage, PFContent];
     }
 
     render(): TemplateResult {

web/src/pages/admin-overview/TopApplicationsTable.ts

@@ -1,7 +1,7 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 import { EventsApi, EventTopPerUser } from "authentik-api";
+import PFTable from "@patternfly/patternfly/components/Table/table.css";
 
 import "../../elements/Spinner";
 import { DEFAULT_CONFIG } from "../../api/Config";
@@ -13,7 +13,7 @@ export class TopApplicationsTable extends LitElement {
     topN?: EventTopPerUser[];
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFTable];
     }
 
     firstUpdated(): void {

web/src/pages/applications/ApplicationListPage.ts

@@ -10,6 +10,7 @@ import { PAGE_SIZE } from "../../constants";
 import { Application, CoreApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 
 @customElement("ak-application-list")
 export class ApplicationListPage extends TablePage<Application> {
@@ -39,7 +40,7 @@ export class ApplicationListPage extends TablePage<Application> {
     }
 
     static get styles(): CSSResult[] {
-        return super.styles.concat(css`
+        return super.styles.concat(PFAvatar, css`
             tr td:first-child {
                 width: auto;
                 min-width: 0px;

web/src/pages/applications/ApplicationViewPage.ts

@@ -1,16 +1,19 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/Tabs";
 import "../../elements/charts/ApplicationAuthorizeChart";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/policies/BoundPoliciesList";
-import "../../elements/utils/LoadingState";
+import "../../elements/EmptyState";
 import { Application, CoreApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+
 @customElement("ak-application-view")
 export class ApplicationViewPage extends LitElement {
     @property()
@@ -31,7 +34,7 @@ export class ApplicationViewPage extends LitElement {
     application!: Application;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFPage, PFContent, PFGallery].concat(
             css`
                 img.pf-icon {
                     max-height: 24px;
@@ -52,7 +55,10 @@ export class ApplicationViewPage extends LitElement {
                     </h1>
                 </div>
             </section>
-            <ak-loading-state></ak-loading-state>`;
+            <ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<section class="pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">

web/src/pages/events/EventInfo.ts

@@ -2,13 +2,17 @@ import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
 import { FlowsApi } from "authentik-api";
-import { COMMON_STYLES } from "../../common/styles";
 import "../../elements/Spinner";
 import "../../elements/Expand";
 import { SpinnerSize } from "../../elements/Spinner";
 import { EventContext, EventWithContext } from "../../api/Events";
 import { DEFAULT_CONFIG } from "../../api/Config";
 
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFList from "@patternfly/patternfly/components/List/list.css";
+
 @customElement("ak-event-info")
 export class EventInfo extends LitElement {
 
@@ -16,7 +20,7 @@ export class EventInfo extends LitElement {
     event!: EventWithContext;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFFlex, PFList, PFDescriptionList,
             css`
                 code {
                     display: block;
@@ -29,7 +33,7 @@ export class EventInfo extends LitElement {
                     min-width: 25%;
                 }
             `
-        );
+        ];
     }
 
     getModelInfo(context: EventContext): TemplateResult {

web/src/pages/events/EventInfoPage.ts

@@ -3,7 +3,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import { EventsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { EventWithContext } from "../../api/Events";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import "./EventInfo";
 
 @customElement("ak-event-info-page")
@@ -26,7 +28,7 @@ export class EventInfoPage extends LitElement {
     event!: EventWithContext;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFPage, PFCard].concat(css`
             .pf-c-card {
                 color: var(--ak-dark-foreground);
             }

web/src/pages/flows/FlowViewPage.ts

@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/Tabs";
 import "../../elements/buttons/ModalButton";
@@ -11,6 +10,10 @@ import "./FlowDiagram";
 import { Flow, FlowsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+
 @customElement("ak-flow-view")
 export class FlowViewPage extends LitElement {
     @property()
@@ -26,7 +29,7 @@ export class FlowViewPage extends LitElement {
     flow!: Flow;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFPage, PFContent, PFGallery].concat(
             css`
                 img.pf-icon {
                     max-height: 24px;

web/src/pages/generic/SiteShell.ts

@@ -4,7 +4,10 @@ import { showMessage } from "../../elements/messages/MessageContainer";
 import { gettext } from "django";
 import { SentryIgnoredError } from "../../common/errors";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 
 @customElement("ak-site-shell")
 export class SiteShell extends LitElement {
@@ -23,7 +26,7 @@ export class SiteShell extends LitElement {
     body = "";
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFPage, PFGallery, PFContent].concat(
             css`
                 :host,
                 ::slotted(*) {

web/src/pages/outposts/OutpostHealth.ts

@@ -3,8 +3,9 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
 import { until } from "lit-html/directives/until";
 import { OutpostsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import "../../elements/Spinner";
+import { ColorStyles } from "../../common/styles";
 
 @customElement("ak-outpost-health")
 export class OutpostHealth extends LitElement {
@@ -13,7 +14,7 @@ export class OutpostHealth extends LitElement {
     outpostId?: string;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, ColorStyles];
     }
 
     render(): TemplateResult {

web/src/pages/providers/OAuth2ProviderViewPage.ts

@@ -1,6 +1,9 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -47,7 +50,7 @@ export class OAuth2ProviderViewPage extends Page {
     providerUrls?: OAuth2ProviderSetupURLs;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFPage, PFGallery, PFContent];
     }
 
     constructor() {

web/src/pages/providers/ProviderViewPage.ts

@@ -1,9 +1,8 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
-import "../../elements/utils/LoadingState";
+import "../../elements/EmptyState";
 
 import "./SAMLProviderViewPage";
 import "./OAuth2ProviderViewPage";
@@ -11,6 +10,7 @@ import "./ProxyProviderViewPage";
 import { Provider, ProvidersApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { ifDefined } from "lit-html/directives/if-defined";
+import { gettext } from "django";
 
 @customElement("ak-provider-view")
 export class ProviderViewPage extends LitElement {
@@ -26,16 +26,19 @@ export class ProviderViewPage extends LitElement {
     provider?: Provider;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [css`
             * {
                 height: 100%;
             }
-        `);
+        `];
     }
 
     render(): TemplateResult {
         if (!this.provider) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         switch (this.provider?.objectType) {
             case "saml":

web/src/pages/providers/ProxyProviderViewPage.ts

@@ -1,6 +1,11 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -40,7 +45,7 @@ export class ProxyProviderViewPage extends Page {
     provider?: ProxyProvider;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFPage, PFContent, PFDescriptionList, PFCard, PFBase];
     }
 
     constructor() {

web/src/pages/providers/SAMLProviderViewPage.ts

@@ -1,7 +1,10 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -41,7 +44,7 @@ export class SAMLProviderViewPage extends Page {
     provider?: SAMLProvider;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFPage, PFGallery, PFContent];
     }
 
     constructor() {

web/src/pages/sources/LDAPSourceViewPage.ts

@@ -1,6 +1,9 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -38,7 +41,7 @@ export class LDAPSourceViewPage extends Page {
     source!: LDAPSource;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFPage, PFGallery, PFContent];
     }
 
     constructor() {

web/src/pages/sources/OAuthSourceViewPage.ts

@@ -1,6 +1,9 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -36,7 +39,7 @@ export class OAuthSourceViewPage extends Page {
     source?: OAuthSource;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFPage, PFGallery, PFContent];
     }
 
     constructor() {

web/src/pages/sources/SAMLSourceViewPage.ts

@@ -1,7 +1,10 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -37,7 +40,7 @@ export class SAMLSourceViewPage extends Page {
     source?: SAMLSource;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFPage, PFGallery, PFContent];
     }
 
     constructor() {

web/src/pages/sources/SourceViewPage.ts

@@ -1,7 +1,10 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Source, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -31,7 +34,7 @@ export class SourceViewPage extends LitElement {
     source?: Source;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFPage, PFGallery, PFContent].concat(css`
             * {
                 height: 100%;
             }