fix: [BB-343] calculation module styling fixes (#344)

* fixed invalid date uncaught error due to null date returned * finish Calculation Form, adjusted CustomLink, and Button's padding * fixed toggle for export page * further changes to export page * fixed calculate nutrients module date
bcgov · Aug 12, 2024 · deb9e56 · deb9e56
1 parent f52d505
commit deb9e56
Show file tree

Hide file tree

Showing 18 changed files with 162 additions and 59 deletions.
diff --git a/frontend/src/Commons/Button/Button.style.ts b/frontend/src/Commons/Button/Button.style.ts
@@ -12,6 +12,8 @@ type StyledButtonProps = {
   landingPageButton?: boolean;
   addButton?: boolean;
   saveFertilizerButton?: boolean;
+  calcAddFertButton?: boolean;
+  returnToCalc?: boolean;
 };
 
 const StyledButton = styled.button<StyledButtonProps>`
@@ -20,6 +22,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   justify-content: center;
   max-height: ${(props) => (props.landingPageButton ? '40px' : '31px')};
   height: 100%;
+  white-space: nowrap;
   width: 100%;
   max-width: ${(props) =>
     getButtonSize(
@@ -28,6 +31,8 @@ const StyledButton = styled.button<StyledButtonProps>`
       props.landingPageButton,
       props.addButton,
       props.saveFertilizerButton,
+      props.calcAddFertButton,
+      props.returnToCalc,
     )};
   background-color: ${(props) =>
     props.actions === 'primary'
@@ -54,6 +59,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   }
 
   @media (min-width: ${screenSizes.desktop}) {
+    font: ${tokens.typographyRegularLargeBody};
     padding: 20px 41px;
     max-width: ${(props) =>
       getButtonSize(
@@ -62,6 +68,8 @@ const StyledButton = styled.button<StyledButtonProps>`
         props.landingPageButton,
         props.addButton,
         props.saveFertilizerButton,
+        props.calcAddFertButton,
+        props.returnToCalc,
       )};
     max-height: ${(props) => (props.landingPageButton ? '59px' : '31px')};
   }

diff --git a/frontend/src/Commons/Button/Button.tsx b/frontend/src/Commons/Button/Button.tsx
@@ -17,6 +17,7 @@ type ButtonProps = {
   landingPageButton?: boolean;
   addButton?: boolean;
   saveFertilizerButton?: boolean;
+  calcAddFertButton?: boolean;
 };
 
 const Button = ({
@@ -31,6 +32,7 @@ const Button = ({
   landingPageButton = false,
   addButton = false,
   saveFertilizerButton = false,
+  calcAddFertButton = false,
 }: ButtonProps) => {
   const handleClickWrapper = () => {
     if (handleClick) {
@@ -50,6 +52,7 @@ const Button = ({
       landingPageButton={landingPageButton}
       addButton={addButton}
       saveFertilizerButton={saveFertilizerButton}
+      calcAddFertButton={calcAddFertButton}
     >
       <StyledChildrenContainer>
         {children}

diff --git a/frontend/src/Commons/Button/ButtonSizeConstant.ts b/frontend/src/Commons/Button/ButtonSizeConstant.ts
@@ -4,6 +4,8 @@ const getButtonSize = (
   landingPageButton: boolean | undefined,
   addButton: boolean | undefined,
   fertilizerButton: boolean | undefined,
+  calcAddFertButton: boolean | undefined,
+  returnToCalc: boolean | undefined,
 ): string => {
   let buttonSize;
   let largeButtonSize;
@@ -12,8 +14,12 @@ const getButtonSize = (
     largeButtonSize = '483px';
   } else if (addButton) {
     largeButtonSize = '200px';
+  } else if (calcAddFertButton) {
+    largeButtonSize = '240px';
   } else if (fertilizerButton) {
     largeButtonSize = '140px';
+  } else if (returnToCalc) {
+    largeButtonSize = '516px';
   } else {
     largeButtonSize = '62px';
   }
@@ -22,7 +28,7 @@ const getButtonSize = (
       buttonSize = '62px';
       break;
     case 'md':
-      buttonSize = '178px';
+      buttonSize = isDesktop ? '209px' : '139px';
       break;
     case 'lg':
       buttonSize = isDesktop ? largeButtonSize : '322px';

diff --git a/frontend/src/Commons/CustomLink/CustomLink.style.ts b/frontend/src/Commons/CustomLink/CustomLink.style.ts
@@ -2,45 +2,74 @@ import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '@Constants/ScreenSize';
 import getButtonSize from '@Commons/Button/ButtonSizeConstant';
+import ComponentText from '@Constants/ComponentText';
 
 type StyledLinkProps = {
   size: string;
+  landingPageButton?: boolean;
+  addButton?: boolean;
+  saveFertilizerButton?: boolean;
+  calcAddFertButton?: boolean;
+  returnToCalc?: boolean;
+  finishButton?: boolean;
 };
-const isDesktop: boolean = true;
-const landingPageButton: boolean = false;
-const addButton: boolean = false;
-const saveFertilizerButton: boolean = false;
 
 const StyledLinkContainer = styled.div<StyledLinkProps>`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%;
-  max-height: 42px;
+  padding: 9.5px 0 9.5px 0;
+  max-height: ${(props) => (props.landingPageButton ? '40px' : '31px')};
   max-width: ${(props) =>
-    getButtonSize(props.size, !isDesktop, landingPageButton, addButton, saveFertilizerButton)};
+    getButtonSize(
+      props.size,
+      ComponentText.ISMOBILE,
+      props.landingPageButton,
+      props.addButton,
+      props.saveFertilizerButton,
+      props.calcAddFertButton,
+      props.returnToCalc,
+    )};
   background-color: ${tokens.surfaceColorPrimaryButtonDefault};
   color: ${tokens.typographyColorPrimaryInvert};
   border-radius: 8px;
   border: ${`1px solid ${tokens.surfaceColorBorderMedium}`};
-  font: ${tokens.typographyBoldLabel};
+  box-sizing: border-box;
+  a {
+    font: ${tokens.typographyRegularSmallBody};
+  }
+  &:hover {
+    background-color: ${tokens.surfaceColorPrimaryButtonHover};
+  }
   @media (min-width: ${screenSizes.desktop}) {
-    height: 100%;
+    height: 42px;
+    padding: ${(props) => (props.finishButton ? '20px 41px' : '20px 0')};
     max-width: ${(props) =>
-      getButtonSize(props.size, isDesktop, landingPageButton, addButton, saveFertilizerButton)};
+      getButtonSize(
+        props.size,
+        ComponentText.ISDESKTOP,
+        props.landingPageButton,
+        props.addButton,
+        props.saveFertilizerButton,
+        props.calcAddFertButton,
+        props.returnToCalc,
+      )};
     width: 100%;
   }
   a {
     display: flex;
     align-items: center;
     justify-content: center;
     color: inherit;
-    padding: 20px 30px;
+    padding: inherit;
     text-decoration: none;
     height: 100%;
     width: 100%;
     text-align: center;
+    font: ${tokens.typographyRegularLargeBody};
+    width: 100%;
   }
 `;
 

diff --git a/frontend/src/Commons/CustomLink/CustomLink.tsx b/frontend/src/Commons/CustomLink/CustomLink.tsx
@@ -7,10 +7,16 @@ type LinkProps = {
   text: string;
   path: string;
   size?: LinkSizes;
+  returnToCalc?: boolean;
+  finishButton?: boolean;
 };
 
-const CustomLink = ({ text, size = 'md', path }: LinkProps) => (
-  <StyledLinkContainer size={size}>
+const CustomLink = ({ text, size = 'md', path, returnToCalc, finishButton }: LinkProps) => (
+  <StyledLinkContainer
+    size={size}
+    returnToCalc={returnToCalc}
+    finishButton={finishButton}
+  >
     <Link to={path}>{text}</Link>
   </StyledLinkContainer>
 );

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.styles.ts b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.styles.ts
@@ -11,18 +11,21 @@ const StyledFieldContainer = styled.div`
 `;
 const StyledFieldSelect = styled.div`
   display: flex;
+  width: 100%;
   @media (min-width: ${screenSizes.desktop}) {
-    width: 40%;
-    margin: auto;
+    justify-content: center;
+    margin-top: 13px;
   }
 `;
 const StyledGroupFormView = styled.div`
   display: flex;
-  gap: 50px;
   flex-direction: column;
+  width: 100%;
+  gap: 24px;
 
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
+    gap: 250px;
   }
 `;
 const StyledLeftView = styled.div`
