feat: update label color for row layout

Author: eshankvaish

src/Shared/Components/FormFieldWrapper/FormFieldLabel.tsx

@@ -1,15 +1,21 @@
 import { FormFieldLabelProps } from './types'
 import { getFormLabelElementId } from './utils'
 
-const FormFieldLabel = ({ label, inputId, required }: FormFieldLabelProps) => {
+const FormFieldLabel = ({ label, inputId, required, layout }: FormFieldLabelProps) => {
     if (!label) {
         return null
     }
 
     const labelId = getFormLabelElementId(inputId)
+    const isRowLayout = layout === 'row'
 
     return (
-        <label className="fs-13 lh-20 cn-7 fw-4 dc__block mb-0" htmlFor={inputId} id={labelId} data-testid={labelId}>
+        <label
+            className={`fs-13 lh-20 fw-4 dc__block mb-0 ${isRowLayout ? 'cn-9' : 'cn-7'}`}
+            htmlFor={inputId}
+            id={labelId}
+            data-testid={labelId}
+        >
             {typeof label === 'string' ? (
                 <span className={`flex left ${required ? 'dc__required-field' : ''}`}>
                     <span className="dc__truncate">{label}</span>

src/Shared/Components/FormFieldWrapper/FormFieldWrapper.tsx

@@ -21,7 +21,7 @@ const FormFieldWrapper = ({
             <div className={`flex left top dc__gap-6 ${!isRowLayout ? 'column' : ''} w-100`}>
                 {label && (
                     <div className={`${itemContainerClassName} flex left`}>
-                        <FormFieldLabel inputId={inputId} label={label} required={required} />
+                        <FormFieldLabel inputId={inputId} label={label} required={required} layout={layout} />
                     </div>
                 )}
                 <div className="w-100">{children}</div>

src/Shared/Components/FormFieldWrapper/types.ts

@@ -19,6 +19,10 @@ export type FormFieldLabelProps = LabelOrAriaLabelType & {
      * Id of the input element
      */
     inputId: string
+    /**
+     * Layout of the field
+     */
+    layout?: 'row' | 'column'
 }
 
 export interface FormFieldInfoProps extends Pick<FormFieldLabelProps, 'inputId'> {
@@ -44,12 +48,8 @@ export interface FormInfoItemProps {
 }
 
 export interface FormFieldWrapperProps
-    extends Pick<FormFieldLabelProps, 'label' | 'required' | 'ariaLabel'>,
+    extends Pick<FormFieldLabelProps, 'label' | 'required' | 'ariaLabel' | 'layout'>,
         FormFieldInfoProps {
-    /**
-     * Layout of the field
-     */
-    layout?: 'row' | 'column'
     /**
      * If true, the field takes the full width of the parent
      */