refactor(Simulator/icons): update implementations

Author: TylerAPfledderer

src/components/Simulator/WalletHome/SendReceiveButton.tsx

@@ -41,8 +41,7 @@ export const SendReceiveButton = ({
       )}
     >
       {!isDisabled && isAnimated && <PulseAnimation type="circle" />}
-      {/* TODO: Remove important flags from class utils when simulator icons are migrated to tailwind */}
-      <Icon className="!size-4 !text-background md:!size-6" />
+      <Icon className="size-4 text-background md:size-6" />
     </div>
     <div className="relative">
       <p

src/components/Simulator/icons/EthTokenIcon.tsx

@@ -29,14 +29,14 @@ export const EthTokenIconGrayscale = createIconBase({
   className: "text-3xl/none fill-none",
   children: (
     <>
-      <circle cx="15" cy="15" r="15" fill="var(--eth-colors-body-light)" />
+      <circle cx="15" cy="15" r="15" fill="#fff" />
       <path
         d="M20.87 15.1868L14.9371 5L9 15.1868L14.9371 18.8115L20.87 15.1868Z"
-        fill="var(--eth-colors-body-medium)"
+        fill="var(--eth-colors-primary-action)"
       />
       <path
         d="M14.9996 25L20.9366 16.3523L14.9996 19.977L9.0625 16.3523L14.9996 25Z"
-        fill="var(--eth-colors-body-medium)"
+        fill="var(--eth-colors-primary-action)"
       />
     </>
   ),

src/components/Simulator/icons/EthTokenIconGrayscale.tsx

@@ -34,8 +34,7 @@ export const HomeScreen = ({ nav, ...props }: HomeScreenProps) => {
             exit={{ opacity: 0 }}
             onClick={nav.progressStepper}
           >
-            {/* TODO: remove important flag from classes when icons are migrated */}
-            <EthGlyphIcon className="!size-[1em] !text-2xl !text-background sm:!text-3xl" />
+            <EthGlyphIcon className="size-[1em] text-2xl text-background sm:text-3xl" />
           </motion.button>
         ) : (
           <motion.div

src/components/Simulator/screens/CreateAccount/HomeScreen.tsx

@@ -13,8 +13,7 @@ export const WelcomeScreen = () => (
     animate={{ opacity: 1 }}
     transition={{ duration: 0.8 }}
   >
-    {/* TODO: remove important flag from classes when icons are migrated */}
-    <EthGlyphIcon className="!my-4 !h-[110px] !w-auto !text-body md:!h-[190px]" />
+    <EthGlyphIcon className="my-4 h-[110px] w-auto text-body md:h-[190px]" />
     <p className="px-4 text-center text-2xl leading-8 md:px-8">
       Welcome to
       <span className="block font-bold">wallet simulator</span>

src/components/Simulator/screens/CreateAccount/WelcomeScreen.tsx

@@ -36,7 +36,7 @@ export const SendFromContacts = ({
           >
             <PiMagnifyingGlass />
             <span className="me-auto">Address or contacts</span>
-            <QrCodeIcon className="text-lg text-disabled" />
+            <QrCodeIcon className="text-lg" />
           </Button>
         </NotificationPopover>
       </div>