feat: [BB-191] Feature** Fields and Soil Stage 2

frontend/src/Commons/Button/Button.style.ts

@@ -4,28 +4,27 @@ import screenSizes from '@Constants/ScreenSize';
 
 type StyledButtonProps = {
   size: string;
-  type: string;
   disabled: boolean;
+  radius: string;
+  actions: string;
 };
 
 const StyledButton = styled.button<StyledButtonProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  max-height: ${(props) => (props.size === 'sm' ? '27px' : props.size === 'md' ? '25px' : '40px')};
+  max-height: 42px;
   height: 100%;
   width: 100%;
-  max-width: ${(props) => (props.size === 'sm' ? '52px' : props.size === 'md' ? '200px' : '300px')};
-  background-color: ${(props) => (props.type === 'button' || props.type === 'submit'
+  max-width: ${(props) => (props.size === 'sm' ? '62px' : props.size === 'md' ? '159px' : '327px')};
+  background-color: ${(props) => (props.actions === 'primary'
     ? tokens.surfaceColorPrimaryButtonDefault
     : tokens.surfaceColorSecondaryButtonDefault)};
-  color: ${(props) => (props.type === 'button' || props.type === 'submit'
+  color: ${(props) => (props.actions === 'primary'
     ? tokens.typographyColorPrimaryInvert
-    : tokens.typographyColorPrimary)};
-  border-radius: 8px;
-  border: ${(props) => (props.type === 'button' || props.type === 'submit'
-    ? 0
-    : `1px solid ${tokens.surfaceColorBorderMedium}`)};
+    : tokens.typographyColorSecondary)};
+  border-radius: ${(props) => props.radius};
+  border: ${(props) => (props.actions === 'primary' ? 0 : `1px solid ${tokens.surfaceColorBorderMedium}`)};
   padding: 20px 30px;
   font-family: ${tokens.typographyFontFamiliesBcSans};
   font-weight: ${tokens.typographyFontWeightsBold};
@@ -35,9 +34,15 @@ const StyledButton = styled.button<StyledButtonProps>`
   }
 
   @media (min-width: ${screenSizes.desktop}) {
-    max-height: ${(props) => (props.size === 'sm' ? '27px' : props.size === 'md' ? '25px' : '40px')};
-    max-width: ${(props) => (props.size === 'sm' ? '52px' : props.size === 'md' ? '200px' : '300px')};
+    max-height: 42px;
+    max-width: ${(props) => (props.size === 'sm' ? '62px' : props.size === 'md' ? '159px' : '483px')};
   }
 `;
 
-export default StyledButton;
+const StyledChildrenContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export { StyledButton, StyledChildrenContainer };

frontend/src/Commons/Button/Button.tsx

@@ -1,16 +1,21 @@
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import StyledButton from './Button.style';
+import { StyledButton, StyledChildrenContainer } from './Button.style';
 
 type ButtonSizes = 'sm' | 'md' | 'lg';
+type ButtonActions = 'primary' | 'secondary';
 type ButtonTypes = 'button' | 'submit' | 'reset' | undefined;
 
 type ButtonProps = {
   handleClick?: () => void;
   text: string;
   size?: ButtonSizes;
   disabled?: boolean;
+  actions?: ButtonActions;
   path?: string;
   type?: ButtonTypes;
+  radius?: string;
+  children?: React.ReactNode;
 };
 
 const Button = ({
@@ -19,7 +24,10 @@ const Button = ({
   size = 'md',
   disabled = false,
   path = '',
+  radius = '8px',
   type = 'button',
+  actions = 'primary',
+  children,
 }: ButtonProps) => {
   const navigate = useNavigate();
 
@@ -38,8 +46,13 @@ const Button = ({
       onClick={handleClickWrapper}
       value=""
       type={type}
+      radius={radius}
+      actions={actions}
     >
-      {text}
+      <StyledChildrenContainer>
+        {children}
+        {text}
+      </StyledChildrenContainer>
     </StyledButton>
   );
 };

frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.style.ts

@@ -9,6 +9,11 @@
  */
 import styled from '@emotion/styled';
 import screenSizes from '@Constants/ScreenSize';
+import * as tokens from '@bcgov/design-tokens/js';
+
+type StyledListType = {
+  width?: string;
+};
 
 const StyledFarmInfo = styled.div`
   display: flex;
@@ -52,14 +57,76 @@ const StyledButtonGroupContainer = styled.div`
 `;
 
 const StyledListContainer = styled.div`
+  position: relative;
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  padding-top: 20px;
+
+  @media (min-width: ${screenSizes.desktop}) {
+    gap: 30px;
+    flex-direction: row;
+    height: auto;
+  }
 `;
-const StyledListItem = styled.div`
+const StyledListItem = styled.div<StyledListType>`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
+
+  h4 {
+    font: ${tokens.typographyBoldBody};
+  }
+  p {
+    font: ${tokens.typographyRegularLabel};
+  }
+
+  @media (min-width: ${screenSizes.desktop}) {
+    width: ${(props) => props.width};
+    h4 {
+      font: ${tokens.typographyBoldH6};
+    }
+    p {
+      font: ${tokens.typographyRegularBody};
+    }
+  }
+`;
+
+const StyledFontAwesomeContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  font-size: 24spx;
+  gap: 30px;
+  padding-top: 10px;xx
+  margin-right: 10px;
+
+  @media (min-width: ${screenSizes.desktop}){
+    padding-top: 30px;
+    font-size: 32px;
+  }
+`;
+
+const StyledFieldInfoList = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: ${screenSizes.desktop}) {
+  }
+`;
+
+const StyledCommentContainerDesktop = styled.div`
+  display: none;
+  @media (min-width: ${screenSizes.desktop}) {
+    display: flex;
+  }
+`;
+
+const StyledCommentContainerMobile = styled.div`
+  display: flex;
+
+  @media (min-width: ${screenSizes.desktop}) {
+    display: none;
+  }
 `;
 
 export {
@@ -68,4 +135,8 @@ export {
   StyledButtonGroupContainer,
   StyledListContainer,
   StyledListItem,
+  StyledFontAwesomeContainer,
+  StyledFieldInfoList,
+  StyledCommentContainerDesktop,
+  StyledCommentContainerMobile,
 };