Minor updates (#692)

* holders table - tab count style color * footer - nav links spacing finetune * stamp detail - table-listings-addy color fix on remain=0 * pie chart - tooltip improvement * search - crtl/cmd+s keyboard shortcut to close * stamp fullscreen preview - removed background container + added ESC keyboard close shortcut * media page - intro text update * home - stampchain module - contact button instead of donate * home - header - desktop text size adjust * view all button - spacing adjustment
stampchain-io · Feb 2, 2025 · 058889a · 058889a
1 parent 962bd1e
commit 058889a
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 80 deletions.
diff --git a/components/home/HomeHeader.tsx b/components/home/HomeHeader.tsx
@@ -38,7 +38,7 @@ export function HomeHeader() {
           mobileMd:w-[520px]
           mobileLg:w-[720px]
           tablet:w-[976px]
-          desktop:w-[1368px]
+          
           flex flex-col justify-center
         ">
         <h1 class="text-center">
@@ -52,7 +52,7 @@ export function HomeHeader() {
               mobileMd:text-4xl
               mobileLg:text-5xl
               tablet:text-6xl
-              desktop:text-7xl
+              desktop:text-6xl
               !content-visibility: visible
             "
           >
@@ -71,7 +71,7 @@ export function HomeHeader() {
               mobileMd:text-3xl
               mobileLg:text-4xl
               tablet:text-5xl
-              desktop:text-6xl
+              
               -mt-1
               tablet:mt-0
             ">
@@ -91,7 +91,7 @@ export function HomeHeader() {
           mobileMd:max-w-[380px] mobileMd:text-lg
           mobileLg:max-w-[515px] mobileLg:text-xl
           tablet:max-w-[618px] tablet:text-2xl
-          desktop:max-w-[772px] desktop:text-3xl
+          
         "
         style="content-visibility: visible; contain: content;"
       >

diff --git a/components/shared/HoldersGraph.tsx b/components/shared/HoldersGraph.tsx
@@ -39,7 +39,9 @@ export function HoldersGraph({ holders = [] }: HoldersGraphProps) {
     <div className="relative flex flex-col dark-gradient rounded-lg p-3 mobileMd:p-6">
       <div className="text-left tablet:text-right">
         <p className={dataLabel}>HOLDERS</p>
-        <p className={dataValueXL}>{totalHolders}</p>
+        <p className={`${dataValueXL} text-stamp-grey-light`}>
+          {totalHolders}
+        </p>
       </div>
       <div className="flex flex-col tablet:flex-row w-full gap-6">
         <div className="flex justify-center tablet:justify-start">

diff --git a/components/shared/ViewAllButton.tsx b/components/shared/ViewAllButton.tsx
@@ -7,7 +7,7 @@ const buttonPurpleOutline =
 
 export function ViewAllButton({ href }: ViewAllButtonProps) {
   return (
-    <div className="flex justify-end w-full mt-3 mobileMd:mt-6">
+    <div className="flex justify-end w-full mt-[18px] mobileMd:mt-6 mobileLg:mt-9">
       <a
         href={href}
         class={buttonPurpleOutline}

diff --git a/components/stampDetails/StampListingsAll.tsx b/components/stampDetails/StampListingsAll.tsx
@@ -102,7 +102,11 @@ export function StampListingsAll({ dispensers }: StampListingsAllProps) {
                         globalThis.location.href =
                           `/wallet/${dispenser.source}`;
                       }}
-                      className={tableValueLink}
+                      className={`${tableValueLink} ${
+                        isEmpty
+                          ? "!text-stamp-grey-darker hover:!text-stamp-purple-bright"
+                          : ""
+                      }`}
                     >
                       <span class="tablet:hidden">
                         {abbreviateAddress(dispenser.source, 4)}

diff --git a/islands/charts/HoldersPieChart.tsx b/islands/charts/HoldersPieChart.tsx
@@ -51,8 +51,11 @@ export const HoldersPieChart = ({ holders }: PieChartProps) => {
           },
           tooltip: {
             enabled: true,
+            backgroundColor: "#000000BF",
             titleColor: "#CCCCCC",
             bodyColor: "#CCCCCC",
+            position: "nearest",
+            yAlign: "bottom",
             callbacks: {
               label: (context: any) => {
                 const holder = holders[context.dataIndex];
@@ -62,6 +65,8 @@ export const HoldersPieChart = ({ holders }: PieChartProps) => {
                 ];
               },
             },
+            caretPadding: 12,
+            caretSize: 0,
           },
         },
       },

diff --git a/islands/layout/Footer.tsx b/islands/layout/Footer.tsx
@@ -54,7 +54,7 @@ const footerLogo =
 const footerTagline =
   "text-stamp-purple-bright text-sm leading-[16.8px] mobileLg:text-lg mobileLg:leading-[21.6px] font-light mb-3 mobileLg:mb-[18px]";
 const footerNavTitle =
-  "text-stamp-purple-dark hidden tablet:block text-lg leading-[23.4px] font-black";
+  "text-stamp-purple-dark hidden tablet:block text-lg leading-[23.4px] tracking-wide font-black";
 const navContent =
   "text-stamp-purple-dark text-xs leading-[14.4px] mobileLg:text-sm mobileLg:leading-[16.8px] tablet:text-base tablet:leading-[19.2px] font-medium hover:text-stamp-purple-bright";
 const copyright =
@@ -115,10 +115,10 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="flex flex-col tablet:flex-row justify-end tablet:justify-between w-full tablet:pt-3">
-        <div className="flex flex-col items-center tablet:items-start w-full tablet:w-1/2 gap-1.5">
+      <div className="flex flex-col tablet:flex-row w-full justify-end tablet:justify-between tablet:pt-3">
+        <div className="flex flex-col w-full tablet:w-1/2 items-center tablet:items-start gap-1.5">
           <p className={footerNavTitle}>RESOURCES</p>
-          <div className="flex flex-row tablet:flex-col justify-center w-full gap-[18px] mobileLg:gap-6 tablet:gap-1 leading-4">
+          <div className="flex flex-row tablet:flex-col w-full justify-center gap-[18px] mobileLg:gap-6 tablet:gap-1">
             {resourcesStampLinks.map((link, index) => (
               <a
                 key={index}
@@ -140,19 +140,22 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="hidden tablet:flex flex-col justify-center w-full tablet:w-1/2 gap-1.5 text-right">
+        <div className="hidden flex-col tablet:flex w-full tablet:w-1/2 justify-center gap-1.5 text-right">
           <p className={footerNavTitle}>STAMPCHAIN</p>
-          {stampChainLinks.map((link, index) => (
-            <a
-              key={index}
-              href={link.href}
-              f-partial={!link.isExternal ? link.href : undefined}
-              className={navContent}
-              target={link.isExternal ? "_blank" : undefined}
-            >
-              {link.title}
-            </a>
-          ))}
+          <div className="flex flex-col w-full gap-1">
+            {stampChainLinks.map((link, index) => (
+              <a
+                key={index}
+                href={link.href}
+                f-partial={!link.isExternal ? link.href : undefined}
+                className={navContent}
+                target={link.isExternal ? "_blank" : undefined}
+              >
+                {link.title}
+              </a>
+            ))}
+          </div>
+
           <p
             className={`${copyright} hidden tablet:block mt-[9px]`}
           >

diff --git a/islands/modules/StampChain.tsx b/islands/modules/StampChain.tsx
@@ -14,10 +14,12 @@ export const StampChainModule = () => {
         <p className={ModulesStyles.bodyTextLight}>
           <b>
             As the architects of the Bitcoin Stamps protocol, we've been at the
-            forefront of the ecosystem since its inception. Our platform
-            combines deep technical expertise with user-friendly tools to help
-            you create, collect, and trade Bitcoin Stamps with confidence.
-          </b>
+            forefront of the ecosystem since its inception.
+          </b>{" "}
+          Our platform combines deep technical expertise with user-friendly
+          tools to help you create, collect, and trade Bitcoin Stamps with
+          confidence.
+
           <br />
           <br />
           <b>We empower creators and collectors by:</b>
@@ -35,11 +37,11 @@ export const StampChainModule = () => {
 
       <div className="flex gap-3 mobileMd:gap-6 font-extrabold justify-end">
         <a
-          href="/about/#donate"
-          f-partial="/about/#donate"
+          href="/about/#contact"
+          f-partial="/about/#contact"
           className={ModulesStyles.buttonGreyOutline}
         >
-          DONATE
+          CONTACT
         </a>
         <a
           href="/about"

diff --git a/islands/src20/SRC20Search.tsx b/islands/src20/SRC20Search.tsx
@@ -88,7 +88,11 @@ export function SRC20SearchClient({
     const handleKeyboardShortcut = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
-        handleOpen2(true);
+        if (!open2) {
+          handleOpen2(true);
+        } else {
+          handleOpen2(false);
+        }
       }
       if (e.key === "Escape" && open2) {
         handleOpen2(false);

diff --git a/islands/src20/SRC20Section.tsx b/islands/src20/SRC20Section.tsx
@@ -153,14 +153,14 @@ export function SRC20Section({
         </h2>
       )}
 
-      <div class="grid grid-cols-1 gap-3 mobileLg:gap-6 items-end max-w-desktop w-full mx-auto">
+      <div class="grid grid-cols-1 gap-3 mobileMd:gap-6 items-end max-w-desktop w-full mx-auto">
         <ImageModal
           imgSrc={modalImg}
           isOpen={isModalOpen}
           onClose={handleCloseModal}
         />
 
-        <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-3 mobileMd:gap-6">
           {data.map((src20) => (
             parseFloat(src20?.progress || "0") >= 100
               ? (

diff --git a/islands/stamp/StampSearch.tsx b/islands/stamp/StampSearch.tsx
@@ -190,7 +190,11 @@ export function StampSearchClient(
     const handleKeyboardShortcut = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
-        handleOpen2(true);
+        if (!open2) {
+          handleOpen2(true);
+        } else {
+          handleOpen2(false);
+        }
       }
       if (e.key === "Escape" && open2) {
         handleOpen2(false);

diff --git a/islands/stamp/StampSection.tsx b/islands/stamp/StampSection.tsx
@@ -165,11 +165,7 @@ export default function StampSection({
         )}
       </div>
 
-      {viewAllLink && (
-        <div class="flex justify-end -mt-3 mobileMd:-mt-6">
-          <ViewAllButton href={seeAllLink} />
-        </div>
-      )}
+      {viewAllLink && <ViewAllButton href={seeAllLink} />}
 
       {pagination && pagination.totalPages > 1 && (
         <div class="mt-9 mobileLg:mt-[72px]">

diff --git a/islands/stamp/details/StampImageFullScreen.tsx b/islands/stamp/details/StampImageFullScreen.tsx
@@ -55,41 +55,38 @@ const StampImageFullScreen = ({
         class="relative min-h-0 min-w-0"
         onClick={(e) => e.stopPropagation()}
       >
-        <div class="h-[min(calc(100vh-48px),calc(100vw-48px))] w-[min(calc(100vh-48px),calc(100vw-48px))] mobileLg:h-[min(calc(100vh-96px),calc(100vw-96px))] mobileLg:w-[min(calc(100vh-96px),calc(100vw-96px))] aspect-square">
-          <div class="flex flex-col p-3 mobileMd:p-6 dark-gradient-modal rounded-lg">
-            <div class="flex flex-col h-full w-full">
-              {contentType === "html"
-                ? (
-                  <iframe
-                    width="100%"
-                    height="100%"
-                    scrolling="no"
-                    className="rounded-sm mobileMd:rounded-md aspect-square"
-                    sandbox="allow-scripts allow-same-origin"
-                    src={imageUrl}
-                    loading="lazy"
-                    title="Stamp Preview"
-                  />
-                )
-                : contentType === "text"
-                ? (
-                  <div className="w-full h-full rounded-sm mobileMd:rounded-md aspect-square">
-                    <TextContentIsland src={imageUrl} />
-                  </div>
-                )
-                : (
-                  <img
-                    className="rounded-sm mobileMd:rounded-md pixelart stamp-image aspect-square"
-                    style={{
-                      objectFit: "contain",
-                      imageRendering: "pixelated",
-                    }}
-                    src={imageUrl}
-                    onError={handleImageError}
-                    alt="Preview"
-                  />
-                )}
-            </div>
+        <div class="h-[min(calc(100vh-48px),calc(100vw-48px))] w-[min(calc(100vh-48px),calc(100vw-48px))] mobileLg:h-[min(calc(100vh-96px),calc(100vw-96px))] mobileLg:w-[min(calc(100vh-96px),calc(100vw-96px))]">
+          <div class="flex flex-col h-full w-full">
+            {contentType === "html"
+              ? (
+                <iframe
+                  width="100%"
+                  height="100%"
+                  scrolling="no"
+                  className="rounded-sm mobileMd:rounded-md aspect-square"
+                  sandbox="allow-scripts allow-same-origin"
+                  src={imageUrl}
+                  loading="lazy"
+                  title="Stamp Preview"
+                />
+              )
+              : contentType === "text"
+              ? (
+                <div className="w-full h-full rounded-sm mobileMd:rounded-md aspect-square">
+                  <TextContentIsland src={imageUrl} />
+                </div>
+              )
+              : (
+                <img
+                  className="rounded-sm mobileMd:rounded-md pixelart stamp-image aspect-square"
+                  style={{
+                    imageRendering: "pixelated",
+                  }}
+                  src={imageUrl}
+                  onError={handleImageError}
+                  alt="Stamp Preview"
+                />
+              )}
           </div>
         </div>
       </div>

diff --git a/islands/stamping/stamp/OlgaContent.tsx b/islands/stamping/stamp/OlgaContent.tsx
@@ -1346,6 +1346,18 @@ export function OlgaContent() {
     }
   }, [isSearching]);
 
+  useEffect(() => {
+    const handleKeyboardShortcut = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isFullScreenModalOpen) {
+        handleCloseFullScreenModal();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyboardShortcut);
+    return () =>
+      document.removeEventListener("keydown", handleKeyboardShortcut);
+  }, [isFullScreenModalOpen]);
+
   return (
     <div class={bodyTools}>
       <h1 class={titlePurpleLDCenter}>STAMP</h1>

diff --git a/routes/media/index.tsx b/routes/media/index.tsx
@@ -19,12 +19,17 @@ export default function Media() {
         <h1 className={titleGreyDL}>MEDIA MATTERS</h1>
         <h2 className={subTitleGrey}>HONOURABLE STAMP MENTIONS</h2>
         <p className={bodyTextLight}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-          vulputate, lacus at faucibus fringilla, urna urna pretium magna, et
-          porttitor odio massa sit amet arcu. Curabitur dolor elit, ornare at
-          dolor in, interdum laoreet dolor. Pellentesque ut diam erat.
-          Pellentesque id gravida tortor. Praesent lacus diam, imperdiet at orci
-          at, venenatis vulputate velit.
+          Explore the world of Bitcoin Stamps with our curated list of news
+          coverage, in-depth articles, reports and video podcasts. <br />
+          <br />
+          We share articles worthwhile reading. From technical deep-dives into
+          the protocol, ecosystem formats and lingo explainers, to all things
+          stamp art. Catch up on the most important news coverage, or watch Mike
+          in Space share his vision behind stamps, break down the technology and
+          offer unique insights on where the technology is headed.<br />
+          <br />
+          Stay informed by regularly checking back. We're constantly adding new
+          interviews and articles about the space.
         </p>
       </section>