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
Erwin Boskma 98b2d5d5cb
incus-ui: init
2023-12-23 20:20:04 +01:00

276 lines
11 KiB
Diff
Raw Blame History

From b2c17ef237b6c7540d4947f3d4544dc08dbd33ad Mon Sep 17 00:00:00 2001
From: Erwin Boskma <erwin@datarift.nl>
Date: Sat, 23 Dec 2023 20:02:24 +0100
Subject: [PATCH] Branding
---
index.html | 2 +-
public/assets/img/incus-logo.svg | 129 ++++++++++++++++++++++++++++++
public/assets/img/lxd-logo.svg | 34 --------
src/components/Logo.tsx | 6 +-
src/sass/_pattern_navigation.scss | 8 +-
src/util/title.tsx | 2 +-
6 files changed, 138 insertions(+), 43 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 bcaf07e..92a0a5a 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/sass/_pattern_navigation.scss b/src/sass/_pattern_navigation.scss
index a224ef4..d68f363 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/util/title.tsx b/src/util/title.tsx
index 715fd43..a40b0b7 100644
--- a/src/util/title.tsx
+++ b/src/util/title.tsx
@@ -6,6 +6,6 @@ export const setTitle = () => {
useEffect(() => {
const host = settings?.config["user.ui_title"] ?? location.hostname;
- document.title = `${host} | LXD UI`;
+ document.title = `${host} | Incus UI`;
}, [settings?.config]);
};
--
2.42.0
Reference in a new issue View git blame Copy permalink