From d890c4bb78c87974a1d9b4618f3e78a8a0e6d405 Mon Sep 17 00:00:00 2001 From: ernstmul Date: Tue, 20 May 2025 14:39:36 +0200 Subject: [PATCH] Adjust loader --- src/app.html | 15 +-- src/hooks.client.ts | 18 +++ static/css/loading.css | 4 +- static/images/imagine-logo-dark.svg | 164 +++++++++++++++++++++++++++ static/images/imagine-logo-light.svg | 163 ++++++++++++++++++++++++++ 5 files changed, 350 insertions(+), 14 deletions(-) create mode 100644 static/images/imagine-logo-dark.svg create mode 100644 static/images/imagine-logo-light.svg diff --git a/src/app.html b/src/app.html index a38f78639..82e9f0a44 100644 --- a/src/app.html +++ b/src/app.html @@ -38,18 +38,9 @@
- Appwrite Logo - Appwrite Logo + diff --git a/src/hooks.client.ts b/src/hooks.client.ts index 5a2d4fcb5..57e805ee9 100644 --- a/src/hooks.client.ts +++ b/src/hooks.client.ts @@ -27,6 +27,24 @@ function setFavicon() { document.head.appendChild(maskLink); } +function setLoader() { + if (document.getElementsByTagName('body').length > 0) { + const color = isStudio + ? themeInUse === 'light' + ? 'rgba(86, 86, 92, 100%)' + : 'rgba(195, 195, 198, 100%)' + : 'rgb(219, 26, 90)'; + document + .getElementsByTagName('body')[0] + .setAttribute('style', '--console-loading-color: ' + color); + } + + document.getElementById('loader-logo').innerHTML = isStudio + ? 'Imagine LogoImagine Logo' + : 'Appwrite Logo Appwrite Logo'; +} + +setLoader(); setFavicon(); export const handleError: HandleClientError = Sentry.handleErrorWithSentry( diff --git a/static/css/loading.css b/static/css/loading.css index aa2b8324a..4581fdfc0 100644 --- a/static/css/loading.css +++ b/static/css/loading.css @@ -66,10 +66,10 @@ body { width: 124px; height: 124px; margin: 10px; - border: 10px solid rgb(219, 26, 90); + border: 10px solid var(--console-loading-color, transparent); border-radius: 50%; animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: rgb(219, 26, 90) transparent transparent transparent; + border-color: var(--console-loading-color, transparent) transparent transparent transparent; } .page-loader .animation > div:nth-child(1) { animation-delay: -0.45s; diff --git a/static/images/imagine-logo-dark.svg b/static/images/imagine-logo-dark.svg new file mode 100644 index 000000000..4325aad8d --- /dev/null +++ b/static/images/imagine-logo-dark.svg @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/imagine-logo-light.svg b/static/images/imagine-logo-light.svg new file mode 100644 index 000000000..893dbe226 --- /dev/null +++ b/static/images/imagine-logo-light.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +