Fixes brave/brave-browser#9283 - Increases vertical height of Binance…

… widget when logged in Fixes brave/brave-browser#9284 - Adds navigation menu across all four views in the Binance widget
brave · Apr 20, 2020 · aaea10d · aaea10d
1 parent d7761ca
commit aaea10d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 48 deletions.
diff --git a/components/brave_new_tab_ui/components/default/binance/index.tsx b/components/brave_new_tab_ui/components/default/binance/index.tsx
@@ -61,12 +61,11 @@ import {
   ConvertInfoItem,
   ConvertValue,
   ConvertLabel,
-  AvailableLabel,
   NavigationBar,
   NavigationItem,
   SelectedView,
   TickerLabel,
-  ConvertButton,
+  ActionButton,
   AssetIcon,
   QRImage,
   CopyButton,
@@ -334,17 +333,9 @@ class Binance extends React.PureComponent<Props, State> {
   }
 
   renderRoutes = () => {
-    const { userAuthed, selectedView } = this.props
+    const { userAuthed } = this.props
 
     if (userAuthed) {
-      if (selectedView === 'buy') {
-        return this.renderBuyView()
-      }
-
-      if (selectedView === 'convert') {
-        return this.renderConvertView()
-      }
-
       return this.renderAccountView()
     }
 
@@ -1004,11 +995,8 @@ class Binance extends React.PureComponent<Props, State> {
     return (
       <>
         <Copy>
-          {getLocale('binanceWidgetConvert')}
-        </Copy>
-        <AvailableLabel>
           {`${getLocale('binanceWidgetAvailable')} ${convertFromAmount} ${currentConvertFrom}`}
-        </AvailableLabel>
+        </Copy>
         <BuyPromptWrapper>
           <FiatInputWrapper>
             <FiatInputField
@@ -1095,12 +1083,9 @@ class Binance extends React.PureComponent<Props, State> {
           }
         </BuyPromptWrapper>
         <ActionsWrapper>
-          <ConvertButton onClick={this.shouldShowConvertPreview}>
+          <ActionButton onClick={this.shouldShowConvertPreview}>
             {getLocale('binanceWidgetPreviewConvert')}
-          </ConvertButton>
-          <DismissAction onClick={this.setSelectedView.bind(this, 'deposit')}>
-            {getLocale('binanceWidgetCancel')}
-          </DismissAction>
+          </ActionButton>
         </ActionsWrapper>
       </>
     )
@@ -1114,6 +1099,10 @@ class Binance extends React.PureComponent<Props, State> {
         return this.renderDepositView()
       case 'summary':
         return this.renderSummaryView()
+      case 'convert':
+        return this.renderConvertView()
+      case 'buy':
+        return this.renderBuyView()
       default:
         return this.renderSummaryView()
     }
@@ -1156,9 +1145,13 @@ class Binance extends React.PureComponent<Props, State> {
             {getLocale('binanceWidgetBuy')}
           </NavigationItem>
         </NavigationBar>
-        <SelectedView hideOverflow={!!hideOverflow}>
-          {this.renderSelectedView()}
-        </SelectedView>
+        {
+          selectedView === 'convert' || selectedView === 'buy'
+          ? this.renderSelectedView()
+          : <SelectedView hideOverflow={!!hideOverflow}>
+              {this.renderSelectedView()}
+            </SelectedView>
+        }
       </>
     )
   }
@@ -1178,6 +1171,7 @@ class Binance extends React.PureComponent<Props, State> {
     } = this.state
     const isUS = userTLD === 'us'
     const currencies = this.getCurrencyList()
+    const ButtonComponent = userAuthed ? ActionButton : ConnectButton
 
     return (
       <>
@@ -1282,16 +1276,9 @@ class Binance extends React.PureComponent<Props, State> {
           }
         </BuyPromptWrapper>
         <ActionsWrapper isFirstView={!userAuthed}>
-          <ConnectButton onClick={onBuyCrypto.bind(this, initialAsset, initialAmount, initialFiat)}>
+          <ButtonComponent onClick={onBuyCrypto.bind(this, initialAsset, initialAmount, initialFiat)}>
             {`${getLocale('binanceWidgetBuy')} ${initialAsset}`}
-          </ConnectButton>
-          {
-            userAuthed
-            ? <DismissAction onClick={this.setSelectedView.bind(this, 'deposit')}>
-                {'Cancel'}
-              </DismissAction>
-            : null
-          }
+          </ButtonComponent>
           {
             !userAuthed && !isUS
             ? <ConnectAction onClick={this.connectBinance}>
@@ -1337,14 +1324,14 @@ class Binance extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { showContent } = this.props
+    const { showContent, userAuthed } = this.props
 
     if (!showContent) {
       return this.renderTitleTab()
     }
 
     return (
-      <WidgetWrapper onClick={this.unpersistDropdowns}>
+      <WidgetWrapper userAuthed={userAuthed} onClick={this.unpersistDropdowns}>
         {
           this.renderIndexView()
           ? this.renderIndexView()

diff --git a/components/brave_new_tab_ui/components/default/binance/style.ts b/components/brave_new_tab_ui/components/default/binance/style.ts
@@ -21,17 +21,19 @@ interface StyleProps {
   hideBalance?: boolean
   isFirstView?: boolean
   hideOverflow?: boolean
+  userAuthed?: boolean
   position?: 'left' | 'right'
 }
 
-export const WidgetWrapper = styled<{}, 'div'>('div')`
+export const WidgetWrapper = styled<StyleProps, 'div'>('div')`
   color: white;
-  padding: 6px 20px 12px 20px;
+  padding: 6px 15px 12px 15px;
   border-radius: 6px;
   position: relative;
   font-family: ${p => p.theme.fontFamily.body};
   overflow: hidden;
   min-width: 284px;
+  min-height: ${p => p.userAuthed ? '360px' : 'initial'};
   background-image: linear-gradient(140deg, #1F2327 0%, #000000 85%);
 `
 
@@ -188,17 +190,17 @@ export const ConnectButton = styled<StyleProps, 'a'>('a')`
   }
 `
 
-export const ConvertButton = styled<{}, 'button'>('button')`
+export const ActionButton = styled<{}, 'button'>('button')`
   font-size: 13px;
   font-weight: bold;
   border-radius: 20px;
   width: 100%;
   background: #D9B227;
   border: 0;
-  padding: 10px 65px;
+  padding: 10px 60px;
   cursor: pointer;
   color: #000;
-  margin-bottom: -10px;
+  margin-top: 20px;
 `
 
 export const BinanceIcon = styled<{}, 'div'>('div')`
@@ -239,7 +241,7 @@ export const TLDSwitch = styled<StyleProps, 'div'>('div')`
 
 export const NavigationBar = styled<{}, 'div'>('div')`
   height: 30px;
-  margin-top: 10px;
+  margin-top: 15px;
 `
 
 export const NavigationItem = styled<StyleProps, 'div'>('div')`
@@ -264,7 +266,7 @@ export const NavigationItem = styled<StyleProps, 'div'>('div')`
 export const SelectedView = styled<StyleProps, 'div'>('div')`
   border: 1px solid rgb(70, 70, 70);
   overflow-y: ${p => p.hideOverflow ? 'hidden' : 'scroll'};
-  height: 170px;
+  height: 260px;
   width: 250px;
   margin-left: 4px;
 `
@@ -526,12 +528,6 @@ export const BuySellButton = styled(ConnectButton)`
   background: ${p => p.isBuy ? '#3BB260' : '#DD5353'};
 `
 
-export const AvailableLabel = styled<{}, 'span'>('span')`
-  float: right;
-  margin-top: -27px;
-  font-size: 13px;
-`
-
 export const ConvertLabel = styled<{}, 'span'>('span')`
   float: left;
   width: 45%;
@@ -624,7 +620,7 @@ export const Balance = styled<StyleProps, 'span'>('span')`
 export const Converted = styled<StyleProps, 'span'>('span')`
   display: block;
   font-size: ${p => p.isBTC ? '16' : '14'}px;
-  color: #7d7d7d;
+  color: rgb(95, 95, 95);
   margin-left: ${p => p.isBTC ? 0 : 10}px;
   -webkit-filter: blur(${p => p.hideBalance ? 10 : 0}px);
 `