fix: logo and custom branding (#10930)

This PR has the following changes

1. Update `Logo.vue` to fetch the logo from globalConfig and fallback to
SVG if required.
2. Update the default `public/brand-assets/logo_thumbnail.svg` to use
the new colors.

### Preview


https://github.com/user-attachments/assets/505a1d05-cd05-4b86-9fe7-c05334f09b25

![CleanShot 2025-02-19 at 10 56
23@2x](https://github.com/user-attachments/assets/084064b9-5df5-4d11-9b6a-b511c6047001)

app/javascript/dashboard/components-next/icon/Logo.vue

@@ -1,6 +1,21 @@
+<script setup>
+import { useAttrs } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const attrs = useAttrs();
+const globalConfig = useMapGetter('globalConfig/get');
+</script>
+
 <template>
+  <img
+    v-if="globalConfig.logoThumbnail"
+    v-bind="attrs"
+    :src="globalConfig.logoThumbnail"
+  />
   <svg
+    v-else
     v-once
+    v-bind="attrs"
     width="16"
     height="16"
     viewBox="0 0 16 16"

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -525,7 +525,7 @@ const menuItems = computed(() => {
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
         <div class="grid flex-shrink-0 size-6 place-content-center">
-          <Logo />
+          <Logo class="size-4" />
         </div>
         <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
         <SidebarAccountSwitcher

public/brand-assets/logo_thumbnail.svg

@@ -1,12 +1,25 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg
-<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  width="16"
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+  height="16"
-    <title>woot-log</title>
+  viewBox="0 0 16 16"
-    <desc>Created with Sketch.</desc>
+  fill="none"
-    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+  xmlns="http://www.w3.org/2000/svg"
-        <g id="woot-log" fill-rule="nonzero">
+>
-            <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
+  <g clip-path="url(#woot-logo-clip-2342424e23u32098)">
-            <path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
+    <path
-        </g>
+      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+      fill="#2781F6"
+    />
+    <path
+      d="M11.4172 11.4172H7.70831C5.66383 11.4172 4 9.75328 4 7.70828C4 5.66394 5.66383 4 7.70835 4C9.75339 4 11.4172 5.66394 11.4172 7.70828V11.4172Z"
+      fill="white"
+      stroke="white"
+      stroke-width="0.1875"
+    />
   </g>
+  <defs>
+    <clipPath id="woot-logo-clip-2342424e23u32098">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
 </svg>