[OSDEV-1589] [FE] Layout issue on "contribute" page

doc/release/RELEASE-NOTES.md

@@ -68,6 +68,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 * [OSDEV-1701](https://opensupplyhub.atlassian.net/browse/OSDEV-1701) - Refactored "Go Back" button in production location info page.
 * [OSDEV-1672](https://opensupplyhub.atlassian.net/browse/OSDEV-1672) - SLC. Implement collecting contribution data page (FE) - All Multi-Selects on the page have been fixed. They resize based on the number of items selected.
 * [OSDEV-1653](https://opensupplyhub.atlassian.net/browse/OSDEV-1653) - Added asterisks next to each required form field (Name, Address, and Country) on the "Search by Name and Address" tab. Highlighted an empty field and displayed an error message if it loses focus. Added proper styles for the error messages.
+* [OSDEV-1589](https://opensupplyhub.atlassian.net/browse/OSDEV-1589) - Fixed layout issue on new `contribute` page.
 
 ### What's new
 * [OSDEV-1662](https://opensupplyhub.atlassian.net/browse/OSDEV-1662) - Added a new field, `action_perform_by`, to the moderation event. This data appears on the Contribution Record page when a moderator perform any actions like `APPROVED` or `REJECTED`.

src/react/src/Routes.jsx

@@ -14,6 +14,7 @@ import RegisterForm from './components/RegisterForm';
 import ResetPasswordForm from './components/ResetPasswordForm';
 import LoginForm from './components/LoginForm';
 import Contribute from './components/Contribute';
+import AddLocationData from './components/AddLocationData';
 import Homepage from './components/Homepage';
 import FacilityLists from './components/FacilityLists';
 import FacilityListItems from './components/FacilityListItems';
@@ -48,6 +49,7 @@ import {
     authResetPasswordFormRoute,
     authConfirmRegistrationRoute,
     contributeRoute,
+    contributeNewRoute, // TODO: Remove this in scope of https://opensupplyhub.atlassian.net/browse/OSDEV-1607
     listsRoute,
     facilityListItemsRoute,
     facilitiesRoute,
@@ -160,6 +162,11 @@ class Routes extends Component {
                                     path={contributeRoute}
                                     component={Contribute}
                                 />
+                                <Route
+                                    exact
+                                    path={contributeNewRoute}
+                                    component={AddLocationData}
+                                />
                                 <Route
                                     path={dashboardRoute}
                                     component={Dashboard}

src/react/src/components/AddLocationData.jsx

@@ -77,9 +77,9 @@ function AddLocationData({ classes, userHasSignedIn, fetchingSessionSignIn }) {
                             className={classes.cardTitle}
                         >
                             Upload a dataset with multiple production locations
-                            using a{' '}
+                            using{' '}
                             <span className={classes.highlight}>
-                                spreadsheet.
+                                a spreadsheet.
                             </span>
                         </Typography>
                         <Typography

src/react/src/util/constants.jsx

@@ -321,6 +321,7 @@ export const authRegisterFormRoute = '/auth/register';
 export const authResetPasswordFormRoute = '/auth/resetpassword/:uid';
 export const authConfirmRegistrationRoute = '/auth/confirm/:uid';
 export const contributeRoute = '/contribute';
+export const contributeNewRoute = '/contribute-new'; // TODO: Remove this in scope of https://opensupplyhub.atlassian.net/browse/OSDEV-1607
 export const multipleLocationRoute = '/contribute/multiple-locations';
 export const listsRoute = '/lists';
 export const facilityListItemsRoute = '/lists/:listID';

src/react/src/util/styles.js

@@ -1421,27 +1421,25 @@ export const makeAddLocationStyles = theme =>
         title: Object.freeze({
             paddingLeft: '5%',
             paddingRight: '5%',
-            paddingTop: '25px',
+            paddingTop: '48px',
             color: COLOURS.NEAR_BLACK,
-            fontWeight: 'bold',
-            marginBottom: '1rem',
+            fontWeight: theme.typography.fontWeightExtraBold,
         }),
         description: Object.freeze({
             paddingLeft: '5%',
             paddingRight: '5%',
-            paddingTop: '5px',
-            marginBottom: '2rem',
-            fontWeight: 'bold',
+            paddingTop: '24px',
+            marginBottom: '32px',
+            fontWeight: theme.typography.fontWeightSemiBold,
         }),
         dataOptions: Object.freeze({
             display: 'flex',
             paddingLeft: '5%',
             paddingRight: '5%',
             gap: '50px',
             paddingBottom: '5%',
-            flexWrap: 'wrap',
             flexDirection: 'row',
-            [theme.breakpoints.down('md')]: {
+            [theme.breakpoints.down('sm')]: {
                 flexDirection: 'column',
                 display: 'center',
             },
@@ -1450,14 +1448,17 @@ export const makeAddLocationStyles = theme =>
             backgroundColor: COLOURS.WHITE,
             boxShadow: 'none',
             padding: '60px 25px 25px 25px',
-            width: '45%',
+            width: '50%',
             position: 'relative',
             textAlign: 'center',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             overflow: 'hidden',
+            [theme.breakpoints.down('sm')]: {
+                width: 'auto',
+            },
         }),
         cardTitle: Object.freeze({
             fontSize: '32px',
@@ -1466,7 +1467,7 @@ export const makeAddLocationStyles = theme =>
             textAlign: 'center',
             paddingTop: '15px',
             paddingBottom: '15px',
-            fontWeight: '300',
+            fontWeight: theme.typography.fontWeightRegular,
             lineHeight: '1.0',
         }),
         cardSub: Object.freeze({