From cb6bed0d1a4896bcaca5cc1fddd6a9f12dbc617d Mon Sep 17 00:00:00 2001
From: mgaseta <105936322+mgaseta@users.noreply.github.com>
Date: Wed, 28 Aug 2024 11:15:44 -0300
Subject: [PATCH] fix: 1485 visual fixes for seedlot registration (#1545)

Co-authored-by: Ricardo Campos <ricardo.campos@encora.com>
---
 ...-seedlot-reg-form-collection-interim.cy.ts |   2 +-
 frontend/cypress/support/index.ts             |   7 +
 .../src/api-service/favouriteActivitiesAPI.ts |   2 +-
 frontend/src/components/BCHeader/constants.ts | 155 +++++++++---------
 frontend/src/components/BCHeader/index.tsx    |   8 +-
 .../components/Card/FavouriteCard/index.tsx   |  27 ++-
 .../components/Card/FavouriteCard/styles.scss |  10 +-
 .../src/components/Card/SmallCard/index.tsx   |   2 +-
 .../components/Card/StandardCard/index.tsx    |   9 +-
 .../OrchardStep/index.tsx                     |   4 +-
 .../OrchardStep/styles.scss                   |   8 +-
 .../OwnershipStep/SingleOwnerInfo/styles.scss |   1 +
 .../OwnershipStep/styles.scss                 |  15 +-
 .../ParentTreeStep/constants.tsx              |   4 +-
 .../ParentTreeStep/index.tsx                  | 133 +++++++--------
 .../ParentTreeStep/styles.scss                |  12 +-
 .../src/components/SeedlotTable/Table.tsx     |   2 +-
 .../src/components/SeedlotTable/styles.scss   |  17 +-
 ...ctivitiyMap.ts => FavouriteActivityMap.ts} |   0
 frontend/src/config/ToastifyConfig.ts         |   4 +-
 .../views/Seedlot/SeedlotDetails/index.tsx    |   2 +-
 .../SeedlotReview/SeedlotReviewContent.tsx    |  22 ++-
 .../views/Seedlot/SeedlotReview/styles.scss   |  10 ++
 23 files changed, 275 insertions(+), 181 deletions(-)
 create mode 100644 frontend/cypress/support/index.ts
 rename frontend/src/config/{FavouriteActivitiyMap.ts => FavouriteActivityMap.ts} (100%)

diff --git a/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-collection-interim.cy.ts b/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-collection-interim.cy.ts
index 94115ec0e..f03dd9d03 100644
--- a/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-collection-interim.cy.ts
+++ b/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-collection-interim.cy.ts
@@ -485,7 +485,7 @@ describe('A Class Seedlot Registration form, Collection and Interim storage', ()
 
     cy.get('#end-date-input')
       .clear()
-      .type('2024-05-26')
+      .type('2024-05-30')
       .blur();
 
     // Save changes
diff --git a/frontend/cypress/support/index.ts b/frontend/cypress/support/index.ts
new file mode 100644
index 000000000..9ba7dfb94
--- /dev/null
+++ b/frontend/cypress/support/index.ts
@@ -0,0 +1,7 @@
+import '@cypress/code-coverage/support';
+
+Cypress.on('fail', (error, runnable) => {
+  console.error('Test failed:', error);
+
+  throw error;
+});
diff --git a/frontend/src/api-service/favouriteActivitiesAPI.ts b/frontend/src/api-service/favouriteActivitiesAPI.ts
index b7fe833bd..427c0828c 100644
--- a/frontend/src/api-service/favouriteActivitiesAPI.ts
+++ b/frontend/src/api-service/favouriteActivitiesAPI.ts
@@ -1,7 +1,7 @@
 import ApiConfig from './ApiConfig';
 import api from './api';
 import { FavActivityType, FavActivityPostType } from '../types/FavActivityTypes';
-import FavouriteActivityMap from '../config/FavouriteActivitiyMap';
+import FavouriteActivityMap from '../config/FavouriteActivityMap';
 
 export const getFavAct = () => {
   const url = ApiConfig.favouriteActivities;
diff --git a/frontend/src/components/BCHeader/constants.ts b/frontend/src/components/BCHeader/constants.ts
index 4123b31b0..fa7d59818 100644
--- a/frontend/src/components/BCHeader/constants.ts
+++ b/frontend/src/components/BCHeader/constants.ts
@@ -26,87 +26,90 @@ export const navItems = [
         icon: 'SoilMoistureField',
         link: ROUTES.SEEDLOTS,
         disabled: false
-      },
-      {
-        name: 'Seedlings',
-        icon: 'CropGrowth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Nurseries',
-        icon: 'CropHealth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Orchards',
-        icon: 'MapBoundaryVegetation',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Reports',
-        icon: 'Report',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Tests',
-        icon: 'Chemistry',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Parent tree',
-        icon: 'Tree',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Tree seed centre',
-        icon: 'Enterprise',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Financial',
-        icon: 'Money',
-        link: '#',
-        disabled: true
-      }
-    ]
-  },
-  {
-    name: 'Management',
-    items: [
-      {
-        name: 'Notifications',
-        icon: 'Notification',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Settings',
-        icon: 'Settings',
-        link: '#',
-        disabled: true
       }
+      // Uncomment these as necessary :)
+      // {
+      //   name: 'Seedlings',
+      //   icon: 'CropGrowth',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Nurseries',
+      //   icon: 'CropHealth',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Orchards',
+      //   icon: 'MapBoundaryVegetation',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Reports',
+      //   icon: 'Report',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Tests',
+      //   icon: 'Chemistry',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Parent tree',
+      //   icon: 'Tree',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Tree seed centre',
+      //   icon: 'Enterprise',
+      //   link: '#',
+      //   disabled: true
+      // },
+      // {
+      //   name: 'Financial',
+      //   icon: 'Money',
+      //   link: '#',
+      //   disabled: true
+      // }
     ]
   }
