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
bcgov · Jul 31, 2024 · 74be029 · 74be029
1 parent 267839f
commit 74be029
Show file tree

Hide file tree

Showing 18 changed files with 170 additions and 144 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 );