feat(lite/header): replace logo with "XO LITE" (#7118)

@xen-orchestra/lite/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## **next**
 
 - Ability to snapshot/copy a VM from its view (PR [#7087](https://github.com/vatesfr/xen-orchestra/pull/7087))
+- [Header] Replace logo with "XO LITE" (PR [#7118](https://github.com/vatesfr/xen-orchestra/pull/7118))
 
 ## **0.1.4** (2023-10-03)
 

@xen-orchestra/lite/src/assets/theme.css

@@ -1,4 +1,6 @@
 :root {
+  --color-logo: #282467;
+
   --color-blue-scale-000: #000000;
   --color-blue-scale-100: #1a1b38;
   --color-blue-scale-200: #595a6f;
@@ -61,6 +63,8 @@
 :root.dark {
   color-scheme: dark;
 
+  --color-logo: #e5e5e7;
+
   --color-blue-scale-000: #ffffff;
   --color-blue-scale-100: #e5e5e7;
   --color-blue-scale-200: #9899a5;

@xen-orchestra/lite/src/components/AppHeader.vue

@@ -7,7 +7,8 @@
       class="toggle-navigation"
     />
     <RouterLink :to="{ name: 'home' }">
-      <img alt="XO Lite" src="../assets/logo.svg" />
+      <img v-if="isMobile" alt="XO Lite" src="../assets/logo.svg" />
+      <TextLogo v-else />
     </RouterLink>
     <slot />
     <div class="right">
@@ -18,6 +19,7 @@
 
 <script lang="ts" setup>
 import AccountButton from "@/components/AccountButton.vue";
+import TextLogo from "@/components/TextLogo.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { useNavigationStore } from "@/stores/navigation.store";
 import { useUiStore } from "@/stores/ui.store";
@@ -44,6 +46,10 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore);
   img {
     width: 4rem;
   }
+
+  .text-logo {
+    margin: 1rem;
+  }
 }
 
 .right {

@xen-orchestra/lite/src/components/TextLogo.vue

@@ -0,0 +1,37 @@
+<template>
+  <svg
+    class="text-logo"
+    viewBox="300.85 622.73 318.32 63.27"
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="22"
+  >
+    <g>
+      <polygon
+        points="355.94 684.92 341.54 684.92 327.84 664.14 315.68 684.92 301.81 684.92 317.59 659.25 338.96 659.25 355.94 684.92"
+      />
+      <path
+        d="M406.2,627.17c4.62,2.64,8.27,6.33,10.94,11.07,2.67,4.74,4.01,10.1,4.01,16.07s-1.34,11.35-4.01,16.12c-2.67,4.77-6.32,8.48-10.94,11.12-4.63,2.64-9.78,3.97-15.47,3.97s-10.85-1.32-15.47-3.97c-4.63-2.64-8.27-6.35-10.95-11.12-2.67-4.77-4.01-10.14-4.01-16.12s1.34-11.33,4.01-16.07c2.67-4.74,6.32-8.43,10.95-11.07,4.62-2.64,9.78-3.97,15.47-3.97s10.84,1.32,15.47,3.97Zm-24.86,9.65c-2.7,1.61-4.81,3.92-6.33,6.94-1.52,3.02-2.28,6.54-2.28,10.56s.76,7.54,2.28,10.56c1.52,3.02,3.63,5.33,6.33,6.94,2.7,1.61,5.83,2.41,9.39,2.41s6.69-.8,9.39-2.41c2.7-1.61,4.81-3.92,6.33-6.94,1.52-3.02,2.28-6.53,2.28-10.56s-.76-7.54-2.28-10.56-3.63-5.33-6.33-6.94c-2.7-1.61-5.83-2.41-9.39-2.41s-6.69,.8-9.39,2.41Z"
+      />
+      <polygon
+        points="354.99 624.06 339.53 649.22 317.49 649.22 300.86 624.06 315.26 624.06 328.96 644.84 341.12 624.06 354.99 624.06"
+      />
+      <g>
+        <path d="M476.32,675.94h20.81v10.04h-33.47v-63.14h12.66v53.1Z" />
+        <path d="M517.84,622.84v63.14h-12.66v-63.14h12.66Z" />
+        <path
+          d="M573.29,622.84v10.22h-16.82v52.92h-12.66v-52.92h-16.83v-10.22h46.31Z"
+        />
+        <path
+          d="M595.18,633.06v15.83h21.26v10.04h-21.26v16.73h23.97v10.31h-36.64v-63.23h36.64v10.31h-23.97Z"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style lang="postcss" scoped>
+.text-logo {
+  fill: var(--color-logo);
+}
+</style>