From ddd90891306fb4ba2ccb79bc1048b42f739c6ced Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 25 Jul 2025 18:31:46 +0530
Subject: [PATCH] fix: color swatch input style

---
 .../src/components/Controls/ColorSwatches.vue | 79 ++++++++++---------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/Controls/ColorSwatches.vue b/frontend/src/components/Controls/ColorSwatches.vue
index 3b6ab02c..60e21d2c 100644
--- a/frontend/src/components/Controls/ColorSwatches.vue
+++ b/frontend/src/components/Controls/ColorSwatches.vue
@@ -6,40 +6,43 @@
 		<Popover placement="bottom" class="!block">
 			<template #target="{ togglePopover, isOpen }">
 				<div class="space-y-2">
-                    <FormControl
-                        type="text"
-                        autocomplete="off"
-                        class="w-full"
-                        :placeholder="__('Set Color')"
-                        @focus="togglePopover"
-                        :modelValue="modelValue"
-                        @update:modelValue="(val: string) => emit('update:modelValue', val)"
-                    >
-                        <template #prefix>
-                            <div
-                                class="size-4 rounded-full"
-                                :style="
-                                    modelValue
-                                        ? {
-                                                backgroundColor:
-                                                    theme.backgroundColor[modelValue.toLowerCase()][400],
-                                        }
-                                        : {}
-                                "
-                            >
-                            <Palette v-if="!modelValue" class="size-4 stroke-1.5 text-ink-gray-5" />
-                        </div>
-                        </template>
-                        <template #suffix>
-                            <Button variant="ghost">
-                                <X
-                                    class="size-3 text-ink-gray-5"
-                                    @click="emit('update:modelValue', null)"
-                                />
-                            </Button>
-                        </template>
-                    </FormControl>
-                </div>
+					<FormControl
+						type="text"
+						autocomplete="off"
+						class="w-full"
+						:placeholder="__('Set Color')"
+						@focus="togglePopover"
+						:modelValue="modelValue"
+						@update:modelValue="(val: string) => emit('update:modelValue', val)"
+					>
+						<template #prefix>
+							<div
+								class="size-4 rounded-full"
+								:style="
+									modelValue
+										? {
+												backgroundColor:
+													theme.backgroundColor[modelValue.toLowerCase()][400],
+										  }
+										: {}
+								"
+							>
+								<Palette
+									v-if="!modelValue"
+									class="size-4 stroke-1.5 text-ink-gray-5"
+								/>
+							</div>
+						</template>
+						<template #suffix>
+							<Button variant="ghost">
+								<X
+									class="size-3 text-ink-gray-5"
+									@click="emit('update:modelValue', null)"
+								/>
+							</Button>
+						</template>
+					</FormControl>
+				</div>
 			</template>
 			<template #body="{ close }">
 				<div class="rounded-lg bg-surface-white p-3 border w-fit mt-2">
@@ -67,9 +70,9 @@
 				</div>
 			</template>
 		</Popover>
-        <div class="text-sm text-ink-gray-5 mt-2">
-            {{ description }}
-        </div>
+		<div class="text-sm text-ink-gray-5 mt-2">
+			{{ description }}
+		</div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -83,7 +86,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
 const props = defineProps<{
 	modelValue: string
 	label: string
-    description?: string
+	description?: string
 }>()
 
 const colors = computed(() => {