summaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/components
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2021-09-08 15:30:32 -0300
committerSebastian <sebasjm@gmail.com>2021-09-08 15:35:44 -0300
commit217f34397f95fc988280eee9c376efe0781c69ea (patch)
tree8cfb4011a7ddcb7409b7617ec8ac1425d08b1512 /packages/taler-wallet-webextension/src/components
parenta72ec5971e7c65e13a22627fc52983b75d4bea71 (diff)
downloadwallet-core-217f34397f95fc988280eee9c376efe0781c69ea.tar.gz
wallet-core-217f34397f95fc988280eee9c376efe0781c69ea.tar.bz2
wallet-core-217f34397f95fc988280eee9c376efe0781c69ea.zip
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.tsx16
-rw-r--r--packages/taler-wallet-webextension/src/components/styled/index.tsx19
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)`