- implement about section

src/components/shared/Avatar.js

@@ -18,7 +18,9 @@ const Avatar = ({ className }) => {
     handleClose();
   };
 
-  const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
+  const photoURL = useMemo(() => toUrl(user.email || '', 'size=128&d=retro'), [
+    user.email,
+  ]);
 
   return (
     <div>
@@ -31,7 +33,7 @@ const Avatar = ({ className }) => {
       >
         <img
           src={photoURL}
-          alt={user.displayName}
+          alt={user.displayName || 'Anonymous User'}
           className={cx(styles.container, className)}
         />
       </div>

src/components/shared/Input.js

@@ -46,7 +46,7 @@ const Input = ({
       };
 
   return (
-    <div className={cx(styles.container, className)}>
+    <div className={className}>
       <label htmlFor={uuid}>
         <span>
           {label}{' '}
@@ -115,7 +115,9 @@ const Input = ({
               onChange={onChange}
             >
               {options.map((x) => (
-                <option key={x}>{x}</option>
+                <option key={x} value={x}>
+                  {x}
+                </option>
               ))}
             </select>
 

src/components/shared/Input.module.css

@@ -1,31 +1,3 @@
-.container label input,
-.container label textarea,
-.container label select {
-  @apply w-full py-3 px-4 rounded text-primary-900 bg-primary-200 border border-transparent appearance-none;
-}
-
-.container label input::placeholder,
-.container label textarea::placeholder,
-.container label select::placeholder {
-  @apply opacity-50;
-}
-
-.container label input:hover,
-.container label textarea:hover,
-.container label select:hover {
-  @apply outline-none border-primary-400;
-}
-
-.container label input:focus,
-.container label textarea:focus,
-.container label select:focus {
-  @apply outline-none border-primary-600;
-}
-
-.container label > p {
-  @apply mt-1 text-red-600 text-xs;
-}
-
 .circle {
   left: 14px;
   @apply absolute bg-primary-900 rounded-full w-6 h-6;