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

doc/release/RELEASE-NOTES.md

@@ -67,6 +67,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 * [OSDEV-1695](https://opensupplyhub.atlassian.net/browse/OSDEV-1695) - [SLC] Enabled the claim button for updated production locations when a moderation event has a pending status. Disabled claim button explicitly if production location has pending claim status.
 * [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-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/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

@@ -1412,27 +1412,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',
             },
@@ -1441,14 +1439,17 @@ export const makeAddLocationStyles = theme =>
             backgroundColor: COLOURS.WHITE,
             boxShadow: 'none',
             padding: '60px 25px 25px 25px',
-            width: '45%',
+            maxWidth: '50%',
             position: 'relative',
             textAlign: 'center',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             overflow: 'hidden',
+            [theme.breakpoints.down('sm')]: {
+                maxWidth: '100%',
+            },
         }),
         cardTitle: Object.freeze({
             fontSize: '32px',
@@ -1457,7 +1458,7 @@ export const makeAddLocationStyles = theme =>
             textAlign: 'center',
             paddingTop: '15px',
             paddingBottom: '15px',
-            fontWeight: '300',
+            fontWeight: theme.typography.fontWeightRegular,
             lineHeight: '1.0',
         }),
         cardSub: Object.freeze({