From 433cffd13b72e7367f442a1038ef236f34ec9a1e Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Thu, 21 Jul 2022 12:12:26 -0700
Subject: [PATCH] also fixed new link timing out bug

---
 web/components/manalink-card.tsx              | 206 +++++++++---------
 .../manalinks/create-links-button.tsx         |   2 +-
 web/pages/links.tsx                           |   4 +-
 3 files changed, 109 insertions(+), 103 deletions(-)

diff --git a/web/components/manalink-card.tsx b/web/components/manalink-card.tsx
index b49e1621..11be9585 100644
--- a/web/components/manalink-card.tsx
+++ b/web/components/manalink-card.tsx
@@ -27,47 +27,49 @@ export function ManalinkCard(props: {
   const { expiresTime, maxUses, uses, amount, message } = info
   return (
     <Col>
-      <div
-        className={clsx(
-          className,
-          'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
-          getManalinkGradient(info.amount)
-        )}
-      >
-        <Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
-          <div>
-            {maxUses != null
-              ? `${maxUses - uses}/${maxUses} uses left`
-              : `Unlimited use`}
-          </div>
-          <div>
-            {expiresTime != null
-              ? `Expires ${fromNow(expiresTime)}`
-              : 'Never expires'}
-          </div>
-        </Col>
-
-        <img
+      <Col>
+        <div
           className={clsx(
-            'block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12',
-            preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2'
+            className,
+            'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
+            getManalinkGradient(info.amount)
           )}
-          src="/logo-white.svg"
-        />
-        <Row className="rounded-b-xl bg-white p-4">
-          <Col>
-            <div
-              className={clsx(
-                'mb-1 text-xl text-indigo-500',
-                getManalinkAmountColor(amount)
-              )}
-            >
-              {formatMoney(amount)}
+        >
+          <Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
+            <div>
+              {maxUses != null
+                ? `${maxUses - uses}/${maxUses} uses left`
+                : `Unlimited use`}
+            </div>
+            <div>
+              {expiresTime != null
+                ? `Expires ${fromNow(expiresTime)}`
+                : 'Never expires'}
             </div>
-            <div>{message}</div>
           </Col>
-        </Row>
-      </div>
+
+          <img
+            className={clsx(
+              'block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12',
+              preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2'
+            )}
+            src="/logo-white.svg"
+          />
+          <Row className="rounded-b-xl bg-white p-4">
+            <Col>
+              <div
+                className={clsx(
+                  'mb-1 text-xl text-indigo-500',
+                  getManalinkAmountColor(amount)
+                )}
+              >
+                {formatMoney(amount)}
+              </div>
+            </Col>
+          </Row>
+        </div>
+      </Col>
+      <div className="text-md mx-4 mt-2 mb-4 text-gray-500">{message}</div>
     </Col>
   )
 }
@@ -82,75 +84,79 @@ export function ManalinkCardFromView(props: {
   const [details, setDetails] = useState(false)
 
   return (
-    <Col
-      className={clsx(
-        'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
-        className,
-        link.slug === highlightedSlug ? 'animate-pulse' : ''
-      )}
-    >
-      <div
+    <Col>
+      <Col
         className={clsx(
-          'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
-          getManalinkGradient(link.amount)
+          'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
+          className,
+          link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
         )}
-        onClick={() => setDetails(!details)}
       >
-        {details && (
-          <ClaimsList
-            className="absolute h-full w-full bg-white opacity-90"
-            link={link}
+        <div
+          className={clsx(
+            'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
+            getManalinkGradient(link.amount)
+          )}
+          onClick={() => setDetails(!details)}
+        >
+          {details && (
+            <ClaimsList
+              className="absolute h-full w-full bg-white opacity-90"
+              link={link}
+            />
+          )}
+          <Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100">
+            <div>
+              {maxUses != null
+                ? `${maxUses - claims.length}/${maxUses} uses left`
+                : `Unlimited use`}
+            </div>
+            <div>
+              {expiresTime != null
+                ? `Expires ${fromNow(expiresTime)}`
+                : 'Never expires'}
+            </div>
+          </Col>
+          <img
+            className={clsx('my-auto block w-1/3 select-none self-center py-3')}
+            src="/logo-white.svg"
           />
-        )}
-        <Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100">
-          <div>
-            {maxUses != null
-              ? `${maxUses - claims.length}/${maxUses} uses left`
-              : `Unlimited use`}
-          </div>
-          <div>
-            {expiresTime != null
-              ? `Expires ${fromNow(expiresTime)}`
-              : 'Never expires'}
-          </div>
+        </div>
+        <Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
+          <Row className="relative gap-1">
+            <div
+              className={clsx(
+                'my-auto mb-1 w-full',
+                getManalinkAmountColor(amount)
+              )}
+            >
+              {formatMoney(amount)}
+            </div>
+            <ShareIconButton
+              toastClassName={'-left-48 min-w-[250%]'}
+              buttonClassName={'transition-colors'}
+              onCopyButtonClassName={
+                'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
+              }
+              copyPayload={getManalinkUrl(link.slug)}
+            />
+            <button
+              onClick={() => setDetails(!details)}
+              className={clsx(
+                contractDetailsButtonClassName,
+                details
+                  ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
+                  : ''
+              )}
+            >
+              <DotsHorizontalIcon className="h-[24px] w-5" />
+            </button>
+          </Row>
         </Col>
-        <img
-          className={clsx('my-auto block w-1/3 select-none self-center py-3')}
-          src="/logo-white.svg"
-        />
-      </div>
-      <Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
-        <Row className="relative gap-1">
-          <div
-            className={clsx(
-              'my-auto mb-1 w-full',
-              getManalinkAmountColor(amount)
-            )}
-          >
-            {formatMoney(amount)}
-          </div>
-          <ShareIconButton
-            toastClassName={'-left-48 min-w-[250%]'}
-            buttonClassName={'transition-colors'}
-            onCopyButtonClassName={
-              'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
-            }
-            copyPayload={getManalinkUrl(link.slug)}
-          />
-          <button
-            onClick={() => setDetails(!details)}
-            className={clsx(
-              contractDetailsButtonClassName,
-              details
-                ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
-                : ''
-            )}
-          >
-            <DotsHorizontalIcon className="h-[24px] w-5" />
-          </button>
-        </Row>
-        <div className="my-2 text-xs md:text-sm">{message || '\n\n'}</div>
       </Col>
+      <div className="mx-4 mt-2 mb-4 text-xs text-gray-500 md:text-sm">
+        {message || ''}
+      </div>
     </Col>
   )
 }
diff --git a/web/components/manalinks/create-links-button.tsx b/web/components/manalinks/create-links-button.tsx
index 25b51bb2..656aff29 100644
--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@@ -37,7 +37,6 @@ export function CreateLinksButton(props: {
                 message: newManalink.message,
               })
               setHighlightedSlug(slug || '')
-              setTimeout(() => setHighlightedSlug(''), 3700)
             }}
           />
         </Col>
@@ -165,6 +164,7 @@ function CreateManalinkForm(props: {
               <label className="label">Message</label>
               <Textarea
                 placeholder={defaultMessage}
+                maxLength={200}
                 className="input input-bordered resize-none"
                 autoFocus
                 value={newManalink.message}
diff --git a/web/pages/links.tsx b/web/pages/links.tsx
index 774bfffe..1a716afe 100644
--- a/web/pages/links.tsx
+++ b/web/pages/links.tsx
@@ -85,10 +85,10 @@ function ManalinksDisplay(props: {
 
   if (unclaimedLinks.length === 0) {
     return (
-      <div>
+      <p className="text-gray-500">
         You don't have any unclaimed manalinks. Send some more to spread the
         wealth!
-      </div>
+      </p>
     )
   } else {
     const [page, setPage] = useState(0)