Add `About` page

src/App.tsx

@@ -62,6 +62,7 @@ const ResetPassword = lazy(() => import('./pages/auth/ResetPassword'));
 const ResetPasswordConfirmation = lazy(() => import('./pages/auth/ResetPasswordConfirmation'));
 const EmailVerification = lazy(() => import('./pages/auth/EmailVerification'));
 const OauthCallback = lazy(() => import('./pages/auth/OauthCallback'));
+const About = lazy(() => import('./pages/About'));
 
 const { Content } = Layout;
 
@@ -200,6 +201,7 @@ const App = ({ ui, tuneData }: { ui: UIState, tuneData: TuneDataState }) => {
           <Route path={Routes.SIGN_UP} element={<ContentFor element={<Login formRole={FormRoles.SING_UP} />} />} />
           <Route path={Routes.PROFILE} element={<ContentFor element={<Profile />} />} />
           <Route path={Routes.RESET_PASSWORD} element={<ContentFor element={<ResetPassword />} />} />
+          <Route path={Routes.ABOUT} element={<ContentFor element={<About />} />} />
 
           <Route path={Routes.EMAIL_VERIFICATION} element={<ContentFor element={<EmailVerification />} />} />
           <Route path={Routes.RESET_PASSWORD_CONFIRMATION} element={<ContentFor element={<ResetPasswordConfirmation />} />} />

src/components/TopBar.tsx

@@ -226,7 +226,7 @@ const TopBar = ({
     return list.length ? list : null;
   }, [lg, sm]);
 
-  const userMenuItems = useMemo(() => currentUser ? [{
+  const userAuthMenuItems = useMemo(() => currentUser ? [{
     key: 'profile',
     icon: <UserOutlined />,
     label: 'Profile',
@@ -248,6 +248,20 @@ const TopBar = ({
     onClick: () => navigate(Routes.SIGN_UP),
   }], [currentUser, logoutClick, navigate]);
 
+  const userMenuItems = [
+    ...userAuthMenuItems,
+    {
+      key: 'divider',
+      type: 'divider',
+    },
+    {
+      key: 'about',
+      icon: <InfoCircleOutlined />,
+      label: 'About',
+      onClick: () => navigate(Routes.ABOUT),
+    },
+  ];
+
   return (
     <Header className="app-top-bar" style={xs ? { padding: '0 5px' } : {}}>
       <Row>

src/css/App.less

@@ -46,10 +46,6 @@ html, body {
   a:hover {
     text-decoration: underline;
   }
-
-  .github-link {
-    animation: wiggle 2s linear 2;
-  }
 }
 
 .app-sidebar {
@@ -194,3 +190,7 @@ select:-webkit-autofill:focus {
     resize: none;
   }
 }
+
+.sponsor-button {
+  animation: wiggle 2s linear 1;
+}

src/pages/About.tsx

@@ -0,0 +1,49 @@
+import {
+  Button,
+  Result,
+} from 'antd';
+import {
+  HeartOutlined,
+  GithubOutlined,
+} from '@ant-design/icons';
+import hyperIcon from '../../public/icons/icon.png';
+
+const About = () => (
+  <div className="large-container">
+    <Result
+      status="success"
+      icon={<img src={hyperIcon} alt="HyperTuner" style={{ maxWidth: 100 }} />}
+      title={
+        <>
+          Powered by <a href="https://github.com/hyper-tuner" target="_blank" rel="noreferrer">HyperTuner</a>
+        </>
+      }
+      subTitle={
+        <>
+          Created with <HeartOutlined /> by <a href="https://github.com/karniv00l" target="_blank" rel="noreferrer">Piotr Rogowski</a>,
+          licensed under <a href="https://github.com/hyper-tuner/hyper-tuner-cloud/blob/master/LICENSE" target="_blank" rel="noreferrer">MIT</a>.
+        </>
+      }
+      extra={[
+        <Button
+          type="primary"
+          key="sponsor"
+          className="sponsor-button"
+          icon={<HeartOutlined />}
+          onClick={() => window.open('https://github.com/sponsors/karniv00l', '_blank')}
+        >
+          Sponsor
+        </Button>,
+        <Button
+          key="source"
+          icon={<GithubOutlined />}
+          onClick={() => window.open('https://github.com/hyper-tuner/hyper-tuner-cloud', '_blank')}
+        >
+          Source
+        </Button>,
+      ]}
+    />
+  </div>
+);
+
+export default About;

src/routes.ts

@@ -25,5 +25,7 @@ export enum Routes {
   EMAIL_VERIFICATION = '/auth/email-verification/:token',
   OAUTH_CALLBACK = '/auth/oauth-callback/:provider',
 
+  ABOUT = '/about',
+
   REDIRECT_PAGE_OAUTH_CALLBACK = 'oauth',
 }