Merge pull request #359 from Concordium/fix-bad-margin

Remove bad margin from buttons
Concordium · Aug 28, 2023 · 01191c0 · 01191c0
2 parents 22749c8 + c1489b3
commit 01191c0
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git a/packages/browser-wallet/src/popup/pages/AddWeb3IdCredential/AddWeb3IdCredential.tsx b/packages/browser-wallet/src/popup/pages/AddWeb3IdCredential/AddWeb3IdCredential.tsx
@@ -220,7 +220,7 @@ export default function AddWeb3IdCredential({ onAllow, onReject }: Props) {
                         />
                     </>
                 )}
-                <div className="flex justify-center m-t-auto m-b-20">
+                <div className="flex justify-center m-t-auto">
                     <Button width="medium" className="m-r-10" onClick={withClose(onReject)}>
                         {t('reject')}
                     </Button>

diff --git a/packages/browser-wallet/src/popup/pages/Allowlist/Allowlist.scss b/packages/browser-wallet/src/popup/pages/Allowlist/Allowlist.scss
@@ -47,7 +47,7 @@
         width: 100%;
         padding: rem(10px);
         padding-top: rem(0);
-        background: #eaf0f5;
+        background-color: $color-allowlist-background;
         border: rem(1px) solid #dae4ee;
         border-radius: rem(10px) rem(10px) 0 0;
     }

diff --git a/packages/browser-wallet/src/popup/shared/PopupMenu/PopupMenu.scss b/packages/browser-wallet/src/popup/shared/PopupMenu/PopupMenu.scss
@@ -1,14 +1,15 @@
 .popup-menu {
     width: 200px;
-    box-shadow: 0 0 20px rgb(0 0 0 / 15%);
+    box-shadow: 0 0 20px rgb(0 0 0 / $color-shadow-alpha);
     border-radius: 16px;
     display: flex;
     flex-direction: column;
-    background-color: $color-white;
+    opacity: 0.95;
+    background-color: $color-bg;
 
     &__item {
         &:hover {
-            background-color: lightgray;
+            background-color: rgb(0 0 0 / $color-shadow-alpha);
         }
 
         &:first-child {
@@ -28,7 +29,7 @@
         height: 44px;
 
         &:not(:last-child) {
-            border-bottom: 1px solid lightgray;
+            border-bottom: 1px solid rgb(0 0 0 / $color-shadow-alpha);
         }
 
         &--disabled {
@@ -41,6 +42,10 @@
             display: flex;
             align-items: center;
             justify-content: center;
+
+            path {
+                fill: $color-text;
+            }
         }
     }
 }
diff --git a/packages/browser-wallet/src/popup/shared/Topbar/Topbar.scss b/packages/browser-wallet/src/popup/shared/Topbar/Topbar.scss
@@ -40,6 +40,8 @@
         &__show {
             z-index: 1;
             display: block;
+            border-radius: 16px;
+            backdrop-filter: blur(2px);
         }
     }
 }
diff --git a/packages/browser-wallet/src/popup/styles/config/_colors.scss b/packages/browser-wallet/src/popup/styles/config/_colors.scss
@@ -39,6 +39,8 @@ $color-main-header-light: #f4f5f5;
 $color-highlight-mainnet-light: #e0e9ed;
 $color-highlight-testnet-light: #dde9e5;
 $color-status-box-light: $color-off-black;
+$color-allowlist-background-light: #eaf0f5;
+$color-shadow-alpha-light: 15%;
 
 // Dark mode
 $color-bg-dark: $color-off-black;
@@ -51,6 +53,8 @@ $color-main-header-dark: #111;
 $color-highlight-mainnet-dark: #203e4f;
 $color-highlight-testnet-dark: #1a3d3e;
 $color-status-box-dark: #313131;
+$color-allowlist-background-dark: #171818;
+$color-shadow-alpha-dark: 85%;
 
 // Theme variables
 $color-bg: var(--color-bg, $color-bg-light); // off-white/off-black
@@ -74,3 +78,5 @@ $color-highlight-mainnet: var(--color-highlight-mainnet, $color-highlight-mainne
 $color-highlight-testnet: var(--color-highlight-testnet, $color-highlight-testnet-light);
 $color-highlight: var(--color-highlight, $color-highlight-testnet);
 $color-status-box: var(--color-status-box, $color-status-box-light);
+$color-allowlist-background: var(--color-allowlist-background, $color-allowlist-background-light);
+$color-shadow-alpha: var(--color-shadow-alpha, $color-shadow-alpha-light);
diff --git a/packages/browser-wallet/src/popup/styles/elements/_base.scss b/packages/browser-wallet/src/popup/styles/elements/_base.scss
@@ -66,6 +66,8 @@ body {
         --color-main-header: #{$color-main-header-dark};
         --color-disabled-input-bg: #{$color-main-header-dark};
         --color-status-box: #{$color-status-box-dark};
+        --color-allowlist-background: #{$color-allowlist-background-dark};
+        --color-shadow-alpha: #{$color-shadow-alpha-dark};
 
         .bg {
             background-image: url('../assets/images/bg-dark.jpg');