From 76b08312b6e2358a50372f4d71992cd96ef34419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 19 Dec 2023 13:20:59 +0100
Subject: [PATCH] Replace `customStyle` property with `style`

---
 .../AccountsNotificationPanelAccounts.tsx     |  2 +-
 .../DAppConnection/DAppConnectionInfoBar.tsx  |  6 +---
 ui/components/NFTs/NFTCollection.tsx          |  4 +--
 ui/components/NFTs/NFTHover.tsx               | 10 +++----
 ui/components/NFTs/NFTImage.tsx               | 30 ++++++++++---------
 ui/components/NFTs/NFTListPortfolio.tsx       |  2 +-
 ui/components/NFTs/NFTPreview.tsx             |  2 +-
 ui/components/NFTs/NFTsExploreBanner.tsx      |  2 +-
 .../OnboardingOpenClaimFlowBanner.tsx         | 13 ++------
 ui/components/Overview/AccountList.tsx        | 10 +++----
 ui/components/Send/NFTCollectionAccordion.tsx |  4 +--
 ui/components/Send/NFTCollectionListItem.tsx  | 10 +++----
 ui/components/Shared/PriceDetails.tsx         |  4 +--
 ui/components/Shared/SharedAccordion.tsx      | 10 +++----
 ui/components/Shared/SharedBanner.tsx         | 29 ++++++------------
 ui/components/Shared/SharedCheckbox.tsx       | 12 ++++----
 ui/components/Shared/SharedDropDown.tsx       | 12 ++++----
 ui/components/Shared/SharedFileInput.tsx      |  8 ++---
 ui/components/Shared/SharedIcon.tsx           | 17 ++++-------
 .../Shared/SharedImageWithFallback.tsx        | 29 ++++++++++--------
 ui/components/Shared/SharedSkeletonLoader.tsx | 20 ++++++-------
 ui/components/Shared/SharedSlideUpMenu.tsx    |  8 ++---
 .../Shared/SharedSlideUpMenuPanel.tsx         |  2 +-
 ui/components/Shared/SharedTooltip.tsx        |  8 ++---
 .../DetailsPanel.tsx                          |  4 +--
 .../TransactionSignatureDetailsWarning.tsx    |  6 +---
 ui/components/Signing/index.tsx               |  2 +-
 ui/components/TopMenu/TopMenu.tsx             |  2 +-
 .../TopMenu/TopMenuProtocolListFooter.tsx     |  2 +-
 ui/components/Wallet/Banner/PortalBanner.tsx  | 23 ++++----------
 ui/components/Wallet/Banner/WalletBanner.tsx  |  6 +---
 .../UnverifiedAsset/UnverifiedAssetBanner.tsx |  8 ++---
 .../Wallet/WalletAccountBalanceControl.tsx    |  6 ++--
 .../Wallet/WalletActivityDetails.tsx          |  2 +-
 .../WalletAnalyticsNotificationBanner.tsx     |  6 ++--
 ui/components/Wallet/WalletHiddenAssets.tsx   |  2 +-
 ui/components/Wallet/WalletSubscapeLink.tsx   |  4 +--
 ui/pages/Abilities/AbilityCard.tsx            |  2 +-
 ui/pages/Abilities/AbilityFilter.tsx          |  2 +-
 ui/pages/Earn.tsx                             |  4 +--
 ui/pages/Earn/NotificationVaults.tsx          |  2 +-
 ui/pages/NewCustomNetworkRequest.tsx          |  2 +-
 .../Onboarding/Tabbed/AddWalletOptions.tsx    |  2 +-
 ui/pages/Settings.tsx                         |  6 ++--
 .../Settings/ConnectedWebsitesListItem.tsx    |  2 +-
 ui/pages/Settings/SettingsAddCustomAsset.tsx  | 10 +++----
 ui/pages/SingleAsset.tsx                      |  2 +-
 ui/pages/Swap.tsx                             |  4 +--
 ui/pages/Wallet.tsx                           |  2 +-
 49 files changed, 159 insertions(+), 208 deletions(-)

