aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/payment_method.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/payment_method.tsx')
-rw-r--r--packages/instant/src/components/payment_method.tsx30
1 files changed, 21 insertions, 9 deletions
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 4d3daff62..70ad1f96e 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -4,7 +4,9 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
import { PaymentMethodDropdown } from './payment_method_dropdown';
+import { Circle } from './ui/circle';
import { Container } from './ui/container';
+import { Flex } from './ui/flex';
import { Text } from './ui/text';
export interface PaymentMethodProps {}
@@ -14,15 +16,25 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
return (
<Container padding="20px" width="100%">
<Container marginBottom="10px">
- <Text
- letterSpacing="1px"
- fontColor={ColorOption.primaryColor}
- fontWeight={600}
- textTransform="uppercase"
- fontSize="14px"
- >
- Payment Method
- </Text>
+ <Flex justify="space-between">
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.primaryColor}
+ fontWeight={600}
+ textTransform="uppercase"
+ fontSize="14px"
+ >
+ Payment Method
+ </Text>
+ <Flex>
+ <Circle color={ColorOption.green} diameter={8} />
+ <Container marginLeft="3px">
+ <Text fontColor={ColorOption.darkGrey} fontSize="12px">
+ MetaMask
+ </Text>
+ </Container>
+ </Flex>
+ </Flex>
</Container>
<PaymentMethodDropdown />
</Container>