From dca9c346e3a9279fe71672313d5fefae11334dcf Mon Sep 17 00:00:00 2001
From: garrettbear <gwhisten@gmail.com>
Date: Tue, 3 Sep 2024 17:26:10 -0700
Subject: [PATCH] feat: Icon Button to use light theme in dark mode

---
 ui/components/ui/icon-button/icon-button.js   |  4 +++-
 .../ui/icon-button/icon-button.stories.tsx    |  8 ++++++--
 .../__snapshots__/asset-page.test.tsx.snap    | 19 +++++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js
index 326b77249950..69830128ebcd 100644
--- a/ui/components/ui/icon-button/icon-button.js
+++ b/ui/components/ui/icon-button/icon-button.js
@@ -31,7 +31,9 @@ export default function IconButton(props) {
     >
       {renderWrapper(
         <>
-          <div className="icon-button__circle">{Icon}</div>
+          <div data-theme="light" className="icon-button__circle">
+            {Icon}
+          </div>
           {label.length > 10 ? (
             <Tooltip title={label} position="bottom">
               <Text
diff --git a/ui/components/ui/icon-button/icon-button.stories.tsx b/ui/components/ui/icon-button/icon-button.stories.tsx
index ff49fb2bec17..c11bc58d5c14 100644
--- a/ui/components/ui/icon-button/icon-button.stories.tsx
+++ b/ui/components/ui/icon-button/icon-button.stories.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import IconButton from './icon-button';
-import { TextVariant } from '../../../helpers/constants/design-system';
+import {
+  IconColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
 import Tooltip from '../tooltip/tooltip';
+import { Icon, IconName } from '../../component-library';
 
 const meta: Meta<typeof IconButton> = {
   title: 'Components/UI/IconButton',
@@ -17,7 +21,7 @@ const meta: Meta<typeof IconButton> = {
   },
   args: {
     onClick: () => {},
-    Icon: <div>Icon</div>,
+    Icon: <Icon name={IconName.Add} color={IconColor.primaryInverse} />,
     disabled: false,
     label: 'Icon Button',
     tooltipRender: undefined,
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index 6bdd3d16c128..8a87acf3ecdd 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -40,6 +40,7 @@ exports[`AssetPage should render a native asset 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -57,6 +58,7 @@ exports[`AssetPage should render a native asset 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -74,6 +76,7 @@ exports[`AssetPage should render a native asset 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -92,6 +95,7 @@ exports[`AssetPage should render a native asset 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -111,6 +115,7 @@ exports[`AssetPage should render a native asset 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -129,6 +134,7 @@ exports[`AssetPage should render a native asset 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -147,6 +153,7 @@ exports[`AssetPage should render a native asset 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -342,6 +349,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -360,6 +368,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -378,6 +387,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -396,6 +406,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -413,6 +424,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -431,6 +443,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -819,6 +832,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -837,6 +851,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -855,6 +870,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -873,6 +889,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -890,6 +907,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
@@ -908,6 +926,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
         >
           <div
             class="icon-button__circle"
+            data-theme="light"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"