refactor: replace 'preact' with 'react' (#1048)

app/assets/javascripts/Components/NoAccountWarning/NoAccountWarning.tsx

@@ -1,18 +1,13 @@
-import { Icon } from '@/Components/Icon/Icon'
+import Icon from '@/Components/Icon/Icon'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { useCallback } from 'preact/hooks'
+import { MouseEventHandler, useCallback } from 'react'
 
 type Props = { appState: AppState }
 
-export const NoAccountWarning = observer(({ appState }: Props) => {
-  const canShow = appState.noAccountWarning.show
-  if (!canShow) {
-    return null
-  }
-
-  const showAccountMenu = useCallback(
-    (event: Event) => {
+const NoAccountWarning = observer(({ appState }: Props) => {
+  const showAccountMenu: MouseEventHandler = useCallback(
+    (event) => {
       event.stopPropagation()
       appState.accountMenu.setShow(true)
     },
@@ -32,9 +27,9 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
       </button>
       <button
         onClick={hideWarning}
-        title="Ignore"
-        label="Ignore"
-        style="height: 20px"
+        title="Ignore warning"
+        aria-label="Ignore warning"
+        style={{ height: '20px' }}
         className="border-0 m-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 color-neutral hover:color-info"
       >
         <Icon type="close" className="block" />
@@ -42,3 +37,13 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
     </div>
   )
 })
+
+NoAccountWarning.displayName = 'NoAccountWarning'
+
+const NoAccountWarningWrapper = ({ appState }: Props) => {
+  const canShow = appState.noAccountWarning.show
+
+  return canShow ? <NoAccountWarning appState={appState} /> : null
+}
+
+export default observer(NoAccountWarningWrapper)