From 098a6263a9702337dd344823908f41842f82aa8c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 20 Feb 2025 03:52:25 +0530
Subject: [PATCH] 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)
---
 .../dashboard/components-next/icon/Logo.vue   | 15 ++++++++
 .../components-next/sidebar/Sidebar.vue       |  2 +-
 public/brand-assets/logo_thumbnail.svg        | 37 +++++++++++++------
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/components-next/icon/Logo.vue b/app/javascript/dashboard/components-next/icon/Logo.vue
index 2330021c3..6dd0bbd8f 100644
--- a/app/javascript/dashboard/components-next/icon/Logo.vue
+++ b/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"
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index ca5f8b17e..ed00e4623 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/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
diff --git a/public/brand-assets/logo_thumbnail.svg b/public/brand-assets/logo_thumbnail.svg
index 16529675d..d8715e722 100644
--- a/public/brand-assets/logo_thumbnail.svg
+++ b/public/brand-assets/logo_thumbnail.svg
@@ -1,12 +1,25 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<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">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>woot-log</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="woot-log" fill-rule="nonzero">
-            <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
-            <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>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#woot-logo-clip-2342424e23u32098)">
+    <path
+      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>