Merge pull request #3611 from LiteFarmOrg/fix-beta-badge

Fix beta badge
LiteFarmOrg · Dec 12, 2024 · bf166c8 · bf166c8
2 parents 9cb0855 + 173500b
commit bf166c8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/packages/webapp/src/components/Badge/styles.module.scss b/packages/webapp/src/components/Badge/styles.module.scss
@@ -18,8 +18,8 @@
 .tooltip {
   color: #000;
   border-radius: 4px;
-  font-size: 16px;
-  padding: 8px;
+  font-size: 14px;
+  padding: 16px;
   border: 1px solid var(--Colors-Neutral-Neutral-50);
   box-shadow: 0px 4px 12px 0px #00000040;
   z-index: 10;

diff --git a/packages/webapp/src/components/Navigation/useSectionHeaders.tsx b/packages/webapp/src/components/Navigation/useSectionHeaders.tsx
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { ANIMALS_INVENTORY_URL, ADD_ANIMALS_URL } from '../../util/siteMapConstants';
+import { ANIMALS_INVENTORY_URL, ADD_ANIMALS_URL, ANIMALS_URL } from '../../util/siteMapConstants';
 import { useTranslation, Trans } from 'react-i18next';
 import type { Pathname } from 'history';
 import Badge from '../Badge';
@@ -40,9 +40,9 @@ interface PathHeaderKVP {
 export function useSectionHeader(path: Pathname): string | React.ReactElement | null {
   const { t } = useTranslation(['translation']);
 
-  const animalInventoryTitle = (
+  const animalInventoryTitle = (title = t('SECTION_HEADER.ANIMALS_INVENTORY')) => (
     <div className={styles.animalInventoryTitle}>
-      <div className={styles.text}>{t('SECTION_HEADER.ANIMALS_INVENTORY')}</div>
+      <div className={styles.text}>{title}</div>
       <Badge
         title={t('BADGE.BETA.TITLE')}
         content={
@@ -55,8 +55,8 @@ export function useSectionHeader(path: Pathname): string | React.ReactElement |
   );
 
   const HEADERS_BY_PATH: PathHeaderKVP = {
-    [ANIMALS_INVENTORY_URL]: animalInventoryTitle,
-    [ADD_ANIMALS_URL]: t('SECTION_HEADER.ANIMALS_INVENTORY'),
+    [ANIMALS_INVENTORY_URL]: animalInventoryTitle(),
+    [ADD_ANIMALS_URL]: animalInventoryTitle(t('ADD_ANIMAL.ADD_ANIMALS_TITLE')),
   };
 
   return HEADERS_BY_PATH[path] ?? null;

diff --git a/packages/webapp/src/containers/Animals/AddAnimals/index.tsx b/packages/webapp/src/containers/Animals/AddAnimals/index.tsx
@@ -32,6 +32,7 @@ import { enqueueErrorSnackbar, enqueueSuccessSnackbar } from '../../Snackbar/sna
 import { formatAnimalDetailsToDBStructure, formatBatchDetailsToDBStructure } from './utils';
 import { AnimalDetailsFormFields } from './types';
 import { AnimalOrBatchKeys } from '../types';
+import { useSectionHeader } from '../../../components/Navigation/useSectionHeaders';
 
 export const STEPS = {
   BASICS: 'basics',
@@ -124,9 +125,11 @@ function AddAnimals({ isCompactSideMenu, history }: AddAnimalsProps) {
     [STEPS.DETAILS]: [],
   };
 
+  const animalInventoryTitle = useSectionHeader(history.location.pathname) || '';
+
   return (
     <ContextForm
-      stepperProgressBarTitle={isMobile && t('ADD_ANIMAL.ADD_ANIMALS_TITLE')}
+      stepperProgressBarTitle={isMobile && animalInventoryTitle}
       stepperProgressBarConfig={stepperProgressBarConfig}
       onSave={onSave}
       hasSummaryWithinForm={true}