fix custom fields look

BesLogic · Nov 21, 2024 · 08e3193 · 08e3193
1 parent f5a5df2
commit 08e3193
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 }))}