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