Merge pull request #3495 from Emurgo/fix/YOEXT-1137/banxa-spacing

banxa fixes
Emurgo · May 6, 2024 · 32167be · 32167be
2 parents be1e3c1 + 04e479d
commit 32167be
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/packages/yoroi-extension/app/components/buySell/BuySellDialog.js b/packages/yoroi-extension/app/components/buySell/BuySellDialog.js
@@ -8,8 +8,6 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import Dialog from '../widgets/Dialog';
 import DialogCloseButton from '../widgets/DialogCloseButton';
 
-import VerticalFlexContainer from '../layout/VerticalFlexContainer';
-import LoadingSpinner from '../widgets/LoadingSpinner';
 import globalMessages from '../../i18n/global-messages';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -130,7 +128,7 @@ const Disclaimer = styled(Box)({
   fontStyle: 'normal',
   fontWeight: 400,
   lineHeight: '24px',
-  marginBottom: '80px',
+  marginBottom: '140px',
   '& header': {
     fontWeight: 500,
     '& svg': {
@@ -139,7 +137,7 @@ const Disclaimer = styled(Box)({
     },
   },
   borderRadius: 'var(--corner-radius-8, 8px)',
-  background: 'var(--gradient-light-green-blue, linear-gradient(270deg, #E4E8F7 0%, #C6F7ED 99.98%))',
+  background: 'var(--gradient-light-green-blue, linear-gradient(340deg, #C6F7ED 10%, #E4E8F7 60%))',
   padding: 'var(--spacing-12, 12px) var(--spacing-16, 16px) var(--spacing-16, 16px) var(--spacing-16, 16px)'
 });
 
@@ -237,6 +235,9 @@ export default class BuySellDialog extends Component<Props, State> {
               paddingBottom: '1lh',
             },
           }}
+          sx={{
+            paddingBottom: 0,
+          }}
           value={state.buyAmountAda}
           onChange={this.onChangeBuyAmount}
           error={state.error !== null}
@@ -265,7 +266,8 @@ export default class BuySellDialog extends Component<Props, State> {
 
         <Disclaimer>
           <header>
-            <InfoIcon />{intl.formatMessage(messages.disclaimer)}
+            <InfoIcon style={{ verticalAlign: 'middle' }} />
+            <span style={{ verticalAlign: 'middle' }}>{intl.formatMessage(messages.disclaimer)}</span>
           </header>
           {intl.formatMessage(messages.disclaimerText)}
         </Disclaimer>
@@ -281,25 +283,13 @@ export default class BuySellDialog extends Component<Props, State> {
     const { intl } = this.context;
     const { state, props } = this;
 
-    if (false) {
-      return (
-        <Dialog
-          title={intl.formatMessage(globalMessages.processingLabel)}
-          closeOnOverlayClick={false}
-        >
-          <VerticalFlexContainer>
-            <LoadingSpinner />
-          </VerticalFlexContainer>
-        </Dialog>
-      );
-    }
-
     return (
       <Dialog
         title={intl.formatMessage(globalMessages.buyAda)}
         closeOnOverlayClick={false}
         onClose={props.onCancel}
         closeButton={<DialogCloseButton />}
+        forceBottomDivider
         actions={[
           {
             label: intl.formatMessage(messages.proceed),
@@ -309,7 +299,7 @@ export default class BuySellDialog extends Component<Props, State> {
             isSubmitting: state.isSubmitting,
           }
         ]}
-        styleOverride={{ width: '648px', height: '688px' }}
+        styleOverride={{ width: '648px' }}
         styleFlags={{ contentNoTopPadding: true }}
       >
         <Tabs

diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js
@@ -42,6 +42,7 @@ export type Props = {|
   +isRevampLayout?: boolean,
   id?: string,
   +styleFlags?: StyleFlag,
+  +forceBottomDivider?: boolean,
 |};
 
 type InjectedProps = {| isRevampLayout: boolean |};
@@ -61,6 +62,7 @@ function Dialog(props: Props & InjectedProps): Node {
     isRevampLayout,
     id,
     styleFlags,
+    forceBottomDivider,
   } = props;
 
   const [contentHasScroll, setContentHasScroll] = useState(false);
@@ -146,7 +148,7 @@ function Dialog(props: Props & InjectedProps): Node {
           </ModalContent>
         ) : null}
         {hasActions && (
-          <ModalFooter contentHasScroll={contentHasScroll}>
+          <ModalFooter hasDivider={forceBottomDivider || contentHasScroll}>
             {map(actions, (action, i: number) => {
               const buttonClasses = classnames([
                 // Keep classnames for testing
@@ -277,7 +279,7 @@ const ModalContent = styled(Box)(({ theme }) => ({
   flexGrow: 1,
 }));
 
-const ModalFooter = styled(Box)(({ theme, contentHasScroll }) => ({
+const ModalFooter = styled(Box)(({ theme, hasDivider }) => ({
   display: 'flex',
   gap: '24px',
   paddingLeft: theme.name === 'classic' ? '30px' : '24px',
@@ -286,7 +288,7 @@ const ModalFooter = styled(Box)(({ theme, contentHasScroll }) => ({
   paddingBottom: theme.name === 'classic' || theme.name === 'modern' ? '0' : '24px',
   marginTop: theme.name === 'classic' ? '20px' : '0px',
   borderTop:
-    theme.name === 'classic' || theme.name === 'modern' ? '' : contentHasScroll ? '1px solid' : '',
+    theme.name === 'classic' || theme.name === 'modern' ? '' : hasDivider ? '1px solid' : '',
   borderTopColor:
     theme.name === 'classic' || theme.name === 'modern'
       ? theme.palette.gray['200']