Merge pull request #3563 from brave/fix-6219

Removes unneeded mobile UI code
brave · Sep 30, 2019 · 97ba216 · 97ba216
2 parents 4758fa7 + 77160f1
commit 97ba216
Show file tree

Hide file tree

Showing 12 changed files with 20 additions and 595 deletions.
diff --git a/components/brave_rewards/resources/ui/components/amount/index.tsx b/components/brave_rewards/resources/ui/components/amount/index.tsx
@@ -15,7 +15,6 @@ export interface Props {
   selected?: boolean
   type?: 'big' | 'small'
   currency?: string
-  isMobile?: boolean
 }
 
 export default class Amount extends React.PureComponent<Props, {}> {
@@ -25,20 +24,16 @@ export default class Amount extends React.PureComponent<Props, {}> {
     converted: 0
   }
 
-  getAboutText = (isMobile?: boolean) => {
-    return isMobile ? '' : getLocale('about')
-  }
-
   render () {
-    const { id, onSelect, amount, selected, type, converted, currency, isMobile } = this.props
+    const { id, onSelect, amount, selected, type, converted, currency } = this.props
 
     return (
-      <StyledWrapper id={id} onClick={onSelect.bind(this, amount)} isMobile={isMobile} data-test-id={'amount-wrapper'}>
-        <StyledAmount selected={selected} type={type} isMobile={isMobile}>
-          <StyledLogo isMobile={isMobile}><BatColorIcon /></StyledLogo><StyledNumber>{amount}</StyledNumber> <StyledTokens>{type === 'big' ? 'BAT' : null}</StyledTokens>
+      <StyledWrapper id={id} onClick={onSelect.bind(this, amount)} data-test-id={'amount-wrapper'}>
+        <StyledAmount selected={selected} type={type}>
+          <StyledLogo><BatColorIcon /></StyledLogo><StyledNumber>{amount}</StyledNumber> <StyledTokens>{type === 'big' ? 'BAT' : null}</StyledTokens>
         </StyledAmount>
-        <StyledConverted selected={selected} type={type} isMobile={isMobile}>
-          {this.getAboutText(isMobile)} {converted} {currency}
+        <StyledConverted selected={selected} type={type}>
+          {getLocale('about')} {converted} {currency}
         </StyledConverted>
       </StyledWrapper>
     )

diff --git a/components/brave_rewards/resources/ui/components/amount/style.ts b/components/brave_rewards/resources/ui/components/amount/style.ts
@@ -12,9 +12,9 @@ export const StyledWrapper = styled<Partial<Props>, 'button'>('button')`
   background: none;
   padding: 0;
   cursor: pointer;
-  display: ${p => p.isMobile ? 'block' : 'flex'};
+  display: flex;
   align-items: center;
-  margin: ${p => p.isMobile ? '0 auto 8px auto' : '0 0 8px 0'};
+  margin: 0 0 8px 0;
 `
 
 export const StyledAmount = styled<Partial<Props>, 'div'>('div')`
@@ -26,12 +26,11 @@ export const StyledAmount = styled<Partial<Props>, 'div'>('div')`
   vertical-align: baseline;
   padding: ${p => p.type === 'big' ? '0 16px' : '0 12px'};
   min-height: ${p => p.type === 'big' ? 40 : 32}px;
-  min-width: ${p => p.isMobile ? '100px' : p.type === 'big' ? '118px' : '82px'};
-  margin-right: ${p => p.isMobile ? 0 : 12}px;
+  min-width: ${p => p.type === 'big' ? '118px' : '82px'};
+  margin-right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: ${p => p.isMobile ? 5 : 0}px;
 `
 
 export const StyledTokens = styled<{}, 'div'>('div')`
@@ -44,14 +43,14 @@ export const StyledNumber = styled.span`
 
 export const StyledLogo = styled<Partial<Props>, 'div'>('div')`
   margin-right: 6px;
-  width: ${p => p.isMobile ? 20 : 23}px;
+  width: 23px;
 `
 
 export const StyledConverted = styled<Partial<Props>, 'div'>('div')`
   vertical-align: baseline;
   opacity: ${p => p.selected ? 1 : 0.4};
   font-size: ${p => p.type === 'big' ? '12px' : '10px'};
   color: #ffffff;
-  display: ${p => p.isMobile ? 'block' : 'inline-block'};
+  display: inline-block;
   font-weight: 500;
 `
diff --git a/components/brave_rewards/resources/ui/components/donate/index.tsx b/components/brave_rewards/resources/ui/components/donate/index.tsx
@@ -43,7 +43,6 @@ export interface Props {
   id?: string
   donateType: DonateType
   children?: React.ReactNode
-  isMobile?: boolean
   addFundsLink?: string
   type: BannerType
   nextContribution?: string
@@ -108,7 +107,6 @@ export default class Donate extends React.PureComponent<Props, State> {
       title,
       currentAmount,
       donateType,
-      isMobile,
       addFundsLink,
       type,
       nextContribution
@@ -119,15 +117,14 @@ export default class Donate extends React.PureComponent<Props, State> {
     const SendButton = isMonthly ? StyledMonthlySendButton : StyledSendButton
 
     return (
-      <StyledWrapper donateType={donateType} disabled={disabled} isMobile={isMobile}>
-        <StyledContent id={id} isMobile={isMobile}>
-          <StyledDonationTitle isMobile={isMobile}>{title}</StyledDonationTitle>
-            <StyledAmountsWrapper isMobile={isMobile}>
+      <StyledWrapper donateType={donateType} disabled={disabled}>
+        <StyledContent id={id}>
+          <StyledDonationTitle>{title}</StyledDonationTitle>
+            <StyledAmountsWrapper>
               {
                 donationAmounts && donationAmounts.map((donation: Donation) => {
                   return <div key={`${id}-tip-${donation.tokens}`}>
                     <Amount
-                      isMobile={isMobile}
                       amount={donation.tokens}
                       selected={donation.tokens === currentAmount.toString()}
                       onSelect={this.onAmountChange}
@@ -142,7 +139,7 @@ export default class Donate extends React.PureComponent<Props, State> {
         </StyledContent>
 
         <StyledSend onClick={this.validateDonation} data-test-id={'send-tip-button'} monthly={isMonthly}>
-          <StyledButtonWrapper isMobile={isMobile}>
+          <StyledButtonWrapper>
             <SendButton>
               <StyledIconSend disabled={disabled} donateType={donateType} monthly={isMonthly}>
                 <SendIcon />

diff --git a/components/brave_rewards/resources/ui/components/donate/style.ts b/components/brave_rewards/resources/ui/components/donate/style.ts
@@ -18,7 +18,6 @@ interface Theme {
 interface StyleProps {
   disabled?: boolean
   donateType?: DonateType
-  isMobile?: boolean
   monthly?: boolean
 }
 
@@ -51,21 +50,6 @@ const getStyle = (p: StyleProps) => {
   `
 }
 
-const getAmountStyle = (isMobile?: boolean) => {
-  if (!isMobile) {
-    return null
-  }
-
-  return css`
-    display: grid;
-    grid-gap: 0px;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: center;
-    justify-content: center;
-    padding: 0px 10px;
-  `
-}
-
 const getIconColor = (p: StyleProps) => {
   if (p.monthly) {
     return palette.orange500
@@ -81,26 +65,23 @@ const getIconColor = (p: StyleProps) => {
 export const StyledWrapper = styled<StyleProps, 'div'>('div')`
   position: relative;
   font-family: ${p => p.theme.fontFamily.body};
-  margin: ${p => p.isMobile ? '0 auto 8px auto' : 0}px
   ${getStyle}
 `
 
 export const StyledContent = styled<StyleProps, 'div'>('div')`
-  margin-top: ${p => p.isMobile ? -30 : 0}px;
-  padding: ${p => p.isMobile ? '0px' : 'var(--donate-content-padding)'};
+  padding: var(--donate-content-padding);
 `
 
 export const StyledDonationTitle = styled<StyleProps, 'div'>('div')`
   font-size: 16px;
   font-weight: 600;
   line-height: 1.75;
   color: #fff;
-  margin-bottom: ${p => p.isMobile ? 20 : 14}px;
+  margin-bottom: 14px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 167px;
-  padding-left: ${p => p.isMobile ? 20 : 0}px;
 `
 
 export const StyledSend = styled<StyleProps, 'div'>('div')`
@@ -143,7 +124,7 @@ export const StyledMonthlySendButton = styled(StyledSendButton)`
 
 export const StyledButtonWrapper = styled<StyleProps, 'div'>('div')`
   display: block;
-  width: ${p => p.isMobile ? 190 : 245}px;
+  width: 245px;
   margin: 0 auto;
 `
 
@@ -189,7 +170,6 @@ export const StyledFundsText = styled<{}, 'div'>('div')`
 export const StyledAmountsWrapper = styled<StyleProps, 'div'>('div')`
   width: 100%;
   display: block;
-  ${p => getAmountStyle(p.isMobile)}
 `
 
 export const StyledContributionWrapper = styled<{}, 'div'>('div')`

diff --git a/components/brave_rewards/resources/ui/components/index.ts b/components/brave_rewards/resources/ui/components/index.ts
@@ -24,7 +24,6 @@ import ListToken from './listToken'
 import MainToggle from './mainToggle'
 import MediaBox from './mediaBox'
 import ModalActivity from './modalActivity'
-import ModalAddFunds from './modalAddFunds'
 import ModalBackupRestore from './modalBackupRestore'
 import ModalContribute from './modalContribute'
 import ModalDonation from './modalDonation'
@@ -84,7 +83,6 @@ export {
   MainToggle,
   MediaBox,
   ModalActivity,
-  ModalAddFunds,
   ModalBackupRestore,
   ModalContribute,
   ModalDonation,

diff --git a/components/brave_rewards/resources/ui/components/modalAddFunds/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/modalAddFunds/__snapshots__/spec.tsx.snap