fix: color swatch input style

cypress/e2e/course_creation.cy.js

@@ -107,7 +107,7 @@ describe("Course Creation", () => {
 			cy.get("div").contains(
 				"Test Course Short Introduction to test the UI"
 			);
-			cy.get(".course-image")
+			cy.get(".bg-cover")
 				.invoke("css", "background-image")
 				.should("include", "/files/profile");
 		});

frontend/src/components/Controls/ColorSwatches.vue

@@ -3,39 +3,43 @@
 		<div class="text-xs text-ink-gray-5 mb-1">
 			{{ __(label) }}
 		</div>
-		<Popover placement="bottom">
+		<Popover placement="bottom" class="!block">
 			<template #target="{ togglePopover, isOpen }">
-				<FormControl
-					type="text"
-					autocomplete="off"
-					class="[&>div>input]:pl-8"
-					: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],
-									  }
-									: {}
-							"
-						></div>
-					</template>
-					<template #suffix>
-						<Button variant="ghost">
-							<X
-								class="size-3 text-ink-gray-5"
-								@click="emit('update:modelValue', null)"
-							/>
-						</Button>
-					</template>
-				</FormControl>
+				<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>
 			</template>
 			<template #body="{ close }">
 				<div class="rounded-lg bg-surface-white p-3 border w-fit mt-2">
@@ -63,12 +67,15 @@
 				</div>
 			</template>
 		</Popover>
+        <div class="text-sm text-ink-gray-5 mt-2">
+            {{ description }}
+        </div>
 	</div>
 </template>
 <script setup lang="ts">
 import { Button, FormControl, Popover } from 'frappe-ui'
 import { computed } from 'vue'
-import { X } from 'lucide-vue-next'
+import { Palette, X } from 'lucide-vue-next'
 import { theme } from '@/utils/theme'
 
 const emit = defineEmits(['update:modelValue', 'change'])
@@ -76,6 +83,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
 const props = defineProps<{
 	modelValue: string
 	label: string
+    description?: string
 }>()
 
 const colors = computed(() => {

frontend/src/components/CourseCard.vue

@@ -5,7 +5,7 @@
 		style="min-height: 350px"
 	>
 		<div
-			class="w-[100%] h-[168px] bg-cover bg-center bg-no-repeat rounded-t-md"
+			class="w-[100%] h-[168px] bg-cover bg-center bg-no-repeat"
 			:style="
 				course.image
 					? { backgroundImage: `url('${encodeURI(course.image)}')` }

frontend/src/pages/CourseForm.vue

@@ -130,7 +130,9 @@
 
 							<ColorSwatches
 								v-model="course.card_gradient"
-								:label="__('Card Gradient')"
+								:label="__('Color')"
+								:description="__('Choose a color for the course card')"
+								class="w-full"
 							/>
 						</div>
 					</div>

lms/lms/doctype/lms_course/lms_course.json

@@ -276,7 +276,7 @@
   {
    "fieldname": "card_gradient",
    "fieldtype": "Select",
-   "label": "Card Gradient",
+   "label": "Color",
    "options": "Red\nBlue\nGreen\nAmber\nCyan\nOrange\nPink\nPurple\nTeal\nViolet\nYellow\nGray"
   }
  ],
@@ -296,7 +296,7 @@
   }
  ],
  "make_attachments_public": 1,
- "modified": "2025-07-25 17:30:48.553707",
+ "modified": "2025-07-25 17:50:44.983391",
  "modified_by": "sayali@frappe.io",
  "module": "LMS",
  "name": "LMS Course",

package.json

@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/frappe/lms#readme",
   "devDependencies": {
-    "cypress": "^13.9.0",
+    "cypress": "^14.5.2",
     "cypress-file-upload": "^5.0.8",
     "cypress-real-events": "^1.14.0"
   },