From 74be029ab8a784de301f250bdff566ddc622e726 Mon Sep 17 00:00:00 2001
From: Kent Caparas <144957476+kcaparas1630@users.noreply.github.com>
Date: Wed, 31 Jul 2024 16:32:31 -0700
Subject: [PATCH] fix: [BB-314] FIX/Feature** styling fixes stage 1 (#316)

* made isHeaderVisible props optional

* removed redundant border

* removed comments

* max-height adheres 100%

* transition sync

* border in progress bar

* decreased margin-top for progress bar
---
 .../Commons/Button/FieldButtonGroup.styles.ts | 36 +++--------
 frontend/src/Commons/FormStyles.styles.ts     |  2 +-
 .../Commons/Forms/FormHeader/FormHeader.tsx   |  1 +
 .../Forms/FormModule/FormModule.style.ts      | 14 ++++-
 .../Commons/Forms/FormModule/FormModule.tsx   | 23 ++++----
 .../Forms/InputModules/Crops/CropsInfo.tsx    |  2 +-
 .../FarmInformation/FarmInformation.style.ts  |  4 ++
 .../InputModules/Fertilizers/Fertilizers.tsx  | 40 ++++++-------
 .../FieldsAndSoil/FieldsListComponent.tsx     | 59 ++++++++++---------
 .../InputModules/ListComponent.styles.ts      | 16 ++++-
 .../MainPageFooter/MainPageFooter.styles.ts   |  3 +-
 .../Commons/MainPageFooter/MainPageFooter.tsx |  9 ++-
 .../MainPageHeader/MainPageHeader.styles.ts   | 47 +++++++--------
 .../Commons/MainPageHeader/MainPageHeader.tsx |  4 +-
 .../Commons/ProgressBar/ProgressBar.styles.ts | 12 +++-
 .../src/Commons/ProgressBar/ProgressBar.tsx   |  5 +-
 .../src/Views/MainPage/MainPage.styles.ts     |  4 +-
 frontend/src/Views/MainPage/MainPage.tsx      | 33 ++++++++++-
 18 files changed, 170 insertions(+), 144 deletions(-)

diff --git a/frontend/src/Commons/Button/FieldButtonGroup.styles.ts b/frontend/src/Commons/Button/FieldButtonGroup.styles.ts
index 71ebf2c5..2ec85dca 100644
--- a/frontend/src/Commons/Button/FieldButtonGroup.styles.ts
+++ b/frontend/src/Commons/Button/FieldButtonGroup.styles.ts
@@ -12,22 +12,21 @@ const StyledButtonGroupContainer = styled.div<FormProps>`
   flex-direction: column;
   gap: 20px;
   margin: auto;
-  width: 320px;
+  width: 100%;
   justify-content: flex-end;
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
-    justify-content: flex-start;
     align-items: center;
     width: 100%;
-    height: ${(props) => (props.formCalc ? '50px' : 'auto')};
   }
 `;
 const StyledButtonContainer = styled.div<FormProps>`
-  margin-top: 20px;
   width: ${(props) => (props.formCalc ? '100%' : '')};
+  max-width: 327px;
   @media (min-width: ${screenSizes.desktop}) {
     display: flex;
     width: 100%;
+    max-width: ${(props) => (props.formCalc ? '100%' : '67px')};
     justify-content: center;
   }
 `;
@@ -37,53 +36,32 @@ const StyledNewFieldButtonController = styled.div`
   justify-content: center;
   @media (min-width: ${screenSizes.desktop}) {
     width: 178px;
-    position: relative;
-    left: 0;
   }
 `;
 
 const StyledAddCancelButtonContainer = styled.div<FormProps>`
   display: flex;
   flex-direction: column-reverse;
+  gap: 24px;
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
-    gap: 20px;
-    position: absolute;
-    right: ${(props) => (props.formCrops ? '0' : '17%')};
+    margin-top: 10px;
   }
 `;
-const StyledNewFieldButtonContainer = styled.div`
+const StyledNewFieldButtonContainer = styled.div<FormProps>`
   position: relative;
   top: 15px;
   width: 100%;
-
+  margin-bottom: ${(props) => (props.formCrops ? '40cpx' : '0')};
   @media (min-width: ${screenSizes.desktop}) {
     left: 0;
   }
 `;
 
-const PrimaryButton = styled.div`
-  order: 0;
-
-  @media (min-width: ${screenSizes.desktop}) {
-    order: 1;
-  }
-`;
-
-const SecondaryButton = styled.div`
-  order: 1;
-
-  @media (min-width: ${screenSizes.desktop}) {
-    order: 0;
-  }
-`;
-
 export {
   StyledButtonGroupContainer,
   StyledButtonContainer,
   StyledAddCancelButtonContainer,
   StyledNewFieldButtonContainer,
   StyledNewFieldButtonController,
-  PrimaryButton,
-  SecondaryButton,
 };
diff --git a/frontend/src/Commons/FormStyles.styles.ts b/frontend/src/Commons/FormStyles.styles.ts
index ed2c3589..0f95fa6d 100644
--- a/frontend/src/Commons/FormStyles.styles.ts
+++ b/frontend/src/Commons/FormStyles.styles.ts
@@ -68,7 +68,7 @@ const StyledAreaContainer = styled.div<FormProps>`
 const StyledButtonGroupContainer = styled.div<FormProps>`
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   gap: 20px;
   margin: auto;
   width: 320px;
diff --git a/frontend/src/Commons/Forms/FormHeader/FormHeader.tsx b/frontend/src/Commons/Forms/FormHeader/FormHeader.tsx
index 89161b50..bce0cc5f 100644
--- a/frontend/src/Commons/Forms/FormHeader/FormHeader.tsx
+++ b/frontend/src/Commons/Forms/FormHeader/FormHeader.tsx
@@ -15,6 +15,7 @@
  *
  * @author @GDamaso
  */
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import InputModuleInterface from 'src/Interface/InputModuleinterface';
diff --git a/frontend/src/Commons/Forms/FormModule/FormModule.style.ts b/frontend/src/Commons/Forms/FormModule/FormModule.style.ts
index 2c199fb3..c3962153 100644
--- a/frontend/src/Commons/Forms/FormModule/FormModule.style.ts
+++ b/frontend/src/Commons/Forms/FormModule/FormModule.style.ts
@@ -13,21 +13,29 @@ const StyledFormContainer = styled.div`
   align-items: center;
   height: 100%;
   width: 95%;
+  transition: max-height 3s ease-in-out;
 
   @media (min-width: ${screenSizes.desktop}) {
     max-width: 70%;
   }
 `;
 
-const StyledFormContent = styled.div`
+const StyledFormContent = styled.div<{ isVisible: boolean }>`
   width: 100%;
   color: ${tokens.typographyColorPrimary};
   border-radius: 2px;
   border-top-left-radius: 1px;
   border-top-right-radius: 1px;
-  border: 1px solid ${tokens.themeGray40};
-  padding: 0 10px 20px 10px;
+  padding: 0 10px 10px 10px;
   background-color: ${tokens.themeGray10};
+  max-height: ${(props) => (props.isVisible ? '100%' : '0')};
+  opacity: ${(props) => (props.isVisible ? 1 : 0)};
+  border: ${(props) => (props.isVisible ? `1px solid ${tokens.themeGray40}` : 'none')};
+  overflow: hidden;
+  transition:
+    max-height 0.3s ease-in-out,
+    opacity 0.2s ease-in-out,
+    padding 0.2s ease-in-out;
 `;
 
 export { StyledFormContainer, StyledFormContent };
diff --git a/frontend/src/Commons/Forms/FormModule/FormModule.tsx b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
index cdfd2168..ea4eb2c7 100644
--- a/frontend/src/Commons/Forms/FormModule/FormModule.tsx
+++ b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
@@ -49,25 +49,22 @@ const FormModule: FC<FormModuleProps> = ({
   updateFertDetails,
 }) => {
   const { InputModuleComponent } = InputModule;
-
   return (
     <StyledFormContainer>
       <FormHeader
         inputModule={InputModule}
         handleFormState={handleFormState}
       />
-      {InputModule.enable && (
-        <StyledFormContent>
-          <InputModuleComponent
-            fertilizersDetails={fertilizersDetails || []}
-            updateFarmDetails={updateFarmDetails}
-            updateFertDetails={updateFertDetails}
-            farmDetails={farmDetails}
-            toggleEnabled={toggleEnabled}
-            handleFormState={handleFormState}
-          />
-        </StyledFormContent>
-      )}
+      <StyledFormContent isVisible={InputModule.enable}>
+        <InputModuleComponent
+          fertilizersDetails={fertilizersDetails || []}
+          updateFarmDetails={updateFarmDetails}
+          updateFertDetails={updateFertDetails}
+          farmDetails={farmDetails}
+          toggleEnabled={toggleEnabled}
+          handleFormState={handleFormState}
+        />
+      </StyledFormContent>
     </StyledFormContainer>
   );
 };
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
index e3252551..0ae5042f 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
@@ -320,7 +320,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
           </Formik>
 
           {!hasFieldBeenSelected[index] && field.Crops.length < 2 && (
-            <StyledNewFieldButtonContainer>
+            <StyledNewFieldButtonContainer formCrops>
               <StyledNewFieldButtonController>
                 <Button
                   type="button"
diff --git a/frontend/src/Commons/Forms/InputModules/FarmInformation/FarmInformation.style.ts b/frontend/src/Commons/Forms/InputModules/FarmInformation/FarmInformation.style.ts
index 5e023a9d..93aa89f7 100644
--- a/frontend/src/Commons/Forms/InputModules/FarmInformation/FarmInformation.style.ts
+++ b/frontend/src/Commons/Forms/InputModules/FarmInformation/FarmInformation.style.ts
@@ -22,6 +22,10 @@ const StyledFarmInfo = styled.div`
       gap: 30px;
     }
   }
+
+  @media (min-width: ${screenSizes.desktop}) {
+    gap: 0;
+  }
 `;
 
 const StyledSelectContainer = styled.div`
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
index dff31f2b..a82f3573 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
@@ -10,8 +10,6 @@ import { StyledFarmInfo } from '@Commons/FormStyles.styles';
 import {
   StyledAddCancelButtonContainer,
   StyledButtonContainer,
-  PrimaryButton,
-  SecondaryButton,
 } from '@Commons/Button/FieldButtonGroup.styles';
 import {
   DryFertilizerOptions,
@@ -204,27 +202,23 @@ const FertilizersInfo: FC<InputModuleProps> = ({
                   )}
                 </div>
                 <StyledAddCancelButtonContainer>
-                  <SecondaryButton>
-                    <StyledButtonContainer>
-                      <Button
-                        type="reset"
-                        size="lg"
-                        disabled={false}
-                        actions="secondary"
-                        text={ComponentText.CANCEL}
-                      />
-                    </StyledButtonContainer>
-                  </SecondaryButton>
-                  <PrimaryButton>
-                    <StyledButtonContainer>
-                      <Button
-                        type="submit"
-                        size="lg"
-                        disabled={false}
-                        text={ComponentText.SAVE_FERTILIZER}
-                      />
-                    </StyledButtonContainer>
-                  </PrimaryButton>
+                  <StyledButtonContainer>
+                    <Button
+                      type="reset"
+                      size="lg"
+                      disabled={false}
+                      actions="secondary"
+                      text={ComponentText.CANCEL}
+                    />
+                  </StyledButtonContainer>
+                  <StyledButtonContainer>
+                    <Button
+                      type="submit"
+                      size="lg"
+                      disabled={false}
+                      text={ComponentText.SAVE_FERTILIZER}
+                    />
+                  </StyledButtonContainer>
                 </StyledAddCancelButtonContainer>
               </StyledFarmInfo>
             </Form>
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
index 3c1629f4..f76887c3 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
@@ -15,6 +15,7 @@ import {
   StyledListItemGroupContainer,
   StyledListItemGroup,
   StyledFieldNameContainer,
+  NutrientsFieldListGroup,
 } from '../ListComponent.styles';
 
 interface FieldListProps {
@@ -72,34 +73,36 @@ const FieldsListComponent: FC<FieldListProps> = ({ farmDetails }) => {
                 <h2>Sampling Month</h2>
                 <p>{HasSoilTest ? SoilTest.sampleDate : ComponentText.NA}</p>
               </StyledListItem>
-              <StyledListItemGroup>
-                <StyledListItem width="180px">
-                  <div className="smallItems">
-                    <h2>NO3-N (ppm)</h2>
-                    <p>{HasSoilTest ? SoilTest.valNO3H : ComponentText.NA}</p>
-                  </div>
-                </StyledListItem>
-                <StyledListItem width="180px">
-                  <div className="smallItems">
-                    <h2>P (ppm)</h2>
-                    <p>{HasSoilTest ? SoilTest.ValP : highValue}</p>
-                  </div>
-                </StyledListItem>
-              </StyledListItemGroup>
-              <StyledListItemGroup>
-                <StyledListItem width="180px">
-                  <div className="smallItems">
-                    <h2>K (ppm)</h2>
-                    <p>{HasSoilTest ? SoilTest.valK : highValue}</p>
-                  </div>
-                </StyledListItem>
-                <StyledListItem width="180px">
-                  <div className="smallItems">
-                    <h2>pH</h2>
-                    <p>{HasSoilTest ? SoilTest.valPH : highPH}</p>
-                  </div>
-                </StyledListItem>
-              </StyledListItemGroup>
+              <NutrientsFieldListGroup>
+                <StyledListItemGroup>
+                  <StyledListItem width="180px">
+                    <div className="smallItems">
+                      <h2>NO3-N (ppm)</h2>
+                      <p>{HasSoilTest ? SoilTest.valNO3H : ComponentText.NA}</p>
+                    </div>
+                  </StyledListItem>
+                  <StyledListItem width="180px">
+                    <div className="smallItems">
+                      <h2>P (ppm)</h2>
+                      <p>{HasSoilTest ? SoilTest.ValP : highValue}</p>
+                    </div>
+                  </StyledListItem>
+                </StyledListItemGroup>
+                <StyledListItemGroup>
+                  <StyledListItem width="180px">
+                    <div className="smallItems">
+                      <h2>K (ppm)</h2>
+                      <p>{HasSoilTest ? SoilTest.valK : highValue}</p>
+                    </div>
+                  </StyledListItem>
+                  <StyledListItem width="180px">
+                    <div className="smallItems">
+                      <h2>pH</h2>
+                      <p>{HasSoilTest ? SoilTest.valPH : highPH}</p>
+                    </div>
+                  </StyledListItem>
+                </StyledListItemGroup>
+              </NutrientsFieldListGroup>
             </StyledListItemGroupContainer>
             <StyledListItemGroup>
               <StyledListItem width="180px">
diff --git a/frontend/src/Commons/Forms/InputModules/ListComponent.styles.ts b/frontend/src/Commons/Forms/InputModules/ListComponent.styles.ts
index edf5bcd6..8c1a995d 100644
--- a/frontend/src/Commons/Forms/InputModules/ListComponent.styles.ts
+++ b/frontend/src/Commons/Forms/InputModules/ListComponent.styles.ts
@@ -23,7 +23,7 @@ const StyledListContainer = styled.div<FormProps>`
   display: flex;
   flex-direction: column;
   padding-top: 20px;
-  gap: ${(props) => (props.formCrops ? '50px' : '20px')};
+  gap: ${(props) => (props.formCrops ? '50px' : '0')};
 
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
@@ -55,7 +55,7 @@ const StyledListItem = styled.div<StyledListType>`
   @media (min-width: ${screenSizes.desktop}) {
     .smallItems {
       width: 200%;
-      padding: 0 50px;
+      padding: 0 50px 0 0;
     }
     h2 {
       font: ${tokens.typographyBoldH6};
@@ -115,11 +115,22 @@ const StyledListItemGroupContainer = styled.div`
 
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
+    flex-flow: row wrap;
   }
 `;
 
 const StyledListItemGroup = styled.div`
   display: flex;
+  gap: 50px;
+`;
+
+const NutrientsFieldListGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: ${screenSizes.desktop}) {
+    flex-direction: row;
+  }
 `;
 
 const StyledCropsGroup = styled.div`
@@ -159,4 +170,5 @@ export {
   StyledCropsGroup,
   StyledCustomFertilizerGroup,
   StyledFieldNameContainer,
+  NutrientsFieldListGroup,
 };
diff --git a/frontend/src/Commons/MainPageFooter/MainPageFooter.styles.ts b/frontend/src/Commons/MainPageFooter/MainPageFooter.styles.ts
index f2eede0e..576298b3 100644
--- a/frontend/src/Commons/MainPageFooter/MainPageFooter.styles.ts
+++ b/frontend/src/Commons/MainPageFooter/MainPageFooter.styles.ts
@@ -4,9 +4,8 @@ import screenSizes from '@Constants/ScreenSize';
 
 const StyledMainFooter = styled.div`
   display: flex;
-  justify-content: flex-end;
   gap: 10px;
-  padding-right: 10px;
+  padding-left: 10px;
   align-items: center;
   background-color: ${tokens.themeBlue100};
   height: 34px;
diff --git a/frontend/src/Commons/MainPageFooter/MainPageFooter.tsx b/frontend/src/Commons/MainPageFooter/MainPageFooter.tsx
index 4be0bb44..7c80a011 100644
--- a/frontend/src/Commons/MainPageFooter/MainPageFooter.tsx
+++ b/frontend/src/Commons/MainPageFooter/MainPageFooter.tsx
@@ -13,16 +13,15 @@ const MainPageFooter = ({
   setToggleEnabled = () => {},
 }: MainPageFooterProps) => (
   <StyledMainFooter>
+    <Toggle
+      toggleEnabled={toggleEnabled}
+      onToggleChange={setToggleEnabled}
+    />
     <InformationIcons
       text={ToggleText}
       toggleIcon
-      rightPositioned
       toggleEnabled
     />
-    <Toggle
-      toggleEnabled={toggleEnabled}
-      onToggleChange={setToggleEnabled}
-    />
   </StyledMainFooter>
 );
 
diff --git a/frontend/src/Commons/MainPageHeader/MainPageHeader.styles.ts b/frontend/src/Commons/MainPageHeader/MainPageHeader.styles.ts
index 2a4f6cf1..bd8ec384 100644
--- a/frontend/src/Commons/MainPageHeader/MainPageHeader.styles.ts
+++ b/frontend/src/Commons/MainPageHeader/MainPageHeader.styles.ts
@@ -2,13 +2,15 @@ import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '@Constants/ScreenSize';
 import desktopLogo from '/assets/BCID-logo-desktop.png';
-import mobileLogo from '/assets/BCID-MainMobile-logo.png';
 
-const StyledHeader = styled.header`
+type HeaderProps = {
+  isHeaderVisible: boolean;
+};
+const StyledHeader = styled.header<HeaderProps>`
   display: flex;
   align-items: center;
   max-width: 100vw;
-  max-height: 87px;
+  max-height: 65px;
   flex-direction: row;
   width: 100%;
   padding: 10px;
@@ -17,26 +19,20 @@ const StyledHeader = styled.header`
   top: 0;
   z-index: 2;
   color: ${tokens.typographyColorPrimaryInvert};
+  box-sizing: border-box;
+  transition: transform 0.3s ease-in-out;
   border-bottom: ${tokens.layoutBorderWidthMedium} solid ${tokens.themeGold100};
-  @media (min-width: ${screenSizes.tablet}) and (max-width: ${screenSizes.desktop}) {
-    max-height: 100px;
-  }
+  transform: translateY(${(props) => (props.isHeaderVisible ? '0' : '-100%')});
   @media (min-width: ${screenSizes.desktop}) {
+    max-height: 87px;
     height: 450px;
   }
 `;
 
 const Logo = styled.img`
-  max-height: 69.29px;
-  max-width: 76px;
-  margin-left: 10px;
-  content: url(${mobileLogo});
-  @media (min-width: ${screenSizes.tablet}) and (max-width: ${screenSizes.desktop}) {
-    max-height: 80px;
-    max-width: 80px;
-    height: 100%;
-    width: 100%;
-  }
+  max-height: 123px;
+  max-width: 150px;
+  content: url(${desktopLogo});
   @media (min-width: ${screenSizes.desktop}) {
     max-height: 123px;
     max-width: 250px;
@@ -46,21 +42,18 @@ const Logo = styled.img`
 `;
 
 const Title = styled.h1`
-  flex: 1;
   font-family: ${tokens.typographyFontFamiliesBcSans}, sans-serif;
   font: ${tokens.typographyBoldH4};
-  margin: 15px 0 0 15px;
-  @media (min-width: ${screenSizes.tablet}) and (max-width: ${screenSizes.desktop}) {
-    font-size: ${tokens.typographyRegularH1};
-    height: 100%;
-    width: 100%;
-  }
+  margin: auto;
+  position: absolute;
+  left: 90%;
+  transform: translateX(-90%);
+  width: 50%;
   @media (min-width: ${screenSizes.desktop}) {
     font-size: 40px; /* Will not use token on this one. */
     margin: ${tokens.layoutMarginNone};
-    position: absolute;
-    left: 50vw;
-    transform: translate(-50%, 0);
+    left: 80vw;
+    transform: translate(-80%, 0);
   }
 `;
 
@@ -70,7 +63,7 @@ const ToggleContainer = styled.div`
     display: flex;
     gap: 10px;
     position: absolute;
-    left: calc(100vw - 10px);
+    left: calc(100vw - 2%);
     transform: translateX(-100%);
   }
 `;
diff --git a/frontend/src/Commons/MainPageHeader/MainPageHeader.tsx b/frontend/src/Commons/MainPageHeader/MainPageHeader.tsx
index b303a201..2bd46910 100644
--- a/frontend/src/Commons/MainPageHeader/MainPageHeader.tsx
+++ b/frontend/src/Commons/MainPageHeader/MainPageHeader.tsx
@@ -7,13 +7,15 @@ import { StyledHeader, Logo, Title, ToggleContainer } from './MainPageHeader.sty
 interface MainPageHeaderProps {
   toggleEnabled?: boolean;
   setToggleEnabled?: Dispatch<SetStateAction<boolean>>;
+  isHeaderVisible?: boolean;
 }
 
 const MainPageHeader = ({
   toggleEnabled = true,
   setToggleEnabled = () => {},
+  isHeaderVisible = true,
 }: MainPageHeaderProps) => (
-  <StyledHeader>
+  <StyledHeader isHeaderVisible={isHeaderVisible}>
     <a href="/">
       <Logo alt="bc-logo" />
     </a>
diff --git a/frontend/src/Commons/ProgressBar/ProgressBar.styles.ts b/frontend/src/Commons/ProgressBar/ProgressBar.styles.ts
index 8d36cf3d..1863b606 100644
--- a/frontend/src/Commons/ProgressBar/ProgressBar.styles.ts
+++ b/frontend/src/Commons/ProgressBar/ProgressBar.styles.ts
@@ -2,7 +2,11 @@ import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '@Constants/ScreenSize';
 
-const Container = styled.div`
+type ProgressBarProps = {
+  isHeaderVisible: boolean;
+};
+
+const Container = styled.div<ProgressBarProps>`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -10,18 +14,20 @@ const Container = styled.div`
   width: 95%;
   max-width: 800px;
   order: 2;
-  position: fixed;
+  position: sticky;
   bottom: 30px;
   background-color: #fff;
   height: 80px;
   padding-bottom: 30px;
   z-index: 1;
+  transition: 0.3s ease-in-out;
   @media (min-width: ${screenSizes.desktop}) {
     padding-bottom: 50px;
     height: 150px;
     width: 80%;
     max-width: 1400px;
-    top: 85px;
+    top: ${(props) => (props.isHeaderVisible ? '85px' : '0')};
+    border-bottom: 2px solid ${tokens.themeGray40};
     order: 0;
   }
 `;
diff --git a/frontend/src/Commons/ProgressBar/ProgressBar.tsx b/frontend/src/Commons/ProgressBar/ProgressBar.tsx
index 37fcc6ea..d5b51841 100644
--- a/frontend/src/Commons/ProgressBar/ProgressBar.tsx
+++ b/frontend/src/Commons/ProgressBar/ProgressBar.tsx
@@ -6,10 +6,11 @@ import { Container, StyledProgressBar, StyledLineBlock } from './ProgressBar.sty
 
 interface ProgressBarProps {
   formStates: InputModuleInterface[];
+  isHeaderVisible: boolean;
 }
 
-const ProgressBar: FC<ProgressBarProps> = ({ formStates }) => (
-  <Container>
+const ProgressBar: FC<ProgressBarProps> = ({ formStates, isHeaderVisible }) => (
+  <Container isHeaderVisible={isHeaderVisible}>
     <StyledProgressBar>
       {formStates.map((progressItem) => (
         <ProgressItem
diff --git a/frontend/src/Views/MainPage/MainPage.styles.ts b/frontend/src/Views/MainPage/MainPage.styles.ts
index df92f27d..8e6e4a40 100644
--- a/frontend/src/Views/MainPage/MainPage.styles.ts
+++ b/frontend/src/Views/MainPage/MainPage.styles.ts
@@ -21,11 +21,11 @@ const StyledMainContainer = styled.div`
   align-items: center;
   width: 100%;
   gap: 24px;
-  margin: 110px 0 30% 0;
+  margin: 80px 0 50px 0;
   padding: 0 10px;
 
   @media (min-width: ${screenSizes.desktop}) {
-    margin: 280px 0 0 0;
+    margin: 120px 0 60px 0;
     gap: 11px;
   }
 `;
diff --git a/frontend/src/Views/MainPage/MainPage.tsx b/frontend/src/Views/MainPage/MainPage.tsx
index 2768f4af..1672b00c 100644
--- a/frontend/src/Views/MainPage/MainPage.tsx
+++ b/frontend/src/Views/MainPage/MainPage.tsx
@@ -2,7 +2,7 @@
  * @desc Main Page of Better Berries App
  * @author @GDamaso @Kcaparas
  */
-import { useEffect, useState, FC } from 'react';
+import { useEffect, useState, useCallback, FC } from 'react';
 import MainPageHeader from '@Commons/MainPageHeader/MainPageHeader';
 import ProgressBar from '@Commons/ProgressBar/ProgressBar';
 import MainPageFooter from '@Commons/MainPageFooter/MainPageFooter';
@@ -106,6 +106,8 @@ const MainPage: FC = () => {
   const [formStates, setFormStates] = useState(mockBerriesWorkflow);
   const [currForm, setCurrForm] = useState(0);
   const [toggleEnabled, setToggleEnabled] = useState<boolean>(true);
+  const [isHeaderVisible, setIsHeaderVisible] = useState<boolean>(true);
+  const [lastScrollTop, setLastScrollTop] = useState(0);
   /**
    * @desc    Take our apps main data object and save it to a template .nmp file,
    *          saved in the users localStorage.
@@ -221,13 +223,40 @@ const MainPage: FC = () => {
   const updateFertDetails = (newFerts: FertilizerInterface[]): void => {
     setFertDetails(newFerts);
   };
+
+  const scrollHeader = useCallback(() => {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollDelta = Math.abs(scrollTop - lastScrollTop);
+    // trigger if scrolling goes beyond 10px
+    if (scrollDelta > 10) {
+      // going up
+      if (scrollTop > lastScrollTop) {
+        setIsHeaderVisible(false);
+        // going down
+      } else {
+        setIsHeaderVisible(true);
+      }
+    }
+    setLastScrollTop(scrollTop);
+  }, [lastScrollTop]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHeader);
+    return () => {
+      window.removeEventListener('scroll', scrollHeader);
+    };
+  }, [scrollHeader]);
   return (
     <StyledMain>
       <MainPageHeader
         toggleEnabled={toggleEnabled}
         setToggleEnabled={setToggleEnabled}
+        isHeaderVisible={isHeaderVisible}
+      />
+      <ProgressBar
+        formStates={formStates}
+        isHeaderVisible={isHeaderVisible}
       />
-      <ProgressBar formStates={formStates} />
       <StyledMainContainer>
         {formStates.map((InputModule) => {
           if (InputModule) {