tahowallet · jagodarybacka · Dec 19, 2023 · Dec 19, 2023
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,14 +31,15 @@ function Banner(props: BannerProps): ReactElement {
       className={classNames("banner_wrap", {
         shadow: hasShadow,
       })}
+      style={style}
     >
       {icon && (
         <SharedIcon
           icon={`icons/m/${icon}.svg`}
           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>