[BHBC-965] Project Page UI Clean-up / Refactor Markup

bcgov · Apr 8, 2021 · 49e9fd8 · 49e9fd8
1 parent 1cfc7b8
commit 49e9fd8
Show file tree

Hide file tree

Showing 29 changed files with 3,546 additions and 4,789 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,4 +1,4 @@
-import { Box, CircularProgress, ThemeProvider } from '@material-ui/core';
+import { CircularProgress, ThemeProvider } from '@material-ui/core';
 // Strange looking `type {}` import below, see: https://github.com/microsoft/TypeScript/issues/36812
 import type {} from '@material-ui/lab/themeAugmentation'; // this allows `@material-ui/lab` components to be themed
 import { KeycloakProvider } from '@react-keycloak/web';
@@ -13,43 +13,41 @@ import getKeycloakEventHandler from 'utils/KeycloakEventHandler';
 
 const App: React.FC = () => {
   return (
-    <Box height="100vh" width="100vw" display="flex" overflow="hidden">
-      <ThemeProvider theme={appTheme}>
-        <ConfigContextProvider>
-          <ConfigContext.Consumer>
-            {(config) => {
-              if (!config) {
-                return <CircularProgress />;
-              }
+    <ThemeProvider theme={appTheme}>
+      <ConfigContextProvider>
+        <ConfigContext.Consumer>
+          {(config) => {
+            if (!config) {
+              return <CircularProgress />;
+            }
 
-              //@ts-ignore
-              const keycloak: KeycloakInstance = new Keycloak(config.KEYCLOAK_CONFIG);
+            //@ts-ignore
+            const keycloak: KeycloakInstance = new Keycloak(config.KEYCLOAK_CONFIG);
 
-              return (
-                <KeycloakProvider
-                  keycloak={keycloak}
-                  initConfig={{ onLoad: 'login-required', checkLoginIframe: false }}
-                  LoadingComponent={<CircularProgress />}
-                  onEvent={getKeycloakEventHandler()}>
-                  <AuthStateContextProvider>
-                    <BrowserRouter>
-                      <AuthStateContext.Consumer>
-                        {(context: IAuthState) => {
-                          if (!context.ready) {
-                            return <CircularProgress />;
-                          }
-                          return <AppRouter />;
-                        }}
-                      </AuthStateContext.Consumer>
-                    </BrowserRouter>
-                  </AuthStateContextProvider>
-                </KeycloakProvider>
-              );
-            }}
-          </ConfigContext.Consumer>
-        </ConfigContextProvider>
-      </ThemeProvider>
-    </Box>
+            return (
+              <KeycloakProvider
+                keycloak={keycloak}
+                initConfig={{ onLoad: 'login-required', checkLoginIframe: false }}
+                LoadingComponent={<CircularProgress />}
+                onEvent={getKeycloakEventHandler()}>
+                <AuthStateContextProvider>
+                  <BrowserRouter>
+                    <AuthStateContext.Consumer>
+                      {(context: IAuthState) => {
+                        if (!context.ready) {
+                          return <CircularProgress />;
+                        }
+                        return <AppRouter />;
+                      }}
+                    </AuthStateContext.Consumer>
+                  </BrowserRouter>
+                </AuthStateContextProvider>
+              </KeycloakProvider>
+            );
+          }}
+        </ConfigContext.Consumer>
+      </ConfigContextProvider>
+    </ThemeProvider>
   );
 };
 

