add about control (#855)

src/Components/About/AboutControl.jsx

@@ -10,7 +10,7 @@ import {ControlButton} from '../Buttons'
 import PrivacyControl from './PrivacyControl'
 import LogoB from '../../assets/LogoB.svg'
 import {Helmet} from 'react-helmet-async'
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import PkgJson from '../../../package.json'
 
 /**
  * Button to toggle About panel on and off
@@ -31,11 +31,11 @@ export default function AboutControl() {
 
   return (
     <ControlButton
-      title='About'
+      title={`Bldrs: ${PkgJson.version}`}
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayedLocal}
       icon={
-        <InfoOutlinedIcon className='icon-share' color='secondary'/>
+        <LogoB/>
       }
       dialog={
         <AboutDialog

src/Components/About/AboutControl.test.jsx

@@ -2,18 +2,20 @@ import React from 'react'
 import {render, fireEvent, waitFor} from '@testing-library/react'
 import {MockComponent} from '../../__mocks__/MockComponent'
 import AboutControl from './AboutControl'
+import PkgJson from '../../../package.json'
 
 
+const bldrsVersionString = `Bldrs: ${PkgJson.version}`
 describe('About control tests', () => {
   test('renders the AboutControl button', () => {
     const {getByTitle} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About')
+    const aboutControl = getByTitle(bldrsVersionString)
     expect(aboutControl).toBeInTheDocument()
   })
 
   test('renders AboutDialog when control is pressed', () => {
     const {getByTitle, getByText} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About')
+    const aboutControl = getByTitle(bldrsVersionString)
     fireEvent.click(aboutControl)
     const dialogTitle = getByText('Build every thing together')
     expect(dialogTitle).toBeInTheDocument()