@@ -31,14 +34,17 @@ const StyledLeftView = styled.div`
   gap: 20px;
 
   @media (min-width: ${screenSizes.desktop}) {
-    width: 50%;
+    max-width: 477px;
+    margin-left: 89px;
   }
 `;
 const StyledRightView = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  max-width: 322px;
   h3 {
     font: ${tokens.typographyBoldSmallBody};
   }
@@ -48,7 +54,7 @@ const StyledRightView = styled.div`
   }
 
   @media (min-width: ${screenSizes.desktop}) {
-    width: 50%;
+    max-width: 240px;
     h3 {
       font: ${tokens.typographyBoldLargeBody};
     }
@@ -72,13 +78,15 @@ const RightListItem = styled.div`
 
 const StyledSmallFormGroup = styled.div`
   width: 100%;
+  max-width: 315px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  gap: 10px;
+  gap: 20px;
 
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
+    gap: 53px;
   }
 `;
 

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
@@ -178,7 +178,7 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
         id: fertilizersDetails[selectedIndex].id,
         fertilizerTypeId: fertilizersDetails[selectedIndex].fertilizerTypeId,
         fertilizerId: fertilizersDetails[selectedIndex].fertilizerId,
-        applDate: new Date(values.applDate).toISOString(),
+        applDate: values.applDate ? new Date(values.applDate).toISOString() : null,
         customN: fertBalance.N,
         customP2o5: fertBalance.P,
         customK2o: fertBalance.K,
