Fixes brave/brave-browser#11445 - Fixes Gemini widget connect button …

…for long translations
brave · Oct 7, 2020 · 2080e85 · 2080e85
1 parent c030664
commit 2080e85
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/components/brave_new_tab_ui/components/default/gemini/index.tsx b/components/brave_new_tab_ui/components/default/gemini/index.tsx
@@ -73,7 +73,8 @@ import {
   TradeInfoItem,
   TradeItemLabel,
   TradeValue,
-  StyledParty
+  StyledParty,
+  SmallButton
 } from './style'
 import {
   SearchIcon,
@@ -732,9 +733,9 @@ class Gemini extends React.PureComponent<Props, State> {
         <InvalidTitle>
           {`${getLocale(actionLabel)} ${quantity} ${currentTradeAsset}!`}
         </InvalidTitle>
-        <ConnectButton isSmall={true} onClick={this.finishTrade}>
+        <SmallButton onClick={this.finishTrade}>
           {getLocale('geminiWidgetContinue')}
-        </ConnectButton>
+        </SmallButton>
       </InvalidWrapper>
     )
   }
@@ -780,9 +781,9 @@ class Gemini extends React.PureComponent<Props, State> {
           </TradeInfoItem>
         </TradeInfoWrapper>
         <ActionsWrapper>
-          <ConnectButton isSmall={true} onClick={this.processTrade}>
+          <SmallButton onClick={this.processTrade}>
             {`${getLocale('geminiWidgetConfirm')} (${currentTradeExpiryTime}s)`}
-          </ConnectButton>
+          </SmallButton>
           <DismissAction onClick={this.cancelTrade}>
             {getLocale('geminiWidgetCancel')}
           </DismissAction>

diff --git a/components/brave_new_tab_ui/components/default/gemini/style.ts b/components/brave_new_tab_ui/components/default/gemini/style.ts
@@ -90,25 +90,29 @@ export const ActionsWrapper = styled<StyleProps, 'div'>('div')`
   text-align: center;
 `
 
-export const ConnectButton = styled<StyleProps, 'a'>('a')`
+export const ConnectButton = styled<StyleProps, 'button'>('button')`
   font-size: 14px;
   font-weight: bold;
   border-radius: 20px;
   width: 100%;
   background: #3D3D3D;
   border: 0;
-  padding: 10px 60px;
+  padding: 10px;
   cursor: pointer;
   color: #fff;
-  margin-bottom: 10px;
   text-decoration: none;
-  width: ${p => p.isSmall ? 50 : 100}%;
+  min-width: 245px;
 
   &:focus {
     outline: 0;
   }
 `
 
+export const SmallButton = styled(ConnectButton)`
+  width: 50%;
+  margin-bottom: 10px;
+`
+
 export const NavigationBar = styled<{}, 'div'>('div')`
   height: 30px;
   margin-top: 15px;