Merge pull request #12227 from brave/fix-reset-button-alignment

Fix alignment of reset button
brave · Feb 14, 2022 · b599acc · b599acc
2 parents 68ba250 + 7bca94d
commit b599acc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 29 deletions.
diff --git a/components/brave_wallet_ui/components/buy-send-swap/send/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/send/index.tsx
@@ -10,7 +10,7 @@ import {
 import { NavButton } from '../../extension'
 import SwapInputComponent from '../swap-input-component'
 import { getLocale } from '../../../../common/locale'
-import { ButtonRow, ErrorText, ResetButton } from '../shared-styles'
+import { ErrorText, ResetButton } from '../shared-styles'
 // Styled Components
 import {
   StyledWrapper
@@ -103,7 +103,6 @@ function Send (props: Props) {
       {insuficientFundsError &&
         <ErrorText>{getLocale('braveWalletSwapInsufficientBalance')}</ErrorText>
       }
-      <ButtonRow>
         <NavButton
           disabled={addressError !== '' ||
             toAddressOrUrl === '' ||
@@ -122,7 +121,6 @@ function Send (props: Props) {
         >
           {getLocale('braveWalletReset')}
         </ResetButton>
-      </ButtonRow>
     </StyledWrapper>
   )
 }

diff --git a/components/brave_wallet_ui/components/buy-send-swap/shared-styles.ts b/components/brave_wallet_ui/components/buy-send-swap/shared-styles.ts
@@ -79,15 +79,6 @@ export const DividerText = styled.span`
   color: ${(p) => p.theme.color.text01};
 `
 
-export const ButtonRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-  width: 100%;
-  margin-bottom: 14px;
-`
-
 export const ResetButton = styled(WalletButton)`
   display: flex;
   flex-direction: row;
@@ -103,6 +94,7 @@ export const ResetButton = styled(WalletButton)`
   letter-spacing: 0.01em;
   padding: 2px 0px;
   width: 48px;
+  margin: 12px 0px;
   background-color: ${(p) => p.theme.palette.white};
   color: ${(p) => p.theme.color.interactive05};
   @media (prefers-color-scheme: dark) {

diff --git a/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx
@@ -27,8 +27,7 @@ import {
   SwapDisclaimerRow,
   AlertIcon,
   SwapFeesNoticeRow,
-  SwapFeesNoticeText,
-  ResetRow
+  SwapFeesNoticeText
 } from './style'
 import { LoaderIcon } from 'brave-ui/components/icons'
 import { ResetButton } from '../shared-styles'
@@ -198,21 +197,6 @@ function Swap (props: Props) {
         customSlippageTolerance={customSlippageTolerance}
         onCustomSlippageToleranceChange={onCustomSlippageToleranceChange}
       />
-
-      <ResetRow>
-        <ResetButton
-          onClick={onReset}
-          >
-            {getLocale('braveWalletReset')}
-        </ResetButton>
-      </ResetRow>
-
-      <SwapFeesNoticeRow>
-        <SwapFeesNoticeText>
-          {getLocale('braveWalletSwapFeesNotice')}
-        </SwapFeesNoticeText>
-      </SwapFeesNoticeRow>
-
       <SwapNavButton
         disabled={isSubmitDisabled}
         buttonType='primary'
@@ -224,6 +208,16 @@ function Swap (props: Props) {
             : <SwapButtonText>{submitText}</SwapButtonText>
         }
       </SwapNavButton>
+      <ResetButton
+        onClick={onReset}
+        >
+          {getLocale('braveWalletReset')}
+      </ResetButton>
+      <SwapFeesNoticeRow>
+        <SwapFeesNoticeText>
+          {getLocale('braveWalletSwapFeesNotice')}
+        </SwapFeesNoticeText>
+      </SwapFeesNoticeRow>
       <SwapDisclaimerRow>
         <SwapDisclaimerText>
           {beforeTag}