@jeremyckahn/farmhand 1.23.3 → 1.23.4

package/dist/assets/index-CaYdR-lC.css

@@ -0,0 +1 @@
+:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animated{animation-duration:var(--animate-duration);animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.repeat-1{animation-iteration-count:var(--animate-repeat)}.animated.repeat-2{animation-iteration-count:calc(var(--animate-repeat) * 2)}.animated.repeat-3{animation-iteration-count:calc(var(--animate-repeat) * 3)}.animated.delay-1s{animation-delay:var(--animate-delay)}.animated.delay-2s{animation-delay:calc(var(--animate-delay) * 2)}.animated.delay-3s{animation-delay:calc(var(--animate-delay) * 3)}.animated.delay-4s{animation-delay:calc(var(--animate-delay) * 4)}.animated.delay-5s{animation-delay:calc(var(--animate-delay) * 5)}.animated.faster{animation-duration:calc(var(--animate-duration) / 2)}.animated.fast{animation-duration:calc(var(--animate-duration) * .8)}.animated.slow{animation-duration:calc(var(--animate-duration) * 2)}.animated.slower{animation-duration:calc(var(--animate-duration) * 3)}@media print,(prefers-reduced-motion:reduce){.animated{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.animated[class*=Out]{opacity:0}}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.heartBeat{animation-name:heartBeat;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}

package/dist/index.html

@@ -75,8 +75,8 @@
         gtag('config', analyticsID)
       })()
     </script>
-    <script type="module" crossorigin src="./assets/index-Dihg7UqQ.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CNcrTYN-.css">
+    <script type="module" crossorigin src="./assets/index-4ynbl-GC.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CaYdR-lC.css">
   <link rel="manifest" href="./manifest.webmanifest"></head>
   <body>
     <noscript>

package/dist/service-worker.js

@@ -1,3 +1,3 @@
-if(!self.define){let e,s={};const i=(i,n)=>(i=new URL(i+".js",n).href,s[i]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()}).then(()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e}));self.define=(n,o)=>{const r=e||("document"in self?document.currentScript.src:"")||location.href;if(s[r])return;let d={};const l=e=>i(e,r),t={module:{uri:r},exports:d,require:l};s[r]=Promise.all(n.map(e=>t[e]||l(e))).then(e=>(o(...e),d))}}define(["./workbox-2fbc6a65"],function(e){"use strict";self.addEventListener("message",e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()}),e.precacheAndRoute([{url:"index.html",revision:"1a925f166515a9c6c4a510e04760d6d2"},{url:"electron.js",revision:"b0456826f47539f6c1957c3add5eb959"},{url:"assets/workbox-window.prod.es5-Bd17z0YL.js",revision:null},{url:"assets/index-Dihg7UqQ.js",revision:null},{url:"assets/index-CNcrTYN-.css",revision:null},{url:"favicon.ico",revision:"445bb19d4a8fd46eb433dd43cbdce691"},{url:"logo192.png",revision:"70746d790b8990639d1390337d77d81a"},{url:"logo512.png",revision:"b044ab46b3f33f0e2d313d961bf1f654"},{url:"logoMaskable.png",revision:"23be58ccf16df9f43658aad3da30056d"},{url:"manifest.webmanifest",revision:"3ad071a00582451c9cdeb827b37b9ebe"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))});
+if(!self.define){let e,s={};const i=(i,n)=>(i=new URL(i+".js",n).href,s[i]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()}).then(()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e}));self.define=(n,o)=>{const r=e||("document"in self?document.currentScript.src:"")||location.href;if(s[r])return;let d={};const l=e=>i(e,r),t={module:{uri:r},exports:d,require:l};s[r]=Promise.all(n.map(e=>t[e]||l(e))).then(e=>(o(...e),d))}}define(["./workbox-2fbc6a65"],function(e){"use strict";self.addEventListener("message",e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()}),e.precacheAndRoute([{url:"index.html",revision:"722454fd4105f0205fcba60b9eef981e"},{url:"electron.js",revision:"b0456826f47539f6c1957c3add5eb959"},{url:"assets/workbox-window.prod.es5-Bd17z0YL.js",revision:null},{url:"assets/index-CaYdR-lC.css",revision:null},{url:"assets/index-4ynbl-GC.js",revision:null},{url:"favicon.ico",revision:"445bb19d4a8fd46eb433dd43cbdce691"},{url:"logo192.png",revision:"70746d790b8990639d1390337d77d81a"},{url:"logo512.png",revision:"b044ab46b3f33f0e2d313d961bf1f654"},{url:"logoMaskable.png",revision:"23be58ccf16df9f43658aad3da30056d"},{url:"manifest.webmanifest",revision:"3ad071a00582451c9cdeb827b37b9ebe"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))});
 //# sourceMappingURL=service-worker.js.map
 //# sourceMappingURL=service-worker.js.map

