code review

src/components/Pages/profile/ProfileSettingsPage.tsx

@@ -64,7 +64,7 @@ export const ProfileSettingsPage = () => {
     return response.json()
   }
 
-  const handleUserpicUpload = async () => {
+  const handleAvatarClick = async () => {
     await selectFiles(async ([uploadFile]) => {
       try {
         setIsUserpicUpdating(true)
@@ -99,9 +99,12 @@ export const ProfileSettingsPage = () => {
                   <div class="pretty-form__item">
                     <div class={styles.avatarContainer}>
                       <Show when={!isUserpicUpdating()} fallback={<Loading />}>
-                        <button role="button" onClick={() => handleUserpicUpload()}>
+                        <img
-                          <img class={styles.avatar} src={form.userpic} alt={form.name} />
+                          class={styles.avatar}
-                        </button>
+                          src={form.userpic}
+                          alt={form.name}
+                          onClick={handleAvatarClick}
+                        />
                       </Show>
                     </div>
                   </div>

src/components/Pages/profile/Settings.module.scss

@@ -21,13 +21,13 @@ h5 {
   width: 18rem;
 }
 
-.avatar,
+.avatar {
-.avatarInput {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
+  cursor: pointer;
 }
 
 .avatar {