wip fix prefixes

ensdomains · Nov 30, 2024 · 206f3cf · 206f3cf
1 parent f8c9985
commit 206f3cf
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/src/components/@molecules/AddRecordButton/AddRecordButton.tsx b/src/components/@molecules/AddRecordButton/AddRecordButton.tsx
@@ -280,6 +280,12 @@ type Props = {
   onAddRecord?: (value: string) => void
 }
 
+const WrappedPlusSVG = () => (
+  <SVGWrapper>
+    <PlusSVG />
+  </SVGWrapper>
+)
+
 export const AddRecordButton = ({
   autocomplete,
   createable,
@@ -429,11 +435,7 @@ export const AddRecordButton = ({
       </ControlsContainer>
       <ButtonContainer $state={state}>
         <Button
-          prefix={
-            <SVGWrapper>
-              <PlusSVG />
-            </SVGWrapper>
-          }
+          prefix={WrappedPlusSVG}
           colorStyle="transparent"
           onClick={handleButtonClick}
           size="medium"

diff --git a/src/components/@molecules/BurnFuses/BurnFusesContent.tsx b/src/components/@molecules/BurnFuses/BurnFusesContent.tsx
@@ -81,6 +81,12 @@ const StyledButton = styled(Button)(
   `,
 )
 
+const SelectedBurnButton = (permission: string) => () => (
+  <FlameSVG width="24" height="24" data-testid={`flame-selected-${permission}`} />
+)
+
+const UnselectedBurnButton = () => <StyledFlameSVG width="24" height="24" />
+
 const BurnButton = ({
   permission,
   isBurned,
@@ -100,13 +106,7 @@ const BurnButton = ({
       disabled={isBurned}
       colorStyle={isSelected ? 'redSecondary' : 'greySecondary'}
       size="small"
-      suffix={
-        isSelected ? (
-          <FlameSVG width="24" height="24" data-testid={`flame-selected-${permission}`} />
-        ) : (
-          <StyledFlameSVG width="24" height="24" />
-        )
-      }
+      suffix={isSelected ? SelectedBurnButton(permission) : UnselectedBurnButton}
     >
       <ButtonInner data-testid={`burn-button-${permission}`}>
         <Typography>{t(`permissions.${permission}`)}</Typography>

diff --git a/src/components/@molecules/DisabledButtonWithTooltip.tsx b/src/components/@molecules/DisabledButtonWithTooltip.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react'
 
-import { Button, ButtonProps, Tooltip, type ReactNodeNoStrings } from '@ensdomains/thorin'
+import { Button, ButtonProps, Tooltip } from '@ensdomains/thorin'
 
 import { useTooltipSeenManager } from '@app/hooks/useTooltipSeenManager'
 
@@ -31,7 +31,7 @@ export const DisabledButtonWithTooltip = ({
   mobileWidth?: number
   buttonWidth?: ButtonProps['width']
   colorStyle?: ButtonProps['colorStyle']
-  prefix?: ReactNodeNoStrings
+  prefix?: AsProp
   loading?: boolean
 }) => {
   const { shouldShowTooltipIndicator, onSeen } = useTooltipSeenManager(buttonId)