settings new design

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")`;