cambio estilos input trainer y student header component

Author: Pablosgit

front/src/pods/trainer/components/header.component.tsx

@@ -20,11 +20,13 @@ export const HeaderComponent: React.FC<Props> = props => {
       <CopyFieldComponent
         labelName="Trainer Link"
         inputId="trainer-link"
+        className={innerClasses.trainerBackgroundColor}
         urlLink={currentTrainerUrl ?? ''}
       />
       <CopyFieldComponent
         labelName="Students Link"
         inputId="student-link"
+        className={innerClasses.studentBackgroundColor}
         urlLink={currentStudentUrl ?? ''}
       />
     </div>
@@ -37,10 +39,11 @@ interface CopyFieldProps {
   labelName: string;
   inputId: string;
   urlLink: string;
+  className?: string;
 }
 
 export const CopyFieldComponent: React.FC<CopyFieldProps> = props => {
-  const { labelName, inputId, urlLink } = props;
+  const { labelName, inputId, urlLink, className } = props;
 
   const [open, setOpen] = React.useState(true);
 
@@ -69,7 +72,7 @@ export const CopyFieldComponent: React.FC<CopyFieldProps> = props => {
           <input
             id={inputId}
             type="text"
-            className={innerClasses.input}
+            className={cx(innerClasses.input, className)}
             value={urlLink}
             readOnly
             aria-readonly

front/src/pods/trainer/components/header.styles.ts

@@ -67,6 +67,16 @@ export const icon = css`
   font-size: 1.875rem;
 `;
 
+export const studentBackgroundColor = css`
+  background-color: #EB5353;
+  color: white;
+`;
+
+export const trainerBackgroundColor = css`
+  background-color: #006E60;
+  color: white;
+`;
+
 export const button = css`
   width: ${spacing(7.375)};
   height: ${spacing(7.375)};