@@ -322,24 +322,23 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                   id="FieldName"
                   name="FieldName"
                   options={fieldsOption}
-                  desktopWidth="100%"
-                  formCalc
+                  desktopWidth="392px"
+                  mobileWidth="315px"
                   onChange={(e) => {
                     handleFieldChange(e, setFieldValue);
                   }}
                 />
               </StyledFieldSelect>
-              <StyledDivider />
-
+              <StyledDivider formCalc />
               <StyledGroupFormView>
                 <StyledLeftView>
                   <CustomSelect
                     label="Fertilizer"
                     id="fertilizerId"
                     name="fertilizerId"
                     options={fertilizerOption}
-                    desktopWidth="100%"
-                    formCalc
+                    desktopWidth="477px"
+                    mobileWidth="315px"
                     onChange={(e) => handleFertilizerChange(e, setFieldValue)}
                   />
 
@@ -349,15 +348,18 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                       name="applRate"
                       id="applRate"
                       type="number"
-                      desktopWidth="50%"
+                      isYield
+                      desktopWidth="212px"
+                      mobileWidth="146px"
                     />
                     <CustomSelect
                       label="Units"
                       name="applUnitId"
                       id="applUnitId"
                       options={displayFertilizerOption()}
-                      desktopWidth="50%"
-                      formCalc
+                      desktopWidth="212px"
+                      mobileWidth="146px"
+                      calcUnits
                       onChange={(e) => handleChange(e, setFieldValue)}
                     />
                   </StyledSmallFormGroup>
@@ -369,15 +371,16 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                         name="liquidDensity"
                         id="liquidDensity"
                         type="number"
-                        desktopWidth="50%"
+                        desktopWidth="212px"
+                        mobileWidth="146px"
                       />
                       <CustomSelect
                         label="Density Units"
                         id="liquidDensityUnitId"
                         name="liquidDensityUnitId"
                         options={DensityUnits}
-                        desktopWidth="50%"
-                        formCalc
+                        desktopWidth="212px"
+                        mobileWidth="146px"
                         onChange={(e) => handleChange(e, setFieldValue)}
                       />
                     </StyledSmallFormGroup>
@@ -389,16 +392,18 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                       id="applMethodId"
                       name="applMethodId"
                       options={ApplicationMethod}
-                      desktopWidth="50%"
-                      formCalc
+                      desktopWidth="212px"
+                      mobileWidth="146px"
                       onChange={(e) => handleChange(e, setFieldValue)}
                     />
                     <CustomField
                       label="Date (optional)"
                       name="applDate"
                       id="applDate"
                       type="date"
-                      desktopWidth="50%"
+                      isYield
+                      desktopWidth="212px"
+                      mobileWidth="146px"
                     />
                   </StyledSmallFormGroup>
                 </StyledLeftView>
@@ -424,6 +429,7 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                       type="submit"
                       size="lg"
                       disabled={false}
+                      calcAddFertButton
                       text={ComponentText.ADD_FERTILIZERS}
                     />
                   </StyledButtonContainer>

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsButtonGroup.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsButtonGroup.tsx
@@ -34,6 +34,7 @@ const CalculationButtonGroup: FC<ButtonComponentProps> = ({ handleFormState }) =
           path="/export"
           size="lg"
           text="Finish"
+          finishButton
         />
       </StyledButtonContainer>
     </StyledAddCancelButtonContainer>