fix upload image buttons for Profile component

PotLock · Jul 30, 2024 · e03b2c5 · e03b2c5
1 parent 4c2e264
commit e03b2c5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 29 deletions.
diff --git a/src/pages/CreateProject/components/Profile/Profile.tsx b/src/pages/CreateProject/components/Profile/Profile.tsx
@@ -40,17 +40,6 @@ const Profile = () => {
           accepts={["image/*"]}
           minFileSize={1}
           className="btn-change-bg"
-          style={{
-            background: "#fff",
-            boxShadow:
-              "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: 8,
-            borderRadius: 6,
-            transition: "200ms ease-in-out",
-            width: "fit-content",
-          }}
           clickable
           onChange={handleBgChange}
         >
@@ -65,24 +54,6 @@ const Profile = () => {
           accepts={["image/*"]}
           minFileSize={1}
           className="btn-change-img"
-          style={{
-            position: "absolute",
-            bottom: "0px",
-            right: "0px",
-            background: "white",
-            width: "40px",
-            height: "40px",
-            borderRadius: "50%",
-            display: "flex",
-            boxAlign: "center",
-            alignItems: "center",
-            boxPack: "center",
-            justifyContent: "center",
-            cursor: "pointer",
-            border: "none",
-            boxShadow:
-              "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",
-          }}
           clickable
           onChange={handleImgChange}
         >

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;