ui-improvements

Author: nijoe1

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>
   );
 };

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
     />
   );

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 && (

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;
+}