Sorry, this page isn't available.
diff --git a/apps/web/src/images/logo-white.svg b/apps/web/src/images/logo-white.svg new file mode 100644 index 0000000000..d9ffdd8e33 --- /dev/null +++ b/apps/web/src/images/logo-white.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/apps/web/src/index.html b/apps/web/src/index.html index c3a2c03ed9..ce1a955b88 100644 --- a/apps/web/src/index.html +++ b/apps/web/src/index.html @@ -5,7 +5,7 @@ -
-
-
-
+
- -
+
+
+
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css
index 9c64be6308..1ac7b15401 100644
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -5,9 +5,14 @@
@import "../../../../libs/components/src/tw-theme.css";
/*
- * Duplicated styling from Angular components.
+ * Web specific global styling.
*
- * For use in non Angular pages like the 404 and connectors.
+ * Be mindful of what is added here. Generally use Tailwind classes directly in Angular components.
+ *
+ * Some valid scenarios for adding styles here:
+ *
+ * - Duplicated styling for CL components used in non Angular pages like connectors and 404.
+ * - Shared styles like Logo.
*/
@layer components {
.tw-h1 {
@@ -24,4 +29,35 @@
@apply tw-bg-transparent tw-border-text-muted hover:tw-bg-text-muted hover:tw-border-text-muted hover:!tw-text-contrast disabled:tw-bg-transparent disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60 disabled:tw-cursor-not-allowed;
@apply tw-text-muted !important;
}
+
+ /**
+ * Loading page
+ */
+ body.layout_frontend {
+ /* We apply the background color here since body classes are dynamically added and removed */
+ @apply tw-bg-background-alt !important;
+
+ /* Spinner requires fixed height and width to appear centered */
+ .spinner-container {
+ @apply tw-fixed tw-inset-2/4 -tw-translate-x-1/2 -tw-translate-y-1/2;
+
+ height: 42px;
+ width: 42px;
+ }
+ }
+
+ /**
+ * Logo, used both in loading and on "frontend" pages.
+ */
+ img.new-logo-themed {
+ @apply tw-block;
+
+ width: 128px;
+ }
+ .theme_light img.new-logo-themed {
+ content: url("../images/logo.svg");
+ }
+ .theme_dark img.new-logo-themed {
+ content: url("../images/logo-white.svg");
+ }
}
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
index bd3de51c46..082edf4063 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.html
+++ b/libs/auth/src/angular/anon-layout/anon-layout.component.html
@@ -2,7 +2,7 @@
class="tw-flex tw-min-h-screen tw-w-full tw-mx-auto tw-flex-col tw-gap-7 tw-bg-background-alt tw-px-8 tw-pb-4 tw-text-main"
[ngClass]="{ 'tw-pt-0': decreaseTopPadding, 'tw-pt-8': !decreaseTopPadding }"
>
-
+