feat(ui): move about page to modal box

ui/src/routes.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 
-import AboutPage from './about/AboutPage'
 import ArticlesRoutes from './articles/Routes'
 import CategoryRoutes from './categories/Routes'
 import ErrorPage from './error/ErrorPage'
@@ -18,7 +17,6 @@ const Routes = () => (
     <Route path="/offline" component={OfflineRoutes} />
     <Route path="/categories/:id" component={CategoryRoutes} />
     <Route path="/settings" component={SettingsPage} />
-    <Route path="/about" component={AboutPage} />
     <Route path="/graphiql" component={GraphiQLPage} />
     <Route component={() => <ErrorPage title="Not Found">Page not found</ErrorPage>} />
   </Switch>

ui/src/settings/SettingsPage.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router'
 
-import ButtonIcon from '../components/ButtonIcon'
 import Appbar from '../layout/Appbar'
 import Page from '../layout/Page'
 import AddApiKeyForm from './api-keys/AddApiKeyForm'
@@ -16,7 +15,7 @@ import EditCategoryTab from './categories/EditCategoryTab'
 import Header from './components/Header'
 import Tabs from './components/Tabs'
 import PreferencesTab from './preferences/PreferencesTab'
-import { Link } from 'react-router-dom'
+import AboutButton from './about/AboutButton'
 
 const items = [
   { key: 'categories', label: 'Categories', icon: 'bookmarks' },
@@ -38,7 +37,7 @@ const PageHeader = () => (
     <Appbar actions={<Actions />} />
     <Header>
       <h1>Settings</h1>
-      <ButtonIcon icon="info" as={Link} to="/about" title="About" />
+      <AboutButton />
       <Tabs items={items} />
     </Header>
   </>

ui/src/about/AboutPage.module.css → ui/src/settings/about/AboutButton.module.css

@@ -1,12 +1,19 @@
-.about > div {
-  display: block;
+.about {
+  align-items: center;
+  padding: 0em 1em 2em 1em;
+}
+
+.about > button {
+  align-self: flex-end;
+}
+
+.about p {
+  color: var(--panel-text-color-alt)
 }
 
 .about h1 {
   margin: 0;
   padding: 0;
-  font-size: 2em;
-  font-weight: 500;
 }
 
 .about ul {
@@ -24,7 +31,6 @@
   font-size: 1rem;
 }
 
-
 .about ul > li:first-child::before {
   display: none;
 }

ui/src/about/AboutPage.test.tsx → ui/src/settings/about/AboutButton.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-import AboutPage from './AboutPage'
+import AboutButton from './AboutButton'
 
 it('renders without crashing', () => {
   const div = document.createElement('div')
-  ReactDOM.render(<AboutPage />, div)
+  ReactDOM.render(<AboutButton />, div)
   ReactDOM.unmountComponentAtNode(div)
 })

ui/src/settings/about/AboutButton.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React from 'react'
+import ReactModal from 'react-modal'
+import { useModal } from 'react-modal-hook'
+
+import ButtonIcon from '../../components/ButtonIcon'
+import Panel from '../../components/Panel'
+
+import dialogStyles from '../../components/Dialog.module.css'
+import styles from './AboutButton.module.css'
+import logo from './logo.svg'
+import { VERSION } from '../../constants'
+
+interface Props {
+  closeHandler: () => void
+}
+
+const AboutPanel = ({ closeHandler }: Props) => (
+  <Panel className={styles.about}>
+    <ButtonIcon title="close" onClick={closeHandler} icon="close" />
+    <h1>
+      <img src={logo} />
+    </h1>
+    <span>({VERSION})</span>
+    <p>Read your Internet article flow in one place with complete peace of mind and freedom.</p>
+    <ul>
+      <li>
+        <a href="https://github.com/ncarlier/readflow" rel="noreferrer noopener" target="_blank">
+          Sources
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/ncarlier/readflow/issues" rel="noreferrer noopener" target="_blank">
+          Bug or feature request
+        </a>
+      </li>
+      <li>
+        <a href="https://www.paypal.me/nunux" rel="noreferrer noopener" target="_blank">
+          Support this project
+        </a>
+      </li>
+    </ul>
+  </Panel>
+)
+
+export default () => {
+  const [showAboutModal, hideAboutModal] = useModal(() => (
+    <ReactModal
+      isOpen
+      shouldCloseOnEsc
+      shouldCloseOnOverlayClick
+      shouldFocusAfterRender
+      appElement={document.getElementById('root')!}
+      onRequestClose={hideAboutModal}
+      className={dialogStyles.dialog}
+      overlayClassName={dialogStyles.overlay}
+    >
+      <AboutPanel closeHandler={hideAboutModal} />
+    </ReactModal>
+  ))
+
+  return <ButtonIcon title="About" onClick={showAboutModal} icon="info" />
+}