Merge pull request #1905 from oasisprotocol/lw/dense-settings-tabs

Denser tab buttons in settings
oasisprotocol · Apr 26, 2024 · 55082a2 · 55082a2
2 parents 9c0c525 + 28618de
commit 55082a2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/.changelog/1905.bugfix.md b/.changelog/1905.bugfix.md
@@ -0,0 +1 @@
+Denser tab buttons in settings
diff --git a/extension/src/popup.html b/extension/src/popup.html
@@ -5,7 +5,7 @@
     <title>ROSE Wallet Extension</title>
   </head>
   <body>
-    <div id="root" style="min-width: 360px; min-height: 600px"></div>
+    <div id="root" style="min-width: 375px; min-height: 600px"></div>
     <script type="module" src="./popup/popup.tsx"></script>
     <!--
       TODO: re-enable after supporting multiple extension popups with persistence

diff --git a/...app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap b/...app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
@@ -167,8 +167,8 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin-left: 6px;
+  margin-right: 6px;
   margin-top: 3px;
   margin-bottom: 3px;
   border-bottom: solid 2px #0500e2;
@@ -551,10 +551,20 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   flex-grow: 1;
 }
 
+.c11 > [role='tablist'] > button {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c11 > [role='tablist'] > button svg {
+  width: 14px;
+  margin-top: -5px;
+}
+
 .c16 {
   white-space: nowrap;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin-left: 6px;
+  margin-right: 6px;
   margin-top: 3px;
   margin-bottom: 3px;
 }
@@ -755,8 +765,8 @@ exports[`<AddContact  /> should match snapshot 1`] = `
 
 @media only screen and (max-width:768px) {
   .c15 {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: 3px;
+    margin-right: 3px;
   }
 }
 

diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
@@ -225,6 +225,9 @@ const grommetCustomTheme: ThemeType = {
         color: 'brand',
       },
     },
+    margin: {
+      horizontal: 'xsmall',
+    },
   },
   tabs: {
     header: {
@@ -242,6 +245,17 @@ const grommetCustomTheme: ThemeType = {
       display: flex;
       flex-direction: column;
       flex-grow: 1;
+
+      // Arrows displayed when overflowing should be smaller on small screens
+      & > [role='tablist'] > button {
+        padding-left: 0;
+        padding-right: 0;
+
+        svg {
+          width: 14px;
+          margin-top: -5px;
+        }
+      }
     `,
   },
   layer: {