diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/styled/index.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 66 |
1 files changed, 53 insertions, 13 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index cf7f3e06a..7f709db46 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -11,13 +11,32 @@ export const PaymentStatus = styled.div<{ color: string }>` background-color: ${p => p.color}; ` -export const PopupBox = styled.div` - height: calc(320px - 34px - 16px); +export const WalletPage = styled.section` + border: solid 5px black; + border-radius: 10px; + margin-left: auto; + margin-right: auto; + padding-top: 2em; + max-width: 50%; + padding: 2em; + + margin: auto; + height: 100%; + + & h1:first-child { + margin-top: 0; + } +` + +export const PopupBox = styled.div<{ noPadding?: boolean }>` + height: 290px; display: flex; flex-direction: column; justify-content: space-between; & > section { + padding-left: ${({ noPadding }) => noPadding ? '0px' : '8px'}; + padding-right: ${({ noPadding }) => noPadding ? '0px' : '8px'}; // this margin will send the section up when used with a header margin-bottom: auto; overflow: auto; @@ -35,6 +54,7 @@ export const PopupBox = styled.div` flex-direction: row; justify-content: space-between; display: flex; + padding: 8px; margin-bottom: 5px; & > div { @@ -44,15 +64,23 @@ export const PopupBox = styled.div` & > h3 { margin: 0px; } + + & > .title { + /* margin: 1em; */ + font-size: large; + color: #3c4e92; + } } & > footer { - padding-top: 5px; + padding-top: 8px; + padding-bottom: 8px; flex-direction: row; justify-content: space-between; display: flex; & button { - margin-left: 5px; + margin-right: 8px; + margin-left: 8px; } } @@ -145,6 +173,13 @@ export const Row = styled.div` padding: 0.5em; ` +export const Row2 = styled.div` + display: flex; + /* margin: 0.5em 0; */ + justify-content: space-between; + padding: 0.5em; +` + export const Column = styled.div` display: flex; flex-direction: column; @@ -154,10 +189,15 @@ export const Column = styled.div` export const RowBorderGray = styled(Row)` border: 1px solid gray; - border-radius: 0.5em; + /* border-radius: 0.5em; */ ` -export const HistoryRow = styled(RowBorderGray)` +export const RowLightBorderGray = styled(Row2)` + border: 1px solid lightgray; + /* border-radius: 0.5em; */ +` + +export const HistoryRow = styled(RowLightBorderGray)` & > ${Column}:last-of-type { margin-left: auto; align-self: center; @@ -244,24 +284,24 @@ export const ErrorBox = styled.div` } } ` -export const PopupNavigation = styled.div` - background-color: #033; +export const PopupNavigation = styled.div<{devMode?:boolean}>` + background-color:#0042b2; + height: 35px; & > a { color: #f8faf7; - padding-top: 0.7em; display: inline-block; - width: calc(400px / 5); - padding-bottom: 0.7em; + width: calc(400px / ${({ devMode }) => !devMode ? 4 : 5}); text-align: center; text-decoration: none; + vertical-align: middle; + line-height: 35px; } & > a.active { background-color: #f8faf7; - color: #000; + color: #0042b2; font-weight: bold; - } `; |