277 lines
11 KiB
Diff
277 lines
11 KiB
Diff
|
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
|
||
|
|
|