From 623dda1f2a6f6f9d0848da92a0e5d7de45bcab46 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 28 Jun 2023 17:13:53 +0530
Subject: [PATCH] chore: update custom theme input labels

---
 .../components/core/custom-theme-selector.tsx | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/apps/app/components/core/custom-theme-selector.tsx b/apps/app/components/core/custom-theme-selector.tsx
index ef21b86e1..5bc25b138 100644
--- a/apps/app/components/core/custom-theme-selector.tsx
+++ b/apps/app/components/core/custom-theme-selector.tsx
@@ -139,7 +139,9 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
         <div className="space-y-4">
           <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Background</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Primary background color
+              </h3>
               <ColorPickerInput
                 name="bgBase"
                 error={errors.bgBase}
@@ -150,7 +152,9 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Background surface 1</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Secondary background color
+              </h3>
               <ColorPickerInput
                 name="bgSurface1"
                 error={errors.bgSurface1}
@@ -161,7 +165,9 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Background surface 2</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Tertiary background color
+              </h3>
               <ColorPickerInput
                 name="bgSurface2"
                 error={errors.bgSurface2}
@@ -172,7 +178,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Border</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">Border color</h3>
               <ColorPickerInput
                 name="border"
                 error={errors.border}
@@ -183,7 +189,9 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Sidebar</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Sidebar background color
+              </h3>
               <ColorPickerInput
                 name="sidebar"
                 error={errors.sidebar}
@@ -194,7 +202,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Accent</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">Accent color</h3>
               <ColorPickerInput
                 name="accent-500"
                 error={errors["accent-500"]}
@@ -205,7 +213,9 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Text primary</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Primary text color
+              </h3>
               <ColorPickerInput
                 name="textBase"
                 error={errors.textBase}
@@ -216,7 +226,9 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Text secondary</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Secondary text color
+              </h3>
               <ColorPickerInput
                 name="textSecondary"
                 error={errors.textSecondary}