From 4e1b0dc44da2437b7e6ea8033efcb6066258c049 Mon Sep 17 00:00:00 2001
From: Matteo Scurati <matteo.scurati@gmail.com>
Date: Thu, 30 Jan 2025 16:39:04 +0100
Subject: [PATCH] fix: update segmented `tab` styling (#29652)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

This PR updates the style of the
`ui/components/ui/tabs/tabs.component.js` component and removes some
custom classes used to override the style in various parts of the site
(particularly on the home page and the notifications page). This ensures
a consistent style for the tabs.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29652?quickstart=1)

## **Related issues**

Original request:
https://github.com/MetaMask/metamask-extension/issues/26190

## **Manual testing steps**

The tabs tested are those indicated in this issue:
https://github.com/MetaMask/metamask-extension/issues/28910. However,
some of them seem to no longer be in use (for example, the “snap” tab in
the permissions page should no longer exist, as it now has its own
dedicated page).

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

### **After**

<img width="453" alt="Screenshot 2025-01-13 at 09 49 49"
src="https://github.com/user-attachments/assets/55aeaf12-fa5e-4c8c-8f4b-4ab9bfab29ff"
/>
<img width="366" alt="Screenshot 2025-01-12 at 23 28 37"
src="https://github.com/user-attachments/assets/935de0dc-e0dd-4439-8ec0-754ded9a256b"
/>
<img width="358" alt="Screenshot 2025-01-12 at 23 28 23"
src="https://github.com/user-attachments/assets/fa1cb8b8-97f4-483b-aedc-afdc91d9fb33"
/>
<img width="361" alt="Screenshot 2025-01-12 at 23 28 08"
src="https://github.com/user-attachments/assets/8d9b2414-57f9-48ba-99ec-80e48efe1379"
/>

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 ui/components/multichain/account-overview/index.scss   |  2 --
 .../pages/send/__snapshots__/send.test.js.snap         |  2 +-
 ui/components/ui/tabs/index.scss                       |  1 -
 ui/components/ui/tabs/tab/index.scss                   | 10 ++++++++++
 ui/components/ui/tabs/tab/tab.component.js             |  3 +++
 ui/components/ui/tabs/tabs.component.js                |  4 +++-
 .../confirm-transaction-base.test.js.snap              |  2 +-
 ui/pages/notifications/index.scss                      |  6 ------
 8 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/ui/components/multichain/account-overview/index.scss b/ui/components/multichain/account-overview/index.scss
index 7e83ff91665e..3d05d28be762 100644
--- a/ui/components/multichain/account-overview/index.scss
+++ b/ui/components/multichain/account-overview/index.scss
@@ -19,8 +19,6 @@
     @include design-system.H6;
 
     flex-grow: 1;
-    color: var(--color-icon-default);
-    font-weight: 500;
   }
 
   &__tab--active {
diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
index 26c1013eec87..a01ec0c1c96b 100644
--- a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
+++ b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
@@ -160,7 +160,7 @@ exports[`SendPage render and initialization should render correctly even when a
               class="box tabs box--flex-direction-row"
             >
               <ul
-                class="box tabs__list box--display-flex box--gap-1 box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
+                class="box tabs__list box--display-flex box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
               >
                 <li
                   class="box tab tab--active box--flex-direction-row"
diff --git a/ui/components/ui/tabs/index.scss b/ui/components/ui/tabs/index.scss
index cbeaba2892f1..93b93d60bc25 100644
--- a/ui/components/ui/tabs/index.scss
+++ b/ui/components/ui/tabs/index.scss
@@ -5,7 +5,6 @@
   -moz-transform: translateZ(0);
 
   &__list {
-    border-bottom: 1px solid var(--color-border-default);
     position: sticky;
     top: 0;
     z-index: 2;
diff --git a/ui/components/ui/tabs/tab/index.scss b/ui/components/ui/tabs/tab/index.scss
index 055fb551c2c6..09b2d48a2aaa 100644
--- a/ui/components/ui/tabs/tab/index.scss
+++ b/ui/components/ui/tabs/tab/index.scss
@@ -1,8 +1,18 @@
 .tab {
+  border-bottom: 2px solid var(--color-border-muted);
+  color: var(--color-text-muted);
+  font-weight: 500;
+
   button {
     min-width: 50px;
     background-color: unset;
     color: unset;
+    font-weight: 500;
+  }
+
+  &--single {
+    color: var(--color-text-default);
+    border-bottom: none;
   }
 
   &--active {
diff --git a/ui/components/ui/tabs/tab/tab.component.js b/ui/components/ui/tabs/tab/tab.component.js
index 9a954cddd4fd..c10ace4dd7f2 100644
--- a/ui/components/ui/tabs/tab/tab.component.js
+++ b/ui/components/ui/tabs/tab/tab.component.js
@@ -18,6 +18,7 @@ const Tab = (props) => {
     className,
     'data-testid': dataTestId,
     isActive,
+    isSingleTab,
     name,
     onClick,
     tabIndex,
@@ -32,6 +33,7 @@ const Tab = (props) => {
     <Box
       as="li"
       className={classnames('tab', className, {
+        'tab--single': isSingleTab,
         'tab--active': isActive,
         [activeClassName]: activeClassName && isActive,
       })}
@@ -64,6 +66,7 @@ Tab.propTypes = {
   className: PropTypes.string,
   'data-testid': PropTypes.string,
   isActive: PropTypes.bool, // required, but added using React.cloneElement
+  isSingleTab: PropTypes.bool, // required, but added using React.cloneElement
   name: PropTypes.node.isRequired,
   tabKey: PropTypes.string.isRequired, // for Tabs selection purpose
   onClick: PropTypes.func,
diff --git a/ui/components/ui/tabs/tabs.component.js b/ui/components/ui/tabs/tabs.component.js
index e96576711ceb..663de866ab8d 100644
--- a/ui/components/ui/tabs/tabs.component.js
+++ b/ui/components/ui/tabs/tabs.component.js
@@ -48,12 +48,14 @@ const Tabs = ({
 
     return React.Children.map(_getValidChildren(), (child, index) => {
       const tabKey = child?.props.tabKey;
+      const isSingleTab = numberOfTabs === 1;
       return (
         child &&
         React.cloneElement(child, {
           onClick: (idx) => handleTabClick(idx, tabKey),
           tabIndex: index,
           isActive: numberOfTabs > 1 && index === activeTabIndex,
+          isSingleTab,
         })
       );
     });
@@ -81,7 +83,7 @@ const Tabs = ({
         justifyContent={JustifyContent.flexStart}
         backgroundColor={BackgroundColor.backgroundDefault}
         className={classnames('tabs__list', tabsClassName)}
-        gap={1}
+        gap={0}
       >
         {renderTabs()}
       </Box>
diff --git a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 28045194b316..f82134ad2c3f 100644
--- a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -276,7 +276,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
         class="box tabs box--flex-direction-row"
       >
         <ul
-          class="box tabs__list box--display-flex box--gap-1 box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
+          class="box tabs__list box--display-flex box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
         >
           <li
             class="box tab confirm-page-container-content__tab tab--active box--flex-direction-row"
diff --git a/ui/pages/notifications/index.scss b/ui/pages/notifications/index.scss
index 7cdc7f6455b0..567846c7096b 100644
--- a/ui/pages/notifications/index.scss
+++ b/ui/pages/notifications/index.scss
@@ -13,12 +13,6 @@
     @include design-system.H6;
 
     flex-grow: 1;
-    color: var(--color-icon-default);
-    font-weight: 500;
-  }
-
-  &__tab--active {
-    color: var(--color-primary-default);
   }
 
   &__tab button {