Mint attestations UI improvements (#3702)

* ui-improvements * finilized share intents
gitcoinco · Oct 23, 2024 · 3edc44c · 3edc44c
1 parent eb088c0
commit 3edc44c
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 43 deletions.
diff --git a/packages/grant-explorer/src/features/attestations/MintYourImpactComponents.tsx b/packages/grant-explorer/src/features/attestations/MintYourImpactComponents.tsx
@@ -160,22 +160,28 @@ export const ImpactMintingSuccess = ({
   } = useGetImages(impactImageCid ? [impactImageCid] : [], !!impactImageCid);
 
   return isShareButtonsAbove ? (
-    <>
-      <ShareButtons attestationLink={attestationLink} />
+    <div className="flex flex-col items-center gap-6">
+      <ShareButtons
+        attestationLink={attestationLink}
+        isTop={isShareButtonsAbove}
+      />
       <ImageWithLoading
         src={image?.[0]}
         isLoading={isLoading || !image || !impactImageCid || isFetching}
         sizeClass={imageSize}
       />
-    </>
+    </div>
   ) : (
-    <>
+    <div className="flex flex-col items-center gap-6">
       <ImageWithLoading
         src={image?.[0]}
         isLoading={isLoading || !image || !impactImageCid || isFetching}
         sizeClass={imageSize}
       />
-      <ShareButtons attestationLink={attestationLink} />
-    </>
+      <ShareButtons
+        attestationLink={attestationLink}
+        isTop={isShareButtonsAbove}
+      />
+    </div>
   );
 };
diff --git a/packages/grant-explorer/src/features/common/ShareButtons.tsx b/packages/grant-explorer/src/features/common/ShareButtons.tsx
@@ -11,7 +11,9 @@ import { useState } from "react";
 
 export const ShareButtons = ({
   attestationLink,
+  isTop,
 }: {
+  isTop?: boolean;
   attestationLink: string;
 }): JSX.Element => {
   const twitterShareUrl = createTwitterAttestationShareUrl(attestationLink);
@@ -30,37 +32,47 @@ export const ShareButtons = ({
 
   return (
     <div className="flex flex-col items-center z-30">
-      <span className="font-mona pb-1 text-md">Share</span>
+      <span className="font-modern-era-medium  pb-2 text-[24px]/[28px]">
+        Share with your network!
+      </span>
       <div className="flex items-center gap-2 pb-1">
-        <div className="flex size-8 items-center justify-center gap-2 p-2 relative rounded-3xl border border-solid border-color-primitives-neutral-100 cursor-pointer hover:shadow-md">
-          <img
-            className="relative size-8"
-            alt="Frame"
-            src={Link}
-            onClick={handleCopy} // Update onClick to use handleCopy
-          />
+        <div className="rainbow-border-icon">
+          <div className="icon-button ">
+            <img
+              className="icon"
+              alt="Frame"
+              src={shareOnFarcaster}
+              onClick={() => window.open(farcasterShareUrl, "_blank")}
+            />
+          </div>
+        </div>
+        <div className="rainbow-border-icon">
+          <div className="icon-button ">
+            <img
+              className="icon"
+              alt="Frame"
+              src={XTwitter}
+              onClick={() => window.open(twitterShareUrl, "_blank")}
+            />
+          </div>
+        </div>
+        <div className="rainbow-border-icon">
+          <div className="icon-button ">
+            <img
+              className="icon"
+              alt="Frame"
+              src={Link}
+              onClick={handleCopy} // Update onClick to use handleCopy
+            />
+          </div>
           {tooltipVisible && ( // Render tooltip conditionally
-            <span className="absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-black  text-white text-xs rounded px-2 py-1">
+            <span
+              className={`${isTop ? "copytooltip-top" : "copytooltip-bottom"}`}
+            >
               Copied!
             </span>
           )}
         </div>
-        <div className="flex size-8 items-center gap-2 p-2 relative rounded-3xl border border-solid border-color-primitives-neutral-100 cursor-pointer hover:shadow-md">
-          <img
-            className="relative size-8"
-            alt="Frame"
-            src={XTwitter}
-            onClick={() => window.open(twitterShareUrl, "_blank")}
-          />
-        </div>
-        <div className="flex size-8 items-center gap-2 p-2 relative rounded-3xl border border-solid border-color-primitives-neutral-100 cursor-pointer hover:shadow-md">
-          <img
-            className="relative size-8"
-            alt="Frame"
-            src={shareOnFarcaster}
-            onClick={() => window.open(farcasterShareUrl, "_blank")}
-          />
-        </div>
       </div>
     </div>
   );
@@ -82,7 +94,7 @@ export function createTwitterShareUrl(props: TwitterButtonParams) {
 }
 
 export function createTwitterAttestationShareText(attestationLink: string) {
-  return `Certified public goods supporter 🫡\n\nMy contribution is now onchain—check out the visual that represents my impact.\n\nHat tip to @gitcoin 💚\n\n${attestationLink}`;
+  return `Just minted my donation on Gitcoin 🫡\n\nMy impact is now onchain!\n\n${attestationLink}`;
 }
 
 export function createTwitterAttestationShareUrl(attestationLink: string) {
@@ -94,11 +106,10 @@ export function createTwitterAttestationShareUrl(attestationLink: string) {
 
 export function getFarcasterAttestationShareText() {
   const encodedText1 = encodeURIComponent(
-    `Certified public goods supporter 🫡\n\nMy contribution is now onchain—check out the visual that represents my impact.\n\nHat tip to `
+    `Just minted my donation on Gitcoin 🫡\n\nMy impact is now onchain!`
   );
-  const encodedText2 = encodeURIComponent(` 💚\n`);
   // NB: mentions should not be encoded
-  return `${encodedText1}@gitcoin${encodedText2}`;
+  return encodedText1;
 }
 
 export function createFarcasterShareUrl(

diff --git a/packages/grant-explorer/src/features/common/components/ImageWithLoading.tsx b/packages/grant-explorer/src/features/common/components/ImageWithLoading.tsx
@@ -17,7 +17,7 @@ export const ImageWithLoading = ({
   return (
     <div
       {...props}
-      className={`bg-cover bg-center bg-gray-200 dark:bg-gray-800 ${sizeClass} ${blurClass} ${loadingClass}`}
+      className={`bg-cover bg-center bg-transparent  ${sizeClass} ${blurClass} ${loadingClass}`}
       style={{ backgroundImage: `url("${src || ""}")` }} // Use src if available, otherwise keep it empty
     />
   );

diff --git a/packages/grant-explorer/src/features/round/ThankYou.tsx b/packages/grant-explorer/src/features/round/ThankYou.tsx
@@ -220,6 +220,9 @@ export default function ThankYou() {
                       </div>
                     </div>
                   </div>
+                  <div className="fixed -bottom-6 right-11 w-full z-20">
+                    <Footer />
+                  </div>
                 </div>
               )}
             </div>
@@ -240,13 +243,21 @@ export default function ThankYou() {
                 imageSize="size-[520px]"
                 attestationLink={attestationLink ?? ""}
               />
-              <div className="my-2 z-50">
+              <div className="flex flex-wrap gap-6 my-2 z-50">
                 <RainbowBorderButton
                   dataTestId="view-transaction-button"
                   onClick={onViewTransaction}
                 >
                   View attestation
                 </RainbowBorderButton>
+                <button
+                  className="blue-background-button font-medium font-mono"
+                  onClick={() => {
+                    window.open("https://explorer.gitcoin.co/", "_blank");
+                  }}
+                >
+                  Return to Explorer
+                </button>
               </div>
             </div>
           ) : (
@@ -255,12 +266,12 @@ export default function ThankYou() {
                 roundName={round?.roundMetadata?.name ?? ""}
                 isMrc={isMrc}
               />
+              <div className="fixed -bottom-6 right-11 w-full z-20">
+                <Footer />
+              </div>
             </div>
           )}
         </main>
-        <div className="fixed -bottom-6 right-11 w-full z-20">
-          <Footer />
-        </div>
 
         {/* Progress Modal */}
         {transactions.length > 0 && (

diff --git a/packages/grant-explorer/src/index.css b/packages/grant-explorer/src/index.css
@@ -130,7 +130,100 @@
   animation: reverse-spin 1s linear infinite;
 }
 
-.threeProjectsPadding {
-  padding-top: 1.33rem;
-  padding-bottom: 1.33rem;
+.icon-button {
+  position: relative;
+  align-items: center;
+  background-color: #ffffff;
+  border: 1px solid transparent;
+  margin: 1px;
+  border-radius: 24px;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center; 
 }
+
+.icon-button:hover {
+  background: linear-gradient(
+    170deg,
+    #ffd6c9 10%,
+    #b8d9e7 40%,
+    #abe3eb 60%,
+    #f2dd9e 90%
+  );
+  box-shadow: none;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+}
+
+.rainbow-border-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 24px;
+  background-image: linear-gradient(
+    170deg,
+    #ffd6c9 10%,
+    #b8d9e7 40%,
+    #abe3eb 60%,
+    #f2dd9e 90%
+  );
+}
+
+.blue-background-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: #3c6c90;
+  border: none;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: white;
+  height: 32px;
+  width: 187px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.blue-background-button:hover {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+
+.copytooltip-top {
+  position: absolute;
+  bottom: 74%;
+  left: 54.5%;
+  background-color: black;
+  color: white;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  z-index: 10;
+  white-space: nowrap;
+  margin-bottom: 25px;
+}
+
+
+.copytooltip-bottom {
+  position: absolute;
+  bottom: 11%;
+  left: 54%;
+  background-color: black;
+  color: white;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  z-index: 10;
+  white-space: nowrap;
+  margin-bottom: 25px;
+}