fix(28081): design tweak for network badge

MetaMask · Dec 18, 2024 · 573e5a7 · 573e5a7
1 parent 19f4861
commit 573e5a7
Show file tree

Hide file tree

Showing 15 changed files with 35 additions and 36 deletions.
diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Token Cell should match snapshot 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
           >
             <img
               alt="network logo"

diff --git a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap
@@ -172,7 +172,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `
           <rect
             fill="#F29602"
             height="32"
-            transform="translate(-2.81750896228304 4.951916544006229) rotate(230.4 16 16)"
+            transform="translate(-2.8175089622830405 4.951916544006229) rotate(230.4 16 16)"
             width="32"
             x="0"
             y="0"
@@ -476,7 +476,7 @@ exports[`SnapUIAddress renders legacy Ethereum address 1`] = `
           <rect
             fill="#F29602"
             height="32"
-            transform="translate(-2.81750896228304 4.951916544006229) rotate(230.4 16 16)"
+            transform="translate(-2.8175089622830405 4.951916544006229) rotate(230.4 16 16)"
             width="32"
             x="0"
             y="0"

diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -116,7 +116,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
                 style="bottom: -1px; right: 2px;"
               >
                 <div
-                  class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                  class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                 />
               </div>
             </div>
@@ -424,7 +424,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
                 style="bottom: -1px; right: 2px;"
               >
                 <div
-                  class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                  class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                 />
               </div>
             </div>

diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js
@@ -62,7 +62,7 @@ import {
   getMultichainShouldShowFiat,
 } from '../../../selectors/multichain';
 import { useMultichainAccountTotalFiatBalance } from '../../../hooks/useMultichainAccountTotalFiatBalance';
-import { ConnectedStatus } from '../connected-status/connected-status';
+import { ConnectedStatus } from '../connected-status';
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
 import { useTheme } from '../../../hooks/useTheme';

diff --git a/ui/components/multichain/badge-status/badge-status.tsx b/ui/components/multichain/badge-status/badge-status.tsx
@@ -74,7 +74,7 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
               backgroundColor={badgeBackgroundColor}
               borderRadius={BorderRadius.full}
               borderColor={badgeBorderColor}
-              borderWidth={isConnectedAndNotActive ? 2 : 4}
+              borderWidth={2}
             />
           }
         >

diff --git a/...ents/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap b/...ents/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap
@@ -159,7 +159,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                                 <rect
                                   fill="#FA4300"
                                   height="32"
-                                  transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                                  transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                                   width="32"
                                   x="0"
                                   y="0"
@@ -202,7 +202,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                                 <rect
                                   fill="#FA4300"
                                   height="32"
-                                  transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                                  transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                                   width="32"
                                   x="0"
                                   y="0"
@@ -232,7 +232,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                           style="bottom: -1px; right: 2px;"
                         >
                           <div
-                            class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                            class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                           />
                         </div>
                       </div>
@@ -261,7 +261,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                         <rect
                           fill="#FA4300"
                           height="32"
-                          transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                          transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                           width="32"
                           x="0"
                           y="0"
@@ -304,7 +304,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                         <rect
                           fill="#FA4300"
                           height="32"
-                          transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                          transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                           width="32"
                           x="0"
                           y="0"

diff --git a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
@@ -32,7 +32,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
             style="bottom: -1px; right: -4px; z-index: 1;"
           >
             <div
-              class="mm-box multichain-connected-site-menu__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
+              class="mm-box multichain-connected-site-menu__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
             />
           </div>
         </div>
@@ -74,7 +74,7 @@ exports[`Connected Site Menu should render the site menu in not connected state
             style="bottom: -1px; right: -4px; z-index: 1;"
           >
             <div
-              class="mm-box multichain-connected-site-menu__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
+              class="mm-box multichain-connected-site-menu__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
             />
           </div>
         </div>

diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js
@@ -90,7 +90,7 @@ export const ConnectedSiteMenu = ({
                   ? BorderColor.successDefault
                   : BackgroundColor.backgroundDefault
               }
-              borderWidth={isConnectedtoOtherAccountOrSnap ? 2 : 3}
+              borderWidth={2}
             />
           }
         >

diff --git a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap
@@ -171,7 +171,7 @@ exports[`Connections Content should render correctly 1`] = `
                         style="bottom: -1px; right: 2px;"
                       >
                         <div
-                          class="mm-box multichain-badge-status__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                          class="mm-box multichain-badge-status__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                         />
                       </div>
                     </div>

diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
@@ -348,7 +348,7 @@ exports[`SendPage render and initialization should render correctly even when a
                                 style="bottom: -1px; right: 2px;"
                               >
                                 <div
-                                  class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                                  class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                                 />
                               </div>
                             </div>

diff --git a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap
@@ -122,7 +122,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
                   style="bottom: -1px; right: 2px;"
                 >
                   <div
-                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                   />
                 </div>
               </div>
@@ -421,7 +421,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
                   style="bottom: -1px; right: 2px;"
                 >
                   <div
-                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                   />
                 </div>
               </div>
@@ -720,7 +720,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
                   style="bottom: -1px; right: 2px;"
                 >
                   <div
-                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                   />
                 </div>
               </div>
@@ -1028,7 +1028,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
                   style="bottom: -1px; right: 2px;"
                 >
                   <div
-                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                   />
                 </div>
               </div>
@@ -1327,7 +1327,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
                   style="bottom: -1px; right: 2px;"
                 >
                   <div
-                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                   />
                 </div>
               </div>
@@ -1639,7 +1639,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
                   style="bottom: -1px; right: 2px;"
                 >
                   <div
-                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                    class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                   />
                 </div>
               </div>
-Original file line number
+Diff line change
@@ Expand Up @@
                             style="bottom: -1px; right: 2px;"
                           >
                             <div
-                              class="mm-box multichain-badge-status__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
+                              class="mm-box multichain-badge-status__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                             />
                           </div>
                         </div>
@@ Expand Down @@