feat(Borrow): add coming soon cartridge

blockchain · Jan 24, 2020 · c9807c5 · c9807c5
1 parent 8a97938
commit c9807c5
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 175 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Cartridge/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/Cartridge/index.ts
@@ -0,0 +1,33 @@
+import { Cartridge } from '@blockchain-com/components'
+import styled from 'styled-components'
+
+export const CustomCartridge = styled(Cartridge)`
+  text-transform: none;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 14px;
+  margin-left: 0px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+`
+
+export const GreyCartridge = styled(CustomCartridge)`
+  background-color: ${props => props.theme.grey000};
+  color: ${props => props.theme.grey600};
+`
+export const BlueCartridge = styled(CustomCartridge)`
+  background-color: ${props => props.theme['blue000']};
+  color: ${props => props.theme['blue600']};
+`
+export const ErrorCartridge = styled(CustomCartridge)`
+  background-color: ${props => props.theme.red000};
+  color: ${props => props.theme.red600};
+`
+export const SuccessCartridge = styled(CustomCartridge)`
+  background-color: ${props => props.theme.green000};
+  color: ${props => props.theme.green600};
+`
+export const OrangeCartridge = styled(CustomCartridge)`
+  background-color: ${props => props.theme.orange000};
+  color: ${props => props.theme.orange600};
+`
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/AirdropInfo/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/AirdropInfo/model.tsx
@@ -1,5 +1,9 @@
 import { Button, Text } from 'blockchain-info-components'
-import { Cartridge } from '@blockchain-com/components'
+import {
+  ErrorCartridge,
+  GreyCartridge,
+  SuccessCartridge
+} from 'components/Cartridge'
 import { FormattedMessage } from 'react-intl'
 import { model } from 'data'
 import React from 'react'
@@ -11,31 +15,6 @@ const Copy = styled(Text)`
   margin-top: 8px;
   line-height: 1.5;
 `
-export const CustomCartridge = styled(Cartridge)`
-  text-transform: none;
-  border-radius: 4px;
-  padding: 6px 8px;
-  font-size: 14px;
-  margin-left: 0px;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-`
-export const GreyCartridge = styled(CustomCartridge)`
-  background-color: ${props => props.theme.grey000};
-  color: ${props => props.theme.grey600};
-`
-export const BlueCartridge = styled(CustomCartridge)`
-  background-color: ${props => props.theme['blue000']};
-  color: ${props => props.theme['blue600']};
-`
-export const ErrorCartridge = styled(CustomCartridge)`
-  background-color: ${props => props.theme.red000};
-  color: ${props => props.theme.red600};
-`
-export const SuccessCartridge = styled(CustomCartridge)`
-  background-color: ${props => props.theme.green000};
-  color: ${props => props.theme.green600};
-`
 
 export const AirdropInfoHeader = ({ kycState }) => {
   switch (kycState) {

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/PastAirdrops/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/PastAirdrops/model.tsx
@@ -2,7 +2,7 @@ import {
   BlueCartridge,
   GreyCartridge,
   SuccessCartridge
-} from '../AirdropInfo/model'
+} from 'components/Cartridge'
 import { CampaignInfoType } from 'data/types'
 import { FormattedMessage } from 'react-intl'
 import { Icon, Text } from 'blockchain-info-components'
@@ -58,7 +58,11 @@ export const Type = ({ campaignName }: CampaignInfoType) => {
   }
 }
 
-export const Status = ({ campaignName, campaignState, userCampaignState }: CampaignInfoType) => {
+export const Status = ({
+  campaignName,
+  campaignState,
+  userCampaignState
+}: CampaignInfoType) => {
   // Special case for BLOCKSTACK campaign
   // See convo: https://blockc.slack.com/archives/GSAK5CKD5/p1578309118000200
   if (campaignName === 'BLOCKSTACK') {
@@ -112,16 +116,16 @@ export const To = ({ campaignName, userCampaignState }: CampaignInfoType) => {
           My Stellar Wallet
         </Text>
       ) : (
-          <Text>-</Text>
-        )
+        <Text>-</Text>
+      )
     case 'BLOCKSTACK':
       return userCampaignState === 'REWARD_RECEIVED' ? (
         <Text size='14px' weight={500}>
           My Blockstack Wallet
         </Text>
       ) : (
-          <Text>-</Text>
-        )
+        <Text>-</Text>
+      )
     default:
       return <Text>-</Text>
   }