message: feat(web): improve unsupported browser warning
  This makes the warning to appear in a modal, so that it's harder to miss. Also adds links to official websites of Chrome and Firefox.
diff: -import React, { useMemo } from 'react'
  -import { useTranslation } from 'react-i18next'
  -import { UncontrolledAlert } from 'reactstrap'
  import Bowser from 'bowser'
  +import React, { useCallback, useMemo, useState } from 'react'
  +import { useTranslation } from 'react-i18next'
  +import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap'
  +import { ModalHeader } from 'src/components/Error/ErrorPopup'
  +import { LinkExternal } from 'src/components/Link/LinkExternal'
  import { notUndefinedOrNull } from 'src/helpers/notUndefined'
  export function BrowserWarning() {
  const { t } = useTranslation()
  - const warningText = useMemo(() => {
  + const [isOpen, setIsOpen] = useState(true)
  + const dismiss = useCallback(() => setIsOpen(false), [setIsOpen])
  +
  + const nameAndVersion = useMemo(() => {
  const browser = Bowser.getParser(window?.navigator?.userAgent)
  const isSupportedBrowser = browser.satisfies({
  chrome: '>60',
  @@ -21,20 +26,37 @@ export function BrowserWarning() {
  }
  const { name, version } = browser.getBrowser()
  - const nameAndVersion = [name, version].filter(notUndefinedOrNull).join(' ')
  -
  - return t(
  - `This browser version (${nameAndVersion}) is not supported. Nextclade works best in the latest version of Chrome or Firefox.`,
  - )
  - }, [t])
  + return [name, version].filter(notUndefinedOrNull).join(' ')
  + }, [])
  - if (!warningText) {
  + if (!nameAndVersion) {
  return null
  }
  return (
  - <UncontrolledAlert color="warning" className="text-center m-0">
  - {warningText}
  - </UncontrolledAlert>
  + <Modal centered isOpen={isOpen} backdrop="static" toggle={dismiss} fade={false} size="lg">
  + <ModalHeader toggle={dismiss} tag="div">
  + <h4 className="text-center text-danger">{t('Unsupported browser')}</h4>
  + </ModalHeader>
  +
  + <ModalBody>
  + <p>{t('This browser version ({{nameAndVersion}}) is not supported.', { nameAndVersion })}</p>
  + <p>
  + {t('Nextclade works best in the latest version of ')}
  + <LinkExternal href="https://www.google.com/chrome/">{t('Chrome')}</LinkExternal>
  + <span>{t(' or ')}</span>
  + <LinkExternal href="https://www.mozilla.org/firefox/browsers/">{t('Firefox')}</LinkExternal>
  + <span>{t('.')}</span>
  + </p>
  + </ModalBody>
  +
  + <ModalFooter>
  + <div className="mx-auto">
  + <Button type="button" color="danger" title={t('Close this dialog window')} onClick={dismiss}>
  + {t('I want to try anyway')}
  + </Button>
  + </div>
  + </ModalFooter>
  + </Modal>
  )
  }
  