Fix capitalization and translation issues across website (#294)

* fix capitalization across website * fix capitalization and translation across website * Untranslated announcement and contact cards
BesLogic · Nov 28, 2024 · 749b17a · 749b17a
1 parent 9885b84
commit 749b17a
Show file tree

Hide file tree

Showing 19 changed files with 119 additions and 119 deletions.
diff --git a/canopeum_frontend/src/components/CreatePostWidget.tsx b/canopeum_frontend/src/components/CreatePostWidget.tsx
@@ -124,7 +124,7 @@ const CreatePostWidget = ({ siteId, addNewPost }: Props) => {
     <div className='card'>
       <div className='card-body d-flex flex-column gap-2'>
         <div className='d-flex justify-content-between'>
-          <h2>New Post</h2>
+          <h2>{translate('social.posts.new-post')}</h2>
 
           <button
             className='btn btn-secondary d-flex align-items-center justify-content-center'
@@ -133,7 +133,7 @@ const CreatePostWidget = ({ siteId, addNewPost }: Props) => {
           >
             {isSendingPost
               ? <CircularProgress color='inherit' size={20} />
-              : 'Publish'}
+              : translate('social.posts.publish')}
           </button>
         </div>
 
@@ -157,7 +157,7 @@ const CreatePostWidget = ({ siteId, addNewPost }: Props) => {
           <textarea
             className='form-control pt-5 overflow-hidden'
             onChange={event => handleCommentBodyChange(event)}
-            placeholder='Post a New Message...'
+            placeholder={translate('social.posts.message-placeholder')}
             style={{ resize: 'none' }}
             value={postBody}
           />

diff --git a/canopeum_frontend/src/components/analytics/BatchTable.tsx b/canopeum_frontend/src/components/analytics/BatchTable.tsx
@@ -9,7 +9,7 @@ import useApiClient from '@hooks/ApiClientHook'
 import type { BatchDetail } from '@services/api'
 
 const BATCH_HEADER_CLASS =
-  'text-capitalize position-sticky start-0 table-primary border-1 border-top-0 border-primary'
+  'position-sticky start-0 table-primary border-1 border-top-0 border-primary'
 
 type Props = {
   readonly batches: BatchDetail[],
@@ -47,7 +47,6 @@ const BatchTable = (props: Props) => {
           <tr>
             <th
               className='
-                text-capitalize
                 position-sticky
                 start-0
                 table-primary
@@ -57,7 +56,7 @@ const BatchTable = (props: Props) => {
               scope='row'
               style={{ width: '12.5rem' }}
             >
-              <span className='text-capitalize'>{t('analytics.table-row-1')}</span>
+              {t('analytics.table-row-1')}
             </th>
             {batches.map(batch => (
               <th
@@ -83,7 +82,7 @@ const BatchTable = (props: Props) => {
               className={BATCH_HEADER_CLASS}
               scope='row'
             >
-              <span className='text-capitalize'>{t('analytics.table-row-2')}</span>
+              {t('analytics.table-row-2')}
             </th>
             {batches.map(batch => (
               <td

diff --git a/canopeum_frontend/src/components/analytics/OptionQuantitySelector.tsx b/canopeum_frontend/src/components/analytics/OptionQuantitySelector.tsx
@@ -77,7 +77,7 @@ const OptionQuantitySelector = <TValue extends OptionQuantityValueType>(
 
   return (
     <div className='position-relative'>
-      <label className='form-label text-capitalize' htmlFor={id}>
+      <label className='form-label' htmlFor={id}>
         {label}
       </label>
 

diff --git a/canopeum_frontend/src/components/analytics/SiteSuccessRatesChart.tsx b/canopeum_frontend/src/components/analytics/SiteSuccessRatesChart.tsx
@@ -78,9 +78,7 @@ const SiteSuccessRatesChart = ({ siteSummaries }: Props) => {
 
     return (
       <div>
-        <h6 className='text-capitalize'>
-          {translate('analytics.average')} : {options.average.toFixed(1)} %
-        </h6>
+        <h6>{translate('analytics.average')} : {options.average.toFixed(1)} %</h6>
         <BarChart
           colors={options.colors}
           grid={{ horizontal: true, vertical: true }}

diff --git a/canopeum_frontend/src/components/analytics/SiteSummaryActions.tsx b/canopeum_frontend/src/components/analytics/SiteSummaryActions.tsx
@@ -161,13 +161,13 @@ const SiteSummaryActions = ({ siteSummary, admins, onSiteChange, onSiteEdit }: P
   const actionsPopover = (
     <Popover full>
       <Dropdown.Menu>
-        <Dropdown.Menu title='Select Administrator'>
+        <Dropdown.Menu title={translate('analytics.select-admin')}>
           {administratorsSelection}
         </Dropdown.Menu>
         <Dropdown.Item onClick={() => onSiteEdit(siteSummary.id)}>
           {translate('analytics.edit-site-info')}
         </Dropdown.Item>
-        <Dropdown.Item onClick={onDeleteSiteClick}>Delete</Dropdown.Item>
+        <Dropdown.Item onClick={onDeleteSiteClick}>{translate('generic.delete')}</Dropdown.Item>
       </Dropdown.Menu>
     </Popover>
   )

diff --git a/canopeum_frontend/src/components/analytics/batch-modal/BatchForm.tsx b/canopeum_frontend/src/components/analytics/batch-modal/BatchForm.tsx
@@ -70,7 +70,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='sponsor-name'>
+          <label className='form-label' htmlFor='sponsor-name'>
             {t('analyticsSite.batch-modal.sponsor-name-label')}
           </label>
           <input
@@ -87,7 +87,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='sponsor-website-url'>
+          <label className='form-label' htmlFor='sponsor-website-url'>
             {t('analyticsSite.batch-modal.sponsor-website-url-label')}
           </label>
           <input
@@ -104,7 +104,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='sponsor-logo'>
+          <label className='form-label' htmlFor='sponsor-logo'>
             {t('analyticsSite.batch-modal.sponsor-logo-label')}
           </label>
           <ImageUpload
@@ -115,7 +115,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='size'>
+          <label className='form-label' htmlFor='size'>
             {t('analyticsSite.batch-modal.size-label')}
           </label>
           <div className='input-group'>
@@ -154,7 +154,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='total-number-of-plants'>
+          <label className='form-label' htmlFor='total-number-of-plants'>
             {t('analyticsSite.batch-modal.total-number-of-plants-label')}:&nbsp;
           </label>
           <span id='total-number-of-plants'>
@@ -212,7 +212,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         />
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='survived'>
+          <label className='form-label' htmlFor='survived'>
             {t('analyticsSite.batch-modal.survived-label')}
           </label>
           <input
@@ -229,7 +229,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='replaced'>
+          <label className='form-label' htmlFor='replaced'>
             {t('analyticsSite.batch-modal.replaced-label')}
           </label>
           <input
@@ -262,7 +262,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='total-number-seeds'>
+          <label className='form-label' htmlFor='total-number-seeds'>
             {t('analyticsSite.batch-modal.total-seeds-label')}:&nbsp;
           </label>
           <span id='total-number-seeds'>
@@ -271,7 +271,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div>
-          <label className='form-label text-capitalize' htmlFor='propagation'>
+          <label className='form-label' htmlFor='propagation'>
             {t('analyticsSite.batch-modal.propagation-label')}
           </label>
           <input
@@ -288,7 +288,7 @@ const BatchForm = ({ handleBatchChange, initialBatch }: Props) => {
         </div>
 
         <div className='mb-3'>
-          <label className='form-label text-capitalize' htmlFor='batch-image'>
+          <label className='form-label' htmlFor='batch-image'>
             {t('analyticsSite.batch-modal.images-label')}
           </label>
           <ImageUpload id='batch-image-upload' imageUrl={batchImageURL} onChange={onImageUpload} />

diff --git a/canopeum_frontend/src/components/analytics/site-modal/SiteCoordinates.tsx b/canopeum_frontend/src/components/analytics/site-modal/SiteCoordinates.tsx
@@ -28,7 +28,7 @@ const SiteCoordinates = (
 
   return (
     <>
-      <label className='form-label text-capitalize' htmlFor='site-coordinates'>
+      <label className='form-label' htmlFor='site-coordinates'>
         {t('analytics.site-modal.site-gps-coordinates')}
       </label>
       <div id='site-coordinates'>

diff --git a/canopeum_frontend/src/components/analytics/site-modal/SiteModal.tsx b/canopeum_frontend/src/components/analytics/site-modal/SiteModal.tsx
@@ -116,7 +116,7 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
       <DialogContent>
         <form>
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='site-name'>
+            <label className='form-label' htmlFor='site-name'>
               {t('analytics.site-modal.site-name')}
             </label>
             <input
@@ -129,7 +129,7 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
           </div>
 
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='site-type'>
+            <label className='form-label' htmlFor='site-type'>
               {t('analytics.site-modal.site-type')}
             </label>
             <select
@@ -148,7 +148,7 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
           </div>
 
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='site-image'>
+            <label className='form-label' htmlFor='site-image'>
               {t('analytics.site-modal.site-type')}
             </label>
             <ImageUpload id='site-image-upload' imageUrl={siteImageURL} onChange={onImageUpload} />
@@ -168,7 +168,7 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
           </div>
 
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='site-presentation'>
+            <label className='form-label' htmlFor='site-presentation'>
               {t('analytics.site-modal.site-presentation')}
             </label>
             <textarea
@@ -180,7 +180,7 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
           </div>
 
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='site-size'>
+            <label className='form-label' htmlFor='site-size'>
               {t('analytics.site-modal.site-size')}
             </label>
             <div className='input-group'>
@@ -209,7 +209,7 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
           </div>
 
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='site-research-partner'>
+            <label className='form-label' htmlFor='site-research-partner'>
               {t('analytics.site-modal.site-research-partner')}
             </label>
             <div
@@ -224,7 +224,6 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
                   name='research-partner'
                   onChange={() => setSite(current => ({ ...current, researchPartner: true }))}
                   type='radio'
-                  value='yes'
                 />
                 <label className='form-check-label' htmlFor='research-partner-yes'>
                   {t('analytics.site-modal.yes')}
@@ -239,7 +238,6 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
                   name='research-partner'
                   onChange={() => setSite(current => ({ ...current, researchPartner: false }))}
                   type='radio'
-                  value='no'
                 />
                 <label className='form-check-label' htmlFor='research-partner-no'>
                   {t('analytics.site-modal.no')}
@@ -251,7 +249,7 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
           </div>
 
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='site-map-visibility'>
+            <label className='form-label' htmlFor='site-map-visibility'>
               {t('analytics.site-modal.site-map-visibility')}
             </label>
             <div
@@ -266,7 +264,6 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
                   name='map-visibility'
                   onChange={() => setSite(current => ({ ...current, visibleOnMap: true }))}
                   type='radio'
-                  value='visible'
                 />
                 <label className='form-check-label' htmlFor='map-visible'>
                   {t('analytics.site-modal.visible')}
@@ -281,7 +278,6 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
                   name='map-visibility'
                   onChange={() => setSite(current => ({ ...current, visibleOnMap: false }))}
                   type='radio'
-                  value='invisible'
                 />
                 <label className='form-check-label' htmlFor='map-invisible'>
                   {t('analytics.site-modal.invisible')}

diff --git a/canopeum_frontend/src/components/social/AnnouncementCard.tsx b/canopeum_frontend/src/components/social/AnnouncementCard.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 
 import SiteAnnouncementModal from '@components/social/site-modal/SiteAnnouncementModal'
@@ -13,13 +14,14 @@ type Props = {
 
 const AnnouncementCard = ({ announcement, viewMode, onEdit }: Props) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const { t } = useTranslation()
 
   return (
     <>
       <div className='card'>
         <div className='card-body'>
           <div className='d-flex justify-content-between align-items-center pb-3'>
-            <h2 className='card-title'>Announcement</h2>
+            <h2 className='card-title'>{t('social.announcement.title')}</h2>
             <div>
               {viewMode === 'admin' && (
                 <button

diff --git a/canopeum_frontend/src/components/social/ContactCard.tsx b/canopeum_frontend/src/components/social/ContactCard.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 
 import facebookLogo from '@assets/icons/facebook-contact-logo.svg'
@@ -17,6 +18,7 @@ type Props = {
 
 const ContactCard = ({ contact, viewMode, onEdit }: Props) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const { t } = useTranslation()
 
   const googleMapQueryURL = contact.address
     ? `https://www.google.com/maps/search/?api=1&query=${encodeURI(contact.address)}`
@@ -26,7 +28,7 @@ const ContactCard = ({ contact, viewMode, onEdit }: Props) => {
     <div className='card'>
       <div className='card-body'>
         <div className='d-flex justify-content-between align-items-center pb-3'>
-          <h2 className='card-title'>Contact</h2>
+          <h2 className='card-title'>{t('social.contact.title')}</h2>
           {viewMode === 'admin' && (
             <button
               className='material-symbols-outlined text-primary fs-2'

diff --git a/canopeum_frontend/src/components/social/WidgetDialog.tsx b/canopeum_frontend/src/components/social/WidgetDialog.tsx
@@ -32,7 +32,7 @@ const WidgetDialog = ({ handleClose, open }: Props) => {
       <DialogContent>
         <form>
           <div className='mb-3'>
-            <label className='form-label text-capitalize' htmlFor='widget-title'>
+            <label className='form-label' htmlFor='widget-title'>
               {t('social.widgets.title')}
             </label>
             <div className='d-flex align-items-center gap-1'>
@@ -58,7 +58,7 @@ const WidgetDialog = ({ handleClose, open }: Props) => {
           <div className='mb-3'>
             <div className='position-relative'>
               <label
-                className='form-label text-capitalize position-absolute'
+                className='form-label position-absolute'
                 htmlFor='widget-body'
                 style={{ bottom: 0, right: 0, marginRight: '.5rem', marginBottom: '.5rem' }}
               >
@@ -85,14 +85,14 @@ const WidgetDialog = ({ handleClose, open }: Props) => {
           onClick={() => handleClose()}
           type='button'
         >
-          {t('social.widgets.cancel')}
+          {t('generic.cancel')}
         </button>
         <button
           className='btn btn-primary'
           onClick={() => handleClose('save', innerWidget)}
           type='button'
         >
-          {t('social.widgets.submit')}
+          {t('generic.submit')}
         </button>
       </DialogActions>
     </Dialog>