diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/styled')
-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")`; |