fix(mui): improve tooltip styles for cows

jeremyckahn · Dec 17, 2023 · d63e182 · d63e182
1 parent ce401ee
commit d63e182
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/src/components/CowCard/CowCard.js b/src/components/CowCard/CowCard.js
@@ -12,6 +12,7 @@ import CardActions from '@mui/material/CardActions'
 import CardHeader from '@mui/material/CardHeader'
 import TextField from '@mui/material/TextField'
 import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import classNames from 'classnames'
 import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons'
@@ -290,7 +291,9 @@ export const CowCard = (
                     {...{
                       arrow: true,
                       placement: 'top',
-                      title: OFFER_COW_FOR_TRADE`${cowDisplayName}`,
+                      title: (
+                        <Typography>{OFFER_COW_FOR_TRADE`${cowDisplayName}`}</Typography>
+                      ),
                     }}
                   >
                     <Button

diff --git a/src/components/CowCard/Subheader/Subheader.js b/src/components/CowCard/Subheader/Subheader.js
@@ -6,6 +6,7 @@ import { array, bool, func, object, string } from 'prop-types'
 import Checkbox from '@mui/material/Checkbox'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import classNames from 'classnames'
 import { faHeart as faFullHeart } from '@fortawesome/free-solid-svg-icons'
@@ -147,7 +148,13 @@ const Subheader = (
             {...{
               arrow: true,
               placement: 'top',
-              title: `Check this box to put ${cow.name} into a ${huggingMachine.name} and automatically hug them at the start of every day. Requires a Hugging Machine in your inventory.`,
+              title: (
+                <Typography>
+                  Check this box to put {cow.name} into a {huggingMachine.name}
+                  and automatically hug them at the start of every day. Requires
+                  a Hugging Machine in your inventory.
+                </Typography>
+              ),
             }}
           >
             <FormControlLabel
@@ -175,13 +182,17 @@ const Subheader = (
               disableFocusListener: disableBreedingControlTooltip,
               disableHoverListener: disableBreedingControlTooltip,
               disableTouchListener: disableBreedingControlTooltip,
-              title: isInBreedingPen
-                ? `Uncheck this box to return ${cow.name} to the regular pen.`
-                : `Check this box to move ${
-                    cow.name
-                  } to the breeding pen to mate with a ${
-                    cow.gender === genders.MALE ? 'female' : 'male'
-                  } cow.`,
+              title: (
+                <Typography>
+                  {isInBreedingPen
+                    ? `Uncheck this box to return ${cow.name} to the regular pen.`
+                    : `Check this box to move ${
+                        cow.name
+                      } to the breeding pen to mate with a ${
+                        cow.gender === genders.MALE ? 'female' : 'male'
+                      } cow.`}
+                </Typography>
+              ),
             }}
           >
             <FormControlLabel

diff --git a/src/components/CowPen/CowPen.js b/src/components/CowPen/CowPen.js
@@ -3,6 +3,7 @@ import { array, bool, func, object, string } from 'prop-types'
 import classNames from 'classnames'
 import { Tweenable } from 'shifty'
 import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart } from '@fortawesome/free-solid-svg-icons'
 
@@ -203,7 +204,7 @@ export class Cow extends Component {
           {...{
             arrow: true,
             placement: 'top',
-            title: cowDisplayName,
+            title: <Typography>{cowDisplayName}</Typography>,
             open: isSelected,
             PopperProps: {
               disablePortal: true,