fix upload image buttons for Profile component

PotLock · Jul 30, 2024 · ea08166 · ea08166
1 parent 8d3a9d2
commit ea08166
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 34 deletions.
diff --git a/src/pages/CreateProject/components/Profile/Profile.tsx b/src/pages/CreateProject/components/Profile/Profile.tsx
@@ -1,6 +1,5 @@
 import { Files, State, state } from "alem";
 import CameraIcon from "@app/assets/svgs/CameraIcon";
-import Button from "@app/components/Button";
 import Image from "@app/components/mob.near/Image";
 import constants from "@app/constants";
 import uploadFileUpdateState from "../../utils/uploadFileUpdateState";
@@ -35,45 +34,30 @@ const Profile = () => {
     <Container>
       <BackgroundImage>
         <Image image={backgroundImage} alt="profile background" fallbackUrl={IPFS_BASE_URL + fallbackImg} />
-        <Button type="standard" varient="outline" customClassName="btn-change-bg">
+        <Files
+          multiple={false}
+          accepts={["image/*"]}
+          minFileSize={1}
+          className="btn-change-bg"
+          clickable
+          onChange={handleBgChange}
+        >
           <CameraIcon />
           <span> Add cover photo</span>
-          <Files
-            multiple={false}
-            accepts={["image/*"]}
-            minFileSize={1}
-            style={{
-              zIndex: 1,
-              top: 0,
-              width: "100%",
-              height: "100%",
-              position: "absolute",
-            }}
-            clickable
-            onChange={handleBgChange}
-          />
-        </Button>
+        </Files>
       </BackgroundImage>
       <ProfileImage>
         <Image className="profile-image" image={profileImage} fallbackUrl={IPFS_BASE_URL + fallbackImg} />
-        <button className="btn-change-img">
+        <Files
+          multiple={false}
+          accepts={["image/*"]}
+          minFileSize={1}
+          className="btn-change-img"
+          clickable
+          onChange={handleImgChange}
+        >
           <CameraIcon />
-          <Files
-            multiple={false}
-            accepts={["image/*"]}
-            minFileSize={1}
-            style={{
-              position: "absolute",
-              width: "100%",
-              height: "100%",
-              zIndex: 1,
-              left: 0,
-              top: 0,
-            }}
-            clickable
-            onChange={handleImgChange}
-          ></Files>
-        </button>
+        </Files>
       </ProfileImage>
     </Container>
   );

diff --git a/src/pages/CreateProject/components/Profile/styles.ts b/src/pages/CreateProject/components/Profile/styles.ts
@@ -25,9 +25,19 @@ export const BackgroundImage = styled.div`
     line-height: 142%;
   }
   .btn-change-bg {
+    z-index: 10;
     position: absolute;
     bottom: 1.5rem;
     right: 1.5rem;
+    background: white;
+    box-shadow: rgba(0, 0, 0, 0.22) 0px 0px 0px 1px inset, rgba(15, 15, 15, 0.15) 0px -1px 0px 0px inset,
+      rgba(5, 5, 5, 0.08) 0px 1px 2px -0.5px;
+    padding: 9px 16px;
+    display: flex;
+    gap: 8px;
+    border-radius: 6px;
+    transition: 200ms ease-in-out;
+    width: fit-content;
     cursor: pointer;
     svg {
       width: 18px;