nixos-config/pkgs/incus-ui/ui-canonical-0001-Branding.patch

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