src/app/me/AboutMe.tsx

@@ -14,13 +14,21 @@ import {
   passwordUpdateSchema
 } from "@/schemas";
 import PrettyForm from "@/components/PrettyForm";
-import Toast from "@/components/Toast";
 
 type UpdateResponse = {
   ok: boolean;
   error?: string;
 };
 
+// TODO skip do your magic
+type InputProps = {
+  label: string;
+  name: string;
+  type: HTMLInputTypeAttribute;
+  error?: string;
+  displayImage?: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+
 async function fileAsBase64(f: File) {
   const reader = new FileReader();
   reader.readAsArrayBuffer(f);
@@ -36,9 +44,6 @@ async function fileAsBase64(f: File) {
 
 export default function AboutMe({ info }: { info: UserInfo }) {
   const [globalError, setGlobalError] = React.useState<string | null>(null);
-  const [madeProfileChanges, setMadeChanges] = React.useState(false);
-  const [madePasswordChanges, setMadePasswordChanges] = React.useState(false);
-
   const initialValues: AboutMeFormValues = {
     username: info.username,
     displayName: info.displayName,
@@ -50,7 +55,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
     { displayName, email, avatar }: AboutMeFormValues,
     { setSubmitting }: FormikHelpers<AboutMeFormValues>
   ) {
-    setMadeChanges(false);
     setSubmitting(true);
     const req = await fetch("/api/update", {
       method: "POST",
@@ -74,7 +78,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
             break;
         }
       }
-      setMadeChanges(true);
     } catch {
       console.error(req);
     }
@@ -91,7 +94,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
     { password, newPassword }: PasswordUpdateFormValues,
     { setFieldError, setSubmitting }: FormikHelpers<PasswordUpdateFormValues>
   ) {
-    setMadePasswordChanges(false);
+    console.log(password, newPassword);
     setSubmitting(true);
     const req = await fetch("/api/changePassword", {
       method: "POST",
@@ -115,7 +118,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
             break;
         }
       }
-      setMadePasswordChanges(true);
     } catch {
       console.error(req);
     }
@@ -132,7 +134,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
         >
           {({ isSubmitting }) => (
             <Form className={styles.profileGrid}>
-              {madeProfileChanges ? <Toast>Saved your changes.</Toast> : null}
               <Input
                 type="text"
                 name="username"
@@ -179,6 +180,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
           )}
         </Formik>
       </PrettyForm>
+
       <hr className={styles.divider} />
       <h2 className={styles.header}>Change password</h2>
       <PrettyForm globalError={passwordError}>
@@ -188,10 +190,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
           validationSchema={passwordUpdateSchema}
         >
           {({ isSubmitting }) => (
-            <Form>
+            <Form className={styles.profileGrid}>
-              {madePasswordChanges ? (
-                <Toast>Changed your password.</Toast>
-              ) : null}
               <Input
                 type="password"
                 name="password"
@@ -226,6 +225,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
           )}
         </Formik>
       </PrettyForm>
+
       <hr className={styles.divider} />
       <input
         type="button"

src/components/ColorChanger.module.css

@@ -1,5 +1,5 @@
 .colorChanger {
-  position: fixed;
+  position: absolute;
   right: 0;
   bottom: 0;
 

src/components/Toast.module.css

@@ -1,32 +0,0 @@
-.toast {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  background-color: var(--bg-dark);
-  margin: 1rem 0;
-  border-radius: 0.25rem;
-
-  animation-name: pop-in;
-  animation-timing-function: ease-in-out;
-  animation-duration: 250ms;
-  animation-iteration-count: 1;;
-}
-
-.toast svg {
-  height: 0.9em;
-  margin-right: 0.5rem;
-}
-
-@keyframes pop-in {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}

src/components/Toast.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import styles from "./Toast.module.css";
-import CheckIcon from "./icons/CheckIcon";
-
-export default function Toast({ children }: { children: React.ReactNode }) {
-  return (
-    <div className={styles.toast}>
-      <CheckIcon />
-      {children}
-    </div>
-  );
-}

src/components/icons/CheckIcon.tsx

@@ -1,19 +0,0 @@
-export default function CheckIcon() {
-  return (
-    <svg
-      viewBox="0 0 128 128"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-    >
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="check" fill="currentColor" fill-rule="nonzero">
-          <path
-            d="M107.782834,4.91476009 C111.16323,-0.155833631 118.014111,-1.52600976 123.084704,1.85438606 C128.155298,5.23478187 129.525474,12.0856625 126.145078,17.1562562 L64.5253312,123.085877 C60.662855,128.879591 52.465466,129.691293 47.5417556,124.767582 L3.23188204,89.4577087 C-1.07729401,85.1485327 -1.07729401,78.1619779 3.23188204,73.8528018 C7.54105809,69.5436258 14.5276129,69.5436258 18.8367889,73.8528018 L53.6283699,99.643429 L107.782834,4.91476009 Z"
-            id="Path-4"
-          ></path>
-        </g>
-      </g>
-    </svg>
-  );
-}