From 9716d61f5be35750ab78f39bd619e59a8cb6fb93 Mon Sep 17 00:00:00 2001
From: Danielle <danielle@rotational.io>
Date: Tue, 23 Jan 2024 12:01:42 -0500
Subject: [PATCH] Align buttons on review submission page (#1151)

---
 .../src/components/ReviewSubmit/index.tsx     | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/web/gds-user-ui/src/components/ReviewSubmit/index.tsx b/web/gds-user-ui/src/components/ReviewSubmit/index.tsx
index c48b2e23f..c993f0876 100644
--- a/web/gds-user-ui/src/components/ReviewSubmit/index.tsx
+++ b/web/gds-user-ui/src/components/ReviewSubmit/index.tsx
@@ -8,7 +8,8 @@ import {
   useDisclosure,
   Box,
   Flex,
-  Link
+  Link,
+  SimpleGrid,
 } from '@chakra-ui/react';
 import FormLayout from 'layouts/FormLayout';
 import ConfirmationModal from 'components/ReviewSubmit/ConfirmationModal';
@@ -115,8 +116,8 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
               </Text>
             </Text>
           </FormLayout>
-          <Stack
-            direction={['column', 'row']}
+          <SimpleGrid
+            columns={{ base: 1, lg: 2 }}
             justifyContent="space-around"
             py={14}
             width="100%"
@@ -188,26 +189,29 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
               <Stack
                 alignContent={'center'}
                 justifyContent={'center'}
+                height="100%"
                 mx="auto"
-                pb={4}
+                pt="2"
+                px="6"
+                pb="6"
                 alignItems={'center'}>
                 <Button
                   bgColor="#ff7a59f0"
                   color="#fff"
-                  isDisabled={testnet || isTestnetNetworkFieldsIncomplete}
-                  data-testid="testnet-submit-btn"
                   size="lg"
-                  py={["null", "2.5rem", "2.8rem", "1.5rem"]}
-                  isLoading={isTestNetSubmitting}
                   whiteSpace="normal"
-                  maxW={[200, 250, 385]}
+                  mt="auto"
+                  py={{ base: '1rem', lg: '1.75rem' }}
                   width="100%"
                   boxShadow="lg"
-                  onClick={(e) => {
-                    onSubmitHandler(e, STEPPER_NETWORK.TESTNET);
-                  }}
                   _hover={{
                     bgColor: '#f55c35'
+                  }}
+                  isLoading={isTestNetSubmitting}
+                  isDisabled={testnet || isTestnetNetworkFieldsIncomplete}
+                  data-testid="testnet-submit-btn"
+                  onClick={(e) => {
+                    onSubmitHandler(e, STEPPER_NETWORK.TESTNET);
                   }}>
                   {t`Submit TestNet Registration`}
                 </Button>
@@ -278,39 +282,41 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
               <Stack
                 alignContent={'center'}
                 justifyContent={'center'}
+                height="100%"
                 mx="auto"
+                pt="2"
                 alignItems={'center'}
-                pb={4}>
+                pb="6"
+                px="6">
                 <Button
                   bgColor="#23a7e0e8"
                   color="#fff"
                   size="lg"
-                  py={["null", "2.5rem", "2.8rem", "1.5rem"]}
+                  mt="auto"
+                  py={{ base: '1rem', lg: '1.75rem' }}
+                  width="100%"
+                  _hover={{
+                    bgColor: '#189fda'
+                  }}
                   isLoading={isMainNetSubmitting}
                   isDisabled={mainnet || isMainnetNetworkIncomplete}
                   whiteSpace="normal"
                   boxShadow="lg"
                   data-testid="mainnet-submit-btn"
-                  maxW={[200, 250, 385]}
                   onClick={(e) => {
                     onSubmitHandler(e, STEPPER_NETWORK.MAINNET);
                   }}
-                  width="100%"
-                  _hover={{
-                    bgColor: '#189fda'
-                  }}>
+                  >
                   {t`Submit MainNet Registration`}
                 </Button>
               </Stack>
             </Stack>
-          </Stack>
+          </SimpleGrid>
 
           <Box alignSelf={'flex-start'} textAlign="center" mx={'auto'}>
             <Button
-              data-cy="back-to-review-section"
               bgColor="#fff"
               color="#1026F0"
-              onClick={handleJumpToLastStep}
               size="lg"
               py="2rem"
               whiteSpace="normal"
@@ -319,7 +325,9 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
               width="100%"
               _hover={{
                 bgColor: '#E6E6E6'
-              }}>
+              }}
+              data-cy="back-to-review-section"
+              onClick={handleJumpToLastStep}>
               {t`Back to Review section`}
             </Button>
           </Box>