From b6c72bb9028413e6345873d524ea2b44b915c358 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 21 Jun 2026 15:39:21 +0100
Subject: [PATCH] Refactor logo usage in About and NewAppUpdate components to
 use FarmControlAppIcon component for consistency and maintainability.

---
 src/components/Dashboard/Management/About.jsx |  5 ++---
 .../Management/AppUpdates/NewAppUpdate.jsx    |  7 ++----
 src/components/Logos/FarmControlAppIcon.jsx   | 22 +++++++++++++++++++
 3 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Logos/FarmControlAppIcon.jsx

diff --git a/src/components/Dashboard/Management/About.jsx b/src/components/Dashboard/Management/About.jsx
index fe1d8d6..b460d92 100644
--- a/src/components/Dashboard/Management/About.jsx
+++ b/src/components/Dashboard/Management/About.jsx
@@ -20,6 +20,7 @@ import { AuthContext } from '../context/AuthContext'
 import { ElectronContext } from '../context/ElectronContext'
 import { AppUpdateContext } from '../context/AppUpdateContext'
 import { useMediaQuery } from 'react-responsive'
+import FarmControlAppIcon from '../../Logos/FarmControlAppIcon'
 const { Title, Text, Link } = Typography
 
 const About = () => {
@@ -125,9 +126,7 @@ const About = () => {
             collapseKey='purchaseOrderStats'
           >
             <Flex gap='large'>
-              <img
-                src={'/logo512.png'}
-                alt='Farm Control Logo'
+              <FarmControlAppIcon
                 style={{ width: '200px', height: '200px' }}
               />
               <Flex vertical gap='small' justify='center'>
diff --git a/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx b/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx
index 9548d88..d5711d3 100644
--- a/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx
+++ b/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { Button, Flex, Typography, Card } from 'antd'
 import TimeDisplay from '../../common/TimeDisplay'
+import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'
 
 const { Text, Title } = Typography
 
@@ -15,11 +16,7 @@ const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
       </Text>
       <Card styles={{ body: { padding: 12 } }}>
         <Flex gap={12}>
-          <img
-            src={'/logo512.png'}
-            alt='Farm Control Logo'
-            style={{ width: '70px', height: '70px' }}
-          />
+          <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
           <Flex vertical gap={2} justify='center'>
             <Title level={3} style={{ margin: 0 }}>
               {'Farm Control UI'}
diff --git a/src/components/Logos/FarmControlAppIcon.jsx b/src/components/Logos/FarmControlAppIcon.jsx
new file mode 100644
index 0000000..0688a8d
--- /dev/null
+++ b/src/components/Logos/FarmControlAppIcon.jsx
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+
+const FarmControlAppIcon = ({ alt = 'Farm Control Logo', style, ...props }) => {
+  const useRelativePath =
+    typeof window !== 'undefined' && window.location.href.includes('index.html')
+
+  return (
+    <img
+      src={`${useRelativePath ? '.' : ''}/logo512.png`}
+      alt={alt}
+      style={style}
+      {...props}
+    />
+  )
+}
+
+FarmControlAppIcon.propTypes = {
+  alt: PropTypes.string,
+  style: PropTypes.object
+}
+
+export default FarmControlAppIcon