Moved Common View Container code to App.tsx and app.styles

bcgov · Dec 11, 2024 · 8bc8d49 · 8bc8d49
1 parent 6d7f995
commit 8bc8d49
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 119 deletions.
diff --git a/frontend/src/App.styles.ts b/frontend/src/App.styles.ts
@@ -3,10 +3,19 @@ import styled from '@emotion/styled';
 /**
  * @summary This is the root styling for the application.
  */
-const StyledApp = styled.div`
+export const StyledApp = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 `;
 
-export default StyledApp;
+export const ViewContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  height: 100svh;
+  justify-content: center;
+  width: 100%;
+  align-items: center;
+`;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import StyledApp from './App.styles';
+import { StyledApp, ViewContainer } from './App.styles';
 import { Header, Footer } from './components/common';
 import ViewRouter from './routes/ViewRouter';
 
@@ -9,7 +9,9 @@ function App() {
   return (
     <StyledApp>
       <Header />
-      <ViewRouter />
+      <ViewContainer>
+        <ViewRouter />
+      </ViewContainer>
       <Footer />
     </StyledApp>
   );

diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -5,7 +5,6 @@ import React, { useState, useEffect } from 'react';
 import { localStorageKeyExists } from '../../utils/AppLocalStorage';
 import constants from '../../constants/Constants';
 import {
-  ViewContainer,
   Card,
   CardHeader,
   Banner,
@@ -61,76 +60,74 @@ export default function FarmInformation() {
   ];
 
   return (
-    <ViewContainer>
-      <Card>
-        <CardHeader>
-          <Banner>
-            <Heading>Farm Information</Heading>
-          </Banner>
-        </CardHeader>
-        <InputFieldsContainer>
-          <InputField
-            label="Year"
-            type="text"
-            name="Year"
-            value={formData.Year}
-            onChange={handleChange}
-            flex="0.5"
-          />
-          <InputField
-            label="Farm Name"
-            type="text"
-            name="FarmName"
-            value={formData.FarmName}
-            onChange={handleChange}
-            flex="1"
-          />
-        </InputFieldsContainer>
-        <RegionContainer>
-          <Dropdown
-            label="Region"
-            name="FarmRegion"
-            value={formData.FarmRegion}
-            options={regionOptions}
-            onChange={handleChange}
-            flex="0.35"
-          />
-        </RegionContainer>
+    <Card>
+      <CardHeader>
+        <Banner>
+          <Heading>Farm Information</Heading>
+        </Banner>
+      </CardHeader>
+      <InputFieldsContainer>
+        <InputField
+          label="Year"
+          type="text"
+          name="Year"
+          value={formData.Year}
+          onChange={handleChange}
+          flex="0.5"
+        />
+        <InputField
+          label="Farm Name"
+          type="text"
+          name="FarmName"
+          value={formData.FarmName}
+          onChange={handleChange}
+          flex="1"
+        />
+      </InputFieldsContainer>
+      <RegionContainer>
+        <Dropdown
+          label="Region"
+          name="FarmRegion"
+          value={formData.FarmRegion}
+          options={regionOptions}
+          onChange={handleChange}
+          flex="0.35"
+        />
+      </RegionContainer>
+      <SelectorContainer>
+        <span style={{ marginRight: '8px' }}>I have crops</span>
+        <RadioButton
+          label="Yes"
+          name="Crops"
+          value="true"
+          checked={formData.Crops === 'true'}
+          onChange={handleChange}
+        />
+        <RadioButton
+          label="No"
+          name="Crops"
+          value="false"
+          checked={formData.Crops === 'false'}
+          onChange={handleChange}
+        />
+      </SelectorContainer>
+      {formData.Crops === 'true' && (
         <SelectorContainer>
-          <span style={{ marginRight: '8px' }}>I have crops</span>
-          <RadioButton
-            label="Yes"
-            name="Crops"
-            value="true"
-            checked={formData.Crops === 'true'}
+          <span style={{ marginRight: '8px' }}>Select your crops:</span>
+          <Checkbox
+            label="Vegetables"
+            name="HasVegetables"
+            checked={formData.HasVegetables}
             onChange={handleChange}
           />
-          <RadioButton
-            label="No"
-            name="Crops"
-            value="false"
-            checked={formData.Crops === 'false'}
+          <Checkbox
+            label="Berries"
+            name="HasBerries"
+            checked={formData.HasBerries}
             onChange={handleChange}
           />
         </SelectorContainer>
-        {formData.Crops === 'true' && (
-          <SelectorContainer>
-            <span style={{ marginRight: '8px' }}>Select your crops:</span>
-            <Checkbox
-              label="Vegetables"
-              name="HasVegetables"
-              checked={formData.HasVegetables}
-              onChange={handleChange}
-            />
-            <Checkbox
-              label="Berries"
-              name="HasBerries"
-              checked={formData.HasBerries}
-              onChange={handleChange}
-            />
-          </SelectorContainer>
-        )}
-      </Card>
-    </ViewContainer>
+      )}
+    </Card>
   );
 }
diff --git a/frontend/src/views/LandingPage/LandingPage.tsx b/frontend/src/views/LandingPage/LandingPage.tsx
@@ -5,13 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import constants from '../../constants/Constants';
 import useAppService from '../../services/app/useAppService';
 import { deleteLocalStorageKey } from '../../utils/AppLocalStorage';
-import {
-  ButtonWrapper,
-  ViewContainer,
-  StyledDivider,
-  StyledContent,
-  Card,
-} from './landingPage.styles';
+import { ButtonWrapper, StyledDivider, StyledContent, Card } from './landingPage.styles';
 import { Button } from '../../components/common';
 
 export default function LandingPage() {
@@ -48,47 +42,45 @@ export default function LandingPage() {
   };
 
   return (
-    <ViewContainer>
-      <Card>
-        <StyledContent>
-          <h1>Nutrient Management Calculator</h1>
-          <p>
-            The Nutrient Management Calculator provides a starting point for the efficient use of
-            fertilizer and manure on farms. This tool assists in you choosing the right rate and
-            nutrient source for your crops. You can start a new calculation or pick up where you
-            left off by uploading an existing .nmp file.
-          </p>
-        </StyledContent>
-        <ButtonWrapper>
-          <Button
-            text="Start a new calculation"
-            size="lg"
-            handleClick={newCalcHandler}
-            aria-label="Start a new calculation"
-            variant="primary"
-            disabled={false}
-          />
-        </ButtonWrapper>
-        <StyledDivider>or</StyledDivider>
-        <ButtonWrapper>
-          <Button
-            size="lg"
-            text="Upload an existing .nmp file"
-            handleClick={handleUpload}
-            aria-label="Upload an existing .nmp file"
-            variant="primary"
-            disabled={false}
-          />
-          <input
-            id="fileUp"
-            type="file"
-            accept=".nmp, application/json"
-            onChange={saveFile}
-            aria-label="Upload an existing .nmp file"
-            hidden
-          />
-        </ButtonWrapper>
-      </Card>
-    </ViewContainer>
+    <Card>
+      <StyledContent>
+        <h1>Nutrient Management Calculator</h1>
+        <p>
+          The Nutrient Management Calculator provides a starting point for the efficient use of
+          fertilizer and manure on farms. This tool assists in you choosing the right rate and
+          nutrient source for your crops. You can start a new calculation or pick up where you left
+          off by uploading an existing .nmp file.
+        </p>
+      </StyledContent>
+      <ButtonWrapper>
+        <Button
+          text="Start a new calculation"
+          size="lg"
+          handleClick={newCalcHandler}
+          aria-label="Start a new calculation"
+          variant="primary"
+          disabled={false}
+        />
+      </ButtonWrapper>
+      <StyledDivider>or</StyledDivider>
+      <ButtonWrapper>
+        <Button
+          size="lg"
+          text="Upload an existing .nmp file"
+          handleClick={handleUpload}
+          aria-label="Upload an existing .nmp file"
+          variant="primary"
+          disabled={false}
+        />
+        <input
+          id="fileUp"
+          type="file"
+          accept=".nmp, application/json"
+          onChange={saveFile}
+          aria-label="Upload an existing .nmp file"
+          hidden
+        />
+      </ButtonWrapper>
+    </Card>
   );
 }