+  // Uncomment these as necessary :)
+  // {
+  //   name: 'Management',
+  //   items: [
+  //     {
+  //       name: 'Notifications',
+  //       icon: 'Notification',
+  //       link: '#',
+  //       disabled: true
+  //     },
+  //     {
+  //       name: 'Settings',
+  //       icon: 'Settings',
+  //       link: '#',
+  //       disabled: true
+  //     }
+  //   ]
+  // }
 ];
 
-export const supportItems = {
-  name: 'Support',
-  items: [
-    {
-      name: 'Need help?',
-      icon: 'Help',
-      link: '#',
-      disabled: true
-    }
-  ]
-};
+// Uncomment these as necessary :)
+// export const supportItems = {
+//   name: 'Support',
+//   items: [
+//     {
+//       name: 'Need help?',
+//       icon: 'Help',
+//       link: '#',
+//       disabled: true
+//     }
+//   ]
+// };
 
 export const componentTexts = {
   headerTitle: 'SPAR',
diff --git a/frontend/src/components/BCHeader/index.tsx b/frontend/src/components/BCHeader/index.tsx
index aa7bdf02e..8f8628360 100644
--- a/frontend/src/components/BCHeader/index.tsx
+++ b/frontend/src/components/BCHeader/index.tsx
@@ -26,8 +26,7 @@ import {
   VERSION,
   defaultPanelState,
   componentTexts,
-  navItems,
-  supportItems
+  navItems
 } from './constants';
 import { RightPanelType, HearderContainerProps } from './definitions';
 import UserButton from './UserButton';
@@ -198,7 +197,8 @@ const BCHeader = () => {
               }
             </div>
             <div>
-              <SideNavLink className="side-nav-category-name">
+              {/* Uncomment this section when the support pages are implemented. */}
+              {/* <SideNavLink className="side-nav-category-name">
                 {supportItems.name}
               </SideNavLink>
               {
@@ -212,7 +212,7 @@ const BCHeader = () => {
                     {supportItem.name}
                   </SideNavLink>
                 ))
-              }
+              } */}
               <PanelSectionName title={VERSION} />
             </div>
           </SideNav>
diff --git a/frontend/src/components/Card/FavouriteCard/index.tsx b/frontend/src/components/Card/FavouriteCard/index.tsx
index 7f1fdab0c..ace32f568 100644
--- a/frontend/src/components/Card/FavouriteCard/index.tsx
+++ b/frontend/src/components/Card/FavouriteCard/index.tsx
@@ -43,17 +43,31 @@ const FavouriteCard = ({
   });
 
   const ActionBtn = (
-    <OverflowMenu className="fav-card-overflow" menuOptionsClass="fav-card-menu-options" aria-label={`${favObject.header} options`} flipped iconDescription="More actions">
+    <OverflowMenu
+      className="fav-card-overflow"
+      menuOptionsClass="fav-card-menu-options"
+      aria-label={`${favObject.header} options`}
+      flipped
+      iconDescription="More actions"
+      // Need to stop bubbling here so it won't trigger the
+      // the tile onKeyDown event
+      onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {
+        e.stopPropagation();
+      }}
+      onClick={(e: React.MouseEvent<HTMLElement>) => {
+        e.stopPropagation();
+      }}
+    >
       <OverflowMenuItem
         itemText={favObject.highlighted ? 'Dehighlight shortcut' : 'Highlight shortcut'}
-        onClick={(e: Event) => {
+        onClick={(e: React.MouseEvent<HTMLElement>) => {
           e.stopPropagation();
           highlightFavAct.mutate();
         }}
       />
       <OverflowMenuItem
         itemText="Delete shortcut"
-        onClick={(e: Event) => {
+        onClick={(e: React.MouseEvent<HTMLElement>) => {
           e.stopPropagation();
           removeFavAct.mutate();
         }}
@@ -78,6 +92,13 @@ const FavouriteCard = ({
     <Tile
       className={favObject.highlighted ? 'fav-card-main-highlighted' : 'fav-card-main'}
       onClick={() => navigate(favObject.link)}
+      tabIndex={0}
+      aria-label={`Go to ${favObject.header}`}
+      onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          navigate(favObject.link);
+        }
+      }}
     >
       <div className="fav-card-header">
         <Icon className="fav-card-icon" />
diff --git a/frontend/src/components/Card/FavouriteCard/styles.scss b/frontend/src/components/Card/FavouriteCard/styles.scss
index 2e63042b5..9faf39824 100644
--- a/frontend/src/components/Card/FavouriteCard/styles.scss
+++ b/frontend/src/components/Card/FavouriteCard/styles.scss
@@ -87,11 +87,11 @@ p.fav-card-title-large {
   color: var(--#{vars.$bcgov-prefix}-text-on-color)
 }
 
-.fav-card-main-highlighted .fav-card-overflow > svg{
+.fav-card-main-highlighted .fav-card-overflow > svg {
   fill: var(--#{vars.$bcgov-prefix}-icon-on-color);
 }
 
-.#{vars.$bcgov-prefix}--overflow-menu.#{vars.$bcgov-prefix}--overflow-menu--open >svg{
+.#{vars.$bcgov-prefix}--overflow-menu.#{vars.$bcgov-prefix}--overflow-menu--open >svg {
   fill: var(--#{vars.$bcgov-prefix}-icon-primary);
 }
 
@@ -109,6 +109,10 @@ p.fav-card-title-large {
   outline: 2px solid colors.$white;
 }
 
+.fav-card-main-highlighted .#{vars.$bcgov-prefix}--overflow-menu:hover {
+  background-color: transparent;
+}
+
 @media only screen and (max-width: 672px) {
   .fav-card-main,
   .fav-card-main-highlighted {
@@ -131,7 +135,7 @@ p.fav-card-title-large {
     justify-content: flex-start;
     align-items: center;
   }
-  
+
 }
 
 .fav-card-menu-options{
diff --git a/frontend/src/components/Card/SmallCard/index.tsx b/frontend/src/components/Card/SmallCard/index.tsx
index 0de1d4fb2..756e58e60 100644
--- a/frontend/src/components/Card/SmallCard/index.tsx
+++ b/frontend/src/components/Card/SmallCard/index.tsx
@@ -8,7 +8,7 @@ import './styles.scss';
 
 type SmallCardProps = {
   header: string,
-  actionBtn: JSX.Element
+  actionBtn: JSX.Element,
   path: string,
   image: string,
   isIcon: boolean,
diff --git a/frontend/src/components/Card/StandardCard/index.tsx b/frontend/src/components/Card/StandardCard/index.tsx
index 913d2da86..40b15deda 100644
--- a/frontend/src/components/Card/StandardCard/index.tsx
+++ b/frontend/src/components/Card/StandardCard/index.tsx
@@ -63,7 +63,14 @@ const StandardCard = ({
           isEmpty
             ? null
             : (
-              <IconButton className="std-card-button" kind="ghost" label="Go" align="bottom" onClick={() => { navigate(`${url}`); }}>
+              <IconButton
+                className="std-card-button"
+                kind="ghost"
+                label="Go"
+                align="bottom"
+                onClick={() => { navigate(`${url}`); }}
+                aria-label={`Go to ${header} page`}
+              >
                 <Icons.ArrowRight />
               </IconButton>
             )
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
index 7f5ec0e27..d0860525a 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
@@ -425,7 +425,7 @@ const OrchardStep = ({
       {
         renderOrchardButtons()
       }
-      <Row className="seedlot-orchard-title-row">
+      <Row className="seedlot-gamete-title-row">
         <Column className="section-title" sm={4} md={8} lg={16}>
           <h2>{orchardStepText.gameteSection.title}</h2>
           {
@@ -562,7 +562,7 @@ const OrchardStep = ({
           }
         </Column>
       </Row>
-      <Row>
+      <Row className="orchard-row">
         <Column sm={4} md={8} lg={16}>
           <RadioButtonGroup
             id={state.hasPollenContamination.id}
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
index fec8bd6d9..72d29763d 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
@@ -4,7 +4,6 @@
 .seedlot-orchard-step-form {
   padding: 0;
 
-
   h2 {
     @include type.type-style('heading-03');
     margin-bottom: 0.2rem;
@@ -36,9 +35,14 @@
     margin-bottom: 2.5rem;
   }
 
+  .seedlot-gamete-title-row {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
   .seedlot-orchard-add-orchard,
   .pollen-methodology-checkbox {
-    margin-bottom: 1rem;
+    margin-bottom: 2.5rem;
   }
 
   .orchard-fields-review-only {
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss
index b0da1ee27..1816c4277 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss
@@ -103,6 +103,7 @@
 
   .owner-mod-btn {
     margin-left: 1rem;
+    margin-top: 1.5rem;
   }
 
   .owner-code-text-input {
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/styles.scss
index 625d11b5e..d9f19f5ef 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/styles.scss
@@ -33,18 +33,22 @@ svg.#{vars.$bcgov-prefix}--accordion__arrow {
 .ownership-form-container {
   margin-top: 1.25rem;
 
+  ul.#{vars.$bcgov-prefix}--accordion  {
+    border: 0;
+  }
+
   ul.#{vars.$bcgov-prefix}--accordion .#{vars.$bcgov-prefix}--accordion__title {
     padding: 1rem;
   }
 
   .single-accordion-item {
-    margin-bottom: 1rem;
+    margin-bottom: 2.5rem;
     background-color: var(--#{vars.$bcgov-prefix}-layer-01);
     border: 1px solid var(--#{vars.$bcgov-prefix}-border-subtle-00);
+    border-radius: 4px;
   }
 
   .owner-add-btn {
-    margin-top: 1.75rem;
     margin-bottom: 1rem;
   }
 
@@ -55,12 +59,17 @@ svg.#{vars.$bcgov-prefix}--accordion__arrow {
       color: var(--#{vars.$bcgov-prefix}-text-primary);
     }
 
-    .description-section {
+    .item-description-section {
       @include type.type-style('helper-text-02', true);
       color: var(--#{vars.$bcgov-prefix}-text-secondary);
     }
   }
 
+  // Adjust margin on the client seach link
+  .applicant-client-search-row {
+    margin-bottom: 1.5rem;
+  }
+
   @media only screen and (min-width: 640px) {
     .#{vars.$bcgov-prefix}--accordion__content {
       padding-right: 1rem;
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx
index 4b1a631a6..9ab03349a 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx
@@ -302,8 +302,8 @@ export const rowTemplate: RowItem = {
 export const headerTemplate: Array<HeaderObj> = [
   {
     id: 'parentTreeNumber',
-    name: 'Parent Tree Number',
-    description: 'Parent Tree Number',
+    name: 'Parent tree number',
+    description: 'Parent tree number',
     enabled: true,
     editable: false,
     isAnOption: false,
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
index 6ccc59aa9..e4bfa779c 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
@@ -9,7 +9,7 @@ import {
   TableContainer, TableToolbar, Checkbox,
   TableToolbarContent, OverflowMenuItem, OverflowMenu,
   Button, Table, TableHead, TableRow, TableHeader,
-  DataTableSkeleton, DefinitionTooltip, Modal,
+  DataTableSkeleton, Modal,
   Accordion, AccordionItem, TextInputSkeleton
 } from '@carbon/react';
 import {
@@ -469,43 +469,49 @@ const ParentTreeStep = ({ isReviewDisplay, isReviewRead }: ParentTreeStepProps)
                   renderRecalcSection()
                 }
                 {/* -------- Calculate Button Row -------- */}
-                <DetailSection>
-                  {
-                    renderCalcSection(false)
-                  }
-                  {
-                    showInfoSections
-                      ? (
-                        <>
-                          {
-                            renderSubSections()
-                          }
-                          {/* -------- Seedlot mean geospatial data -------- */}
-                          <Row className="info-section-sub-title">
-                            <Column>
-                              {
-                                !isReviewDisplay
-                                  ? 'Orchard parent tree geospatial summary'
-                                  : 'Collection geospatial summary'
-                              }
-                            </Column>
-                          </Row>
-                          {
-                            isReviewDisplay
-                              ? (
-                                <SpatialData isReviewRead={isReviewRead ?? false} />
-                              )
-                              : (
-                                <InfoSection
-                                  infoItems={Object.values(meanGeomInfos.seedlot)}
-                                />
-                              )
-                          }
-                        </>
-                      )
-                      : null
-                  }
-                </DetailSection>
+                {
+                  !(!isReviewDisplay && isFormSubmitted)
+                    ? (
+                      <DetailSection>
+                        {
+                          renderCalcSection(false)
+                        }
+                        {
+                          showInfoSections
+                            ? (
+                              <>
+                                {
+                                  renderSubSections()
+                                }
+                                {/* -------- Seedlot mean geospatial data -------- */}
+                                <Row className="info-section-sub-title">
+                                  <Column>
+                                    {
+                                      !isReviewDisplay
+                                        ? 'Orchard parent tree geospatial summary'
+                                        : 'Collection geospatial summary'
+                                    }
+                                  </Column>
+                                </Row>
+                                {
+                                  isReviewDisplay
+                                    ? (
+                                      <SpatialData isReviewRead={isReviewRead ?? false} />
+                                    )
+                                    : (
+                                      <InfoSection
+                                        infoItems={Object.values(meanGeomInfos.seedlot)}
+                                      />
+                                    )
+                                }
+                              </>
+                            )
+                            : null
+                        }
+                      </DetailSection>
+                    )
+                    : null
+                }
               </>
             )
             : (
@@ -528,26 +534,30 @@ const ParentTreeStep = ({ isReviewDisplay, isReviewRead }: ParentTreeStepProps)
                   renderRecalcSection()
                 }
                 {
-                  <DetailSection>
-                    {/* -------- SMP mix mean geospatial data -------- */}
-                    <Row className="info-section-sub-title">
-                      <DescriptionBox
-                        header="SMP mix geospatial summary"
-                      />
-                    </Row>
-                    {
-                      renderCalcSection(true)
-                    }
-                    {
-                      showInfoSections || isReviewDisplay
-                        ? (
-                          <InfoSection
-                            infoItems={Object.values(meanGeomInfos.smpMix)}
+                  !(!isReviewDisplay && isFormSubmitted)
+                    ? (
+                      <DetailSection>
+                        {/* -------- SMP mix mean geospatial data -------- */}
+                        <Row className="info-section-sub-title">
+                          <DescriptionBox
+                            header="SMP mix geospatial summary"
                           />
-                        )
-                        : null
-                    }
-                  </DetailSection>
+                        </Row>
+                        {
+                          renderCalcSection(true)
+                        }
+                        {
+                          showInfoSections || isReviewDisplay
+                            ? (
+                              <InfoSection
+                                infoItems={Object.values(meanGeomInfos.smpMix)}
+                              />
+                            )
+                            : null
+                        }
+                      </DetailSection>
+                    )
+                    : null
                 }
               </>
             )
@@ -763,14 +773,7 @@ const ParentTreeStep = ({ isReviewDisplay, isReviewRead }: ParentTreeStepProps)
                                     )
                                       ? (
                                         <TableHeader id={header.id} key={header.id}>
-                                          <DefinitionTooltip
-                                            align="top"
-                                            openOnHover
-                                            definition={header.description}
-                                            tabIndex={-1}
-                                          >
-                                            {header.name}
-                                          </DefinitionTooltip>
+                                          {header.name}
                                         </TableHeader>
                                       )
                                       : null
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss
index 493f81ac0..b92a513a5 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss
@@ -46,18 +46,18 @@
       position: sticky;
       top: 3rem;
       z-index: 1;
-      background-color: colors.$white;
+      background-color: var(--#{vars.$bcgov-prefix}-layer-02);
     }
   }
 
   .sticky-toolbar {
-    background: colors.$white;
+    background: var(--#{vars.$bcgov-prefix}-layer-02);
     z-index: 1;
     position: sticky;
     top: 8.375rem;
 
     .#{vars.$bcgov-prefix}--table-toolbar {
-      background: colors.$white;
+      background: var(--#{vars.$bcgov-prefix}-layer-02);
     }
   }
 
@@ -119,7 +119,7 @@
 
   .empty-section-container {
     padding: 5rem;
-    background: var(--#{vars.$bcgov-prefix}-layer-01);
+    background: var(--#{vars.$bcgov-prefix}-layer-02);
 
     .empty-section-button {
       padding: 0;
@@ -162,7 +162,7 @@
     margin: 0 0.5rem;
 
     .info-sections-col {
-      padding: 3rem 2rem;
+      padding: 0rem 2rem 3rem;
     }
 
     .detail-section-grid {
@@ -294,7 +294,7 @@
   .table-pagination {
     z-index: 2;
     position: relative;
-    background: colors.$white;
+    background: var(--#{vars.$bcgov-prefix}-layer-02);
 
     .#{vars.$bcgov-prefix}--select-input--inline__wrapper {
       border-left: 0;
diff --git a/frontend/src/components/SeedlotTable/Table.tsx b/frontend/src/components/SeedlotTable/Table.tsx
index 3cb23c123..6cf9a0b82 100644
--- a/frontend/src/components/SeedlotTable/Table.tsx
+++ b/frontend/src/components/SeedlotTable/Table.tsx
@@ -118,7 +118,7 @@ const SeedlotDataTable = (
           )
           : null
       }
-      <Table size="lg" useZebraStyles={false} className="seedlot-data-table">
+      <Table size="lg" useZebraStyles className="seedlot-data-table">
         <TableHead>
           <TableRow>
             {
diff --git a/frontend/src/components/SeedlotTable/styles.scss b/frontend/src/components/SeedlotTable/styles.scss
index 58a3d187f..6d1bff06e 100644
--- a/frontend/src/components/SeedlotTable/styles.scss
+++ b/frontend/src/components/SeedlotTable/styles.scss
@@ -12,6 +12,19 @@
 .seedlot-data-table {
   width: 100%;
 
+  &.#{vars.$bcgov-prefix}--data-table tbody {
+    background: var(--#{vars.$bcgov-prefix}-layer-02);
+  }
+
+  &.#{vars.$bcgov-prefix}--data-table--zebra tbody
+  tr:not(.#{vars.$bcgov-prefix}--parent-row):not(.#{vars.$bcgov-prefix}--data-table--selected):nth-child(even) {
+    background-color: var(--#{vars.$bcgov-prefix}-layer-01);
+  }
+
+  &.#{vars.$bcgov-prefix}--data-table--zebra tbody tr:not(.#{vars.$bcgov-prefix}--parent-row):nth-child(even) td {
+    border-block-end: 0;
+  }
+
   thead th {
     background: var(--#{vars.$bcgov-prefix}-layer-01);
     background-blend-mode: multiply;
@@ -24,8 +37,4 @@
     border-top: 0.0625rem solid var(--#{vars.$bcgov-prefix}-border-subtle-01);
     border-bottom: 0.0625rem solid var(--#{vars.$bcgov-prefix}-border-subtle-01);
   }
-
-  tbody td {
-    background: var(--#{vars.$bcgov-prefix}-layer-02);
-  }
 }
diff --git a/frontend/src/config/FavouriteActivitiyMap.ts b/frontend/src/config/FavouriteActivityMap.ts
similarity index 100%
rename from frontend/src/config/FavouriteActivitiyMap.ts
rename to frontend/src/config/FavouriteActivityMap.ts
diff --git a/frontend/src/config/ToastifyConfig.ts b/frontend/src/config/ToastifyConfig.ts
index 04b022d21..53757d501 100644
--- a/frontend/src/config/ToastifyConfig.ts
+++ b/frontend/src/config/ToastifyConfig.ts
@@ -4,7 +4,6 @@
  */
 
 import { ToastOptions } from 'react-toastify';
-import { SEVEN_SECONDS } from './TimeUnits';
 
 export const ErrToastOption: ToastOptions = {
   position: 'top-right',
@@ -12,6 +11,5 @@ export const ErrToastOption: ToastOptions = {
   closeButton: false,
   theme: 'dark',
   hideProgressBar: true,
-  style: { padding: 0, background: 'none', boxShadow: 'none' },
-  autoClose: SEVEN_SECONDS
+  style: { padding: 0, background: 'none', boxShadow: 'none' }
 };
diff --git a/frontend/src/views/Seedlot/SeedlotDetails/index.tsx b/frontend/src/views/Seedlot/SeedlotDetails/index.tsx
index 6a34e8fd3..24df1838f 100644
--- a/frontend/src/views/Seedlot/SeedlotDetails/index.tsx
+++ b/frontend/src/views/Seedlot/SeedlotDetails/index.tsx
@@ -228,7 +228,7 @@ const SeedlotDetails = () => {
                         className="seedlot-submitted-notification"
                         lowContrast
                         kind="success"
-                        title="Seedlot approved::"
+                        title="Seedlot approved:"
                         subtitle="This seedlot have been reviewed and approved"
                       />
                     )
diff --git a/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx b/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
index 798de00f3..5fe732524 100644
--- a/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
+++ b/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
@@ -4,7 +4,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import {
   Button, FlexGrid, Row,
-  Column, Loading, Modal
+  Column, Loading, Modal,
+  InlineNotification
 } from '@carbon/react';
 import { toast } from 'react-toastify';
 import {
@@ -537,6 +538,23 @@ const SeedlotReviewContent = () => {
         />
       </Row>
 
+      {
+        seedlotQuery.data?.seedlot.seedlotStatus.seedlotStatusCode === 'APP'
+          ? (
+            <Row>
+              <InlineNotification
+                className="seedlot-approved-notification"
+                lowContrast
+                hideCloseButton
+                kind="success"
+                title="Seedlot approved:"
+                subtitle="This seedlot have been reviewed and approved"
+              />
+            </Row>
+          )
+          : null
+      }
+
       <Row className="section-title-row">
         <Column className="section-title-col">
           Applicant and seedlot
@@ -738,7 +756,7 @@ const SeedlotReviewContent = () => {
                   renderIcon={Warning}
                   onClick={() => createDraftForPendMutation.mutate()}
                 >
-                  Hisotrical SUB to PND (DEV ONLY!)
+                  Historical SUB to PND (DEV ONLY!)
                 </Button>
               </Column>
             </Row>
diff --git a/frontend/src/views/Seedlot/SeedlotReview/styles.scss b/frontend/src/views/Seedlot/SeedlotReview/styles.scss
index 753ab2092..b992ac200 100644
--- a/frontend/src/views/Seedlot/SeedlotReview/styles.scss
+++ b/frontend/src/views/Seedlot/SeedlotReview/styles.scss
@@ -141,4 +141,14 @@
       @include type.type-style('body-01');
     }
   }
+
+  .seedlot-approved-notification {
+    margin-top: 2rem;
+    margin-left: 1rem;
+    max-inline-size: none;
+
+    .#{vars.$bcgov-prefix}--inline-notification__title {
+      font-weight: bold;
+    }
+  }
 }