erwin/nixos-config
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Wiki Activity Actions
nixos-config/pkgs/incus-ui/ui-canonical-0001-Branding.patch

338 lines
15 KiB
Diff
Raw Blame History

From a8ffa74e0da8a565020fb1ebebd58f23235f19ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Graber?= <stgraber@stgraber.org>
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 <stgraber@stgraber.org>
---
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 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>LXD UI</title>
+ <title>Incus UI</title>
<link rel="shortcut icon" href="/assets/img/favicon-32x32.png" type="image/x-icon">
<script>const global = globalThis;</script>
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 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="165.754px" height="152.992px" viewBox="134.113 113.05 165.754 152.992"
+ enable-background="new 134.113 113.05 165.754 152.992" xml:space="preserve">
+<polygon fill="#DD4814" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 299.088,189.546 299.018,218.023 217.256,265.542 217.326,237.066 "/>
+<polygon fill="#DD4814" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 217.326,237.066 217.256,265.542 134.971,218.023 135.041,189.546 "/>
+<polygon fill="#333333" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 299.157,161.07 258.277,184.829 175.991,137.31 216.872,113.55 "/>
+<g enable-background="new ">
+ <polygon fill="#333333" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 299.367,161.175 299.262,189.651 258.382,213.411 258.486,184.934 "/>
+</g>
+<g enable-background="new ">
+ <g>
+ <polygon id="SVGID_1_" fill="#333333" points="258.277,184.829 258.207,213.306 175.922,165.787 175.991,137.31 "/>
+ </g>
+ <g>
+ <defs>
+ <polygon id="SVGID_4_" points="258.277,184.829 258.207,213.306 175.922,165.787 175.991,137.31 "/>
+ </defs>
+ <clipPath id="SVGID_6_">
+ <use xlink:href="#SVGID_4_" overflow="visible"/>
+ </clipPath>
+ <polygon clip-path="url(#SVGID_6_)" fill="#333333" stroke="#FFFFFF" stroke-miterlimit="10" points="258.277,184.829
+ 258.207,213.306 175.922,165.787 175.991,137.31 "/>
+ </g>
+ <g>
+ <polygon id="SVGID_2_" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="258.277,184.829 258.207,213.306
+ 175.922,165.787 175.991,137.31 "/>
+ </g>
+</g>
+<polygon fill="#888888" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 258.242,199.05 217.361,222.81 135.076,175.326 175.956,151.566 "/>
+<polygon fill="#888888" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 217.361,222.81 217.326,237.066 135.041,189.546 135.076,175.326 "/>
+<polygon fill="#888888" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 258.242,199.05 258.207,213.306 217.326,237.066 217.361,222.81 "/>
+<polygon fill="#2C001E" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+ 216.802,161.14 216.767,175.326 176.061,198.98 176.096,184.794 "/>
+<polygon fill="#CDCDCD" points="216.802,161.14 176.096,184.794 135.111,161.14 175.991,137.31 "/>
+<polygon fill="#CDCDCD" points="176.096,184.794 176.061,198.98 135.076,175.326 135.111,161.14 "/>
+<polygon fill="#CDCDCD" points="216.802,161.14 216.767,175.326 176.061,198.98 176.096,184.794 "/>
+<g>
+ <g enable-background="new ">
+ <g>
+ <defs>
+ <polygon id="SVGID_8_" points="216.802,175.326 176.061,198.98 135.111,175.326 175.991,151.566 "/>
+ </defs>
+ <clipPath id="SVGID_10_">
+ <use xlink:href="#SVGID_8_" overflow="visible"/>
+ </clipPath>
+ <polygon clip-path="url(#SVGID_10_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="216.802,175.326
+ 176.096,198.98 135.111,175.326 175.991,151.566 "/>
+ </g>
+ <g>
+ <polygon id="SVGID_3_" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="216.802,175.326 176.061,198.98
+ 135.111,175.326 175.991,151.566 "/>
+ </g>
+ </g>
+ <g enable-background="new ">
+ <g>
+ <defs>
+ <polygon id="SVGID_12_" points="216.837,161.14 176.131,184.794 135.146,161.14 176.026,137.31 "/>
+ </defs>
+ <clipPath id="SVGID_13_">
+ <use xlink:href="#SVGID_12_" overflow="visible"/>
+ </clipPath>
+ <polygon clip-path="url(#SVGID_13_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="216.837,161.14
+ 176.131,184.794 135.146,161.14 176.026,137.31 "/>
+ </g>
+ <g>
+ <polygon id="SVGID_5_" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="216.837,161.14 176.131,184.794
+ 135.146,161.14 176.026,137.31 "/>
+ </g>
+ </g>
+ <g enable-background="new ">
+ <g>
+ <defs>
+ <polygon id="SVGID_14_" points="176.131,184.794 176.061,198.98 135.111,175.326 135.146,161.14 "/>
+ </defs>
+ <clipPath id="SVGID_15_">
+ <use xlink:href="#SVGID_14_" overflow="visible"/>
+ </clipPath>
+ <polygon clip-path="url(#SVGID_15_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="176.131,184.794
+ 176.096,198.98 135.111,175.326 135.146,161.14 "/>
+ </g>
+ <g>
+ <polygon id="SVGID_7_" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="176.131,184.794 176.061,198.98
+ 135.111,175.326 135.146,161.14 "/>
+ </g>
+ </g>
+ <g enable-background="new ">
+ <g>
+ <defs>
+ <polygon id="SVGID_16_" points="135.146,161.14 176.026,137.31 175.991,151.566 135.111,175.326 "/>
+ </defs>
+ <clipPath id="SVGID_17_">
+ <use xlink:href="#SVGID_16_" overflow="visible"/>
+ </clipPath>
+ <polygon clip-path="url(#SVGID_17_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="135.146,161.14
+ 176.026,137.31 175.991,151.566 135.111,175.326 "/>
+ </g>
+ <g>
+ <polygon id="SVGID_9_" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="135.146,161.14 176.026,137.31
+ 175.991,151.566 135.111,175.326 "/>
+ </g>
+ </g>
+ <g enable-background="new ">
+ <g>
+ <defs>
+ <polygon id="SVGID_18_" points="176.026,137.31 216.837,161.14 216.802,175.326 175.991,151.566 "/>
+ </defs>
+ <clipPath id="SVGID_19_">
+ <use xlink:href="#SVGID_18_" overflow="visible"/>
+ </clipPath>
+ <polygon clip-path="url(#SVGID_19_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="176.026,137.31
+ 216.837,161.14 216.802,175.326 175.817,151.671 "/>
+ </g>
+ <g>
+ <polygon id="SVGID_11_" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="176.026,137.31 216.837,161.14
+ 216.802,175.326 175.991,151.566 "/>
+ </g>
+ </g>
+</g>
+</svg>
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 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 400">
- <defs>
- <style>
- .cls-1 {
- fill: none;
- }
-
- .cls-2 {
- fill: #e95420;
- }
-
- .cls-3 {
- fill: #fff;
- }
- </style>
- </defs>
- <g>
- <rect class="cls-2" width="252.43" height="400"/>
- <rect class="cls-1" x="30.05" y="168.29" width="192.33" height="192.33"/>
- <g>
- <path class="cls-3" d="m173.07,243.26v-47.87l-46.86-27.1-46.86,27.1v47.87l-41.66,24.05v54.19l46.86,27.1,41.66-24.16,41.66,24.05,46.86-27.1v-54.19l-41.66-23.94Zm-46.86-62.77l36.36,21v41.77l-36.36,21.11-36.47-21v-41.77l36.47-21.11Zm-41.66,155.92l-36.36-21v-42l36.24-20.89,36.58,21.11v41.77l-36.47,21Zm119.68-21l-36.36,21-36.36-21v-41.77l36.58-21.11,36.24,20.89v42h-.11Z"/>
- <polygon class="cls-3" points="171.49 319.69 191.47 307.84 191.47 284.35 171.49 296.1 171.49 319.69"/>
- <polygon class="cls-3" points="167.76 266.97 147.78 278.48 167.88 289.89 187.86 278.14 167.76 266.97"/>
- <polygon class="cls-3" points="144.28 308.18 164.38 319.92 164.38 296.1 144.05 284.69 144.28 308.18"/>
- <polygon class="cls-3" points="84.44 266.97 64.46 278.48 84.55 289.89 104.54 278.14 84.44 266.97"/>
- <polygon class="cls-3" points="60.96 308.18 81.05 319.92 81.05 296.1 60.84 284.69 60.96 308.18"/>
- <polygon class="cls-3" points="88.17 319.69 108.26 307.84 108.26 284.35 88.17 296.1 88.17 319.69"/>
- <polygon class="cls-3" points="146.09 206.11 126.1 195.05 106.12 206.56 126.1 217.85 146.09 206.11"/>
- <polygon class="cls-3" points="122.6 247.89 122.6 224.06 102.51 212.66 102.62 236.26 122.6 247.89"/>
- <polygon class="cls-3" points="129.72 247.77 149.81 235.92 149.81 212.21 129.72 224.06 129.72 247.77"/>
- </g>
- </g>
-</svg>
\ 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 (
<NavLink className="p-panel__logo" to={getLogoLink()}>
<img
- src="/ui/assets/img/lxd-logo.svg"
- alt="LXD-UI logo"
+ src="/ui/assets/img/incus-logo.svg"
+ alt="Incus-UI logo"
className="p-panel__logo-image"
/>
- <div className="logo-text p-heading--4">Canonical LXD</div>
+ <div className="logo-text p-heading--4">Incus UI</div>
</NavLink>
);
};
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 (
<CustomLayout>
<div className="empty-state login">
- <Icon name="containers" className="empty-state-icon lxd-icon" />
<h1 className="p-heading--4 u-sv-2">Login</h1>
{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
Reference in a new issue View git blame Copy permalink