diff --git a/src/features/rewards/walletPanel/__snapshots__/spec.tsx.snap b/src/features/rewards/walletPanel/__snapshots__/spec.tsx.snap index e78a98694..607ce62d2 100644 --- 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 index e00b95adc..36f72f48d 100644 --- 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) => void onIncludeInAuto: () => void onRefreshPublisher?: () => void refreshingPublisher?: boolean @@ -96,25 +97,27 @@ export default class WalletPanel extends React.PureComponent { return ( - + ) } diff --git a/src/features/rewards/walletPanel/style.ts b/src/features/rewards/walletPanel/style.ts index 7cf7c7b13..269c81c0d 100644 --- 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('a')` text-decoration: none; display: inline-block; ` + +export const StyledSelect = styled('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 index d8c57f490..14be9e633 100644 --- 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) => { + 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}