From a8ffa74e0da8a565020fb1ebebd58f23235f19ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Graber?= Date: Wed, 22 Nov 2023 22:59:56 +0000 Subject: [PATCH 1/8] Branding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Stéphane Graber --- index.html | 2 +- public/assets/img/favicon-32x32.png | Bin 1361 -> 2506 bytes public/assets/img/incus-logo.svg | 129 ++++++++++++++++++++++++++++ public/assets/img/lxd-logo.svg | 34 -------- src/components/Logo.tsx | 6 +- src/pages/login/Login.tsx | 1 - src/sass/_pattern_icon.scss | 11 --- src/sass/_pattern_navigation.scss | 8 +- src/sass/styles.scss | 5 -- src/util/title.tsx | 2 +- 10 files changed, 138 insertions(+), 60 deletions(-) create mode 100644 public/assets/img/incus-logo.svg delete mode 100644 public/assets/img/lxd-logo.svg diff --git a/index.html b/index.html index 6aa1283..85b46bd 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - LXD UI + Incus UI diff --git a/public/assets/img/incus-logo.svg b/public/assets/img/incus-logo.svg new file mode 100644 index 0000000..9caf711 --- /dev/null +++ b/public/assets/img/incus-logo.svg @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/img/lxd-logo.svg b/public/assets/img/lxd-logo.svg deleted file mode 100644 index 272ef59..0000000 --- a/public/assets/img/lxd-logo.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index cf7faa8..b1b06d2 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -15,11 +15,11 @@ const Logo: FC = () => { return ( LXD-UI logo -
Canonical LXD
+
Incus UI
 ); }; diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index c283cd5..9307844 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -23,7 +23,6 @@ const Login: FC = () => { return (
-

Login

{hasOidc && ( <> diff --git a/src/sass/_pattern_icon.scss b/src/sass/_pattern_icon.scss index 21254c8..f6da7f9 100644 --- a/src/sass/_pattern_icon.scss +++ b/src/sass/_pattern_icon.scss @@ -1,14 +1,3 @@ -@mixin lxdui-icon-sidebar-collapse() { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16px' height='16px' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 7.743 L 6.742 14.485 L 7.899 13.329 L 2.311 7.743 L 7.899 2.157 L 6.742 1 L 0 7.743 Z M 7.899 7.743 L 14.642 14.485 L 15.797 13.329 L 10.21 7.743 L 15.797 2.157 L 14.642 1 L 7.899 7.743 Z' fill='%23FFF' style=''/%3E%3C/svg%3E"); -} - -@mixin lxdui-p-icon { - .p-icon--sidebar-toggle { - @extend %icon; - @include lxdui-icon-sidebar-collapse; - } -} - .p-icon--info--notification { @extend %icon; @include vf-icon-info-coloured-themed; diff --git a/src/sass/_pattern_navigation.scss b/src/sass/_pattern_navigation.scss index 92236ef..1373ab0 100644 --- a/src/sass/_pattern_navigation.scss +++ b/src/sass/_pattern_navigation.scss @@ -5,20 +5,20 @@ .p-panel__logo-image { height: 36px; - margin-top: -3px; + margin-top: 2px; max-width: inherit; } .logo-text { color: #fff; - left: 47px; + left: 70px; position: absolute; top: $spv--x-small; } @include mobile { .logo-text { - left: 38px; + left: 66px; } } @@ -28,7 +28,7 @@ } .logo-text { - left: 52px; + left: 80px; } } } diff --git a/src/sass/styles.scss b/src/sass/styles.scss index 34d155d..1f37774 100644 --- a/src/sass/styles.scss +++ b/src/sass/styles.scss @@ -4,7 +4,6 @@ @import "vanilla-framework/scss/build"; @import "./breakpoints"; @import "pattern_icon"; -@include lxdui-p-icon; @include vf-p-icon-add-canvas; @include vf-p-icon-applications; @include vf-p-icon-begin-downloading; @@ -148,10 +147,6 @@ body { @include vf-icon-external-link($color-link); } -.lxd-icon { - background-image: url("data:image/svg+xml,%0A%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5311 15.7998V5.71128L18.6554 0L8.77977 5.71128V15.7998L0 20.8683V32.2887L9.87566 38L18.6554 32.9083L27.4352 37.9768L37.3108 32.2655V20.8451L28.5311 15.7998ZM18.6554 2.57113L26.3182 6.99684V15.7998L18.6554 20.2487L10.9694 15.823V7.02002L18.6554 2.57113ZM9.87566 35.431L2.21286 31.0053V22.1538L9.85037 17.7513L17.5595 22.2002V31.0032L9.87355 35.4289L9.87566 35.431ZM35.098 31.0053L27.4352 35.431L19.7724 31.0053V22.2023L27.4816 17.7534L35.1191 22.156V31.0074H35.0959L35.098 31.0053Z' fill='%23D9D9D9'/%3E%3Cpath d='M28.1978 31.9072L32.4085 29.4099V24.4594L28.1978 26.9357V31.9072Z' fill='%23D9D9D9'/%3E%3Cpath d='M27.4119 20.7966L23.2012 23.2223L27.4372 25.627L31.648 23.1507L27.4119 20.7966Z' fill='%23D9D9D9'/%3E%3Cpath d='M22.4635 29.4816L26.6995 31.9558V26.9357L22.415 24.5311L22.4635 29.4816Z' fill='%23D9D9D9'/%3E%3Cpath d='M9.85235 20.7966L5.6416 23.2223L9.87553 25.627L14.0884 23.1507L9.85235 20.7966Z' fill='%23D9D9D9'/%3E%3Cpath d='M4.90371 29.4816L9.13764 31.9558V26.9357L4.87842 24.5311L4.90371 29.4816Z' fill='%23D9D9D9'/%3E%3Cpath d='M10.6387 31.9072L14.8726 29.4099V24.4594L10.6387 26.9357V31.9072Z' fill='%23D9D9D9'/%3E%3Cpath d='M22.8455 7.97052L18.6326 5.63965L14.4219 8.06536L18.6326 10.4447L22.8455 7.97052Z' fill='%23D9D9D9'/%3E%3Cpath d='M17.8946 16.7755V11.7534L13.6606 9.35083L13.6838 14.3245L17.8946 16.7755Z' fill='%23D9D9D9'/%3E%3Cpath d='M19.3955 16.7503L23.6294 14.2529V9.2561L19.3955 11.7535V16.7503Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A"); -} - .actions-list { display: inline-block; min-width: 8.5rem; diff --git a/src/util/title.tsx b/src/util/title.tsx index 3ef659b..879efb9 100644 --- a/src/util/title.tsx +++ b/src/util/title.tsx @@ -6,6 +6,6 @@ export const setTitle = (): void => { useEffect(() => { const host = settings?.config?.["user.ui_title"] ?? location.hostname; - document.title = `${host} | LXD UI`; + document.title = `${host} | Incus UI`; }, [settings?.config]); }; -- 2.34.1