web: remove common_styles

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

web/nginx.conf

@@ -72,11 +72,17 @@ http {
         listen      80;
         server_name _;
         charset     utf-8;
+        root   /usr/share/nginx/html;
 
         location / {
-            root   /usr/share/nginx/html;
             access_log /dev/stdout json_combined;
         }
+        location /static/ {
+            expires @31d;
+            add_header Cache-Control "public, no-transform";
+            add_header X-authentik-version "2021.3.4";
+            add_header Vary X-authentik-version;
+        }
     }
 
 }

web/rollup.config.js

@@ -15,6 +15,14 @@ const resources = [
     { src: "src/assets/*", dest: "dist/assets" },
     { src: "./icons/*", dest: "dist/assets/icons" },
 ];
+// eslint-disable-next-line no-undef
+const isProdBuild = process.env.NODE_ENV === "production";
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function manualChunks(id) {
+    if (id.includes("node_modules")) {
+        return "vendor";
+    }
+}
 
 export default [
     // Autogenerated API Client
@@ -29,8 +37,7 @@ export default [
         ],
         plugins: [
             typescript(),
-            // eslint-disable-next-line no-undef
+            isProdBuild && terser(),
-            process.env.NODE_ENV === "production" ? terser() : undefined,
         ].filter(p => p),
         watch: {
             clearScreen: false,
@@ -44,6 +51,7 @@ export default [
                 format: "es",
                 dir: "dist",
                 sourcemap: true,
+                manualChunks: manualChunks,
             },
         ],
         plugins: [
@@ -55,8 +63,7 @@ export default [
             resolve({ browser: true }),
             commonjs(),
             sourcemaps(),
-            // eslint-disable-next-line no-undef
+            isProdBuild && terser(),
-            process.env.NODE_ENV === "production" ? terser() : undefined,
             copy({
                 targets: [...resources],
                 copyOnce: false,
@@ -75,6 +82,7 @@ export default [
                 format: "es",
                 dir: "dist",
                 sourcemap: true,
+                manualChunks: manualChunks,
             },
         ],
         plugins: [
@@ -86,8 +94,7 @@ export default [
             resolve({ browser: true }),
             commonjs(),
             sourcemaps(),
-            // eslint-disable-next-line no-undef
+            isProdBuild && terser(),
-            process.env.NODE_ENV === "production" ? terser() : undefined,
             copy({
                 targets: [...resources],
                 copyOnce: false,

web/src/authentik.css

@@ -20,54 +20,6 @@ html > input {
     display: block;
 }
 
-/* login page's icons */
-.pf-c-login__main-footer-links-item-link img {
-    fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
-    width: 100%;
-    max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
-    height: 100%;
-    max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
-}
-
-/* fix multiple selects height */
-select[multiple] {
-    height: 15em;
-}
-
-/* Form with user */
-.form-control-static {
-    margin-top: var(--pf-global--spacer--sm);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.form-control-static .left {
-    display: flex;
-    align-items: center;
-}
-.form-control-static img {
-    margin-right: var(--pf-global--spacer--xs);
-}
-.form-control-static a {
-    padding-top: var(--pf-global--spacer--xs);
-    padding-bottom: var(--pf-global--spacer--xs);
-    line-height: var(--pf-global--spacer--xl);
-}
-
-/* Static OTP Tokens, authentik.stages.otp_static */
-.ak-otp-tokens {
-    list-style: circle;
-    columns: 2;
-    -webkit-columns: 2;
-    -moz-columns: 2;
-    margin-left: var(--pf-global--spacer--xs);
-    width: 100%;
-}
-.ak-otp-tokens li {
-    font-size: var(--pf-global--FontSize--2xl);
-    font-family: monospace;
-}
-
 .pf-c-content h1 {
     display: flex;
     align-items: flex-start;
@@ -79,14 +31,6 @@ select[multiple] {
     margin-right: var(--pf-global--spacer--sm);
 }
 
-.subtext {
-    font-size: var(--pf-global--FontSize--sm);
-}
-
-.pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
-    z-index: auto !important;
-}
-
 /* ensure background on non-flow pages match */
 .pf-c-background-image::before {
     background-image: url("/static/dist/assets/images/flow_background.jpg");
@@ -124,7 +68,7 @@ ak-message {
     }
     /* Header sections */
     .pf-c-page__main-section {
-        background-color: var(--ak-dark-background);
+        --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
     }
     .pf-c-page__main-section.pf-m-light {
         background-color: var(--ak-dark-background-light);
@@ -199,7 +143,7 @@ ak-message {
         --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
         --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
         --pf-global--BackgroundColor--100: transparent;
-        background-color: var(--ak-dark-background-light);
+        --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
         color: var(--ak-dark-foreground);
     }
     .pf-c-form-control[readonly] {

web/src/common/styles.ts

@@ -1,10 +1,4 @@
-import { css, CSSResult } from "lit-element";
+import { css } from "lit-element";
-import PF from "@patternfly/patternfly/patternfly.css";
-import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
-import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
-import AKGlobal from "../authentik.css";
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
 
 export const ColorStyles = css`
     .pf-m-success {
@@ -29,4 +23,3 @@ export const ColorStyles = css`
         background-color: var(--pf-global--danger-color--100);
     }
 `;
-export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal, CodeMirrorStyle, CodeMirrorTheme, ColorStyles];

web/src/elements/EmptyState.ts

@@ -1,7 +1,9 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
-import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+
+import { SpinnerSize } from "./Spinner";
 
 @customElement("ak-empty-state")
 export class EmptyState extends LitElement {
@@ -9,17 +11,24 @@ export class EmptyState extends LitElement {
     @property({type: String})
     icon = "";
 
+    @property({type: Boolean})
+    loading = false;
+
     @property()
     header?: string;
 
     static get styles(): CSSResult[] {
-        return [PFBase, FA, PFEmptyState];
+        return [PFBase, PFEmptyState, PFTitle];
     }
 
     render(): TemplateResult {
         return html`<div class="pf-c-empty-state">
             <div class="pf-c-empty-state__content">
-                <i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>
+                ${this.loading ?
+                    html`<div class="pf-c-empty-state__icon">
+                        <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
+                    </div>`:
+                    html`<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>`}
                 <h1 class="pf-c-title pf-m-lg">
                     ${this.header}
                 </h1>

web/src/elements/Tabs.ts

@@ -1,10 +1,7 @@
 import { LitElement, html, customElement, property, CSSResult, TemplateResult, css } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-// @ts-ignore
+import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
-import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
+import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
-// @ts-ignore
 import AKGlobal from "../authentik.css";
 import { CURRENT_CLASS } from "../constants";
 import { gettext } from "django";
@@ -18,7 +15,7 @@ export class Tabs extends LitElement {
     vertical = false;
 
     static get styles(): CSSResult[] {
-        return [GlobalsStyle, TabsStyle, AKGlobal, css`
+        return [PFGlobal, PFTabs, AKGlobal, css`
             ::slotted(*) {
                 height: 100%;
                 flex-grow: 2;

web/src/elements/buttons/ModalButton.ts

@@ -1,11 +1,21 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
+import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
 
 import { convertToSlug } from "../../utils";
 import { SpinnerButton } from "./SpinnerButton";
 import { PRIMARY_CLASS } from "../../constants";
 import { showMessage } from "../messages/MessageContainer";
-import { COMMON_STYLES } from "../../common/styles";
 
 @customElement("ak-modal-button")
 export class ModalButton extends LitElement {
@@ -19,7 +29,7 @@ export class ModalButton extends LitElement {
     modal = "<slot name='modal'></slot>";
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent].concat(
             css`
                 :host {
                     text-align: left;
@@ -30,6 +40,10 @@ export class ModalButton extends LitElement {
                 .pf-c-modal-box > .pf-c-button + * {
                     margin-right: 0;
                 }
+                /* fix multiple selects height */
+                select[multiple] {
+                    height: 15em;
+                }
             `
         );
     }

web/src/elements/buttons/SpinnerButton.ts

@@ -1,6 +1,6 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 // @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
 // @ts-ignore
 import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
 // @ts-ignore

web/src/elements/buttons/TokenCopyButton.ts

@@ -1,6 +1,6 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 // @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
 // @ts-ignore
 import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
 import { CoreApi } from "authentik-api";

web/src/elements/cards/AggregateCard.ts

@@ -1,7 +1,9 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
 
 @customElement("ak-aggregate-card")
 export class AggregateCard extends LitElement {
@@ -15,7 +17,7 @@ export class AggregateCard extends LitElement {
     headerLink?: string;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat([css`
+        return [PFBase, PFCard, PFFlex].concat([css`
             .pf-c-card.pf-c-card-aggregate {
                 height: 100%;
             }
@@ -24,6 +26,9 @@ export class AggregateCard extends LitElement {
                 text-align: center;
                 color: var(--pf-global--Color--100);
             }
+            .subtext {
+                font-size: var(--pf-global--FontSize--sm);
+            }
         `]);
     }
 

web/src/elements/messages/Message.ts

@@ -4,7 +4,6 @@ import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-gro
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
 
 export interface APIMessage {
     level_tag: string;
@@ -32,7 +31,7 @@ export class Message extends LitElement {
     onRemove?: (m: APIMessage) => void;
 
     static get styles(): CSSResult[] {
-        return [PFBase, FA, PFButton, PFAlert, PFAlertGroup];
+        return [PFBase, PFButton, PFAlert, PFAlertGroup];
     }
 
     firstUpdated(): void {

web/src/elements/notifications/NotificationDrawer.ts

@@ -3,7 +3,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import { EventsApi, Notification } from "authentik-api";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";
+import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 
 @customElement("ak-notification-drawer")
 export class NotificationDrawer extends LitElement {
@@ -15,7 +17,7 @@ export class NotificationDrawer extends LitElement {
     unread = 0;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFNotificationDrawer, PFDropdown].concat(
             css`
                 .pf-c-notification-drawer__header {
                     height: 114px;

web/src/elements/notifications/NotificationTrigger.ts

@@ -1,11 +1,12 @@
 import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 
 @customElement("ak-notification-trigger")
 export class NotificationRule extends LitElement {
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFDropdown];
     }
 
     constructor() {

web/src/elements/router/Router404.ts

@@ -1,6 +1,8 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-router-404")
 export class Router404 extends LitElement {
@@ -9,7 +11,7 @@ export class Router404 extends LitElement {
     url = "";
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFEmptyState, PFTitle];
     }
 
     render(): TemplateResult {

web/src/elements/router/RouterOutlet.ts

@@ -1,9 +1,4 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-// @ts-ignore
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
-import { COMMON_STYLES } from "../../common/styles";
 import { Route } from "./Route";
 import { ROUTES } from "../../routes";
 import { RouteMatch } from "./RouteMatch";
@@ -21,8 +16,6 @@ export class RouterOutlet extends LitElement {
 
     static get styles(): CSSResult[] {
         return [
-            CodeMirrorStyle,
-            CodeMirrorTheme,
             css`
                 :host {
                     height: 100vh;
@@ -33,7 +26,7 @@ export class RouterOutlet extends LitElement {
                     flex-direction: column;
                 }
             `,
-        ].concat(...COMMON_STYLES);
+        ];
     }
 
     constructor() {
@@ -68,9 +61,9 @@ export class RouterOutlet extends LitElement {
             console.debug(`authentik/router: route "${activeUrl}" not defined`);
             const route = new Route(
                 RegExp(""),
-                html`<ak-site-shell class="pf-c-page__main" url=${activeUrl}>
+                html`<div class="pf-c-page__main">
-                    <div slot="body"></div>
+                    <ak-router-404 url=${activeUrl}></ak-router-404>
-                </ak-site-shell>`
+                </div>`
             );
             matchedRoute = new RouteMatch(route);
             matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};

web/src/elements/sidebar/Sidebar.ts

@@ -1,11 +1,7 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PageStyle from "@patternfly/patternfly/components/Page/page.css";
+import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
-// @ts-ignore
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
-// @ts-ignore
 import AKGlobal from "../../authentik.css";
 
 import { until } from "lit-html/directives/until";
@@ -99,9 +95,9 @@ export class Sidebar extends LitElement {
 
     static get styles(): CSSResult[] {
         return [
-            GlobalsStyle,
+            PFBase,
-            PageStyle,
+            PFPage,
-            NavStyle,
+            PFNav,
             AKGlobal,
             css`
                 .pf-c-nav__link.pf-m-current::after,

web/src/elements/sidebar/SidebarBrand.ts

@@ -1,8 +1,6 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PageStyle from "@patternfly/patternfly/components/Page/page.css";
+import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
 import { configureSentry } from "../../api/Config";
 import { Config } from "authentik-api";
 import { ifDefined } from "lit-html/directives/if-defined";
@@ -23,8 +21,8 @@ export class SidebarBrand extends LitElement {
 
     static get styles(): CSSResult[] {
         return [
-            GlobalsStyle,
+            PFGlobal,
-            PageStyle,
+            PFPage,
             css`
                 :host {
                     display: flex;

web/src/elements/sidebar/SidebarHamburger.ts

@@ -1,11 +1,13 @@
 import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+
 
 @customElement("ak-sidebar-hamburger")
 export class SidebarHamburger extends LitElement {
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFButton].concat(
             css`
                 :host {
                     position: absolute;

web/src/elements/sidebar/SidebarUser.ts

@@ -1,12 +1,9 @@
 import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-// @ts-ignore
+import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
-import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
-// @ts-ignore
-import fa from "@fortawesome/fontawesome-free/css/all.css";
-// @ts-ignore
-import AvatarStyle from "@patternfly/patternfly/components/Avatar/avatar.css";
 import { me } from "../../api/Users";
 import { until } from "lit-html/directives/until";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import "../notifications/NotificationTrigger";
 import { ifDefined } from "lit-html/directives/if-defined";
@@ -16,9 +13,9 @@ export class SidebarUser extends LitElement {
 
     static get styles(): CSSResult[] {
         return [
-            fa,
+            PFBase,
-            NavStyle,
+            PFNav,
-            AvatarStyle,
+            PFAvatar,
             css`
                 :host {
                     display: flex;

web/src/elements/table/Table.ts

@@ -1,12 +1,18 @@
 import { gettext } from "django";
 import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFTable from "@patternfly/patternfly/components/Table/table.css";
+import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
+import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
+import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
+import AKGlobal from "../../authentik.css";
 
 import "./TablePagination";
 import "../EmptyState";
-import "../Spinner";
-import { SpinnerSize } from "../Spinner";
 
 export class TableColumn {
 
@@ -109,7 +115,7 @@ export abstract class Table<T> extends LitElement {
     expandedRows: boolean[] = [];
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFTable, PFBullseye, PFButton, PFToolbar, PFDropdown, PFPagination, AKGlobal];
     }
 
     constructor() {
@@ -138,14 +144,10 @@ export abstract class Table<T> extends LitElement {
         return html`<tr role="row">
             <td role="cell" colspan="25">
                 <div class="pf-l-bullseye">
-                    <div class="pf-c-empty-state pf-m-sm">
+                    <ak-empty-state
-                        <div class="pf-c-empty-state__content">
+                        ?loading="${true}"
-                            <div class="pf-c-empty-state__icon">
+                        header=${gettext("Loading")}>
-                                <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
+                    </ak-empty-state>
-                            </div>
-                            <h2 class="pf-c-title pf-m-lg">${gettext("Loading")}</h2>
-                        </div>
-                    </div>
                 </div>
             </td>
         </tr>`;

web/src/elements/table/TablePage.ts

@@ -1,8 +1,11 @@
 import { gettext } from "django";
+import { CSSResult } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { Table } from "./Table";
 import "./TableSearch";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
 
 export abstract class TablePage<T> extends Table<T> {
     abstract pageTitle(): string;
@@ -10,6 +13,10 @@ export abstract class TablePage<T> extends Table<T> {
     abstract pageIcon(): string;
     abstract searchEnabled(): boolean;
 
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFPage, PFContent);
+    }
+
     renderSearch(): TemplateResult {
         if (!this.searchEnabled()) {
             return super.renderSearch();

web/src/elements/table/TablePagination.ts

@@ -1,7 +1,10 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 import { AKPagination } from "../../api/Client";
 import { gettext } from "django";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
+
 
 @customElement("ak-table-pagination")
 export class TablePagination extends LitElement {
@@ -13,7 +16,7 @@ export class TablePagination extends LitElement {
     pageChangeHandler: (page: number) => void = (page: number) => {}
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFButton, PFPagination];
     }
 
     render(): TemplateResult {

web/src/elements/table/TableSearch.ts

@@ -1,6 +1,11 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
+import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+
 
 @customElement("ak-table-search")
 export class TableSearch extends LitElement {
@@ -12,7 +17,7 @@ export class TableSearch extends LitElement {
     onSearch?: (value: string) => void;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFButton, PFToolbar, PFInputGroup, PFFormControl];
     }
 
     render(): TemplateResult {

web/src/elements/utils/LoadingState.ts

@@ -1,23 +0,0 @@
-import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
-import { SpinnerSize } from "../Spinner";
-
-@customElement("ak-loading-state")
-export class LoadingState extends LitElement {
-
-    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-empty-state pf-m-full-height">
-            <div class="pf-c-empty-state__content">
-                <div class="pf-l-bullseye">
-                    <div class="pf-l-bullseye__item">
-                        <ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-    }
-}

web/src/flows/FlowExecutor.ts

@@ -5,6 +5,8 @@ import PFLogin from "@patternfly/patternfly/components/Login/login.css";
 import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import AKGlobal from "../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import "./stages/authenticator_static/AuthenticatorStaticStage";
@@ -30,7 +32,6 @@ import { AuthenticatorStaticChallenge } from "./stages/authenticator_static/Auth
 import { AuthenticatorValidateStageChallenge } from "./stages/authenticator_validate/AuthenticatorValidateStage";
 import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
 import { CaptchaChallenge } from "./stages/captcha/CaptchaStage";
-import { COMMON_STYLES } from "../common/styles";
 import { SpinnerSize } from "../elements/Spinner";
 import { StageHost } from "./stages/base";
 import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api";
@@ -48,7 +49,7 @@ export class FlowExecutor extends LitElement implements StageHost {
     loading = false;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFLogin, PFTitle].concat(css`
             .ak-loading {
                 display: flex;
                 height: 100%;
@@ -64,6 +65,10 @@ export class FlowExecutor extends LitElement implements StageHost {
             :host {
                 position: relative;
             }
+            .ak-exception {
+                font-family: monospace;
+                overflow-x: scroll;
+            }
         `);
     }
 
@@ -110,21 +115,15 @@ export class FlowExecutor extends LitElement implements StageHost {
     errorMessage(error: string): void {
         this.challenge = <ShellChallenge>{
             type: ChallengeTypeEnum.Shell,
-            body: `<style>
+            body: `<header class="pf-c-login__main-header">
-                    .ak-exception {
+                <h1 class="pf-c-title pf-m-3xl">
-                        font-family: monospace;
+                    ${gettext("Whoops!")}
-                        overflow-x: scroll;
+                </h1>
-                    }
+            </header>
-                </style>
+            <div class="pf-c-login__main-body">
-                <header class="pf-c-login__main-header">
+                <h3>${gettext("Something went wrong! Please try again later.")}</h3>
-                    <h1 class="pf-c-title pf-m-3xl">
+                <pre class="ak-exception">${error}</pre>
-                        ${gettext("Whoops!")}
+            </div>`
-                    </h1>
-                </header>
-                <div class="pf-c-login__main-body">
-                    <h3>${gettext("Something went wrong! Please try again later.")}</h3>
-                    <pre class="ak-exception">${error}</pre>
-                </div>`
         };
     }
 

web/src/flows/FormStatic.ts

@@ -0,0 +1,39 @@
+import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+
+@customElement("ak-form-static")
+export class FormStatic extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return [css`
+            /* Form with user */
+            .form-control-static {
+                margin-top: var(--pf-global--spacer--sm);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .form-control-static slot[name=avatar] {
+                display: flex;
+                align-items: center;
+            }
+            .form-control-static img {
+                margin-right: var(--pf-global--spacer--xs);
+            }
+            .form-control-static a {
+                padding-top: var(--pf-global--spacer--xs);
+                padding-bottom: var(--pf-global--spacer--xs);
+                line-height: var(--pf-global--spacer--xl);
+            }
+        `];
+    }
+
+    render(): TemplateResult {
+        return html`
+            <div class="form-control-static">
+                <slot name="avatar"></slot>
+                <slot name="link"></slot>
+            </div>
+        `;
+    }
+
+}

web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts

@@ -1,10 +1,15 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
 import "../../../elements/forms/FormElement";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
+import "../../FormStatic";
 
 export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge {
     codes: number[];
@@ -17,7 +22,7 @@ export class AuthenticatorStaticStage extends BaseStage {
     challenge?: AuthenticatorStaticChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
             /* Static OTP Tokens */
             .ak-otp-tokens {
                 list-style: circle;
@@ -35,7 +40,10 @@ export class AuthenticatorStaticStage extends BaseStage {
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">
@@ -44,17 +52,15 @@ export class AuthenticatorStaticStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <div class="pf-c-form__group">
+                    <ak-form-static class="pf-c-form__group">
-                        <div class="form-control-static">
+                        <div slot="avatar">
-                            <div class="left">
+                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                                <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
+                            ${this.challenge.pending_user}
-                                ${this.challenge.pending_user}
-                            </div>
-                            <div class="right">
-                                <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
-                            </div>
                         </div>
-                    </div>
+                        <div slot="link">
+                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
+                        </div>
+                    </ak-form-static>
                     <ak-form-element
                         label="${gettext("Tokens")}"
                         ?required="${true}"

web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts

@@ -1,12 +1,17 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
 import "webcomponent-qr-code";
 import "../../../elements/forms/FormElement";
 import { showMessage } from "../../../elements/messages/MessageContainer";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
+import "../../FormStatic";
 
 export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
     config_url: string;
@@ -19,12 +24,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
     challenge?: AuthenticatorTOTPChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">
@@ -33,17 +41,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <div class="pf-c-form__group">
+                    <ak-form-static class="pf-c-form__group">
-                        <div class="form-control-static">
+                        <div slot="avatar">
-                            <div class="left">
+                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                                <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
+                            ${this.challenge.pending_user}
-                                ${this.challenge.pending_user}
-                            </div>
-                            <div class="right">
-                                <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
-                            </div>
                         </div>
-                    </div>
+                        <div slot="link">
+                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
+                        </div>
+                    </ak-form-static>
                     <input type="hidden" name="otp_uri" value=${this.challenge.config_url} />
                     <ak-form-element>
                         <!-- @ts-ignore -->

web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts

@@ -1,7 +1,11 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage, StageHost } from "../base";
 import "./AuthenticatorValidateStageWebAuthn";
 import "./AuthenticatorValidateStageCode";
@@ -41,7 +45,7 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
     }
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
             ul > li:not(:last-child) {
                 padding-bottom: 1rem;
             }
@@ -134,7 +138,10 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+    ?loading="${true}"
+    header=${gettext("Loading")}>
+</ak-empty-state>`;
         }
         // User only has a single device class, so we don't show a picker
         if (this.challenge?.device_challenges.length === 1) {

web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts

@@ -1,11 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
 import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
 import "../../../elements/forms/FormElement";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
 import { PasswordManagerPrefill } from "../identification/IdentificationStage";
+import "../../FormStatic";
 
 @customElement("ak-stage-authenticator-validate-code")
 export class AuthenticatorValidateStageWebCode extends BaseStage {
@@ -20,26 +25,27 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
     showBackButton = false;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<div class="pf-c-login__main-body">
             <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                <div class="pf-c-form__group">
+                <ak-form-static class="pf-c-form__group">
-                    <div class="form-control-static">
+                    <div slot="avatar">
-                        <div class="left">
+                        <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
+                        ${this.challenge.pending_user}
-                            ${this.challenge.pending_user}
-                        </div>
-                        <div class="right">
-                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
-                        </div>
                     </div>
-                </div>
+                    <div slot="link">
+                        <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
+                    </div>
+                </ak-form-static>
                 <ak-form-element
                     label="${gettext("Code")}"
                     ?required="${true}"

web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts

@@ -1,6 +1,10 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { SpinnerSize } from "../../../elements/Spinner";
 import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
 import { BaseStage } from "../base";
@@ -25,7 +29,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
     showBackButton = false;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     async authenticate(): Promise<void> {

web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts

@@ -1,7 +1,11 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { SpinnerSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
 import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
@@ -27,7 +31,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
     registerMessage = "";
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFFormControl, PFForm, PFTitle, PFButton];
     }
 
     async register(): Promise<void> {

web/src/flows/stages/autosubmit/AutosubmitStage.ts

@@ -1,9 +1,13 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
 
 export interface AutosubmitChallenge extends WithUserInfoChallenge {
     url: string;
@@ -17,7 +21,7 @@ export class AutosubmitStage extends BaseStage {
     challenge?: AutosubmitChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
     }
 
     updated(): void {
@@ -26,7 +30,10 @@ export class AutosubmitStage extends BaseStage {
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">
@@ -38,8 +45,10 @@ export class AutosubmitStage extends BaseStage {
                     ${Object.entries(this.challenge.attrs).map(([ key, value ]) => {
                         return html`<input type="hidden" name="${key}" value="${value}">`;
                     })}
-                    <ak-loading-state></ak-loading-state>
+                    <ak-empty-state
-
+                        ?loading="${true}"
+                        header=${gettext("Loading")}>
+                    </ak-empty-state>
                     <div class="pf-c-form__group pf-m-action">
                         <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
                             ${gettext("Continue")}

web/src/flows/stages/captcha/CaptchaStage.ts

@@ -1,11 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { SpinnerSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
 import "../../../elements/forms/FormElement";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
+import "../../FormStatic";
 
 export interface CaptchaChallenge extends WithUserInfoChallenge {
     site_key: string;
@@ -18,7 +23,7 @@ export class CaptchaStage extends BaseStage {
     challenge?: CaptchaChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     submitFormAlt(token: string): void {
@@ -29,7 +34,7 @@ export class CaptchaStage extends BaseStage {
 
     firstUpdated(): void {
         const script = document.createElement("script");
-        script.src = "https://www.google.com/recaptcha/api.js";//?render=${this.challenge?.site_key}`;
+        script.src = "https://www.google.com/recaptcha/api.js";
         script.async = true;
         script.defer = true;
         const captchaContainer = document.createElement("div");
@@ -54,7 +59,10 @@ export class CaptchaStage extends BaseStage {
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                    ?loading="${true}"
+                    header=${gettext("Loading")}>
+                </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">
@@ -63,17 +71,15 @@ export class CaptchaStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form">
-                    <div class="pf-c-form__group">
+                    <ak-form-static class="pf-c-form__group">
-                        <div class="form-control-static">
+                        <div slot="avatar">
-                            <div class="left">
+                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                                <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
+                            ${this.challenge.pending_user}
-                                ${this.challenge.pending_user}
-                            </div>
-                            <div class="right">
-                                <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
-                            </div>
                         </div>
-                    </div>
+                        <div slot="link">
+                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
+                        </div>
+                    </ak-form-static>
                     <div class="ak-loading">
                         <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
                     </div>

web/src/flows/stages/consent/ConsentStage.ts

@@ -1,9 +1,14 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
+import "../../FormStatic";
 
 export interface Permission {
     name: string;
@@ -24,12 +29,15 @@ export class ConsentStage extends BaseStage {
     challenge?: ConsentChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">
@@ -38,17 +46,15 @@ export class ConsentStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <div class="pf-c-form__group">
+                    <ak-form-static class="pf-c-form__group">
-                        <div class="form-control-static">
+                        <div slot="avatar">
-                            <div class="left">
+                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                                <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
+                            ${this.challenge.pending_user}
-                                ${this.challenge.pending_user}
-                            </div>
-                            <div class="right">
-                                <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
-                            </div>
                         </div>
-                    </div>
+                        <div slot="link">
+                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
+                        </div>
+                    </ak-form-static>
 
                     <div class="pf-c-form__group">
                         <p id="header-text">

web/src/flows/stages/email/EmailStage.ts

@@ -1,9 +1,13 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { Challenge } from "authentik-api";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
 
 export type EmailChallenge = Challenge;
 
@@ -14,12 +18,15 @@ export class EmailStage extends BaseStage {
     challenge?: EmailChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
     }
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">

web/src/flows/stages/identification/IdentificationStage.ts

@@ -1,9 +1,13 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import "../../../elements/forms/FormElement";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
 import { Challenge } from "../../../api/Flows";
 
 export const PasswordManagerPrefill: {
@@ -40,10 +44,15 @@ export class IdentificationStage extends BaseStage {
     challenge?: IdentificationChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(
             css`
+                /* login page's icons */
                 .pf-c-login__main-footer-links-item-link img {
-                    width: 100px;
+                    fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
+                    width: 100%;
+                    max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
+                    height: 100%;
+                    max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
                 }
             `
         );
@@ -144,7 +153,10 @@ export class IdentificationStage extends BaseStage {
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">

web/src/flows/stages/password/PasswordStage.ts

@@ -1,11 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
 import "../../../elements/forms/FormElement";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
 import { PasswordManagerPrefill } from "../identification/IdentificationStage";
+import "../../FormStatic";
 
 export interface PasswordChallenge extends WithUserInfoChallenge {
     recovery_url?: string;
@@ -18,12 +23,15 @@ export class PasswordStage extends BaseStage {
     challenge?: PasswordChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
     }
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">
@@ -32,17 +40,15 @@ export class PasswordStage extends BaseStage {
             </header>
             <div class="pf-c-login__main-body">
                 <form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}>
-                    <div class="pf-c-form__group">
+                    <ak-form-static class="pf-c-form__group">
-                        <div class="form-control-static">
+                        <div slot="avatar">
-                            <div class="left">
+                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
-                                <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
+                            ${this.challenge.pending_user}
-                                ${this.challenge.pending_user}
-                            </div>
-                            <div class="right">
-                                <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
-                            </div>
                         </div>
-                    </div>
+                        <div slot="link">
+                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
+                        </div>
+                    </ak-form-static>
 
                     <input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}">
                     <ak-form-element

web/src/flows/stages/prompt/PromptStage.ts

@@ -1,10 +1,14 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { BaseStage } from "../base";
 import "../../../elements/forms/FormElement";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
 import { Challenge } from "../../../api/Flows";
 
 export interface Prompt {
@@ -27,7 +31,7 @@ export class PromptStage extends BaseStage {
     challenge?: PromptChallenge;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     renderPromptInner(prompt: Prompt): string {
@@ -113,7 +117,10 @@ export class PromptStage extends BaseStage {
 
     render(): TemplateResult {
         if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+    ?loading="${true}"
+    header=${gettext("Loading")}>
+</ak-empty-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">

web/src/interfaces/Interface.ts

@@ -1,12 +1,15 @@
-import { gettext } from "django";
+import { css, CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
-import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
 import { SidebarItem } from "../elements/sidebar/Sidebar";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFSkipToContent from "@patternfly/patternfly/components/SkipToContent/skip-to-content.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
 
 import "../elements/router/RouterOutlet";
 import "../elements/messages/MessageContainer";
 import "../elements/sidebar/SidebarHamburger";
 import "../elements/notifications/NotificationDrawer";
-import { COMMON_STYLES } from "../common/styles";
 
 export abstract class Interface extends LitElement {
     @property({type: Boolean})
@@ -18,7 +21,11 @@ export abstract class Interface extends LitElement {
     abstract get sidebar(): SidebarItem[];
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFSkipToContent, PFButton, PFDrawer, css`
+            .pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
+                z-index: auto !important;
+            }
+        `];
     }
 
     constructor() {
@@ -38,7 +45,6 @@ export abstract class Interface extends LitElement {
     render(): TemplateResult {
         return html`<ak-message-container></ak-message-container>
             <div class="pf-c-page">
-                <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">${gettext("Skip to content")}</a>
                 <ak-sidebar-hamburger>
                 </ak-sidebar-hamburger>
                 <ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}" .items=${this.sidebar}>

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%;
             }

web/src/utils.ts

@@ -1,5 +1,6 @@
+import { gettext } from "django";
 import { html, TemplateResult } from "lit-html";
-import "./elements/utils/LoadingState";
+import "./elements/EmptyState";
 
 export function getCookie(name: string): string {
     let cookieValue = "";
@@ -43,7 +44,10 @@ export function truncate(input?: string, max = 10): string {
 
 export function loading<T>(v: T, actual: TemplateResult): TemplateResult {
     if (!v) {
-        return html`<ak-loading-state></ak-loading-state>`;
+        return html`<ak-empty-state
+            ?loading="${true}"
+            header=${gettext("Loading")}>
+        </ak-empty-state>`;
     }
     return actual;
 }