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 | 650 |
1 files changed, 473 insertions, 177 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 65c1f49e9..89678c74a 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021 Taler Systems S.A. + (C) 2022 Taler Systems S.A. GNU Taler is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software @@ -14,18 +14,18 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - // need to import linaria types, otherwise compiler will complain -import type * as Linaria from '@linaria/core'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +// import type * as Linaria from "@linaria/core"; -import { styled } from '@linaria/react'; +import { styled } from "@linaria/react"; export const PaymentStatus = styled.div<{ color: string }>` padding: 5px; border-radius: 5px; color: white; - background-color: ${p => p.color}; -` + background-color: ${(p: any) => p.color}; +`; export const WalletAction = styled.div` display: flex; @@ -35,19 +35,28 @@ export const WalletAction = styled.div` align-items: center; margin: auto; - height: 100%; - + & h1:first-child { - margin-top: 0; + margin-top: 0; + } + & > * { + width: 600px; } section { margin-bottom: 2em; - & button { + table td { + padding: 5px 5px; + } + table tr { + border-bottom: 1px solid black; + border-top: 1px solid black; + } + button { margin-right: 8px; margin-left: 8px; } } -` +`; export const WalletActionOld = styled.section` border: solid 5px black; border-radius: 10px; @@ -59,39 +68,53 @@ export const WalletActionOld = styled.section` margin: auto; height: 100%; - + & h1:first-child { - margin-top: 0; + margin-top: 0; } -` +`; + +export const Title = styled.h1` + font-size: 2em; + margin-top: 1em; + margin-bottom: 1em; +`; +export const SubTitle = styled.h1` + font-size: 1.5em; + margin-top: 1em; + margin-bottom: 1em; +`; export const DateSeparator = styled.div` color: gray; - margin: .2em; + margin: 0.2em; margin-top: 1em; -` +`; export const WalletBox = styled.div<{ noPadding?: boolean }>` display: flex; flex-direction: column; justify-content: space-between; align-items: center; & > * { - width: 400px; + width: 800px; } & > 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; + padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; + + margin-bottom: auto; overflow: auto; table td { - padding: 5px 10px; + padding: 5px 5px; } table tr { border-bottom: 1px solid black; border-top: 1px solid black; } + button { + margin-right: 8px; + margin-left: 8px; + } } & > header { @@ -122,31 +145,31 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` flex-direction: row; justify-content: space-between; display: flex; - background-color: #f7f7f7; - & button { + button { margin-right: 8px; margin-left: 8px; } } -` +`; export const Middle = styled.div` - justify-content: space-around; - display: flex; - flex-direction: column; - height: 100%; -` + justify-content: space-around; + display: flex; + flex-direction: column; + height: 100%; +`; export const PopupBox = styled.div<{ noPadding?: boolean }>` height: 290px; - width: 400px; + width: 500px; + overflow-y: visible; display: flex; flex-direction: column; justify-content: space-between; & > section { - padding: ${({ noPadding }) => noPadding ? '0px' : '8px'}; + padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; // this margin will send the section up when used with a header - margin-bottom: auto; + margin-bottom: auto; overflow-y: auto; table td { @@ -156,6 +179,10 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` border-bottom: 1px solid black; border-top: 1px solid black; } + button { + margin-right: 8px; + margin-left: 8px; + } } & > section[data-expanded] { @@ -196,36 +223,207 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` flex-direction: row; justify-content: space-between; display: flex; - & button { + button { margin-right: 8px; margin-left: 8px; } } +`; + +export const TableWithRoundRows = styled.table` + border-collapse: separate; + border-spacing: 0px 10px; + margin-top: -10px; + + td { + border: solid 1px #000; + border-style: solid none; + padding: 10px; + } + td:first-child { + border-left-style: solid; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + td:last-child { + border-right-style: solid; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; + } +`; + +const Tooltip = styled.div<{ content: string }>` + display: block; + position: relative; + + ::before { + position: absolute; + z-index: 1000001; + width: 0; + height: 0; + color: darkgray; + pointer-events: none; + content: ""; + border: 6px solid transparent; + + border-bottom-color: darkgray; + } + + ::after { + position: absolute; + z-index: 1000001; + padding: 0.5em 0.75em; + font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + -webkit-font-smoothing: subpixel-antialiased; + color: white; + text-align: center; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-wrap: break-word; + white-space: pre; + pointer-events: none; + content: attr(content); + background: darkgray; + border-radius: 6px; + } +`; + +export const TooltipBottom = styled(Tooltip)` + ::before { + top: auto; + right: 50%; + bottom: -7px; + margin-right: -6px; + } + ::after { + top: 100%; + right: -50%; + margin-top: 6px; + } +`; + +export const TooltipRight = styled(Tooltip)` + ::before { + top: 0px; + left: 16px; + transform: rotate(-90deg); + } + ::after { + top: -50%; + left: 28px; + margin-top: 6px; + } +`; + +export const TooltipLeft = styled(Tooltip)` + ::before { + top: 0px; + right: 16px; + transform: rotate(90deg); + } + ::after { + top: -50%; + right: 28px; + margin-top: 6px; + } +`; + +export const Overlay = styled.div` + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + cursor: pointer; +`; + +export const NotifyUpdateFadeOut = styled.div` + border: 2px solid red; + transition: all 0.4s ease-out; + animation: fadeout 1s forwards; + animation-delay: 0.1s; + @keyframes fadeout { + to { + border-color: #f5f5f5; + } + } +`; -` +export const CenteredDialog = styled.div` + position: absolute; + text-align: left; + + display: flex; + flex-direction: column; + justify-content: space-between; + + top: 50%; + left: 50%; + /* font-size: 50px; */ + color: black; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + cursor: initial; + background-color: white; + border-radius: 10px; + + max-height: 70%; + + & > header { + border-top-right-radius: 6px; + border-top-left-radius: 6px; + padding: 10px; + background-color: #f5f5f5; + border-bottom: 1px solid #dbdbdb; + font-weight: bold; + } + & > section { + padding: 10px; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + } + & > footer { + border-top: 1px solid #dbdbdb; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + padding: 10px; + display: flex; + justify-content: space-between; + } +`; export const Button = styled.button<{ upperCased?: boolean }>` display: inline-block; - zoom: 1; + /* zoom: 1; */ line-height: normal; white-space: nowrap; - vertical-align: middle; - text-align: center; + vertical-align: middle; //check this + /* text-align: center; */ cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; + text-transform: ${({ upperCased }: any) => + upperCased ? "uppercase" : "none"}; font-family: inherit; font-size: 100%; padding: 0.5em 1em; - color: #444; /* rgba not supported (IE 8) */ + /* color: #444; rgba not supported (IE 8) */ color: rgba(0, 0, 0, 0.8); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ - border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ - background-color: '#e6e6e6'; + /* border: none rgba(0, 0, 0, 0); IE9 + everything else */ + background-color: "#e6e6e6"; text-decoration: none; border-radius: 2px; + text-transform: uppercase; :focus { outline: 0; @@ -244,11 +442,11 @@ export const Button = styled.button<{ upperCased?: boolean }>` } :hover { - filter: alpha(opacity=90); + filter: alpha(opacity=80); background-image: linear-gradient( transparent, - rgba(0, 0, 0, 0.05) 40%, - rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.1) 40%, + rgba(0, 0, 0, 0.2) ); } `; @@ -258,12 +456,13 @@ export const Link = styled.a<{ upperCased?: boolean }>` zoom: 1; line-height: normal; white-space: nowrap; - vertical-align: middle; + /* vertical-align: middle; */ text-align: center; cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; + text-transform: ${({ upperCased }: any) => + upperCased ? "uppercase" : "none"}; font-family: inherit; font-size: 100%; @@ -304,11 +503,10 @@ export const FontIcon = styled.div` text-align: center; font-weight: bold; /* vertical-align: text-top; */ -` +`; export const ButtonBox = styled(Button)` - padding: .5em; - width: fit-content; - height: 2em; + padding: 8px; + /* font-size: small; */ & > ${FontIcon} { width: 1em; @@ -316,95 +514,107 @@ export const ButtonBox = styled(Button)` display: inline; line-height: 0px; } - background-color: transparent; + background-color: #f7f7f7; border: 1px solid; border-radius: 4px; border-color: black; color: black; -` - + /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */ + /* -webkit-border-horizontal-spacing: 0px; + -webkit-border-vertical-spacing: 0px; */ +`; const ButtonVariant = styled(Button)` color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -` +`; + +export const LinkDestructive = styled(Link)` + background-color: rgb(202, 60, 60); +`; -export const ButtonPrimary = styled(ButtonVariant)` - background-color: rgb(66, 184, 221); -` +export const LinkPrimary = styled(Link)` + color: black; +`; + +export const ButtonPrimary = styled(ButtonVariant) <{ small?: boolean }>` + font-size: ${({ small }: any) => (small ? "small" : "inherit")}; + background-color: #0042b2; + border-color: #0042b2; +`; export const ButtonBoxPrimary = styled(ButtonBox)` - color: rgb(66, 184, 221); - border-color: rgb(66, 184, 221); -` + color: #0042b2; + border-color: #0042b2; +`; export const ButtonSuccess = styled(ButtonVariant)` background-color: #388e3c; -` +`; export const LinkSuccess = styled(Link)` color: #388e3c; -` +`; export const ButtonBoxSuccess = styled(ButtonBox)` color: #388e3c; border-color: #388e3c; -` +`; export const ButtonWarning = styled(ButtonVariant)` background-color: rgb(223, 117, 20); -` +`; export const LinkWarning = styled(Link)` color: rgb(223, 117, 20); -` +`; export const ButtonBoxWarning = styled(ButtonBox)` color: rgb(223, 117, 20); border-color: rgb(223, 117, 20); -` +`; export const ButtonDestructive = styled(ButtonVariant)` background-color: rgb(202, 60, 60); -` +`; export const ButtonBoxDestructive = styled(ButtonBox)` color: rgb(202, 60, 60); border-color: rgb(202, 60, 60); -` - +`; export const BoldLight = styled.div` -color: gray; -font-weight: bold; -` + color: gray; + font-weight: bold; +`; export const Centered = styled.div` text-align: center; & > :not(:first-child) { margin-top: 15px; } -` +`; + export const Row = styled.div` display: flex; margin: 0.5em 0; justify-content: space-between; 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; margin: 0em 1em; justify-content: space-between; -` +`; export const RowBorderGray = styled(Row)` border: 1px solid gray; /* border-radius: 0.5em; */ -` +`; export const RowLightBorderGray = styled(Row2)` border: 1px solid lightgray; @@ -414,7 +624,7 @@ export const RowLightBorderGray = styled(Row2)` border: 1px solid lightgray; background-color: red; } -` +`; export const HistoryRow = styled.a` text-decoration: none; @@ -423,7 +633,7 @@ export const HistoryRow = styled.a` display: flex; justify-content: space-between; padding: 0.5em; - + border: 1px solid lightgray; border-top: 0px; @@ -439,7 +649,7 @@ export const HistoryRow = styled.a` margin-left: auto; align-self: center; } -` +`; export const ListOfProducts = styled.div` & > div > a > img { @@ -453,83 +663,113 @@ export const ListOfProducts = styled.div` margin-right: auto; margin-left: 1em; } -` +`; export const LightText = styled.div` color: gray; -` +`; + +export const SuccessText = styled.div` + color: #388e3c; +`; + +export const DestructiveText = styled.div` + color: rgb(202, 60, 60); +`; export const WarningText = styled.div` color: rgb(223, 117, 20); -` +`; export const SmallText = styled.div` - font-size: small; -` + font-size: small; +`; + +export const SmallBoldText = styled.div` + font-size: small; + font-weight: bold; +`; + export const LargeText = styled.div` - font-size: large; -` + font-size: large; +`; export const ExtraLargeText = styled.div` - font-size: x-large; -` + font-size: x-large; +`; export const SmallLightText = styled(SmallText)` color: gray; -` +`; export const CenteredText = styled.div` white-space: nowrap; text-align: center; -` +`; export const CenteredBoldText = styled(CenteredText)` white-space: nowrap; text-align: center; font-weight: bold; color: ${((props: any): any => String(props.color) as any) as any}; -` +`; export const Input = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; - color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } & input { display: block; padding: 5px; width: calc(100% - 4px - 10px); - border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + border-color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } -` +`; export const InputWithLabel = styled.div<{ invalid?: boolean }>` + /* display: flex; */ + & label { display: block; + font-weight: bold; + margin-left: 0.5em; padding: 5px; - color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } - & > div { - position: relative; - display: flex; - top: 0px; - bottom: 0px; - - & > div { - position: absolute; - background-color: lightgray; - padding: 5px; - margin: 2px; - } - & > input { - flex: 1; - padding: 5px; - border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} - } + & div { + line-height: 24px; + display: flex; + } + & div > span { + background-color: lightgray; + box-sizing: border-box; + border-bottom-left-radius: 0.25em; + border-top-left-radius: 0.25em; + height: 2em; + display: inline-block; + padding-left: 0.5em; + padding-right: 0.5em; + align-items: center; + display: flex; + } + & input { + border-width: 1px; + box-sizing: border-box; + height: 2em; + /* border-color: lightgray; */ + border-bottom-right-radius: 0.25em; + border-top-right-radius: 0.25em; + border-color: ${({ invalid }: any) => (!invalid ? "lightgray" : "red")}; } -` + margin-bottom: 16px; +`; + +export const ErrorText = styled.div` + color: red; +`; export const ErrorBox = styled.div` border: 2px solid #f5c6cb; @@ -539,6 +779,7 @@ export const ErrorBox = styled.div` flex-direction: column; /* margin: 0.5em; */ padding: 1em; + margin: 1em; /* width: 100%; */ color: #721c24; background: #f8d7da; @@ -555,49 +796,105 @@ export const ErrorBox = styled.div` width: 28px; } } -` +`; + +export const RedBanner = styled.div` + width: 80%; + padding: 4px; + text-align: center; + background: red; + border: 1px solid #df3a3a; + border-radius: 4px; + font-weight: bold; + margin: 4px; +`; + +export const InfoBox = styled(ErrorBox)` + color: black; + background-color: #d1e7dd; + border-color: #badbcc; +`; export const SuccessBox = styled(ErrorBox)` color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; -` +`; export const WarningBox = styled(ErrorBox)` color: #664d03; background-color: #fff3cd; border-color: #ffecb5; -` +`; + +export const NavigationHeaderHolder = styled.div` + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + background-color: #0042b2; +`; -export const PopupNavigation = styled.div<{ devMode?: boolean }>` - background-color:#0042b2; +export const NavigationHeader = styled.div` + background-color: #0042b2; height: 35px; justify-content: space-around; display: flex; - & > div { - width: 400px; + & { + width: 500px; } - & > div > a { + & > a, + & > div { color: #f8faf7; display: inline-block; - width: calc(400px / ${({ devMode }) => !devMode ? 4 : 5}); + width: 100%; text-align: center; text-decoration: none; vertical-align: middle; line-height: 35px; } - & > div > a.active { + & > a.active { background-color: #f8faf7; color: #0042b2; font-weight: bold; } `; -export const NiceSelect = styled.div` +interface SvgIconProps { + title: string; + color: string; + onClick?: any; + transform?: string; +} +export const SvgIcon = styled.div<SvgIconProps>` + & > svg { + fill: ${({ color }: any) => color}; + transform: ${({ transform }: any) => (transform ? transform : "")}; + } + /* width: 24px; + height: 24px; */ + margin-left: 8px; + margin-right: 8px; + display: inline; + padding: 4px; + cursor: ${({ onClick }: any) => (onClick ? "pointer" : "inherit")}; +`; + +export const Icon = styled.div` + background-color: gray; + width: 24px; + height: 24px; + margin-left: 8px; + margin-right: 8px; + padding: 4px; +`; + +const image = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`; +export const NiceSelect = styled.div` & > select { -webkit-appearance: none; -moz-appearance: none; @@ -605,11 +902,18 @@ export const NiceSelect = styled.div` appearance: none; outline: 0; box-shadow: none; - background-image: none; + + background-image: ${image}; + background-position: right 4px center; + background-repeat: no-repeat; + background-size: 32px 32px; + background-color: white; - flex: 1; - padding: 0.5em 1em; + border-radius: 0.25rem; + font-size: 1em; + padding: 8px 32px 8px 8px; + /* 0.5em 3em 0.5em 1em; */ cursor: pointer; } @@ -617,29 +921,8 @@ export const NiceSelect = styled.div` display: flex; /* width: 10em; */ overflow: hidden; - border-radius: .25em; - - &::after { - content: '\u25BC'; - position: absolute; - top: 0; - right: 0; - padding: 0.5em 1em; - cursor: pointer; - pointer-events: none; - -webkit-transition: .25s all ease; - -o-transition: .25s all ease; - transition: .25s all ease; - } - - &:hover::after { - /* color: #f39c12; */ - } - - &::-ms-expand { - display: none; - } -` + border-radius: 0.25em; +`; export const Outlined = styled.div` border: 2px solid #388e3c; @@ -647,13 +930,12 @@ export const Outlined = styled.div` width: fit-content; border-radius: 2px; color: #388e3c; -` +`; /* { width: "1.5em", height: "1.5em", verticalAlign: "middle" } */ export const CheckboxSuccess = styled.input` vertical-align: center; - -` +`; export const TermsSection = styled.a` border: 1px solid black; @@ -664,13 +946,13 @@ export const TermsSection = styled.a` text-decoration: none; color: inherit; flex-direction: column; - + display: flex; &[data-open="true"] { - display: flex; + display: flex; } &[data-open="false"] > *:not(:first-child) { - display: none; + display: none; } header { @@ -681,15 +963,15 @@ export const TermsSection = styled.a` height: auto; } - &[data-open="true"] header:after { - content: '\\2227'; + &[data-open="true"] header:after { + content: "\\2227"; } - &[data-open="false"] header:after { - content: '\\2228'; + &[data-open="false"] header:after { + content: "\\2228"; } `; -export const TermsOfService = styled.div` +export const TermsOfServiceStyle = styled.div` display: flex; flex-direction: column; text-align: left; @@ -712,13 +994,13 @@ export const TermsOfService = styled.div` padding: 1em; margin-top: 2px; margin-bottom: 2px; - + display: flex; &[data-open="true"] { - display: flex; + display: flex; } &[data-open="false"] > *:not(:first-child) { - display: none; + display: none; } header { @@ -729,27 +1011,27 @@ export const TermsOfService = styled.div` height: auto; } - &[data-open="true"] > header:after { - content: '\\2227'; + &[data-open="true"] > header:after { + content: "\\2227"; } - &[data-open="false"] > header:after { - content: '\\2228'; + &[data-open="false"] > header:after { + content: "\\2228"; } } - -` +`; export const StyledCheckboxLabel = styled.div` color: green; text-transform: uppercase; /* font-weight: bold; */ text-align: center; + cursor: pointer; span { - input { display: none; opacity: 0; width: 1em; height: 1em; + cursor: pointer; } div { display: inline-grid; @@ -758,7 +1040,7 @@ export const StyledCheckboxLabel = styled.div` margin-right: 1em; border-radius: 2px; border: 2px solid currentColor; - + svg { transition: transform 0.1s ease-in 25ms; transform: scale(0); @@ -768,6 +1050,7 @@ export const StyledCheckboxLabel = styled.div` label { padding: 0px; font-size: small; + cursor: pointer; } } @@ -776,12 +1059,25 @@ export const StyledCheckboxLabel = styled.div` } input:disabled + div { color: #959495; - }; + } input:disabled + div + label { color: #959495; - }; + } input:focus + div + label { box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor; } +`; -`
\ No newline at end of file +export const ParagraphClickable = styled.p` + cursor: pointer; + margin: 0px; + padding: 8px 16px; + :hover { + filter: alpha(opacity=80); + background-image: linear-gradient( + transparent, + rgba(0, 0, 0, 0.1) 40%, + rgba(0, 0, 0, 0.2) + ); + } +`; |