Account editing and change password.

components/layout/FormLayout.js

@@ -21,7 +21,7 @@ const ErrorTag = ({ msg }) => {
 
   return (
     <animated.div className={styles.error} style={props}>
-      {msg}
+      <div className={styles.msg}>{msg}</div>
     </animated.div>
   );
 };

components/layout/FormLayout.module.css

@@ -24,9 +24,6 @@
 }
 
 .error {
-  color: var(--gray50);
-  background: var(--red400);
-  font-size: var(--font-size-small);
   position: absolute;
   display: flex;
   justify-content: center;
@@ -35,7 +32,13 @@
   left: 100%;
   bottom: 0;
   margin-left: 16px;
-  padding: 4px 10px;
+}
+
+.msg {
+  color: var(--gray50);
+  background: var(--red400);
+  font-size: var(--font-size-small);
+  padding: 4px 8px;
   border-radius: 4px;
   white-space: nowrap;
 }

components/layout/MenuLayout.js

@@ -8,14 +8,16 @@ export default function MenuLayout({ menu, selectedOption, onMenuSelect, childre
   return (
     <div className={styles.container}>
       <div className={styles.menu}>
-        {menu.map(item => (
-          <div
-            className={classNames(styles.option, { [styles.active]: option === item })}
-            onClick={() => setOption(item)}
-          >
-            {item}
-          </div>
-        ))}
+        {menu.map(item =>
+          item ? (
+            <div
+              className={classNames(styles.option, { [styles.active]: option === item })}
+              onClick={() => setOption(item)}
+            >
+              {item}
+            </div>
+          ) : null,
+        )}
       </div>
       <div className={styles.content}>
         {typeof children === 'function' ? children(option) : children}

components/layout/MenuLayout.module.css

@@ -18,7 +18,7 @@
 }
 
 .option {
-  padding: 8px 20px;
+  padding: 8px 16px;
   cursor: pointer;
   min-width: 140px;
   margin-right: 30px;