Refactor logo usage in About and NewAppUpdate components to use FarmControlAppIcon component for consistency and maintainability.

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
+              <FarmControlAppIcon
-                src={'/logo512.png'}
-                alt='Farm Control Logo'
                 style={{ width: '200px', height: '200px' }}
               />
               <Flex vertical gap='small' justify='center'>

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
+          <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
-            src={'/logo512.png'}
-            alt='Farm Control Logo'
-            style={{ width: '70px', height: '70px' }}
-          />
           <Flex vertical gap={2} justify='center'>
             <Title level={3} style={{ margin: 0 }}>
               {'Farm Control UI'}

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