Fixed pages table loading. Fixed z-indexes.

components/layout/AppLayout.module.css

@@ -7,7 +7,7 @@
 .nav {
   height: 60px;
   width: 100vw;
-  z-index: 100;
+  z-index: var(--z-index-overlay);
   grid-column: 1;
   grid-row: 1 / 2;
 }

components/layout/FormLayout.js

@@ -1,31 +0,0 @@
-import { useSpring, animated } from 'react-spring';
-import classNames from 'classnames';
-import { ErrorMessage } from 'formik';
-import styles from './FormLayout.module.css';
-
-export default function FormLayout({ className, children }) {
-  return <div className={classNames(styles.form, className)}>{children}</div>;
-}
-
-export const FormButtons = ({ className, children }) => (
-  <div className={classNames(styles.buttons, className)}>{children}</div>
-);
-
-export const FormError = ({ name }) => {
-  return <ErrorMessage name={name}>{msg => <ErrorTag msg={msg} />}</ErrorMessage>;
-};
-
-const ErrorTag = ({ msg }) => {
-  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
-
-  return (
-    <animated.div className={styles.error} style={props}>
-      <div className={styles.msg}>{msg}</div>
-    </animated.div>
-  );
-};
-
-export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;
-
-export const FormMessage = ({ children }) =>
-  children ? <div className={styles.message}>{children}</div> : null;

components/layout/FormLayout.module.css

@@ -1,94 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.form label {
-  display: block;
-  min-width: 100px;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  position: relative;
-  margin-bottom: 20px;
-  line-height: 1.8;
-  padding: 0 20px;
-}
-
-.row > div {
-  position: relative;
-  flex: 1 1;
-}
-
-.row > div > input,
-.row > div > select {
-  width: 100%;
-  min-width: 240px;
-}
-
-.buttons {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.buttons button + button {
-  margin-left: 10px;
-}
-
-.error {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  left: calc(100% + 16px);
-  bottom: 0;
-  z-index: 1;
-}
-
-.msg {
-  color: var(--msgColor);
-  background: var(--red400);
-  padding: 4px 8px;
-  border-radius: 4px;
-  white-space: nowrap;
-}
-
-.error:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -5px;
-  bottom: 0;
-  margin: auto;
-  width: 10px;
-  height: 10px;
-  background: var(--red400);
-  transform: rotate(45deg);
-}
-
-.message {
-  text-align: center;
-  margin: 20px 0;
-  padding: 4px 8px;
-  border-radius: 4px;
-  color: var(--base50);
-  background: var(--base800);
-}
-
-@media only screen and (max-width: 576px) {
-  .error {
-    align-items: flex-start;
-    top: calc(100% + 7px);
-    left: 0;
-  }
-
-  .error:after {
-    left: 10px;
-  }
-}