package/dist/service-worker.js.map

@@ -1 +1 @@
-{"version":3,"file":"service-worker.js","sources":["../../../../../tmp/3f6b996c04d6ac4afbf39f21d035a4a0/service-worker.js"],"sourcesContent":["import {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {cleanupOutdatedCaches as workbox_precaching_cleanupOutdatedCaches} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-precaching/cleanupOutdatedCaches.mjs';\nimport {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-routing/registerRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\nself.addEventListener('message', (event) => {\n  if (event.data && event.data.type === 'SKIP_WAITING') {\n    self.skipWaiting();\n  }\n});\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"index.html\",\n    \"revision\": \"1a925f166515a9c6c4a510e04760d6d2\"\n  },\n  {\n    \"url\": \"electron.js\",\n    \"revision\": \"b0456826f47539f6c1957c3add5eb959\"\n  },\n  {\n    \"url\": \"assets/workbox-window.prod.es5-Bd17z0YL.js\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"assets/index-Dihg7UqQ.js\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"assets/index-CNcrTYN-.css\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"favicon.ico\",\n    \"revision\": \"445bb19d4a8fd46eb433dd43cbdce691\"\n  },\n  {\n    \"url\": \"logo192.png\",\n    \"revision\": \"70746d790b8990639d1390337d77d81a\"\n  },\n  {\n    \"url\": \"logo512.png\",\n    \"revision\": \"b044ab46b3f33f0e2d313d961bf1f654\"\n  },\n  {\n    \"url\": \"logoMaskable.png\",\n    \"revision\": \"23be58ccf16df9f43658aad3da30056d\"\n  },\n  {\n    \"url\": \"manifest.webmanifest\",\n    \"revision\": \"3ad071a00582451c9cdeb827b37b9ebe\"\n  }\n], {});\nworkbox_precaching_cleanupOutdatedCaches();workbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"index.html\")));\n\n\n"],"names":["self","addEventListener","event","data","type","skipWaiting","workbox_precaching_precacheAndRoute","url","revision","workbox_precaching_cleanupOutdatedCaches","workbox_routing_registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL"],"mappings":"inBAmBAA,KAAKC,iBAAiB,UAAYC,IAC5BA,EAAMC,MAA4B,iBAApBD,EAAMC,KAAKC,MAC3BJ,KAAKK,gBASTC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,aACPC,SAAY,oCAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,6CACPC,SAAY,MAEd,CACED,IAAO,2BACPC,SAAY,MAEd,CACED,IAAO,4BACPC,SAAY,MAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,mBACPC,SAAY,oCAEd,CACED,IAAO,uBACPC,SAAY,qCAEb,CAAA,GACHC,EAAAA,wBAA2CC,EAAAA,cAA8B,IAAIC,EAAAA,gBAAgCC,0BAA2C"}
+{"version":3,"file":"service-worker.js","sources":["../../../../../tmp/ddd5756e9844fd752d030ba271838589/service-worker.js"],"sourcesContent":["import {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {cleanupOutdatedCaches as workbox_precaching_cleanupOutdatedCaches} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-precaching/cleanupOutdatedCaches.mjs';\nimport {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-routing/registerRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/farmhand/farmhand/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\nself.addEventListener('message', (event) => {\n  if (event.data && event.data.type === 'SKIP_WAITING') {\n    self.skipWaiting();\n  }\n});\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"index.html\",\n    \"revision\": \"722454fd4105f0205fcba60b9eef981e\"\n  },\n  {\n    \"url\": \"electron.js\",\n    \"revision\": \"b0456826f47539f6c1957c3add5eb959\"\n  },\n  {\n    \"url\": \"assets/workbox-window.prod.es5-Bd17z0YL.js\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"assets/index-CaYdR-lC.css\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"assets/index-4ynbl-GC.js\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"favicon.ico\",\n    \"revision\": \"445bb19d4a8fd46eb433dd43cbdce691\"\n  },\n  {\n    \"url\": \"logo192.png\",\n    \"revision\": \"70746d790b8990639d1390337d77d81a\"\n  },\n  {\n    \"url\": \"logo512.png\",\n    \"revision\": \"b044ab46b3f33f0e2d313d961bf1f654\"\n  },\n  {\n    \"url\": \"logoMaskable.png\",\n    \"revision\": \"23be58ccf16df9f43658aad3da30056d\"\n  },\n  {\n    \"url\": \"manifest.webmanifest\",\n    \"revision\": \"3ad071a00582451c9cdeb827b37b9ebe\"\n  }\n], {});\nworkbox_precaching_cleanupOutdatedCaches();workbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"index.html\")));\n\n\n"],"names":["self","addEventListener","event","data","type","skipWaiting","workbox_precaching_precacheAndRoute","url","revision","workbox_precaching_cleanupOutdatedCaches","workbox_routing_registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL"],"mappings":"inBAmBAA,KAAKC,iBAAiB,UAAYC,IAC5BA,EAAMC,MAA4B,iBAApBD,EAAMC,KAAKC,MAC3BJ,KAAKK,gBASTC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,aACPC,SAAY,oCAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,6CACPC,SAAY,MAEd,CACED,IAAO,4BACPC,SAAY,MAEd,CACED,IAAO,2BACPC,SAAY,MAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,mBACPC,SAAY,oCAEd,CACED,IAAO,uBACPC,SAAY,qCAEb,CAAA,GACHC,EAAAA,wBAA2CC,EAAAA,cAA8B,IAAIC,EAAAA,gBAAgCC,0BAA2C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jeremyckahn/farmhand",
-  "version": "1.23.3",
+  "version": "1.23.4",
   "publishConfig": {
     "access": "public"
   },
@@ -101,13 +101,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/francois-one": "^5.2.6",
-    "@fontsource/public-sans": "^5.1.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-regular-svg-icons": "^5.12.1",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "@fortawesome/react-fontawesome": "^0.1.9",
-    "@mui/icons-material": "^5.15.0",
+    "@fontsource/jersey-10": "^5.3.0",
+    "@fontsource/jersey-20": "^5.3.0",
+    "@fontsource/jersey-25": "^5.3.0",
     "@mui/lab": "^5.0.0-alpha.156",
     "@mui/material": "^5.15.0",
     "@mui/styles": "^5.15.0",

package/src/components/AccountingView/AccountingView.tsx

@@ -4,9 +4,11 @@ import CardHeader from '@mui/material/CardHeader/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
 import Button from '@mui/material/Button/index.js'
 import TextField from '@mui/material/TextField/index.js'
-import AccountBalanceIcon from '@mui/icons-material/AccountBalance.js'
+
 import NumberFormat from 'react-number-format'
 
+import { AccountBalanceIcon } from '../PixelIcon/index.js'
+
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { moneyString } from '../../utils/moneyString.js'
 import { dollarString } from '../../utils/dollarString.js'

package/src/components/Achievement/Achievement.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import AssignmentLateIcon from '@mui/icons-material/AssignmentLate.js'
 import Card from '@mui/material/Card/index.js'
 import CardHeader from '@mui/material/CardHeader/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
-import BeenhereIcon from '@mui/icons-material/Beenhere.js'
+
+import { AssignmentLateIcon, BeenhereIcon } from '../PixelIcon/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { Div } from '../Elements/index.js'

package/src/components/AppBar/AppBar.tsx

@@ -5,14 +5,15 @@ import { tween, Tweenable } from 'shifty'
 import { default as MuiAppBar } from '@mui/material/AppBar/index.js'
 import Toolbar from '@mui/material/Toolbar/index.js'
 import Typography from '@mui/material/Typography/index.js'
-import StepIcon from '@mui/material/StepIcon/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
+import { WarningIcon } from '../PixelIcon/index.js'
 import { seasonNameMap } from '../../data/seasons.js'
 import { getCurrentSeason } from '../../utils/getCurrentSeason.js'
 import { getDayOfSeason } from '../../utils/getDayOfSeason.js'
 import { moneyString } from '../../utils/moneyString.js'
-import { breakpoints } from '../../styles/tokens.js'
+import { pixelBevel, pixelFrameSx } from '../../styles/pixel.js'
+import { breakpoints, colors, fonts } from '../../styles/tokens.js'
 import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion.js'
 
 const MoneyDisplay = ({ money }: { money: number }) => {
@@ -102,7 +103,7 @@ export const AppBar = ({
         display: 'flex',
         '& h2': {
           color: '#fff',
-          fontFamily: '"Francois One", monospace',
+          fontFamily: fonts.display,
           fontSize: '1.2em',
         },
         '& .stage-header': {
@@ -129,8 +130,21 @@ export const AppBar = ({
           right: '1em',
         },
         '& .notification-indicator-container': {
+          alignItems: 'center',
+          cursor: 'pointer',
           display: 'flex',
-          '& .error-indicator': { marginLeft: '1em' },
+          '& .notification-count': {
+            ...pixelFrameSx({ outline: colors.neutralOutline }),
+            backgroundColor: 'rgba(0, 0, 0, 0.38)',
+            boxShadow: pixelBevel(),
+            color: '#fff',
+            fontFamily: fonts.display,
+            lineHeight: 1,
+            minWidth: '1.5em',
+            padding: '0.2em 0.35em',
+            textAlign: 'center',
+          },
+          '& .error-indicator': { display: 'flex', marginLeft: '1em' },
         },
       },
     }}
@@ -147,8 +161,8 @@ export const AppBar = ({
             onClick: handleClickNotificationIndicator,
           }}
         >
-          <Typography>
-            <StepIcon {...{ icon: todaysNotifications.length }} />
+          <Typography {...{ className: 'notification-count' }}>
+            {todaysNotifications.length}
           </Typography>
           {areAnyNotificationsErrors && (
             <Typography
@@ -156,7 +170,7 @@ export const AppBar = ({
                 className: 'error-indicator',
               }}
             >
-              <StepIcon {...{ error: true, icon: '' }} />
+              <WarningIcon {...{ color: 'error' }} />
             </Typography>
           )}
         </div>

package/src/components/CowCard/Bloodline/Bloodline.tsx

@@ -24,7 +24,6 @@ const Bloodline = ({
         <Tooltip
           {...{
             key: color,
-            arrow: true,
             placement: 'top',
             title: COW_COLOR_NAMES[color as keyof typeof COW_COLOR_NAMES],
           }}

package/src/components/CowCard/CowCard.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Button from '@mui/material/Button/index.js'
 import Card from '@mui/material/Card/index.js'
 import CardActions from '@mui/material/CardActions/index.js'
@@ -28,13 +26,14 @@ import { isCowInBreedingPen } from '../../utils/isCowInBreedingPen.js'
 import { isInViewport } from '../../utils/isInViewport.js'
 import { A } from '../Elements/index.js'
 import FarmhandContext, { BoundHandlers } from '../Farmhand/Farmhand.context.js'
+import { FemaleIcon, MaleIcon } from '../PixelIcon/index.js'
 
 import Subheader from './Subheader/index.js'
 
 const genderIcons = {
-  [genders.FEMALE as string]: faVenus,
-  [genders.MALE as string]: faMars,
-} as Record<string, typeof faVenus>
+  [genders.FEMALE as string]: FemaleIcon,
+  [genders.MALE as string]: MaleIcon,
+} as Record<string, typeof FemaleIcon>
 
 export interface CowCardProps {
   allowCustomPeerCowNames: farmhand.state['allowCustomPeerCowNames']
@@ -156,6 +155,8 @@ export const CowCard = ({
     }
   }, [isSelected])
 
+  const GenderIcon = genderIcons[cow.gender]
+
   return (
     <>
       <A
@@ -232,11 +233,7 @@ export const CowCard = ({
                 ) : (
                   displayName
                 )}{' '}
-                <FontAwesomeIcon
-                  {...{
-                    icon: genderIcons[cow.gender],
-                  }}
-                />
+                <GenderIcon fontSize="inherit" />
               </>
             ),
             subheader: (
@@ -278,7 +275,6 @@ export const CowCard = ({
           {canCowBeTradedFor && (
             <Tooltip
               {...{
-                arrow: true,
                 placement: 'top',
                 title: 'The game will be saved when the trade is completed.',
               }}
@@ -311,7 +307,6 @@ export const CowCard = ({
                 (cowIdOfferedForTrade === cow.id ? (
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title: WITHDRAW_COW_FROM_TRADE('', cowDisplayName),
                     }}
@@ -332,7 +327,6 @@ export const CowCard = ({
                 ) : (
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title: (
                         <Typography>

package/src/components/CowCard/Subheader/Subheader.tsx

@@ -1,6 +1,3 @@
-import { faHeart as faEmptyHeart } from '@fortawesome/free-regular-svg-icons'
-import { faHeart as faFullHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Checkbox from '@mui/material/Checkbox/index.js'
 import FormControlLabel from '@mui/material/FormControlLabel/index.js'
 import Tooltip from '@mui/material/Tooltip/index.js'
@@ -18,6 +15,7 @@ import { isCowInBreedingPen } from '../../../utils/isCowInBreedingPen.js'
 import { memoize } from '../../../utils/memoize.js'
 import { moneyString } from '../../../utils/moneyString.js'
 import { nullArray } from '../../../utils/nullArray.js'
+import { HeartIcon, HeartOutlineIcon } from '../../PixelIcon/index.js'
 import Bloodline from '../Bloodline/index.js'
 import { CowCardProps } from '../CowCard.js'
 
@@ -114,25 +112,20 @@ const Subheader = ({
           <ol className="hearts">
             {nullArray(10).map((_null: null, i: number) => (
               <li key={`${cow.id}_${i}`}>
-                <FontAwesomeIcon
-                  {...{
-                    icon: isHeartFull(i, numberOfFullHearts)
-                      ? faFullHeart
-                      : faEmptyHeart,
-                    color: isHeartFull(i, numberOfFullHearts)
-                      ? colors.heart
-                      : undefined,
-                    className: classNames('heart', {
-                      'is-full': isHeartFull(i, numberOfFullHearts),
-                    }),
-                  }}
-                />
+                {isHeartFull(i, numberOfFullHearts) ? (
+                  <HeartIcon
+                    className="heart is-full"
+                    fontSize="inherit"
+                    htmlColor={colors.heart}
+                  />
+                ) : (
+                  <HeartOutlineIcon className="heart" fontSize="inherit" />
+                )}
               </li>
             ))}
           </ol>
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               title: (
                 <Typography>
@@ -163,7 +156,6 @@ const Subheader = ({
           </Tooltip>
           <Tooltip
             {...{
-              arrow: true,
               placement: 'top',
               disableFocusListener: disableBreedingControlTooltip,
               disableHoverListener: disableBreedingControlTooltip,

package/src/components/CowPen/Cow.tsx

@@ -1,5 +1,3 @@
-import { faHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
 import classNames from 'classnames'
@@ -12,6 +10,7 @@ import { LEFT, RIGHT } from '../../constants.js'
 import { pixel } from '../../img/index.js'
 import { getCowDisplayName } from '../../utils/getCowDisplayName.js'
 import { getCowImage } from '../../utils/getCowImage.js'
+import { HeartIcon } from '../PixelIcon/index.js'
 
 // Only moves the cow within the middle 80% of the pen
 const randomPosition = () => 10 + random() * 80
@@ -249,7 +248,6 @@ export const Cow = ({
       )}
       <Tooltip
         {...{
-          arrow: true,
           placement: 'top',
           title: <Typography>{cowDisplayName}</Typography>,
           open: isSelected,
@@ -265,12 +263,12 @@ export const Cow = ({
             }}
             alt={cowDisplayName}
           />
-          <FontAwesomeIcon
+          <HeartIcon
             {...{
-              className: classNames('animation', {
+              className: classNames('heart-icon', 'animation', {
                 'is-animating': showHugAnimation,
               }),
-              icon: faHeart,
+              fontSize: 'inherit',
             }}
           />
         </div>
@@ -278,11 +276,7 @@ export const Cow = ({
       <ol {...{ className: 'happiness-boosts-today' }}>
         {new Array(cow.happinessBoostsToday).fill(undefined).map((_, i) => (
           <li {...{ key: i }}>
-            <FontAwesomeIcon
-              {...{
-                icon: faHeart,
-              }}
-            />
+            <HeartIcon className="heart-icon" fontSize="inherit" />
           </li>
         ))}
       </ol>

package/src/components/CowPen/CowPen.test.tsx

@@ -94,7 +94,7 @@ describe('Cow', () => {
 
     render(<Cow {...defaultCowProps} cow={happyCow} />)
 
-    expect(document.querySelector('.fa-heart')).toBeInTheDocument()
+    expect(document.querySelector('.heart-icon')).toBeInTheDocument()
   })
 
   test('does not show happiness indicator when cow is not happy', () => {
@@ -214,7 +214,7 @@ describe('Cow', () => {
       />
     )
 
-    const heart = () => container.querySelector('.fa-heart.animation')
+    const heart = () => container.querySelector('.heart-icon.animation')
 
     rerender(
       <Cow
@@ -234,7 +234,7 @@ describe('Cow', () => {
       />
     )
 
-    const heart = () => container.querySelector('.fa-heart.animation')
+    const heart = () => container.querySelector('.heart-icon.animation')
 
     rerender(
       <Cow
@@ -258,7 +258,7 @@ describe('Cow', () => {
       />
     )
 
-    const heart = () => container.querySelector('.fa-heart.animation')
+    const heart = () => container.querySelector('.heart-icon.animation')
 
     // Midnight: the daily reset brings the boost count back down.
     rerender(

package/src/components/CowPen/CowPen.tsx

@@ -70,7 +70,7 @@ export const CowPen = ({
               easing: theme.transitions.easing.easeOut,
             }),
           },
-          '& .fa-heart': {
+          '& .heart-icon': {
             color: colors.heart,
             '&.animation': {
               opacity: 0,

package/src/components/CowPenContextMenu/CowPenContextMenu.tsx

@@ -1,5 +1,3 @@
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward.js'
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward.js'
 import Fab from '@mui/material/Fab/index.js'
 import MenuItem from '@mui/material/MenuItem/index.js'
 import Select from '@mui/material/Select/index.js'
@@ -8,6 +6,8 @@ import Tabs from '@mui/material/Tabs/index.js'
 import sortBy from 'lodash.sortby'
 import { useEffect, useState } from 'react'
 
+import { ArrowDownwardIcon, ArrowUpwardIcon } from '../PixelIcon/index.js'
+
 import { PURCHASEABLE_COW_PENS } from '../../constants.js'
 import cowShopInventory from '../../data/shop-inventory-cow.js'
 import uiEventHandlers from '../../handlers/ui-events.js'

package/src/components/Farmhand/Farmhand.tsx

@@ -1,7 +1,3 @@
-import HotelIcon from '@mui/icons-material/Hotel.js'
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft.js'
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight.js'
-import MenuIcon from '@mui/icons-material/Menu.js'
 import CssBaseline from '@mui/material/CssBaseline/index.js'
 import Drawer from '@mui/material/Drawer/index.js'
 import Fab from '@mui/material/Fab/index.js'
@@ -14,6 +10,13 @@ import { SnackbarProvider } from 'notistack'
 import { GlobalHotKeys } from 'react-hotkeys'
 import { Redirect } from 'react-router-dom'
 
+import {
+  HotelIcon,
+  KeyboardArrowLeftIcon as KeyboardArrowLeft,
+  KeyboardArrowRightIcon as KeyboardArrowRight,
+  MenuIcon,
+} from '../PixelIcon/index.js'
+
 import { Z_INDEX } from '../../constants.js'
 import theme, { blueStripeBg } from '../../mui-theme.js'
 import { Div } from '../Elements/index.js'

package/src/components/Farmhand/useFarmhand.ts

@@ -394,8 +394,18 @@ export const useFarmhand = (props: FarmhandProps) => {
         boundReducersRef.current.purchaseItem(item, quantity),
       sellItem: (item: any, quantity: number) =>
         boundReducersRef.current.sellItem(item, quantity),
-      showNotification: (msg: string, sev?: string, onClick?: () => void) =>
-        boundReducersRef.current.showNotification(msg, sev, onClick),
+      showNotification: (
+        msg: string,
+        sev?: string,
+        onClick?: () => void,
+        actionLabel?: string
+      ) =>
+        boundReducersRef.current.showNotification(
+          msg,
+          sev,
+          onClick,
+          actionLabel
+        ),
       prependPendingPeerMessage: (msg: string, sev?: string) =>
         boundReducersRef.current.prependPendingPeerMessage(msg, sev),
       forRange: (

package/src/components/Field/Field.tsx

@@ -1,5 +1,3 @@
-import ZoomInIcon from '@mui/icons-material/ZoomIn.js'
-import ZoomOutIcon from '@mui/icons-material/ZoomOut.js'
 import Fab from '@mui/material/Fab/index.js'
 import FormControl from '@mui/material/FormControl/index.js'
 import FormControlLabel from '@mui/material/FormControlLabel/index.js'
@@ -14,6 +12,8 @@ import React, { memo, useEffect, useState } from 'react'
 import { GlobalHotKeys } from 'react-hotkeys'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 
+import { ZoomInIcon, ZoomOutIcon } from '../PixelIcon/index.js'
+
 import {
   basicLightningRod,
   superiorLightningRod,

package/src/components/Home/Home.tsx

@@ -1,4 +1,3 @@
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore.js'
 import Accordion from '@mui/material/Accordion/index.js'
 import AccordionDetails from '@mui/material/AccordionDetails/index.js'
 import AccordionSummary from '@mui/material/AccordionSummary/index.js'
@@ -9,6 +8,8 @@ import Divider from '@mui/material/Divider/index.js'
 import globalWindow from 'global/window.js'
 import ReactMarkdown from 'react-markdown'
 
+import { ExpandMoreIcon } from '../PixelIcon/index.js'
+
 import { items } from '../../img/index.js'
 
 import { STANDARD_LOAN_AMOUNT } from '../../constants.js'

package/src/components/Inventory/Inventory.tsx

@@ -4,7 +4,8 @@ import AccordionSummary from '@mui/material/AccordionSummary/index.js'
 import AccordionDetails from '@mui/material/AccordionDetails/index.js'
 import Checkbox from '@mui/material/Checkbox/index.js'
 import FormControlLabel from '@mui/material/FormControlLabel/index.js'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore.js'
+
+import { ExpandMoreIcon } from '../PixelIcon/index.js'
 
 import FarmhandContext, { ContextData } from '../Farmhand/Farmhand.context.js'
 import Item from '../Item/index.js'

package/src/components/Item/Item.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp.js'
-import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown.js'
+
 import Button from '@mui/material/Button/index.js'
 import Box from '@mui/material/Box/index.js'
 import Card from '@mui/material/Card/index.js'
@@ -11,6 +10,11 @@ import Tooltip from '@mui/material/Tooltip/index.js'
 import Typography from '@mui/material/Typography/index.js'
 import classNames from 'classnames'
 
+import {
+  KeyboardArrowUpIcon as KeyboardArrowUp,
+  KeyboardArrowDownIcon as KeyboardArrowDown,
+} from '../PixelIcon/index.js'
+
 import FarmhandContext, { ContextData } from '../Farmhand/Farmhand.context.js'
 import { items } from '../../img/index.js'
 import { itemsMap } from '../../data/maps.js'
@@ -35,18 +39,20 @@ interface ValueIndicatorProps {
   poorValue: boolean
 }
 
+// Keeps the indicator from crowding the price it follows.
+const valueIndicatorSx = { marginLeft: '0.5rem' } as const
+
 const ValueIndicator = ({ poorValue }: ValueIndicatorProps) => (
   <Tooltip
     {...{
-      arrow: true,
       placement: 'top',
       title: `${poorValue ? 'Poor' : 'Good'} opportunity`,
     }}
   >
     {poorValue ? (
-      <KeyboardArrowDown color="error" />
+      <KeyboardArrowDown color="error" sx={valueIndicatorSx} />
     ) : (
-      <KeyboardArrowUp color="primary" />
+      <KeyboardArrowUp color="primary" sx={valueIndicatorSx} />
     )}
   </Tooltip>
 )
@@ -228,7 +234,6 @@ export const Item = ({
             !isPurchaseView && description ? (
               <Tooltip
                 {...{
-                  arrow: true,
                   placement: 'top',
                   title: <Typography>{description}</Typography>,
                 }}
@@ -245,7 +250,6 @@ export const Item = ({
                 <p>
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title:
                         previousDayAdjustedValue === null
@@ -287,7 +291,6 @@ export const Item = ({
                 <p>
                   <Tooltip
                     {...{
-                      arrow: true,
                       placement: 'top',
                       title:
                         previousDayAdjustedValue === null

package/src/components/LogView/LogView.tsx

@@ -6,6 +6,7 @@ import Divider from '@mui/material/Divider/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { Div } from '../Elements/index.js'
+import { NotificationAlert } from '../NotificationSystem/NotificationSystem.js'
 
 export const LogView = ({
   notificationLog,
@@ -23,28 +24,11 @@ export const LogView = ({
   >
     <h3>Today</h3>
     <ul>
-      {todaysNotifications.map(
-        ({
-          message,
-          onClick,
-          severity,
-        }: farmhand.notification & { onClick?: () => void }) => (
-          <li {...{ key: message }}>
-            <Alert
-              {...{
-                elevation: 3,
-                onClick,
-                severity,
-                style: {
-                  cursor: onClick ? 'pointer' : 'default',
-                },
-              }}
-            >
-              <ReactMarkdown {...{ source: message }} />
-            </Alert>
-          </li>
-        )
-      )}
+      {todaysNotifications.map(notification => (
+        <li {...{ key: notification.message }}>
+          <NotificationAlert {...{ notification }} />
+        </li>
+      ))}
     </ul>
     <Divider />
     <ul>

package/src/components/Navigation/DayAndProgressContainer.tsx

@@ -40,7 +40,6 @@ export function DayAndProgressContainer({
       <span>Day {integerString(dayCount)}, level:</span>
       <Tooltip
         {...{
-          arrow: true,
           placement: 'top',
           title: EXPERIENCE_GAUGE_TOOLTIP_LABEL`${experiencePointsToNextLevel}${nextLevel}`,
         }}