diff --git a/app/src/components/fields/ReadMoreField.tsx b/app/src/components/fields/ReadMoreField.tsx
@@ -19,11 +19,7 @@ export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {
 
   const renderParagraph = (paragraph: string) => {
     if (paragraph) {
-      return (
-        <Typography style={{ wordBreak: 'break-all' }} key={uuidv4()}>
-          {paragraph}
-        </Typography>
-      );
+      return <Typography key={uuidv4()}>{paragraph}</Typography>;
     }
     return <p key={uuidv4()}></p>;
   };
@@ -50,30 +46,30 @@ export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {
     <Box>
       {isTruncatedText && (
         <>
-          <Box>
-            {text
-              .slice(0, determineTruncatingLength())
-              .split('\n')
-              .map((paragraph: string) => {
-                return renderParagraph(paragraph);
-              })}
+          {text
+            .slice(0, determineTruncatingLength())
+            .split('\n')
+            .map((paragraph: string) => {
+              return renderParagraph(paragraph);
+            })}
+          <Box mt={3}>
+            <Button size="small" variant="outlined" color="primary" onClick={() => setIsTruncatedText(false)}>
+              Read More
+            </Button>
           </Box>
-          <Button color="primary" onClick={() => setIsTruncatedText(false)}>
-            Read More
-          </Button>
         </>
       )}
       {!isTruncatedText && (
         <>
-          <Box>
-            {text?.split('\n').map((paragraph: string) => {
-              return renderParagraph(paragraph);
-            })}
-          </Box>
+          {text?.split('\n').map((paragraph: string) => {
+            return renderParagraph(paragraph);
+          })}
           {text?.length > maxCharLength && (
-            <Button color="primary" onClick={() => setIsTruncatedText(true)}>
-              Read Less
-            </Button>
+            <Box mt={3}>
+              <Button size="small" variant="outlined" color="primary" onClick={() => setIsTruncatedText(true)}>
+                Read Less
+              </Button>
+            </Box>
           )}
         </>
       )}

diff --git a/app/src/components/layout/Header.tsx b/app/src/components/layout/Header.tsx
@@ -8,8 +8,8 @@ import headerImageSmall from 'assets/images/gov-bc-logo-vert.png';
 
 const Header: React.FC = () => {
   return (
-    <AppBar position="static" style={{ boxShadow: 'none' }}>
-      <Toolbar className={'app-header'}>
+    <AppBar position="sticky" style={{ boxShadow: 'none' }}>
+      <Toolbar className={'headerToolbar'}>
         <Link to="/projects" className={'brand'} aria-label="Go to BioHub Home">
           <picture>
             <source srcSet={headerImageLarge} media="(min-width: 1200px)"></source>

diff --git a/app/src/components/layout/__snapshots__/Header.test.tsx.snap b/app/src/components/layout/__snapshots__/Header.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`NotFoundPage renders correctly 1`] = `
 <DocumentFragment>
   <header
-    class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary MuiPaper-elevation4"
+    class="MuiPaper-root MuiAppBar-root MuiAppBar-positionSticky MuiAppBar-colorPrimary MuiPaper-elevation4"
     style="box-shadow: none;"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular app-header MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular headerToolbar MuiToolbar-gutters"
     >
       <a
         aria-label="Go to BioHub Home"

diff --git a/app/src/constants/i18n.ts b/app/src/constants/i18n.ts
@@ -50,8 +50,8 @@ export const EditLocationBoundaryI18N = {
 };
 
 export const EditIUCNI18N = {
-  editTitle: 'Edit IUCN Classification',
-  editErrorTitle: 'Error Editing IUCN Classification',
+  editTitle: 'Edit IUCN Classifications',
+  editErrorTitle: 'Error Editing IUCN Classifications',
   editErrorText:
     'An error has occurred while attempting to edit your IUCN classification, please try again. If the error persists, please contact your system administrator.'
 };

diff --git a/app/src/features/projects/view/ProjectDetails.tsx b/app/src/features/projects/view/ProjectDetails.tsx
@@ -1,4 +1,4 @@
-import { Box, Paper, Typography } from '@material-ui/core';
+import { Box, Divider, Paper, Typography } from '@material-ui/core';
 import FundingSource from 'features/projects/view/components/FundingSource';
 import GeneralInformation from 'features/projects/view/components/GeneralInformation';
 import IUCNClassification from 'features/projects/view/components/IUCNClassification';
@@ -27,69 +27,42 @@ const ProjectDetails: React.FC<IProjectDetailsProps> = (props) => {
 
   return (
     <>
-      <Box mb={4}>
+      <Box mb={6}>
         <Typography variant="h2">Project Details</Typography>
       </Box>
-      <Box mb={3}>
-        <Paper>
-          <ProjectObjectives projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
-        </Paper>
-      </Box>
-
-      <Box mb={4}>
-        <Paper>
-          <Box m={3}>
-            <GeneralInformation projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
-          </Box>
-        </Paper>
-      </Box>
-
-      <Box mb={4}>
-        <Paper>
-          <Box m={3}>
-            <ProjectCoordinator projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
-          </Box>
-        </Paper>
-      </Box>
-
-      <Box mb={4}>
-        <Paper>
-          <Box m={3}>
-            <LocationBoundary projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
-          </Box>
-        </Paper>
-      </Box>
 
-      <Box mb={4}>
-        <Paper>
-          <Box m={3}>
-            <Species projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
-          </Box>
-        </Paper>
-      </Box>
-
-      <Box mb={4}>
-        <Paper>
-          <Box m={3}>
-            <IUCNClassification projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
-          </Box>
-        </Paper>
-      </Box>
-
-      <Box mb={4}>
-        <Paper>
-          <Box m={3}>
-            <FundingSource projectForViewData={projectForViewData} />
-          </Box>
-        </Paper>
-      </Box>
-
-      <Box mb={4}>
-        <Paper>
-          <Box m={3}>
-            <Partnerships projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
-          </Box>
-        </Paper>
+      <Box component={Paper} p={4}>
+        <Box component="section" mb={5}>
+          <ProjectObjectives projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
+        </Box>
+        <Divider />
+        <Box component="section" mt={4} mb={5}>
+          <GeneralInformation projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
+        </Box>
+        <Divider />
+        <Box component="section" mt={4} mb={5}>
+          <ProjectCoordinator projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
+        </Box>
+        <Divider />
+        <Box component="section" mt={4} mb={5}>
+          <LocationBoundary projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
+        </Box>
+        <Divider />
+        <Box component="section" mt={4} mb={5}>
+          <Species projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
+        </Box>
+        <Divider />
+        <Box component="section" mt={4} mb={5}>
+          <IUCNClassification projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
+        </Box>
+        <Divider />
+        <Box component="section" mt={4} mb={5}>
+          <Partnerships projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
+        </Box>
+        <Divider />
+        <Box component="section" mt={4}>
+          <FundingSource projectForViewData={projectForViewData} />
+        </Box>
       </Box>
     </>
   );