Merge pull request #434 from brave/wallet-panel-select

Using HTML select for walletPanel
brave · Apr 8, 2019 · 1b1ee01 · 1b1ee01
2 parents d594010 + 716ae81
commit 1b1ee01
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 21 deletions.
diff --git a/src/features/rewards/walletPanel/__snapshots__/spec.tsx.snap b/src/features/rewards/walletPanel/__snapshots__/spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`WalletPanel tests basic tests matches the snapshot 1`] = `
 
 .c1 {
   min-height: 250px;
-  padding: 25px 30px 25px 30px;
+  padding: 15px 30px 20px 30px;
 }
 
 .c9 {

diff --git a/src/features/rewards/walletPanel/index.tsx b/src/features/rewards/walletPanel/index.tsx
@@ -24,13 +24,14 @@ import {
   StyleToggleTips,
   StyledNoticeWrapper,
   StyledNoticeLink,
-  StyledProfileWrapper
+  StyledProfileWrapper,
+  StyledSelect
 } from './style'
 
 // Components
-import { Select, Toggle } from '../../../components'
+import { Toggle } from '../../../components'
 
-import { RewardsButton, Tokens } from '../'
+import { RewardsButton } from '../'
 import ToggleTips from '../toggleTips/index'
 import Profile, { Provider } from '../profile/index'
 
@@ -53,7 +54,7 @@ export interface Props {
   toggleTips?: boolean
   donationAction: () => void
   onToggleTips: () => void
-  onAmountChange: () => void
+  onAmountChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
   onIncludeInAuto: () => void
   onRefreshPublisher?: () => void
   refreshingPublisher?: boolean
@@ -96,25 +97,27 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
 
     return (
       <StyledSelectWrapper>
-        <Select
-          floating={true}
-          showAllContents={true}
+        <StyledSelect
           value={monthlyAmount}
           onChange={this.props.onAmountChange}
         >
           {donationAmounts.map((token: Token, index: number) => {
+            const tokenValue = token.tokens.toString()
+            const paddingLength = tokenValue.length < 5
+              ? tokenValue.length === 4 ? 3 : 4
+              : 0
+            const padding = `${String.fromCharCode(160)}`.repeat(paddingLength)
+
             return (
-              <div key={`donationAmount-${index}`} data-value={token.tokens}>
-                <Tokens
-                  size={'small'}
-                  value={token.tokens}
-                  converted={token.converted}
-                  color={'donation'}
-                />
-              </div>
+              <option
+                key={`k-${token.tokens}`}
+                value={tokenValue}
+              >
+                {padding}{token.tokens} {getLocale('bat')} ({token.converted} USD)
+              </option>
             )
           })}
-        </Select>
+        </StyledSelect>
       </StyledSelectWrapper>
     )
   }

diff --git a/src/features/rewards/walletPanel/style.ts b/src/features/rewards/walletPanel/style.ts
@@ -20,7 +20,7 @@ export const StyledProfileWrapper = styled<{}, 'div'>('div')`
 
 export const StyledContainer = styled<{}, 'div'>('div')`
   min-height: 250px;
-  padding: 25px 30px 25px 30px;
+  padding: 15px 30px 20px 30px;
 ` as any
 
 export const StyledAttentionScore = styled<{}, 'span'>('span')`
@@ -69,7 +69,7 @@ export const StyledToggleWrapper = styled<{}, 'div'>('div')`
 ` as any
 
 export const StyledSelectWrapper = styled<{}, 'div'>('div')`
-  width: 80px;
+  width: 87px;
   margin: 2px 0px 0px;
 ` as any
 
@@ -107,3 +107,19 @@ export const StyledNoticeLink = styled<StyleProps, 'a'>('a')`
   text-decoration: none;
   display: inline-block;
 `
+
+export const StyledSelect = styled<StyleProps, 'select'>('select')`
+  width: 100%;
+  background: inherit;
+  height: 34px;
+  font-size: 14px;
+  border: none;
+  text-align: right;
+  color: ${palette.blurple500};
+  font-family: Poppins, sans-serif;
+  max-height: 20px;
+
+  &:focus {
+    outline: 0;
+  }
+`
diff --git a/stories/features/rewards/concepts.tsx b/stories/features/rewards/concepts.tsx
@@ -40,7 +40,9 @@ const doNothing = (id: string) => {
 const donationAmounts = [
   { tokens: '1.0', converted: '0.30', selected: false },
   { tokens: '5.0', converted: '1.50', selected: false },
-  { tokens: '10.0', converted: '3.00', selected: false }
+  { tokens: '10.0', converted: '3.00', selected: false },
+  { tokens: '50.0', converted: '15.00', selected: false },
+  { tokens: '100.0', converted: '30.00', selected: false }
 ]
 
 const defaultGrant = {
@@ -334,6 +336,10 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
       store.set({ notification: undefined })
     }
 
+    const onAmountChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      console.log(`New value is: ${event.target.value}`)
+    }
+
     const convertProbiToFixed = (probi: string, places: number = 1) => {
       return '0.0'
     }
@@ -402,7 +408,8 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
                 attentionScore={'17'}
                 onToggleTips={onToggleTips}
                 donationAction={doNothing}
-                onAmountChange={doNothing}
+                onAmountChange={onAmountChange}
+                donationAmounts={donationAmounts}
                 onIncludeInAuto={onIncludeInAuto}
                 refreshingPublisher={store.state.refreshingPublisher}
                 onRefreshPublisher={onRefreshPublisher}