Merge pull request #1051 from tali-creator/fix-973

Add a Get your NFT button and a cancel button
lfglabs-dev · Feb 16, 2025 · ef35d7e · ef35d7e
2 parents 912e513 + 1d2e799
commit ef35d7e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 15 deletions.
diff --git a/components/UI/iconsComponents/clickableAction.tsx b/components/UI/iconsComponents/clickableAction.tsx
@@ -20,7 +20,7 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
 }) => {
   return (
     <div
-      className={`
+      className={` mx-auto -space-x-1 
         ${
           style === "secondary"
             ? styles.clickableActionSecondary
@@ -31,9 +31,9 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
     >
       <div
         className={
-          style === "secondary"
+          ` ${style === "secondary"
             ? styles.clickableIconSecondary
-            : styles.clickableIconPrimary
+            : styles.clickableIconPrimary}`
         }
       >
         {icon}

diff --git a/components/identities/selectedCollections.tsx b/components/identities/selectedCollections.tsx
@@ -4,18 +4,24 @@ import { NftCollections } from "../../utils/constants";
 import ClickableAction from "../UI/iconsComponents/clickableAction";
 import ArrowRightIcon from "../UI/iconsComponents/icons/arrowRightIcon";
 import theme from "../../styles/theme";
+import { useRouter } from "next/router";
 
 const SelectedCollections: FunctionComponent = () => {
+  const router = useRouter();
+  const NFT_MARKETPLACE_URL = "https://unframed.co/";
+  const nftMarketPlace: React.MouseEventHandler<HTMLButtonElement> = () => {
+    window.open(NFT_MARKETPLACE_URL, "_blank", "noopener noreferrer");
+  };
   return (
     <>
-      <div className={styles.nftCollectionWraper}>
+      <div
+        className={`mx-auto flex flex-col justify-center ${styles.nftCollectionWraper}`}>
         {NftCollections.map((collection, index) => {
           return (
             <div
               className={styles.nftCollectionCard}
               key={index}
-              onClick={() => window.open(collection.externalLink)}
-            >
+              onClick={() => window.open(collection.externalLink)}>
               <div
                 style={{ backgroundImage: `url(${collection.imageUri})` }}
                 className={styles.nftCollectionImg}
@@ -25,15 +31,18 @@ const SelectedCollections: FunctionComponent = () => {
           );
         })}
       </div>
-      <div className={styles.btnWrapper}>
-        <ClickableAction
-          title="Get your NFT"
-          icon={
+      <div className={` ${styles.btnWrapper}`}>
+        <div className="flex flex-col gap-[12px] items-center">
+          <button
+            onClick={nftMarketPlace}
+            className="flex text-[#454545] transition-colors duration-300 hover:text-[#454545]/80 items-center gap-[10px] w-fit justify-center border-[rgba(69, 69, 69, 0.1)]   shadow-[0px_2px_30px_0px_#0000000F] p-[10px_16px] rounded-[8px] bg-white  border-[1px] text-[14px] font-normal font-[QuickZap] ">
             <ArrowRightIcon width="25" color={theme.palette.secondary.main} />
-          }
-          onClick={() => window.open("https://unframed.co/")}
-          width="auto"
-        />
+            <span>GET YOUR NFT</span>
+          </button>
+          <div className={styles.cancelBtn} onClick={() => router.push("/")}>
+            Cancel
+          </div>
+        </div>
       </div>
     </>
   );

diff --git a/styles/components/profilePic.module.css b/styles/components/profilePic.module.css
@@ -10,6 +10,21 @@
   margin-bottom: 2rem;
 }
 
+.cancelBtn {
+  margin:10px auto;
+  text-align: center;
+  font-family: "QuickZap";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  color: #454545;
+  cursor: pointer;
+
+
+
+}
+
 .arrows {
   display: flex;
   margin: 35px 0;
@@ -87,6 +102,7 @@
   padding-bottom: 10px;
   grid-template-columns: repeat(3, 1fr);
 }
+
 .nftImg img {
   width: 100%;
   height: 100%;

diff --git a/styles/theme.ts b/styles/theme.ts
@@ -11,7 +11,7 @@ const theme = createTheme({
       light: "#eae0d5",
     },
     background: {
-      default: "#F5F5F5",
+      default: "#FFF",
     },
     grey: {
       200: "#CDCCCC",