diff options
author | Sebastian <sebasjm@gmail.com> | 2022-02-16 15:15:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-02-16 15:16:21 -0300 |
commit | 3e92c2496868d7905b58be87925f5835965c6bda (patch) | |
tree | 6a9a7967c498cca283ea138766f5b49c9c41c73b /packages/taler-wallet-webextension/src/components | |
parent | bc1c33e1ce4ea760fb87de0dee66ca22cce9b7b7 (diff) | |
download | wallet-core-3e92c2496868d7905b58be87925f5835965c6bda.tar.xz |
settings new design
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
3 files changed, 51 insertions, 13 deletions
diff --git a/packages/taler-wallet-webextension/src/components/JustInDevMode.tsx b/packages/taler-wallet-webextension/src/components/JustInDevMode.tsx new file mode 100644 index 000000000..d447f87eb --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/JustInDevMode.tsx @@ -0,0 +1,12 @@ +import { ComponentChildren, Fragment, h, VNode } from "preact"; +import { useDevContext } from "../context/devContext"; + +export function JustInDevMode({ + children, +}: { + children: ComponentChildren; +}): VNode { + const { devMode } = useDevContext(); + if (!devMode) return <Fragment />; + return <Fragment>{children}</Fragment>; +} diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index 70d53640d..977ac557d 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -69,18 +69,21 @@ export function MultiActionButton({ ))} </div> )} - <ButtonPrimary + <ButtonBoxPrimary onClick={() => doClick(selected)} style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0, marginRight: 0, + maxWidth: 170, + overflowX: "hidden", + textOverflow: "ellipsis", }} > {label(selected)} - </ButtonPrimary> + </ButtonBoxPrimary> - <ButtonBoxPrimary + <ButtonPrimary onClick={() => setOpened((s) => !s)} style={{ marginLeft: 0, @@ -89,7 +92,7 @@ export function MultiActionButton({ }} > <img style={{ height: 14 }} src={arrowDown} /> - </ButtonBoxPrimary> + </ButtonPrimary> </div> ); } diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 5dd7318b7..a5ed64a83 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -391,6 +391,7 @@ export const Button = styled.button<{ upperCased?: boolean }>` background-color: "#e6e6e6"; text-decoration: none; border-radius: 2px; + text-transform: uppercase; :focus { outline: 0; @@ -507,12 +508,12 @@ export const LinkPrimary = styled(Link)` export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` font-size: ${({ small }) => (small ? "small" : "inherit")}; - background-color: rgb(66, 184, 221); - border-color: rgb(66, 184, 221); + 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)` @@ -776,31 +777,53 @@ export const WarningBox = styled(ErrorBox)` border-color: #ffecb5; `; -export const PopupNavigation = styled.div<{ devMode?: boolean }>` +import settingsIcon from "../../../static/img/settings_black_24dp.svg"; + +export const NavigationHeaderHolder = styled.div` + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + background-color: #0042b2; +`; + +export const NavigationHeader = styled.div` background-color: #0042b2; height: 35px; justify-content: space-around; display: flex; - & > div { + & { width: 500px; } - & > div > a { + & > a { color: #f8faf7; display: inline-block; - width: 100px; + width: 100%; text-align: center; text-decoration: none; vertical-align: middle; line-height: 35px; } - & > div > a.active { + & > a > div.settings-icon { + mask: url(${settingsIcon}) no-repeat center; + background-color: white; + width: 24px; + height: 24px; + margin-left: auto; + margin-right: 8px; + padding: 4px; + } + & > a.active { background-color: #f8faf7; color: #0042b2; font-weight: bold; } + & > a.active > div.settings-icon { + background-color: #0042b2; + } `; 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")`; |