refactor: reduce dup more

Author: Mygod

src/components/popups/BackgroundCard.jsx

@@ -26,6 +26,32 @@ const DARK_PALETTE_ENTRIES = Object.entries(
     return acc
   }, {})
 
+/**
+ * Generates symmetrical margin/padding to let the background artwork bleed.
+ *
+ * @param {{
+ *  horizontal?: number
+ *  vertical?: number
+ *  clampWidth?: boolean
+ * }} [options]
+ * @returns {React.CSSProperties}
+ */
+export function createFullBleedSurfaceStyle({
+  horizontal = 0,
+  vertical = 0,
+} = {}) {
+  const horizontalPixels = Number(horizontal) || 0
+  const verticalPixels = Number(vertical) || 0
+  const widthAdjustment = horizontalPixels * 2
+  const width = widthAdjustment ? `calc(100% + ${widthAdjustment}px)` : '100%'
+  return {
+    margin: `${-verticalPixels}px ${-horizontalPixels}px`,
+    padding: `${verticalPixels}px ${horizontalPixels}px`,
+    width,
+    boxSizing: 'border-box',
+  }
+}
+
 /**
  * Applies themed background visuals (and optional tooltip) around popup content.
  *

src/features/gym/GymPopup.jsx

@@ -31,7 +31,10 @@ import { GenderIcon } from '@components/popups/GenderIcon'
 import { Navigation } from '@components/popups/Navigation'
 import { Coords } from '@components/popups/Coords'
 import { TimeStamp } from '@components/popups/TimeStamps'
-import { BackgroundCard } from '@components/popups/BackgroundCard'
+import {
+  BackgroundCard,
+  createFullBleedSurfaceStyle,
+} from '@components/popups/BackgroundCard'
 import { useAnalytics } from '@hooks/useAnalytics'
 import { getTimeUntil } from '@utils/getTimeUntil'
 import { formatInterval } from '@utils/formatInterval'
@@ -351,14 +354,7 @@ function DefendersModal({ gym, onClose }) {
             : undefined
         }
         surfaceStyle={
-          fallbackHasBackground
-            ? {
-                margin: 0,
-                padding: 0,
-                width: '100%',
-                maxWidth: '100%',
-              }
-            : undefined
+          fallbackHasBackground ? createFullBleedSurfaceStyle({}) : undefined
         }
       >
         {rowContent}
@@ -650,12 +646,7 @@ function DefendersModal({ gym, onClose }) {
                     }
                     surfaceStyle={
                       hasBackground
-                        ? {
-                            margin: 0,
-                            padding: 0,
-                            width: '100%',
-                            maxWidth: '100%',
-                          }
+                        ? createFullBleedSurfaceStyle({})
                         : undefined
                     }
                   >

src/features/pokemon/PokemonPopup.jsx

@@ -31,7 +31,10 @@ import { readableProbability } from '@utils/readableProbability'
 import { GET_POKEMON_SHINY_STATS } from '@services/queries/pokemon'
 import { GET_TAPPABLE_BY_ID } from '@services/queries/tappable'
 import { usePokemonBackgroundVisuals } from '@hooks/usePokemonBackgroundVisuals'
-import { BackgroundCard } from '@components/popups/BackgroundCard'
+import {
+  BackgroundCard,
+  createFullBleedSurfaceStyle,
+} from '@components/popups/BackgroundCard'
 
 const rowClass = { width: 30, fontWeight: 'bold' }
 
@@ -326,15 +329,14 @@ export function PokemonPopup({ pokemon, iconUrl, isTutorial = false }) {
         surfaceStyle={
           backgroundVisuals?.hasBackground
             ? {
+                ...createFullBleedSurfaceStyle({
+                  horizontal: 20,
+                  vertical: 13,
+                }),
                 display: 'flex',
                 flexDirection: 'column',
                 flex: '1 1 auto',
                 alignSelf: 'stretch',
-                margin: '-13px -20px',
-                padding: '13px 20px',
-                width: 'calc(100% + 40px)',
-                maxWidth: 'none',
-                boxSizing: 'border-box',
               }
             : undefined
         }

src/features/pokestop/PokestopPopup.jsx

@@ -27,7 +27,10 @@ import { Timer } from '@components/popups/Timer'
 import { PowerUp } from '@components/popups/PowerUp'
 import { NameTT } from '@components/popups/NameTT'
 import { TimeStamp } from '@components/popups/TimeStamps'
-import { BackgroundCard } from '@components/popups/BackgroundCard'
+import {
+  BackgroundCard,
+  createFullBleedSurfaceStyle,
+} from '@components/popups/BackgroundCard'
 import { useAnalytics } from '@hooks/useAnalytics'
 import { useGetAvailable } from '@hooks/useGetAvailable'
 import { parseQuestConditions } from '@utils/parseConditions'
@@ -599,27 +602,11 @@ const RewardInfo = ({ with_ar, ...quest }) => {
  * @param {{
  *  quest: Omit<import('@rm/types').Quest, 'key'>
  *  visuals?: ReturnType<ReturnType<typeof usePokemonBackgroundVisuals>>
- *  hasBackground?: boolean
  * }} props
  * @returns
  */
-const QuestRewardRow = ({ quest, visuals: visualsProp }) => {
-  const { quest_reward_type, quest_background, quest_shiny_probability } = quest
-  const getPokemonBackgroundVisuals = usePokemonBackgroundVisuals()
-  const visuals = React.useMemo(() => {
-    if (visualsProp) {
-      return visualsProp
-    }
-    if (quest_reward_type !== 7) {
-      return undefined
-    }
-    return getPokemonBackgroundVisuals(quest_background)
-  }, [
-    visualsProp,
-    getPokemonBackgroundVisuals,
-    quest_background,
-    quest_reward_type,
-  ])
+const QuestRewardRow = ({ quest, visuals }) => {
+  const { quest_reward_type, quest_shiny_probability } = quest
   const hasBackground = visuals?.hasBackground ?? false
   const applyBackground = quest_reward_type === 7 && hasBackground
   const backgroundMeta = visuals?.backgroundMeta
@@ -670,13 +657,7 @@ const QuestRewardRow = ({ quest, visuals: visualsProp }) => {
       wrapperProps={applyBackground ? { style: { width: '100%' } } : undefined}
       surfaceStyle={
         applyBackground
-          ? {
-              margin: '0 -21px',
-              padding: '0 21px',
-              width: 'calc(100% + 42px)',
-              maxWidth: 'calc(100% + 42px)',
-              boxSizing: 'border-box',
-            }
+          ? createFullBleedSurfaceStyle({ horizontal: 21 })
           : undefined
       }
     >
@@ -1068,13 +1049,7 @@ const ShowcaseEntry = ({
       wrapWhenNoTooltip
       surfaceStyle={
         hasBackground
-          ? {
-              margin: '0 -21px',
-              padding: '0 21px',
-              width: 'calc(100% + 42px)',
-              maxWidth: 'none',
-              boxSizing: 'border-box',
-            }
+          ? createFullBleedSurfaceStyle({ horizontal: 21 })
           : undefined
       }
     >