More refactoring and clean-up.

components/layout/AppLayout.js

@@ -2,6 +2,7 @@ import { Container } from 'react-basics';
 import Head from 'next/head';
 import NavBar from 'components/layout/NavBar';
 import useRequireLogin from 'hooks/useRequireLogin';
+import { UI_LAYOUT_BODY } from 'lib/constants';
 import styles from './AppLayout.module.css';
 
 export default function AppLayout({ title, children }) {
@@ -19,7 +20,7 @@ export default function AppLayout({ title, children }) {
       <div className={styles.nav}>
         <NavBar />
       </div>
-      <div className={styles.body} id="layout-body">
+      <div className={styles.body} id={UI_LAYOUT_BODY}>
         <Container>
           <main>{children}</main>
         </Container>

components/layout/ButtonLayout.js

@@ -1,16 +0,0 @@
-import classNames from 'classnames';
-import styles from './ButtonLayout.module.css';
-
-export default function ButtonLayout({ className, children, align = 'center' }) {
-  return (
-    <div
-      className={classNames(styles.buttons, className, {
-        [styles.left]: align === 'left',
-        [styles.center]: align === 'center',
-        [styles.right]: align === 'right',
-      })}
-    >
-      {children}
-    </div>
-  );
-}

components/layout/ButtonLayout.module.css

@@ -1,21 +0,0 @@
-.buttons {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.buttons button + * {
-  margin-left: 10px;
-}
-
-.center {
-  justify-content: center;
-}
-
-.left {
-  justify-content: flex-start;
-}
-
-.right {
-  justify-content: flex-end;
-}

components/layout/Page.module.css

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