Rewrite admin. (#1713)

* Rewrite admin.

* Clean up password forms.

* Fix naming issues.

* CSS Naming.

components/layout/Header.js

@@ -1,19 +1,18 @@
-import { Row, Column } from 'react-basics';
-import { useRouter } from 'next/router';
-import { FormattedMessage } from 'react-intl';
+import Logo from 'assets/logo.svg';
+import HamburgerButton from 'components/common/HamburgerButton';
 import Link from 'components/common/Link';
-import Icon from 'components/common/Icon';
+import UpdateNotice from 'components/common/UpdateNotice';
 import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
-import HamburgerButton from 'components/common/HamburgerButton';
-import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
-import { HOMEPAGE_URL } from 'lib/constants';
 import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
-import Logo from 'assets/logo.svg';
-import styles from './Header.module.css';
+import { HOMEPAGE_URL } from 'lib/constants';
+import { useRouter } from 'next/router';
+import { Column, Icon, Row } from 'react-basics';
+import { FormattedMessage } from 'react-intl';
 import SettingsButton from '../settings/SettingsButton';
+import styles from './Header.module.css';
 
 export default function Header() {
   const { user } = useUser();
@@ -28,7 +27,9 @@ export default function Header() {
       <header className={styles.header}>
         <Row>
           <Column className={styles.title}>
-            <Icon icon={<Logo />} size="large" className={styles.logo} />
+            <Icon size="lg" className={styles.logo}>
+              <Logo />
+            </Icon>
             <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
           </Column>
           <HamburgerButton />
@@ -40,7 +41,7 @@ export default function Header() {
               <Link href="/realtime">
                 <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
               </Link>
-              <Link href="/settings">
+              <Link href="/websites">
                 <FormattedMessage id="label.settings" defaultMessage="Settings" />
               </Link>
             </div>

components/layout/Page.js

@@ -1,6 +1,15 @@
 import classNames from 'classnames';
 import styles from './Page.module.css';
+import { Banner, Loading } from 'react-basics';
+
+export default function Page({ className, error, loading, children }) {
+  if (error) {
+    return <Banner variant="error">Something went wrong.</Banner>;
+  }
+
+  if (loading) {
+    return <Loading />;
+  }
 
-export default function Page({ className, children }) {
   return <div className={classNames(styles.page, className)}>{children}</div>;
 }

components/layout/Page.module.css

@@ -2,7 +2,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0 30px;
+  padding: 30px;
   background: var(--base50);
-  border-radius: 8px;
+  position: relative;
 }

components/layout/PageHeader.js

@@ -1,7 +1,25 @@
 import React from 'react';
+import Link from 'next/link';
 import classNames from 'classnames';
+import { Button, Icon } from 'react-basics';
 import styles from './PageHeader.module.css';
 
-export default function PageHeader({ children, className }) {
-  return <div className={classNames(styles.header, className)}>{children}</div>;
+export default function PageHeader({ title, backUrl, children, className, style }) {
+  return (
+    <div className={classNames(styles.header, className)} style={style}>
+      <div className={styles.title}>
+        {backUrl && (
+          <Link href={backUrl}>
+            <a>
+              <Button>
+                <Icon icon="arrow-left" /> Back
+              </Button>
+            </a>
+          </Link>
+        )}
+        {title}
+      </div>
+      {children}
+    </div>
+  );
 }

components/layout/PageHeader.module.css

@@ -3,7 +3,23 @@
   justify-content: space-between;
   align-items: center;
   align-content: center;
-  min-height: 80px;
   align-self: stretch;
+  margin-bottom: 40px;
+  font-size: 18px;
   font-weight: bold;
+  height: 50px;
+}
+
+.header a {
+  color: var(--base600);
+}
+
+.header a:hover {
+  color: var(--base900);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 20px;
 }