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/styled/index.tsx | |
parent | bc1c33e1ce4ea760fb87de0dee66ca22cce9b7b7 (diff) | |
download | wallet-core-3e92c2496868d7905b58be87925f5835965c6bda.tar.xz |
settings new design
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/styled/index.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 41 |
1 files changed, 32 insertions, 9 deletions
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")`; |