diff options
author | Sebastian <sebasjm@gmail.com> | 2021-09-08 15:30:32 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-09-08 15:35:44 -0300 |
commit | 217f34397f95fc988280eee9c376efe0781c69ea (patch) | |
tree | 8cfb4011a7ddcb7409b7617ec8ac1425d08b1512 /packages/taler-wallet-webextension/src/components | |
parent | a72ec5971e7c65e13a22627fc52983b75d4bea71 (diff) | |
download | wallet-core-217f34397f95fc988280eee9c376efe0781c69ea.tar.xz |
first approach to new design for withdraw
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Part.tsx | 16 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 19 |
2 files changed, 31 insertions, 4 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx new file mode 100644 index 000000000..87b16de87 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -0,0 +1,16 @@ +import { AmountLike } from "@gnu-taler/taler-util"; +import { ExtraLargeText, LargeText, SmallLightText } from "./styled"; + +export type Kind = 'positive' | 'negative' | 'neutral'; +interface Props { + title: string, text: AmountLike, kind: Kind, big?: boolean +} +export function Part({ text, title, kind, big }: Props) { + const Text = big ? ExtraLargeText : LargeText; + return <div style={{ margin: '1em' }}> + <SmallLightText style={{ margin: '.5em' }}>{title}</SmallLightText> + <Text style={{ color: kind == 'positive' ? 'green' : (kind == 'negative' ? 'red' : 'black') }}> + {text} + </Text> + </div> +} diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index de045584c..553726de4 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -12,6 +12,16 @@ export const PaymentStatus = styled.div<{ color: string }>` ` export const WalletAction = styled.section` + max-width: 50%; + + margin: auto; + height: 100%; + + & h1:first-child { + margin-top: 0; + } +` +export const WalletActionOld = styled.section` border: solid 5px black; border-radius: 10px; margin-left: auto; @@ -152,7 +162,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` ` -export const Button = styled.button` +export const Button = styled.button<{ upperCased?: boolean }>` display: inline-block; zoom: 1; line-height: normal; @@ -162,6 +172,7 @@ export const Button = styled.button` cursor: pointer; user-select: none; box-sizing: border-box; + text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; font-family: inherit; font-size: 100%; @@ -242,11 +253,11 @@ export const ButtonBoxPrimary = styled(ButtonBox)` ` export const ButtonSuccess = styled(ButtonVariant)` - background-color: rgb(28, 184, 65); + background-color: #388e3c; ` export const ButtonBoxSuccess = styled(ButtonBox)` - color: rgb(28, 184, 65); - border-color: rgb(28, 184, 65); + color: #388e3c; + border-color: #388e3c; ` export const ButtonWarning = styled(ButtonVariant)` |