diff --git a/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx b/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx
index 8dc5703077..5b0815a284 100644
--- a/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx
+++ b/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx
@@ -195,7 +195,7 @@ function WalletTypeHeader({
             toggler={(toggle) => (
               <SharedIcon
                 color="var(--green-40)"
-                customStyles="cursor: pointer;"
+                style={{ cursor: "pointer" }}
                 width={24}
                 onClick={() => toggle()}
                 icon="settings.svg"
diff --git a/ui/components/DAppConnection/DAppConnectionInfoBar.tsx b/ui/components/DAppConnection/DAppConnectionInfoBar.tsx
index 6abd6edf3c..4527c18e4d 100644
--- a/ui/components/DAppConnection/DAppConnectionInfoBar.tsx
+++ b/ui/components/DAppConnection/DAppConnectionInfoBar.tsx
@@ -41,11 +41,7 @@ function DefaultConnectionPopover({ close }: PopoverProps): ReactElement {
           onClick={animateThenClose}
           color="var(--green-20)"
           hoverColor="var(--white)"
-          customStyles={`
-            position: absolute;
-            top: 16px;
-            right: 16px;
-          `}
+          style={{ position: "absolute", top: 16, right: 16 }}
         />
 
         <h3>{t("title")}</h3>
diff --git a/ui/components/NFTs/NFTCollection.tsx b/ui/components/NFTs/NFTCollection.tsx
index 7e59fbec21..8b68298dd9 100644
--- a/ui/components/NFTs/NFTCollection.tsx
+++ b/ui/components/NFTs/NFTCollection.tsx
@@ -133,7 +133,7 @@ export default function NFTCollection(props: {
             isLoaded={!isLoading && !!nfts.length}
             width={168}
             height={168}
-            customStyles="margin: 8px 0 34px;"
+            style={{ margin: "8px 0 34px" }}
           >
             {nfts.length === 1 ? (
               <NFTItem
@@ -164,7 +164,7 @@ export default function NFTCollection(props: {
                   isLoaded={!isUpdating}
                   width={168}
                   height={168}
-                  customStyles="margin: 8px 0;"
+                  style={{ margin: "8px 0" }}
                 />
                 <div ref={loadMoreRef} className="nft_load_more" />
               </>
diff --git a/ui/components/NFTs/NFTHover.tsx b/ui/components/NFTs/NFTHover.tsx
index 55857fc8f2..0440b900d6 100644
--- a/ui/components/NFTs/NFTHover.tsx
+++ b/ui/components/NFTs/NFTHover.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { ReactElement } from "react"
+import React, { CSSProperties, ReactElement } from "react"
 import { useTranslation } from "react-i18next"
 import { I18nKey } from "../../_locales/i18n"
 import SharedIcon from "../Shared/SharedIcon"
@@ -12,7 +12,7 @@ const icons: Record<
     background: string
     backgroundHover?: string
     size: number
-    style: string
+    style?: CSSProperties
   }
 > = {
   close: {
@@ -21,21 +21,19 @@ const icons: Record<
     background: "var(--green-40)",
     backgroundHover: "var(--green-20)",
     size: 12,
-    style: "",
   },
   expand: {
     icon: "chevron",
     label: "nfts.collectionHover.expand",
     background: "var(--success)",
     size: 12,
-    style: "margin-bottom: 3px;",
+    style: { marginBottom: 3 },
   },
   view: {
     icon: "eye",
     label: "nfts.collectionHover.view",
     background: "var(--trophy-gold)",
     size: 22,
-    style: "",
   },
 }
 
@@ -72,7 +70,7 @@ export default function NFTsHover(props: {
           icon={`${icon}@2x.png`}
           width={size}
           color="var(--hunter-green)"
-          customStyles={style}
+          style={style}
         />
       </div>
       <style jsx>{`
diff --git a/ui/components/NFTs/NFTImage.tsx b/ui/components/NFTs/NFTImage.tsx
index a2e832d4ac..b3469d91db 100644
--- a/ui/components/NFTs/NFTImage.tsx
+++ b/ui/components/NFTs/NFTImage.tsx
@@ -1,9 +1,21 @@
 import classNames from "classnames"
-import React, { ReactElement, useEffect, useState } from "react"
+import React, { CSSProperties, ReactElement, useEffect, useState } from "react"
 import noop from "../../utils/noop"
 
 export const noPreviewLink = "./images/no_preview.svg"
 
+type NFTIMageProps = {
+  width: number
+  height?: number
+  alt: string
+  src?: string
+  highResolutionSrc?: string
+  fit?: string
+  isBadge?: boolean
+  isZoomed?: boolean
+  style?: CSSProperties
+}
+
 export default function NFTImage({
   width,
   height,
@@ -13,18 +25,8 @@ export default function NFTImage({
   fit = "cover",
   isBadge = false,
   isZoomed = false,
-  customStyles = "",
-}: {
-  width: number
-  height?: number
-  alt: string
-  src?: string
-  highResolutionSrc?: string
-  fit?: string
-  isBadge?: boolean
-  isZoomed?: boolean
-  customStyles?: string
-}): ReactElement {
+  style,
+}: NFTIMageProps): ReactElement {
   const [isLoading, setIsLoading] = useState(true)
   const [imageUrl, setImageUrl] = useState(src || noPreviewLink)
 
@@ -50,6 +52,7 @@ export default function NFTImage({
         className={classNames("nft_image_wrapper", {
           badge: isBadge,
         })}
+        style={style}
       >
         <div className="nft_image_background" />
         <img
@@ -116,7 +119,6 @@ export default function NFTImage({
         .nft_image_wrapper {
           border-radius: 8px;
           overflow: hidden;
-          ${customStyles}
         }
         .nft_image_wrapper.badge {
           overflow: hidden;
diff --git a/ui/components/NFTs/NFTListPortfolio.tsx b/ui/components/NFTs/NFTListPortfolio.tsx
index 6aeceb9efd..39d8943fc1 100644
--- a/ui/components/NFTs/NFTListPortfolio.tsx
+++ b/ui/components/NFTs/NFTListPortfolio.tsx
@@ -54,7 +54,7 @@ export default function NFTListPortfolio(props: {
             <SharedBanner
               id="nfts_networks_banner"
               canBeClosed
-              customStyles="margin: 15px 0 30px;"
+              style={{ margin: "15px 0 30px" }}
               hasShadow
             >
               <div className="simple_text">{t("networksBanner")}</div>
diff --git a/ui/components/NFTs/NFTPreview.tsx b/ui/components/NFTs/NFTPreview.tsx
index 6867019a26..80f943eae5 100644
--- a/ui/components/NFTs/NFTPreview.tsx
+++ b/ui/components/NFTs/NFTPreview.tsx
@@ -101,7 +101,7 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
             width={384}
             height={isBadge ? 384 : undefined}
             isBadge={isBadge}
-            customStyles="border-radius: 0 0 8px 8px;"
+            style={{ borderRadius: "0 0 8px 8px" }}
           />
           <div className="preview_network">
             <SharedNetworkIcon
diff --git a/ui/components/NFTs/NFTsExploreBanner.tsx b/ui/components/NFTs/NFTsExploreBanner.tsx
index 2b4406e5da..075af8faad 100644
--- a/ui/components/NFTs/NFTsExploreBanner.tsx
+++ b/ui/components/NFTs/NFTsExploreBanner.tsx
@@ -17,7 +17,7 @@ export default function NFTsExploreBanner(props: {
   const items = type === "badge" ? HARDCODED_BADGES : HARDCODED_MARKETS
 
   return (
-    <SharedBanner customStyles="margin-top: 10px;">
+    <SharedBanner style={{ marginTop: 10 }}>
       <header>{t(`emptyBannerTitle.${type}`)}</header>
       <nav>
         {items.map(
diff --git a/ui/components/Onboarding/OnboardingOpenClaimFlowBanner.tsx b/ui/components/Onboarding/OnboardingOpenClaimFlowBanner.tsx
index c3de3ef3a7..2615a9c44f 100644
--- a/ui/components/Onboarding/OnboardingOpenClaimFlowBanner.tsx
+++ b/ui/components/Onboarding/OnboardingOpenClaimFlowBanner.tsx
@@ -80,10 +80,7 @@ function EligibleCTAContent({
           hoverColor="#fff"
           ariaLabel="Close banner"
           onClick={handleCloseBanner}
-          customStyles={`
-            align-self: flex-start;
-            margin: 10px 12px;
-          `}
+          style={{ alignSelf: "flex-start", margin: "10px 12px" }}
         />
       ) : (
         <Link
@@ -184,11 +181,7 @@ function IneligibleCTAContent({
           color="var(--green-40)"
           onClick={handleCloseBanner}
           ariaLabel="Close menu"
-          customStyles={`
-            margin-top: 8px;
-            margin-right: 8px;
-            flex-shrink: 0;
-          `}
+          style={{ marginInline: 8, flexShrink: 0 }}
         />
       </div>
       <div className="banner_bottom">
@@ -274,7 +267,7 @@ export default function OnboardingOpenClaimFlowBanner(): ReactElement | null {
         height={90}
         width={352}
         borderRadius={16}
-        customStyles="margin: 0 0 20px; flex: 1 0 auto;"
+        style={{ margin: "0 0 20px", flex: "1 0 auto" }}
       />
     )
 
diff --git a/ui/components/Overview/AccountList.tsx b/ui/components/Overview/AccountList.tsx
index 48ba82a933..10de7aa699 100644
--- a/ui/components/Overview/AccountList.tsx
+++ b/ui/components/Overview/AccountList.tsx
@@ -74,11 +74,11 @@ export default function AccountList({
                   e.stopPropagation()
                   toggle()
                 }}
-                customStyles={`
-                margin-left: 5px;
-                transform: rotate(${isOpen ? "180" : "0"}deg);
-                transition: transform 100ms;
-              `}
+                style={{
+                  marginLeft: 5,
+                  transform: `rotate(${isOpen ? "180" : "0"}deg)`,
+                  transition: "transform 100ms",
+                }}
               />
             </button>
           )}
diff --git a/ui/components/Send/NFTCollectionAccordion.tsx b/ui/components/Send/NFTCollectionAccordion.tsx
index 9543f0df65..3b775f7e58 100644
--- a/ui/components/Send/NFTCollectionAccordion.tsx
+++ b/ui/components/Send/NFTCollectionAccordion.tsx
@@ -57,7 +57,7 @@ export default function NFTCollectionAccordion({
               width="32"
               height="32"
               src={collection.thumbnailURL}
-              customStyles="border-radius: 4px;"
+              style={{ borderRadius: 4 }}
             />
             <span className="ellipsis">{collection.name}</span>
           </div>
@@ -108,7 +108,7 @@ export default function NFTCollectionAccordion({
 
             window.open(url, "_blank")?.focus()
           }}
-          customStyles="margin: 12px 0 auto;"
+          style={{ margin: "12px 0 auto" }}
         />
       )}
       <style jsx>
diff --git a/ui/components/Send/NFTCollectionListItem.tsx b/ui/components/Send/NFTCollectionListItem.tsx
index c23b114eac..3bcf2388aa 100644
--- a/ui/components/Send/NFTCollectionListItem.tsx
+++ b/ui/components/Send/NFTCollectionListItem.tsx
@@ -22,11 +22,11 @@ export default function NFTCollectionListItem({
         fallback={noPreviewImg}
         loading="lazy"
         alt={name}
-        customStyles={`
-          border-radius: 4px;
-          object-position: center;
-          object-fit: cover;
-        `}
+        style={{
+          borderRadius: 4,
+          objectPosition: "center",
+          objectFit: "cover",
+        }}
       />
       <button type="button" className="label" onClick={onClick}>
         <p className="ellipsis">{name}</p>
diff --git a/ui/components/Shared/PriceDetails.tsx b/ui/components/Shared/PriceDetails.tsx
index a42cf4f269..ae7e0642dd 100644
--- a/ui/components/Shared/PriceDetails.tsx
+++ b/ui/components/Shared/PriceDetails.tsx
@@ -49,7 +49,7 @@ export default function PriceDetails(props: PriceDetailsProps): ReactElement {
                 width={16}
                 icon="icons/m/info.svg"
                 color="var(--attention)"
-                customStyles="flex-shrink: 0;"
+                style={{ flexShrink: 0 }}
               />
             </div>
           )}
@@ -81,7 +81,7 @@ export default function PriceDetails(props: PriceDetailsProps): ReactElement {
                     width={16}
                     icon="icons/m/info.svg"
                     color={`var(--${getPriceImpactColor(priceImpact)})`}
-                    customStyles="margin-left: -5px;"
+                    style={{ marginLeft: -5 }}
                   />
                 )}
               >
diff --git a/ui/components/Shared/SharedAccordion.tsx b/ui/components/Shared/SharedAccordion.tsx
index 55374703bf..f724342bcb 100644
--- a/ui/components/Shared/SharedAccordion.tsx
+++ b/ui/components/Shared/SharedAccordion.tsx
@@ -72,11 +72,11 @@ export default function SharedAccordion({
             e.stopPropagation()
             toggle()
           }}
-          customStyles={`
-            margin: 2px 0 2px 8px;
-            transform: rotate(${isOpen ? "180" : "0"}deg);
-            transition: transform 100ms;
-          `}
+          style={{
+            margin: "2px 0 2px 8px",
+            transform: `rotate(${isOpen ? "180" : "0"}deg)`,
+            transition: "transform 100ms",
+          }}
         />
       </div>
       <div
diff --git a/ui/components/Shared/SharedBanner.tsx b/ui/components/Shared/SharedBanner.tsx
index 02815374ec..60c99b3750 100644
--- a/ui/components/Shared/SharedBanner.tsx
+++ b/ui/components/Shared/SharedBanner.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames"
-import React, { ReactElement } from "react"
+import React, { CSSProperties, ReactElement } from "react"
 import { useLocalStorage } from "../../hooks"
 import SharedIcon from "./SharedIcon"
 
@@ -9,7 +9,7 @@ type BannerProps = {
   iconColor?: string
   iconAriaLabel?: string
   hasShadow?: boolean
-  customStyles?: string
+  style?: CSSProperties
 }
 
 export type CanBeClosedProps =
@@ -22,7 +22,7 @@ function Banner(props: BannerProps): ReactElement {
     iconColor,
     iconAriaLabel,
     hasShadow = false,
-    customStyles = "",
+    style,
     children,
   } = props
 
@@ -31,6 +31,7 @@ function Banner(props: BannerProps): ReactElement {
       className={classNames("banner_wrap", {
         shadow: hasShadow,
       })}
+      style={style}
     >
       {icon && (
         <SharedIcon
@@ -38,7 +39,7 @@ function Banner(props: BannerProps): ReactElement {
           color={iconColor}
           width={24}
           ariaLabel={iconAriaLabel}
-          customStyles="flex-shrink:0; margin-right: 8px;"
+          style={{ flexShrink: 0, marginRight: 8 }}
         />
       )}
       <div className="banner_content">{children}</div>
@@ -53,7 +54,6 @@ function Banner(props: BannerProps): ReactElement {
             flex-direction: row;
             align-items: start;
             position: relative;
-            ${customStyles};
           }
           .banner_wrap.shadow {
             box-shadow:
@@ -74,15 +74,8 @@ function Banner(props: BannerProps): ReactElement {
 function BannerWithClose(
   props: BannerProps & { id: string },
 ): ReactElement | null {
-  const {
-    id,
-    children,
-    icon,
-    iconColor,
-    customStyles,
-    iconAriaLabel,
-    hasShadow,
-  } = props
+  const { id, children, icon, iconColor, style, iconAriaLabel, hasShadow } =
+    props
   const [isVisible, setIsVisible] = useLocalStorage(`banner_${id}`, "true")
 
   if (isVisible === "false") return null
@@ -92,7 +85,7 @@ function BannerWithClose(
       icon={icon}
       iconColor={iconColor}
       iconAriaLabel={iconAriaLabel}
-      customStyles={customStyles}
+      style={style}
       hasShadow={hasShadow}
     >
       <SharedIcon
@@ -102,11 +95,7 @@ function BannerWithClose(
         width={16}
         color="var(--green-40)"
         hoverColor="var(--green-20)"
-        customStyles={`
-              position: absolute;
-              top: 12px;
-              right: 12px;
-            `}
+        style={{ position: "absolute", top: 12, right: 12 }}
       />
       {children}
     </Banner>
diff --git a/ui/components/Shared/SharedCheckbox.tsx b/ui/components/Shared/SharedCheckbox.tsx
index 2cd282b652..d6e4e6f344 100644
--- a/ui/components/Shared/SharedCheckbox.tsx
+++ b/ui/components/Shared/SharedCheckbox.tsx
@@ -9,8 +9,8 @@ type Props = {
   disabled?: boolean
   invalid?: boolean
   invalidMessage?: string
-  customStyles?: React.CSSProperties
-  customStylesForLabel?: React.CSSProperties
+  style?: React.CSSProperties
+  stylesForLabel?: React.CSSProperties
   onChange: (value: boolean) => void
 }
 
@@ -23,8 +23,8 @@ export default function SharedCheckbox(props: Props): ReactElement {
     disabled,
     invalid,
     invalidMessage,
-    customStyles,
-    customStylesForLabel,
+    style,
+    stylesForLabel,
     onChange,
   } = props
 
@@ -34,7 +34,7 @@ export default function SharedCheckbox(props: Props): ReactElement {
         container: invalidMessage,
         disabled,
       })}
-      style={customStyles}
+      style={style}
     >
       <label className="checkbox_label">
         <input
@@ -50,7 +50,7 @@ export default function SharedCheckbox(props: Props): ReactElement {
             invalid: !disabled && invalid,
           })}
         />
-        <span style={customStylesForLabel} className="label">
+        <span style={stylesForLabel} className="label">
           {label}
         </span>
       </label>
diff --git a/ui/components/Shared/SharedDropDown.tsx b/ui/components/Shared/SharedDropDown.tsx
index 2c04cb84be..112eb47e79 100644
--- a/ui/components/Shared/SharedDropDown.tsx
+++ b/ui/components/Shared/SharedDropDown.tsx
@@ -174,12 +174,12 @@ export default function SharedDropdown({
                 ariaLabel={t("shared.close")}
                 color="var(--green-40)"
                 hoverColor="var(--green-20)"
-                customStyles={`
-                  position: absolute;
-                  top: 16px;
-                  right: 12px;
-                  cursor: pointer;
-                `}
+                style={{
+                  position: "absolute",
+                  top: 16,
+                  right: 12,
+                  cursor: "pointer",
+                }}
                 width={12}
                 onClick={() => toggle()}
                 icon="close.svg"
diff --git a/ui/components/Shared/SharedFileInput.tsx b/ui/components/Shared/SharedFileInput.tsx
index 8d1046c6b2..0f278dc98c 100644
--- a/ui/components/Shared/SharedFileInput.tsx
+++ b/ui/components/Shared/SharedFileInput.tsx
@@ -112,7 +112,7 @@ export default function SharedFileInput(props: Props): ReactElement {
             icon="icons/m/import.svg"
             width={24}
             color="var(--attention)"
-            customStyles="flex-shrink:0;"
+            style={{ flexShrink: 0 }}
           />
         )}
         {!errorMessage && isUploaded && (
@@ -120,7 +120,7 @@ export default function SharedFileInput(props: Props): ReactElement {
             icon="icons/m/notif-correct.svg"
             width={24}
             color="var(--success)"
-            customStyles="flex-shrink:0;"
+            style={{ flexShrink: 0 }}
           />
         )}
         {errorMessage && (
@@ -128,7 +128,7 @@ export default function SharedFileInput(props: Props): ReactElement {
             color="var(--error)"
             width={24}
             icon="icons/m/notif-wrong.svg"
-            customStyles="flex-shrink:0;"
+            style={{ flexShrink: 0 }}
           />
         )}
         <div className="ellipsis">{errorMessage || fileName}</div>
@@ -136,7 +136,7 @@ export default function SharedFileInput(props: Props): ReactElement {
           color="var(--green-40)"
           width={16}
           icon="icons/s/close.svg"
-          customStyles="flex-shrink:0; margin-left: auto;"
+          style={{ flexShrink: 0, marginLeft: "auto" }}
           onClick={handleRemove}
         />
       </div>
diff --git a/ui/components/Shared/SharedIcon.tsx b/ui/components/Shared/SharedIcon.tsx
index dd848d1f96..2b7cc8d3a9 100644
--- a/ui/components/Shared/SharedIcon.tsx
+++ b/ui/components/Shared/SharedIcon.tsx
@@ -1,11 +1,11 @@
-import React, { ReactElement } from "react"
+import React, { CSSProperties, ReactElement } from "react"
 
 type Props = {
   icon: string
   width: number
   height?: number
   color?: string
-  customStyles?: string
+  style?: CSSProperties
   hoverColor?: string
   transitionHoverTime: string
   ariaLabel?: string
@@ -14,13 +14,7 @@ type Props = {
 }
 
 export default function SharedIcon(props: Props): ReactElement {
-  const {
-    icon,
-    width,
-    height = width,
-    color = "transparent",
-    customStyles = "",
-  } = props
+  const { icon, width, height = width, color = "transparent", style } = props
 
   if ("onClick" in props) {
     const {
@@ -39,6 +33,7 @@ export default function SharedIcon(props: Props): ReactElement {
         disabled={disabled}
         title={ariaLabel}
         aria-label={ariaLabel}
+        style={style}
       >
         <style jsx>{`
           .icon {
@@ -48,7 +43,6 @@ export default function SharedIcon(props: Props): ReactElement {
             height: ${height}px;
             background-color: ${color};
             transition: background-color ${transitionHoverTime};
-            ${customStyles};
           }
 
           .icon:disabled {
@@ -66,7 +60,7 @@ export default function SharedIcon(props: Props): ReactElement {
   }
 
   return (
-    <i className="icon">
+    <i className="icon" style={style}>
       <style jsx>{`
         .icon {
           display: inline-block;
@@ -75,7 +69,6 @@ export default function SharedIcon(props: Props): ReactElement {
           width: ${width}px;
           height: ${height}px;
           background-color: ${color};
-          ${customStyles};
         }
       `}</style>
     </i>
diff --git a/ui/components/Shared/SharedImageWithFallback.tsx b/ui/components/Shared/SharedImageWithFallback.tsx
index 1c94d81049..9ec5a5de65 100644
--- a/ui/components/Shared/SharedImageWithFallback.tsx
+++ b/ui/components/Shared/SharedImageWithFallback.tsx
@@ -1,10 +1,23 @@
-import React, { PropsWithoutRef, useEffect, useState } from "react"
+import React, {
+  CSSProperties,
+  PropsWithoutRef,
+  useEffect,
+  useState,
+} from "react"
 import classNames from "classnames"
 
 // Transparent pixel
 const defaultPlaceholder =
   "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
 
+type SharedImageWithFallbackProps = PropsWithoutRef<
+  JSX.IntrinsicElements["img"]
+> & {
+  fallback: string
+  placeholder?: string
+  style?: CSSProperties
+}
+
 export default function SharedImageWithFallback({
   fallback,
   src = fallback,
@@ -13,13 +26,9 @@ export default function SharedImageWithFallback({
   loading,
   alt,
   className,
-  customStyles = "",
+  style,
   placeholder = defaultPlaceholder,
-}: PropsWithoutRef<JSX.IntrinsicElements["img"]> & {
-  fallback: string
-  placeholder?: string
-  customStyles?: string
-}): JSX.Element {
+}: SharedImageWithFallbackProps): JSX.Element {
   const [isLoading, setIsLoading] = useState(true)
   const [imageSrc, setImageSrc] = useState(placeholder)
 
@@ -49,6 +58,7 @@ export default function SharedImageWithFallback({
       <img
         className={classNames(className, { loading: isLoading })}
         src={imageSrc}
+        style={style}
         {...{ loading, alt, width, height }}
       />
       <style jsx>
@@ -70,11 +80,6 @@ export default function SharedImageWithFallback({
           }
         `}
       </style>
-      <style jsx>{`
-        img {
-          ${customStyles}
-        }
-      `}</style>
     </>
   )
 }
diff --git a/ui/components/Shared/SharedSkeletonLoader.tsx b/ui/components/Shared/SharedSkeletonLoader.tsx
index 413ab97c9e..17d204f26b 100644
--- a/ui/components/Shared/SharedSkeletonLoader.tsx
+++ b/ui/components/Shared/SharedSkeletonLoader.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from "react"
+import React, { CSSProperties, ReactElement, ReactNode } from "react"
 import classNames from "classnames"
 
 export default function SharedSkeletonLoader(props: {
@@ -7,10 +7,9 @@ export default function SharedSkeletonLoader(props: {
   borderRadius?: number
   children?: ReactNode
   isLoaded?: boolean
-  customStyles?: string
+  style?: CSSProperties
 }): ReactElement {
-  const { width, height, borderRadius, isLoaded, customStyles, children } =
-    props
+  const { width, height, borderRadius, isLoaded, style, children } = props
 
   // Want to return a ReactElement to make this maximally easy to integrate,
   // whereas children can be a ReactNode; Fragment will let us achieve that.
@@ -18,7 +17,11 @@ export default function SharedSkeletonLoader(props: {
   if (isLoaded) return <>{children}</>
 
   return (
-    <div className={classNames("skeleton")} data-testid="loading_skeleton">
+    <div
+      className={classNames("skeleton")}
+      data-testid="loading_skeleton"
+      style={style}
+    >
       <style jsx>
         {`
           .skeleton {
@@ -27,7 +30,6 @@ export default function SharedSkeletonLoader(props: {
             background-color: var(--hunter-green);
             border-radius: ${borderRadius}px;
             animation: pulse 1.1s infinite;
-            ${customStyles}
           }
           @keyframes pulse {
             0% {
@@ -45,8 +47,4 @@ export default function SharedSkeletonLoader(props: {
   )
 }
 
-SharedSkeletonLoader.defaultProps = {
-  borderRadius: 8,
-  isLoaded: false,
-  customStyles: "",
-}
+SharedSkeletonLoader.defaultProps = { borderRadius: 8, isLoaded: false }
diff --git a/ui/components/Shared/SharedSlideUpMenu.tsx b/ui/components/Shared/SharedSlideUpMenu.tsx
index b3bfd4d5c7..8d071244a3 100644
--- a/ui/components/Shared/SharedSlideUpMenu.tsx
+++ b/ui/components/Shared/SharedSlideUpMenu.tsx
@@ -29,7 +29,7 @@ type Props = {
   isDark?: boolean
   alwaysRenderChildren?: boolean
   testid?: string
-  customStyles?: React.CSSProperties & Record<string, string>
+  style?: CSSProperties
 }
 
 const menuHeights: Record<SharedSlideUpMenuSize, string | null> = {
@@ -52,7 +52,7 @@ export default function SharedSlideUpMenu(props: Props): ReactElement {
     allowOverflow,
     alwaysRenderChildren,
     testid = "slide_up_menu",
-    customStyles = {},
+    style,
   } = props
 
   const slideUpMenuRef = useRef(null)
@@ -80,9 +80,7 @@ export default function SharedSlideUpMenu(props: Props): ReactElement {
           with_overflow: allowOverflow,
         })}
         data-testid={testid}
-        style={
-          { "--menu-height": menuHeight, ...customStyles } as CSSProperties
-        }
+        style={{ "--menu-height": menuHeight, ...style } as CSSProperties}
         ref={isOpen ? slideUpMenuRef : null}
       >
         <div
diff --git a/ui/components/Shared/SharedSlideUpMenuPanel.tsx b/ui/components/Shared/SharedSlideUpMenuPanel.tsx
index cc5cb7e7f3..33f0bef80d 100644
--- a/ui/components/Shared/SharedSlideUpMenuPanel.tsx
+++ b/ui/components/Shared/SharedSlideUpMenuPanel.tsx
@@ -29,7 +29,7 @@ export default function SharedSlideUpMenuPanel({
             width={16}
             height={16}
             icon={icon}
-            customStyles="margin-right: 5px;"
+            style={{ marginRight: 5 }}
             color="var(--white)"
           />
         )}
diff --git a/ui/components/Shared/SharedTooltip.tsx b/ui/components/Shared/SharedTooltip.tsx
index a5ca2984be..1f97bfaccd 100644
--- a/ui/components/Shared/SharedTooltip.tsx
+++ b/ui/components/Shared/SharedTooltip.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames"
-import React, { ReactElement, useEffect, useState } from "react"
+import React, { CSSProperties, ReactElement, useEffect, useState } from "react"
 
 type VerticalPosition = "top" | "bottom"
 type HorizontalPosition = "left" | "center" | "right"
@@ -15,7 +15,7 @@ interface Props {
   isOpen?: boolean
   disabled?: boolean
   children: React.ReactNode
-  customStyles?: React.CSSProperties & Record<string, string>
+  style?: CSSProperties & Record<string, unknown>
   // TODO: find a better way to tell the IconComponent that the tooltip it open
   IconComponent?: ({
     isShowingTooltip,
@@ -69,7 +69,7 @@ export default function SharedTooltip(props: Props): ReactElement {
     isOpen = false,
     disabled = false,
     IconComponent,
-    customStyles = {},
+    style,
   } = props
   const [isShowingTooltip, setIsShowingTooltip] = useState(isOpen)
 
@@ -87,7 +87,7 @@ export default function SharedTooltip(props: Props): ReactElement {
       onMouseLeave={() => {
         setIsShowingTooltip(false)
       }}
-      style={customStyles}
+      style={style}
     >
       {IconComponent ? (
         <IconComponent isShowingTooltip={isShowingTooltip} />
diff --git a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/DetailsPanel.tsx b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/DetailsPanel.tsx
index c667b4a091..ad511038e0 100644
--- a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/DetailsPanel.tsx
+++ b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/DetailsPanel.tsx
@@ -149,8 +149,8 @@ export default function DetailPanel({
             onChange={toggleFlashbotsRPC}
             label={t("signTransaction.useFlashbots")}
             labelPosition="left"
-            customStyles={{ width: "100%" }}
-            customStylesForLabel={{
+            style={{ width: "100%" }}
+            stylesForLabel={{
               color: "var(--green-40)",
               fontSize: "14px",
               marginRight: "auto",
diff --git a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureDetailsWarning.tsx b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureDetailsWarning.tsx
index ab2f4e2ada..e8ac18f636 100644
--- a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureDetailsWarning.tsx
+++ b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureDetailsWarning.tsx
@@ -30,11 +30,7 @@ export default function TransactionSignatureDetailsWarning(
             width={16}
             color="var(--green-40)"
             hoverColor="var(--green-20)"
-            customStyles={`
-              position: absolute;
-              top: 12px;
-              right: 12px;
-            `}
+            style={{ position: "absolute", top: 12, right: 12 }}
           />
         )}
         <span className="detail_warning">{message}</span>
diff --git a/ui/components/Signing/index.tsx b/ui/components/Signing/index.tsx
index 634d0e81c6..cc20b80f67 100644
--- a/ui/components/Signing/index.tsx
+++ b/ui/components/Signing/index.tsx
@@ -43,7 +43,7 @@ function SigningLoaded<T extends SignOperationType>({
         isLoaded={signerAccountTotal !== undefined}
         height={32}
         width={120}
-        customStyles="margin: 15px 0 15px 220px;"
+        style={{ margin: "15px 0 15px 220px" }}
       >
         {signerAccountTotal !== undefined && (
           <SigningNetworkAccountInfoTopBar accountTotal={signerAccountTotal} />
diff --git a/ui/components/TopMenu/TopMenu.tsx b/ui/components/TopMenu/TopMenu.tsx
index fdb298b911..1117c156ec 100644
--- a/ui/components/TopMenu/TopMenu.tsx
+++ b/ui/components/TopMenu/TopMenu.tsx
@@ -33,7 +33,7 @@ export default function TopMenu(): ReactElement {
       <SharedSlideUpMenu
         isOpen={isProtocolListOpen}
         isScrollable
-        customStyles={{ display: "flex", flexDirection: "column" }}
+        style={{ display: "flex", flexDirection: "column" }}
         close={() => {
           setIsProtocolListOpen(false)
         }}
diff --git a/ui/components/TopMenu/TopMenuProtocolListFooter.tsx b/ui/components/TopMenu/TopMenuProtocolListFooter.tsx
index 66ec445283..0ec572b1c9 100644
--- a/ui/components/TopMenu/TopMenuProtocolListFooter.tsx
+++ b/ui/components/TopMenu/TopMenuProtocolListFooter.tsx
@@ -19,7 +19,7 @@ export default function TopMenuProtocolListFooter(): JSX.Element {
         <SharedIcon
           width={16}
           height={16}
-          customStyles="margin-right: 4px"
+          style={{ marginRight: 4 }}
           icon="icons/s/add.svg"
           color="currentColor"
         />
diff --git a/ui/components/Wallet/Banner/PortalBanner.tsx b/ui/components/Wallet/Banner/PortalBanner.tsx
index e891a2a6d4..cd9285d578 100644
--- a/ui/components/Wallet/Banner/PortalBanner.tsx
+++ b/ui/components/Wallet/Banner/PortalBanner.tsx
@@ -20,23 +20,12 @@ export default function PortalBanner(): ReactElement | null {
     <SharedBanner
       id={hasIslandAssets ? PORTAL_ID_WITH_ASSETS : PORTAL_ID_NO_ASSETS}
       canBeClosed
-      customStyles={`
-        padding: 8px 11px 0 0;
-        margin-bottom: 18px;
+      style={{
+        padding: "8px 11px 0 0",
+        marginBottom: 18,
         background:
-          var(--gradients-bg-cards,
-              radial-gradient(
-                57.41% 54.95% at 64.58% 47.64%,
-                rgba(27, 97, 94, 0.00) 0%,
-                rgba(27, 97, 94, 0.20) 100%
-              ),
-              linear-gradient(
-                156deg,
-                rgba(26, 94, 91, 0.90) 5.26%,
-                rgba(26, 106, 103, 0.00) 71.95%),
-                rgba(6, 48, 46, 0.50)
-             )
-      `}
+          "var(--gradients-bg-cards, radial-gradient(57.41% 54.95% at 64.58% 47.64%,rgba(27, 97, 94, 0.00) 0%,rgba(27, 97, 94, 0.20) 100%),linear-gradient(156deg,rgba(26, 94, 91, 0.90) 5.26%,rgba(26, 106, 103, 0.00) 71.95%),rgba(6, 48, 46, 0.50))",
+      }}
     >
       <i className="portal_open_title_image" />
       <h2 className="serif_header">Subscape is online</h2>
@@ -56,7 +45,7 @@ export default function PortalBanner(): ReactElement | null {
           icon="new_tab@2x.png"
           width={16}
           color="var(--castle-black)"
-          customStyles="margin-left: 5px;"
+          style={{ marginLeft: 5 }}
         />
       </SharedButton>
       <style jsx>
diff --git a/ui/components/Wallet/Banner/WalletBanner.tsx b/ui/components/Wallet/Banner/WalletBanner.tsx
index 9b091104d4..f31e09280b 100644
--- a/ui/components/Wallet/Banner/WalletBanner.tsx
+++ b/ui/components/Wallet/Banner/WalletBanner.tsx
@@ -83,11 +83,7 @@ export default function WalletBanner(): ReactElement {
             width={16}
             color="var(--green-40)"
             hoverColor="var(--green-20)"
-            customStyles={`
-              position: absolute;
-              top: 0;
-              right: 0;
-            `}
+            style={{ position: "absolute", top: 0, right: 0 }}
           />
           <div
             className={classNames("thumbnail_container", {
diff --git a/ui/components/Wallet/UnverifiedAsset/UnverifiedAssetBanner.tsx b/ui/components/Wallet/UnverifiedAsset/UnverifiedAssetBanner.tsx
index 888e777428..096eba0440 100644
--- a/ui/components/Wallet/UnverifiedAsset/UnverifiedAssetBanner.tsx
+++ b/ui/components/Wallet/UnverifiedAsset/UnverifiedAssetBanner.tsx
@@ -1,23 +1,23 @@
-import React, { ReactElement } from "react"
+import React, { CSSProperties, ReactElement } from "react"
 import SharedBanner, { CanBeClosedProps } from "../../Shared/SharedBanner"
 
 export default function UnverifiedAssetBanner({
   id,
   title,
   description,
-  customStyles,
+  style,
 }: {
   id?: string
   title: string
   description: string
-  customStyles?: string
+  style?: CSSProperties
 }): ReactElement {
   const props: CanBeClosedProps = id ? { canBeClosed: true, id } : {}
   return (
     <SharedBanner
       icon="notif-attention"
       iconColor="var(--attention)"
-      customStyles={customStyles}
+      style={style}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     >
diff --git a/ui/components/Wallet/WalletAccountBalanceControl.tsx b/ui/components/Wallet/WalletAccountBalanceControl.tsx
index 0271c18ef5..06d63101a4 100644
--- a/ui/components/Wallet/WalletAccountBalanceControl.tsx
+++ b/ui/components/Wallet/WalletAccountBalanceControl.tsx
@@ -62,7 +62,7 @@ function ActionButtons(props: ActionButtonsProps): ReactElement {
             horizontalPosition="center"
             verticalPosition="bottom"
             horizontalShift={22}
-            customStyles={{
+            style={{
               marginLeft: "0",
               display: "flex",
               justifyContent: "center",
@@ -159,7 +159,7 @@ export default function WalletAccountBalanceControl(
           height={48}
           width={250}
           borderRadius={14}
-          customStyles="margin: 12px 0"
+          style={{ margin: "12px 0" }}
           isLoaded={!shouldIndicateLoading}
         >
           <div className="balance_label">{t("totalAccountBalance")}</div>
@@ -175,7 +175,7 @@ export default function WalletAccountBalanceControl(
           isLoaded={!shouldIndicateLoading}
           height={24}
           width={180}
-          customStyles="margin-bottom: 10px;"
+          style={{ marginBottom: 10 }}
         >
           <ReadOnlyNotice />
           {currentAccountSigner !== ReadOnlyAccountSigner &&
diff --git a/ui/components/Wallet/WalletActivityDetails.tsx b/ui/components/Wallet/WalletActivityDetails.tsx
index 65034a90fa..0fa3a00003 100644
--- a/ui/components/Wallet/WalletActivityDetails.tsx
+++ b/ui/components/Wallet/WalletActivityDetails.tsx
@@ -179,7 +179,7 @@ export default function WalletActivityDetails(
           Array.from({ length: 7 }).map(() => (
             <SharedSkeletonLoader
               height={24}
-              customStyles="margin: 10px 0 15px;"
+              style={{ margin: "10px 0 15px" }}
             />
           ))}
         {details.map(({ assetIconUrl, label, value }) => (
diff --git a/ui/components/Wallet/WalletAnalyticsNotificationBanner.tsx b/ui/components/Wallet/WalletAnalyticsNotificationBanner.tsx
index ca458c4367..a84b691aa5 100644
--- a/ui/components/Wallet/WalletAnalyticsNotificationBanner.tsx
+++ b/ui/components/Wallet/WalletAnalyticsNotificationBanner.tsx
@@ -26,13 +26,13 @@ export default function WalletAnalyticsNotificationBanner(): ReactElement {
         hide: !showNotification,
       })}
     >
-      <SharedBanner customStyles="width: 100%; box-sizing: border-box;">
+      <SharedBanner style={{ width: "100%", boxSizing: "border-box" }}>
         <div className="content_container">
           <SharedIcon
             icon="icons/m/notif-correct.svg"
             width={24}
             color="var(--success)"
-            customStyles="flex-shrink:0;"
+            style={{ flexShrink: 0 }}
           />
           <div className="content">
             <h1>{t("wallet.analyticsNotification.title")}</h1>
@@ -55,7 +55,7 @@ export default function WalletAnalyticsNotificationBanner(): ReactElement {
             width={16}
             color="var(--green-40)"
             hoverColor="var(--green-20)"
-            customStyles="flex-shrink:0;"
+            style={{ flexShrink: 0 }}
           />
         </div>
       </SharedBanner>
diff --git a/ui/components/Wallet/WalletHiddenAssets.tsx b/ui/components/Wallet/WalletHiddenAssets.tsx
index 0694ac8bb5..b3f636615b 100644
--- a/ui/components/Wallet/WalletHiddenAssets.tsx
+++ b/ui/components/Wallet/WalletHiddenAssets.tsx
@@ -78,7 +78,7 @@ export default function WalletHiddenAssets({
           id="unverified_asset_banner"
           title={t("verifiedAssets.banner.titleUnverified")}
           description={t("verifiedAssets.banner.description")}
-          customStyles="margin-bottom: 16px;"
+          style={{ marginBottom: 16 }}
         />
         <WalletAssetList
           assetAmounts={assetAmounts}
diff --git a/ui/components/Wallet/WalletSubscapeLink.tsx b/ui/components/Wallet/WalletSubscapeLink.tsx
index 2d10738d14..4f55ff3218 100644
--- a/ui/components/Wallet/WalletSubscapeLink.tsx
+++ b/ui/components/Wallet/WalletSubscapeLink.tsx
@@ -32,14 +32,14 @@ export default function WalletSubspaceLink(): ReactElement {
         icon="subscape-logo.svg"
         width={22}
         color="var(--subscape)"
-        customStyles="margin-right: 10px;"
+        style={{ marginRight: 10 }}
       />
       <span>Subscape Beta</span>
       <SharedIcon
         icon="new_tab@2x.png"
         width={16}
         color="var(--trophy-gold)"
-        customStyles="margin-left: 5px;"
+        style={{ marginLeft: 5 }}
       />
       <style jsx>{`
         .subscape_link {
diff --git a/ui/pages/Abilities/AbilityCard.tsx b/ui/pages/Abilities/AbilityCard.tsx
index e0c815d025..20b5d0ad4f 100644
--- a/ui/pages/Abilities/AbilityCard.tsx
+++ b/ui/pages/Abilities/AbilityCard.tsx
@@ -122,7 +122,7 @@ function AbilityCard({ ability }: { ability: Ability }): ReactElement | null {
                   width={16}
                   icon="icons/s/mark-read.svg"
                   color="var(--green-40)"
-                  customStyles="margin-right: 8px;"
+                  style={{ marginRight: 8 }}
                   hoverColor="var(--success)"
                   disabled={ability.completed}
                   onClick={async () => {
diff --git a/ui/pages/Abilities/AbilityFilter.tsx b/ui/pages/Abilities/AbilityFilter.tsx
index 7a7826a033..cda24daef3 100644
--- a/ui/pages/Abilities/AbilityFilter.tsx
+++ b/ui/pages/Abilities/AbilityFilter.tsx
@@ -160,7 +160,7 @@ export default function AbilityFilter(): ReactElement {
             width={24}
             color="var(--link)"
             icon="icons/m/notif-announcement.svg"
-            customStyles="flex-shrink:0; margin-right: 18px;"
+            style={{ flexShrink: 0, marginRight: 18 }}
           />
           <span>{t("accountsReadOnlyInfo")}</span>
         </span>
diff --git a/ui/pages/Earn.tsx b/ui/pages/Earn.tsx
index eb15651ba1..6d815ed417 100644
--- a/ui/pages/Earn.tsx
+++ b/ui/pages/Earn.tsx
@@ -108,9 +108,7 @@ export default function Earn(): ReactElement {
             <SharedSkeletonLoader
               isLoaded={!isValutDataStale}
               height={176}
-              customStyles={`
-                margin-top: 40px;
-              `}
+              style={{ marginTop: 40 }}
             >
               <ul className="cards_wrap">
                 {depositedVaults?.map((vault) => (
diff --git a/ui/pages/Earn/NotificationVaults.tsx b/ui/pages/Earn/NotificationVaults.tsx
index 97fec9a21d..9435169e3f 100644
--- a/ui/pages/Earn/NotificationVaults.tsx
+++ b/ui/pages/Earn/NotificationVaults.tsx
@@ -10,7 +10,7 @@ export default function NotificationVaults(): ReactElement {
       id="earn-vaults"
       icon="notif-announcement"
       iconColor="var(--link)"
-      customStyles="margin-top: 16px; padding-bottom: 0;"
+      style={{ marginTop: 16, paddingBottom: 0 }}
     >
       <div className="title">Before you get started!</div>
       <p className="text">
diff --git a/ui/pages/NewCustomNetworkRequest.tsx b/ui/pages/NewCustomNetworkRequest.tsx
index f8b32793c6..995b0648f4 100644
--- a/ui/pages/NewCustomNetworkRequest.tsx
+++ b/ui/pages/NewCustomNetworkRequest.tsx
@@ -106,7 +106,7 @@ export default function NewCustomNetworkRequest(): JSX.Element | null {
                 width={14}
                 height={14}
                 color="var(--trophy-gold)"
-                customStyles="margin: 2px;"
+                style={{ margin: 2 }}
                 icon="plus@2x.png"
               />
             </div>
diff --git a/ui/pages/Onboarding/Tabbed/AddWalletOptions.tsx b/ui/pages/Onboarding/Tabbed/AddWalletOptions.tsx
index d83c900c03..fffdfaecbd 100644
--- a/ui/pages/Onboarding/Tabbed/AddWalletOptions.tsx
+++ b/ui/pages/Onboarding/Tabbed/AddWalletOptions.tsx
@@ -31,7 +31,7 @@ export function AddWalletRow({
         <SharedIcon icon={icon} width={32} color="currentColor" />
         {label}
         <SharedIcon
-          customStyles="margin-left: auto;"
+          style={{ marginLeft: "auto" }}
           icon="chevron_right.svg"
           width={16}
           color="currentColor"
diff --git a/ui/pages/Settings.tsx b/ui/pages/Settings.tsx
index 39fbb787b0..b6644c26ff 100644
--- a/ui/pages/Settings.tsx
+++ b/ui/pages/Settings.tsx
@@ -210,7 +210,7 @@ export default function Settings(): ReactElement {
   const unverifiedAssets = {
     title: t("settings.showUnverifiedAssets"),
     tooltip: () => (
-      <SharedTooltip width={190} customStyles={{ marginLeft: "4" }}>
+      <SharedTooltip width={190} style={{ marginLeft: 4 }}>
         <Trans t={t} i18nKey="settings.unverifiedAssets.tooltip" />
       </SharedTooltip>
     ),
@@ -321,7 +321,7 @@ export default function Settings(): ReactElement {
   const autoLockSettings = {
     title: t("settings.autoLockTimer.label"),
     tooltip: () => (
-      <SharedTooltip width={190} customStyles={{ marginLeft: "4" }}>
+      <SharedTooltip width={190} style={{ marginLeft: 4 }}>
         <div className="tooltip">
           <span>{t("settings.autoLockTimer.tooltip")}</span>
         </div>
@@ -381,7 +381,7 @@ export default function Settings(): ReactElement {
     tooltip: () => (
       <SharedTooltip
         width={165}
-        customStyles={{ marginLeft: "4" }}
+        style={{ marginLeft: 4 }}
         verticalPosition="top"
       >
         <Trans
diff --git a/ui/pages/Settings/ConnectedWebsitesListItem.tsx b/ui/pages/Settings/ConnectedWebsitesListItem.tsx
index 50c3c8f0d4..3aaa82fe30 100644
--- a/ui/pages/Settings/ConnectedWebsitesListItem.tsx
+++ b/ui/pages/Settings/ConnectedWebsitesListItem.tsx
@@ -49,7 +49,7 @@ export default function ConnectedWebsitesListItem(
           width={24}
           icon="icons/m/disconnect.svg"
           onClick={handleDisconnect}
-          customStyles="flex-shrink: 0;"
+          style={{ flexShrink: 0 }}
         />
       </div>
       <style jsx>{`
diff --git a/ui/pages/Settings/SettingsAddCustomAsset.tsx b/ui/pages/Settings/SettingsAddCustomAsset.tsx
index 563a6dfb42..c5a5eeca86 100644
--- a/ui/pages/Settings/SettingsAddCustomAsset.tsx
+++ b/ui/pages/Settings/SettingsAddCustomAsset.tsx
@@ -252,7 +252,7 @@ export default function SettingsAddCustomAsset(): ReactElement {
       <SharedSlideUpMenu
         isOpen={isNetworkSelectOpen}
         isScrollable
-        customStyles={{ display: "flex", flexDirection: "column" }}
+        style={{ display: "flex", flexDirection: "column" }}
         close={() => setNetworkSelectOpen(false)}
       >
         <div className="network_select">
@@ -308,7 +308,7 @@ export default function SettingsAddCustomAsset(): ReactElement {
             height={8}
             icon="chevron_down.svg"
             color="var(--icon-color, var(--white))"
-            customStyles="margin-left: auto"
+            style={{ marginLeft: "auto" }}
           />
         </div>
         <div className="input_container">
@@ -326,7 +326,7 @@ export default function SettingsAddCustomAsset(): ReactElement {
             <SharedTooltip
               width={219}
               horizontalShift={100}
-              customStyles={{ "--tooltip-icon-color": "var(--green-20)" }}
+              style={{ "--tooltip-icon-color": "var(--green-20)" }}
             >
               <Trans
                 t={t}
@@ -392,7 +392,7 @@ export default function SettingsAddCustomAsset(): ReactElement {
             <SharedIcon
               color="var(--success)"
               width={24}
-              customStyles="min-width: 24px;"
+              style={{ minWidth: 24 }}
               icon="icons/m/notif-correct.svg"
             />
             <div className="alert_content">
@@ -406,7 +406,7 @@ export default function SettingsAddCustomAsset(): ReactElement {
               <SharedIcon
                 color="var(--attention)"
                 width={24}
-                customStyles="min-width: 24px;"
+                style={{ minWidth: 24 }}
                 icon="icons/m/notif-attention.svg"
               />
               <div className="alert_content">
diff --git a/ui/pages/SingleAsset.tsx b/ui/pages/SingleAsset.tsx
index 961764430d..13ccc317d2 100644
--- a/ui/pages/SingleAsset.tsx
+++ b/ui/pages/SingleAsset.tsx
@@ -222,7 +222,7 @@ export default function SingleAsset(): ReactElement {
                     height={48}
                     horizontalPosition="center"
                     verticalPosition="bottom"
-                    customStyles={{ marginLeft: "0" }}
+                    style={{ marginLeft: 0 }}
                     horizontalShift={94}
                     IconComponent={() => (
                       <SharedButton
diff --git a/ui/pages/Swap.tsx b/ui/pages/Swap.tsx
index 1d6cb22f5b..1bbb6a1019 100644
--- a/ui/pages/Swap.tsx
+++ b/ui/pages/Swap.tsx
@@ -399,7 +399,7 @@ export default function Swap(): ReactElement {
                 width={20}
                 color="var(--green-60)"
                 hoverColor="#fff"
-                customStyles="margin: 17px 0 25px;"
+                style={{ margin: "17px 0 25px" }}
               />
             )}
         </div>
@@ -410,7 +410,7 @@ export default function Swap(): ReactElement {
               canBeClosed
               icon="notif-announcement"
               iconColor="var(--link)"
-              customStyles="margin-bottom: 16px"
+              style={{ marginBottom: 16 }}
             >
               {t("swap.swapRewardsTeaser")}
             </SharedBanner>
diff --git a/ui/pages/Wallet.tsx b/ui/pages/Wallet.tsx
index b9fe778f8c..c6faf5bf77 100644
--- a/ui/pages/Wallet.tsx
+++ b/ui/pages/Wallet.tsx
@@ -155,7 +155,7 @@ export default function Wallet(): ReactElement {
                     <SharedIcon
                       width={16}
                       height={16}
-                      customStyles="margin-right: 4px"
+                      style={{ marginRight: 4 }}
                       icon="icons/s/add.svg"
                       color="currentColor"
                     />