From 08e3193c83f154bfdc70fdbf4fa7735d6741b1fb Mon Sep 17 00:00:00 2001
From: Samuel Therrien <samuel.therrien@beslogic.com>
Date: Thu, 21 Nov 2024 14:33:22 -0500
Subject: [PATCH] fix custom fields look

---
 .../src/components/inputs/EmailTextField.tsx  |  5 ++--
 .../src/components/inputs/PhoneTextField.tsx  |  5 ++--
 .../src/components/inputs/UrlTextField.tsx    |  5 ++--
 .../site-modal/SiteAnnouncementModal.tsx      |  4 +---
 .../social/site-modal/SiteContactModal.tsx    | 24 +++++--------------
 5 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/canopeum_frontend/src/components/inputs/EmailTextField.tsx b/canopeum_frontend/src/components/inputs/EmailTextField.tsx
index 73ba87325..502e0f40a 100644
--- a/canopeum_frontend/src/components/inputs/EmailTextField.tsx
+++ b/canopeum_frontend/src/components/inputs/EmailTextField.tsx
@@ -1,4 +1,4 @@
-import { type FC, type InputHTMLAttributes, useState } from 'react'
+import { type InputHTMLAttributes, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { isValidEmail } from '@utils/validators'
@@ -10,7 +10,7 @@ type Props = {
   readonly isValid: (valid: boolean) => void,
 }
 
-const EmailTextField: FC<Props> = props => {
+const EmailTextField = (props: Props) => {
   const { t } = useTranslation()
   const [error, setError] = useState<string | null>(null)
 
@@ -31,6 +31,7 @@ const EmailTextField: FC<Props> = props => {
       {/* eslint-disable react/jsx-props-no-spreading -- Needed for custom input */}
       <input
         {...props.attributes}
+        className='form-control'
         onChange={event => handleChange(event.target.value)}
         type='email'
         value={props.value}
diff --git a/canopeum_frontend/src/components/inputs/PhoneTextField.tsx b/canopeum_frontend/src/components/inputs/PhoneTextField.tsx
index a6437287d..cda19153e 100644
--- a/canopeum_frontend/src/components/inputs/PhoneTextField.tsx
+++ b/canopeum_frontend/src/components/inputs/PhoneTextField.tsx
@@ -1,4 +1,4 @@
-import { type FC, type InputHTMLAttributes, useState } from 'react'
+import { type InputHTMLAttributes, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { isValidPhone } from '@utils/validators'
@@ -10,7 +10,7 @@ type Props = {
   readonly isValid: (valid: boolean) => void,
 }
 
-const PhoneTextField: FC<Props> = props => {
+const PhoneTextField = (props: Props) => {
   const { t } = useTranslation()
   const [error, setError] = useState<string | null>(null)
 
@@ -31,6 +31,7 @@ const PhoneTextField: FC<Props> = props => {
       {/* eslint-disable react/jsx-props-no-spreading -- Needed for custom input */}
       <input
         {...props.attributes}
+        className='form-control'
         onChange={event => handleChange(event.target.value)}
         type='tel'
         value={props.value}
diff --git a/canopeum_frontend/src/components/inputs/UrlTextField.tsx b/canopeum_frontend/src/components/inputs/UrlTextField.tsx
index 378a31212..8d1a3eb7d 100644
--- a/canopeum_frontend/src/components/inputs/UrlTextField.tsx
+++ b/canopeum_frontend/src/components/inputs/UrlTextField.tsx
@@ -1,4 +1,4 @@
-import { type FC, type InputHTMLAttributes, useState } from 'react'
+import { type InputHTMLAttributes, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { isValidUrl } from '@utils/validators'
@@ -10,7 +10,7 @@ type Props = {
   readonly isValid: (valid: boolean) => void,
 }
 
-const UrlTextField: FC<Props> = props => {
+const UrlTextField = (props: Props) => {
   const { t } = useTranslation()
   const [error, setError] = useState<string | null>(null)
 
@@ -31,6 +31,7 @@ const UrlTextField: FC<Props> = props => {
       {/* eslint-disable react/jsx-props-no-spreading -- Needed for custom input */}
       <input
         {...props.attributes}
+        className='form-control'
         onChange={event => handleChange(event.target.value)}
         type='url'
         value={props.value}
diff --git a/canopeum_frontend/src/components/social/site-modal/SiteAnnouncementModal.tsx b/canopeum_frontend/src/components/social/site-modal/SiteAnnouncementModal.tsx
index 403b95fde..076fc9150 100644
--- a/canopeum_frontend/src/components/social/site-modal/SiteAnnouncementModal.tsx
+++ b/canopeum_frontend/src/components/social/site-modal/SiteAnnouncementModal.tsx
@@ -71,9 +71,7 @@ const SiteAnnouncementModal = ({ announcement, isOpen, handleClose }: Props) =>
                 {t('social.announcement.link')}
               </label>
               <UrlTextField
-                attributes={{
-                  id: 'link',
-                }}
+                attributes={{ id: 'link' }}
                 isValid={value => setIsFormValid(value)}
                 onChange={eventValue =>
                   setEditedAnnouncement(value => ({ ...value, link: eventValue }))}
diff --git a/canopeum_frontend/src/components/social/site-modal/SiteContactModal.tsx b/canopeum_frontend/src/components/social/site-modal/SiteContactModal.tsx
index e0c68f010..8a458e424 100644
--- a/canopeum_frontend/src/components/social/site-modal/SiteContactModal.tsx
+++ b/canopeum_frontend/src/components/social/site-modal/SiteContactModal.tsx
@@ -76,9 +76,7 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
                 {t('social.contact.email')}
               </label>
               <EmailTextField
-                attributes={{
-                  id: 'email',
-                }}
+                attributes={{ id: 'email' }}
                 isValid={value => setIsFormValid(value)}
                 onChange={eventValue =>
                   setEditedContact(value => ({ ...value, email: eventValue }))}
@@ -90,9 +88,7 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
                 {t('social.contact.phone')}
               </label>
               <PhoneTextField
-                attributes={{
-                  id: 'phone',
-                }}
+                attributes={{ id: 'phone' }}
                 isValid={value => setIsFormValid(value)}
                 onChange={eventValue =>
                   setEditedContact(value => ({ ...value, phone: eventValue }))}
@@ -102,9 +98,7 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
             <div className='d-flex'>
               <img alt='facebook-logo' className='px-2' src={facebookLogo} />
               <UrlTextField
-                attributes={{
-                  id: 'facebookLink',
-                }}
+                attributes={{ id: 'facebookLink' }}
                 isValid={value => setIsFormValid(value)}
                 onChange={eventValue =>
                   setEditedContact(value => ({ ...value, facebookLink: eventValue }))}
@@ -114,9 +108,7 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
             <div className='d-flex'>
               <img alt='x-logo' className='px-2' src={xLogo} />
               <UrlTextField
-                attributes={{
-                  id: 'xLink',
-                }}
+                attributes={{ id: 'xLink' }}
                 isValid={value => setIsFormValid(value)}
                 onChange={eventValue =>
                   setEditedContact(value => ({ ...value, xLink: eventValue }))}
@@ -126,9 +118,7 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
             <div className='d-flex'>
               <img alt='instagram-logo' className='px-2' src={instagramLogo} />
               <UrlTextField
-                attributes={{
-                  id: 'instagramLink',
-                }}
+                attributes={{ id: 'instagramLink' }}
                 isValid={value => setIsFormValid(value)}
                 onChange={eventValue =>
                   setEditedContact(value => ({ ...value, instagramLink: eventValue }))}
@@ -138,9 +128,7 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
             <div className='d-flex'>
               <img alt='linkedin-logo' className='px-2' src={linkedinLogo} />
               <UrlTextField
-                attributes={{
-                  id: 'linkedinLink',
-                }}
+                attributes={{ id: 'linkedinLink' }}
                 isValid={value => setIsFormValid(value)}
                 onChange={eventValue =>
                   setEditedContact(value => ({ ...value, linkedinLink: eventValue }))}