Using HTML select for walletPanel

brave · Mar 21, 2019 · 8fc4814 · 8fc4814
1 parent d364c5e
commit 8fc4814
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 19 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: (value: string) => void
   onIncludeInAuto: () => void
   showUnVerified?: boolean
   moreLink?: string
@@ -80,6 +81,12 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
     )
   }
 
+  onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (this.props.onAmountChange) {
+      this.props.onAmountChange(event.target.value)
+    }
+  }
+
   donationDropDown () {
     const { donationAmounts } = this.props
     const monthlyAmount = this.props.monthlyAmount || '5.0'
@@ -90,25 +97,21 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
 
     return (
       <StyledSelectWrapper>
-        <Select
-          floating={true}
-          showAllContents={true}
+        <StyledSelect
           value={monthlyAmount}
-          onChange={this.props.onAmountChange}
+          onChange={this.onChange}
         >
           {donationAmounts.map((token: Token, index: number) => {
             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={token.tokens.toString()}
+              >
+                {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')`
@@ -107,3 +107,21 @@ 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: #696fdc;
+  font-family: Poppins, sans-serif;
+  max-width: 75px;
+  margin-left: 6px;
+  max-height: 20px;
+
+  &:focus {
+    outline: 0;
+  }
+`
diff --git a/stories/features/rewards/concepts.tsx b/stories/features/rewards/concepts.tsx
@@ -395,6 +395,7 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
                 onToggleTips={onToggleTips}
                 donationAction={doNothing}
                 onAmountChange={doNothing}
+                donationAmounts={donationAmounts}
                 onIncludeInAuto={onIncludeInAuto}
               />
               <WalletSummary