From 1bf3f7a38ce58d75f0a34c185b7e2199ffbe44dd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 16 Sep 2025 17:16:27 +0530
Subject: [PATCH] refactor: BrandSettings component

(cherry picked from commit 84e0fe30a9667468ea9ddbb0bc768e3da62620d3)
---
 frontend/components.d.ts                      |  3 +-
 frontend/src/components/Icons/SparkleIcon.vue | 16 ++++
 .../Settings/{General => }/BrandSettings.vue  | 85 +++++++++----------
 3 files changed, 59 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/components/Icons/SparkleIcon.vue
 rename frontend/src/components/Settings/{General => }/BrandSettings.vue (68%)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ed89b26e..54f39ef6 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -33,7 +33,7 @@ declare module 'vue' {
     Autocomplete: typeof import('./src/components/frappe-ui/Autocomplete.vue')['default']
     AvatarIcon: typeof import('./src/components/Icons/AvatarIcon.vue')['default']
     BrandLogo: typeof import('./src/components/BrandLogo.vue')['default']
-    BrandSettings: typeof import('./src/components/Settings/General/BrandSettings.vue')['default']
+    BrandSettings: typeof import('./src/components/Settings/BrandSettings.vue')['default']
     BulkDeleteLinkedDocModal: typeof import('./src/components/BulkDeleteLinkedDocModal.vue')['default']
     CalendarIcon: typeof import('./src/components/Icons/CalendarIcon.vue')['default']
     CallArea: typeof import('./src/components/Activities/CallArea.vue')['default']
@@ -229,6 +229,7 @@ declare module 'vue' {
     SmileIcon: typeof import('./src/components/Icons/SmileIcon.vue')['default']
     SortBy: typeof import('./src/components/SortBy.vue')['default']
     SortIcon: typeof import('./src/components/Icons/SortIcon.vue')['default']
+    SparkleIcon: typeof import('./src/components/Icons/SparkleIcon.vue')['default']
     SquareAsterisk: typeof import('./src/components/Icons/SquareAsterisk.vue')['default']
     StepsIcon: typeof import('./src/components/Icons/StepsIcon.vue')['default']
     SuccessIcon: typeof import('./src/components/Icons/SuccessIcon.vue')['default']
diff --git a/frontend/src/components/Icons/SparkleIcon.vue b/frontend/src/components/Icons/SparkleIcon.vue
new file mode 100644
index 00000000..33ef2bc2
--- /dev/null
+++ b/frontend/src/components/Icons/SparkleIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.37543 1.93494L4.21632 2.21494C4.35232 2.26027 4.44388 2.38738 4.44388 2.53138C4.44388 2.67538 4.35143 2.80249 4.21543 2.84783L3.37454 3.12783L3.09365 3.9696C3.04921 4.10472 2.92121 4.19716 2.7781 4.19716C2.63499 4.19716 2.50787 4.1056 2.46254 3.9696L2.18165 3.12783L1.34076 2.84783C1.20476 2.80249 1.11232 2.67538 1.11232 2.53138C1.11232 2.38738 1.20476 2.26027 1.34076 2.21494L2.18165 1.93494L2.46254 1.09316C2.55321 0.82116 3.00387 0.82116 3.09454 1.09316L3.37543 1.93494ZM8.44852 1.33394C8.3643 1.16325 8.19046 1.05518 8.00012 1.05518C7.80978 1.05518 7.63595 1.16325 7.55173 1.33394L5.67697 5.13368L1.48388 5.74214C1.29552 5.76947 1.13901 5.90137 1.08017 6.08238C1.02133 6.26339 1.07036 6.46211 1.20665 6.59497L4.24065 9.55281L3.52421 13.7284C3.49203 13.916 3.56913 14.1056 3.7231 14.2174C3.87706 14.3293 4.08119 14.3441 4.24966 14.2555L8.11188 12.2253C8.35631 12.0968 8.4503 11.7945 8.32181 11.5501C8.19333 11.3057 7.89102 11.2117 7.64659 11.3402L4.68114 12.899L5.2707 9.46284C5.29853 9.30065 5.24477 9.13514 5.12693 9.02027L2.63025 6.58626L6.08082 6.08555C6.24373 6.06191 6.38457 5.95959 6.45741 5.81196L8.00012 2.6852L9.54284 5.81196C9.61568 5.95959 9.75652 6.06191 9.91943 6.08555L13.37 6.58625L11.6235 8.2887C11.4258 8.48146 11.4218 8.79802 11.6145 8.99575C11.8073 9.19349 12.1239 9.19752 12.3216 9.00476L14.7936 6.59498C14.9299 6.46212 14.9789 6.2634 14.9201 6.08239C14.8612 5.90138 14.7047 5.76947 14.5164 5.74214L10.3233 5.13368L8.44852 1.33394ZM13.4744 11.9911L12.3517 11.6168L11.9775 10.4942C11.8557 10.1315 11.2557 10.1315 11.1339 10.4942L10.7597 11.6168L9.63702 11.9911C9.45569 12.0515 9.33302 12.2213 9.33302 12.4124C9.33302 12.6035 9.45569 12.7733 9.63702 12.8337L10.7597 13.2079L11.1339 14.3306C11.1944 14.5119 11.365 14.6346 11.5561 14.6346C11.7472 14.6346 11.917 14.5119 11.9784 14.3306L12.3526 13.2079L13.4752 12.8337C13.6566 12.7733 13.7792 12.6035 13.7792 12.4124C13.7792 12.2213 13.6566 12.0515 13.4752 11.9911H13.4744ZM13.3333 2.88883C13.3333 3.25702 13.0349 3.5555 12.6667 3.5555C12.2985 3.5555 12 3.25702 12 2.88883C12 2.52064 12.2985 2.22217 12.6667 2.22217C13.0349 2.22217 13.3333 2.52064 13.3333 2.88883Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Settings/General/BrandSettings.vue b/frontend/src/components/Settings/BrandSettings.vue
similarity index 68%
rename from frontend/src/components/Settings/General/BrandSettings.vue
rename to frontend/src/components/Settings/BrandSettings.vue
index 448e59be..35fef496 100644
--- a/frontend/src/components/Settings/General/BrandSettings.vue
+++ b/frontend/src/components/Settings/BrandSettings.vue
@@ -1,22 +1,14 @@
 <template>
   <div class="flex h-full flex-col gap-6 px-6 py-8 text-ink-gray-8">
     <!-- Header -->
-    <div class="flex px-2 justify-between">
-      <div class="flex items-center gap-1 -ml-4 w-9/12">
-        <Button
-          variant="ghost"
-          icon-left="chevron-left"
-          :label="__('Brand settings')"
-          size="md"
-          @click="() => emit('updateStep', 'general-settings')"
-          class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !justify-start"
-        />
-        <Badge
-          v-if="settings.isDirty"
-          :label="__('Not Saved')"
-          variant="subtle"
-          theme="orange"
-        />
+    <div class="flex justify-between px-2 text-ink-gray-8">
+      <div class="flex flex-col gap-1">
+        <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
+          {{ __('Brand settings') }}
+        </h2>
+        <p class="text-p-base text-ink-gray-6">
+          {{ __('Configure brand settings for your CRM') }}
+        </p>
       </div>
       <div class="flex item-center space-x-2 w-3/12 justify-end">
         <Button
@@ -36,35 +28,30 @@
         <FormControl
           type="text"
           class="w-1/2"
+          size="md"
           v-model="settings.doc.brand_name"
           :label="__('Brand name')"
+          :placeholder="__('Enter brand name')"
         />
       </div>
 
       <!-- logo -->
       <div class="flex flex-col justify-between gap-4">
-        <span class="text-base font-semibold text-ink-gray-8">
-          {{ __('Logo') }}
-        </span>
-        <div class="flex flex-1 gap-5">
+        <div class="flex items-center flex-1 gap-5">
           <div
-            class="flex items-center justify-center rounded border border-outline-gray-modals px-10 py-2"
+            class="flex items-center justify-center rounded border border-outline-gray-modals size-20"
           >
             <img
-              :src="settings.doc?.brand_logo || '/assets/crm/images/logo.png'"
+              v-if="settings.doc?.brand_logo"
+              :src="settings.doc?.brand_logo"
               alt="Logo"
               class="size-8 rounded"
             />
+            <ImageIcon class="size-5 text-ink-gray-4" />
           </div>
           <div class="flex flex-1 flex-col gap-2">
-            <ImageUploader
-              label="Favicon"
-              image_type="image/ico"
-              :image_url="settings.doc?.brand_logo"
-              @upload="(url) => (settings.doc.brand_logo = url)"
-              @remove="() => (settings.doc.brand_logo = '')"
-            />
-            <span class="text-p-sm text-ink-gray-6">
+            <span class="text-base font-medium">{{ __('Brand logo') }}</span>
+            <span class="text-p-base text-ink-gray-6">
               {{
                 __(
                   'Appears in the left sidebar. Recommended size is 32x32 px in PNG or SVG',
@@ -72,33 +59,34 @@
               }}
             </span>
           </div>
+          <div>
+            <ImageUploader
+              image_type="image/ico"
+              :image_url="settings.doc?.brand_logo"
+              @upload="(url) => (settings.doc.brand_logo = url)"
+              @remove="() => (settings.doc.brand_logo = '')"
+            />
+          </div>
         </div>
       </div>
 
       <!-- favicon -->
       <div class="flex flex-col justify-between gap-4">
-        <span class="text-base font-semibold text-ink-gray-8">
-          {{ __('Favicon') }}
-        </span>
-        <div class="flex flex-1 gap-5">
+        <div class="flex items-center flex-1 gap-5">
           <div
-            class="flex items-center justify-center rounded border border-outline-gray-modals px-10 py-2"
+            class="flex items-center justify-center rounded border border-outline-gray-modals size-20"
           >
             <img
-              :src="settings.doc?.favicon || '/assets/crm/images/logo.png'"
+              v-if="settings.doc?.favicon"
+              :src="settings.doc?.favicon"
               alt="Favicon"
               class="size-8 rounded"
             />
+            <ImageIcon class="size-5 text-ink-gray-4" />
           </div>
           <div class="flex flex-1 flex-col gap-2">
-            <ImageUploader
-              label="Favicon"
-              image_type="image/ico"
-              :image_url="settings.doc?.favicon"
-              @upload="(url) => (settings.doc.favicon = url)"
-              @remove="() => (settings.doc.favicon = '')"
-            />
-            <span class="text-p-sm text-ink-gray-6">
+            <span class="text-base font-medium">{{ __('Favicon') }}</span>
+            <span class="text-p-base text-ink-gray-6">
               {{
                 __(
                   'Appears next to the title in your browser tab. Recommended size is 32x32 px in PNG or ICO',
@@ -106,6 +94,14 @@
               }}
             </span>
           </div>
+          <div>
+            <ImageUploader
+              image_type="image/ico"
+              :image_url="settings.doc?.favicon"
+              @upload="(url) => (settings.doc.favicon = url)"
+              @remove="() => (settings.doc.favicon = '')"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -115,6 +111,7 @@
   </div>
 </template>
 <script setup>
+import ImageIcon from '~icons/lucide/image'
 import ImageUploader from '@/components/Controls/ImageUploader.vue'
 import { FormControl, ErrorMessage } from 'frappe-ui'
 import { getSettings } from '@/stores/settings'