From cd3ab50a18e510cb20a9d09efaf9dc47e0de1ce9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 23 Sep 2023 19:14:11 +0800
Subject: [PATCH] Make 'Read more' buttons look more consistent everywhere

Too many cooks spoil the broth
---
 src/components/status.css   | 84 +++++++++++++++++++++++--------------
 src/components/status.jsx   |  7 ++--
 src/pages/notifications.css | 17 ++++----
 3 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index d25da2a0..945a2e16 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -107,24 +107,20 @@
     --inset-offset: 16px;
     inset-block-end: var(--inset-offset);
     inset-inline-end: var(--inset-offset);
-    color: var(--link-color);
-    background-color: var(--bg-faded-blur-color);
-    backdrop-filter: blur(8px);
-    border: 1px solid var(--outline-color);
+    color: var(--text-color);
+    background-color: var(--bg-faded-color);
+    border: 1px dashed var(--link-color);
+    box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
+      0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
     padding: 0.5em 0.75em;
     border-radius: 10em;
     font-size: 90%;
     white-space: nowrap;
-    box-shadow: inset 0 0 0 1px var(--bg-color);
-    text-shadow: 0 -1px var(--bg-color);
-    transition-property: transform, background-color, border-color;
-    transition-duration: 0.2s;
-    transition-timing-function: ease-out;
+    transition: transform 0.2s ease-out;
   }
 
   &:is(:hover, :focus):after {
-    border-color: var(--link-color);
-    background-color: var(--bg-color);
+    color: var(--link-color);
     transform: translate(2px, 0);
   }
 }
@@ -1536,26 +1532,52 @@ a.card:is(:hover, :focus):visited {
   text-overflow: ellipsis;
 }
 
-#filtered-status-peek .status-link {
-  border-radius: 16px;
-  border: var(--hairline-width) dashed var(--text-insignificant-color);
-  max-height: 33vh;
-  max-height: 33dvh;
-  overflow: hidden;
-}
-#filtered-status-peek .status-link .status {
-  pointer-events: none;
-  font-size: 90%;
-  max-height: 33vh;
-  max-height: 33dvh;
-  overflow: hidden;
-  mask-image: linear-gradient(black 80%, transparent 95%);
-}
-#filtered-status-peek .status-post-link {
-  float: right;
-  position: sticky;
-  bottom: 8px;
-  right: 8px;
+#filtered-status-peek {
+  .status-link {
+    margin: 8px 0 0;
+    border-radius: 16px;
+    border: var(--hairline-width) solid var(--divider-color);
+    position: relative;
+    max-height: 33vh;
+    max-height: 33dvh;
+    overflow: hidden;
+
+    &.truncated {
+      .status {
+        mask-image: linear-gradient(to bottom, #000 80px, transparent);
+      }
+
+      &:after {
+        content: attr(data-read-more);
+        line-height: 1;
+        display: inline-block;
+        position: absolute;
+        --inset-offset: 16px;
+        inset-block-end: var(--inset-offset);
+        inset-inline-end: var(--inset-offset);
+        color: var(--text-color);
+        background-color: var(--bg-faded-color);
+        border: 1px dashed var(--link-color);
+        box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
+          0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
+        padding: 0.5em 0.75em;
+        border-radius: 10em;
+        font-size: 90%;
+        white-space: nowrap;
+        transition: transform 0.2s ease-out;
+      }
+
+      &:is(:hover, :focus):after {
+        color: var(--link-color);
+        transform: translate(2px, 0);
+      }
+    }
+
+    .status {
+      pointer-events: none;
+      font-size: 90%;
+    }
+  }
 }
 
 /* REACTIONS */
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 30267ba3..036c9d2c 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -2089,6 +2089,8 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
     },
   );
 
+  const statusPeekRef = useTruncated();
+
   return (
     <div
       class={isReblog ? (group ? 'status-group' : 'status-reblog') : ''}
@@ -2162,16 +2164,15 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
             </header>
             <main tabIndex="-1">
               <Link
+                ref={statusPeekRef}
                 class="status-link"
                 to={`/${instance}/s/${status.id}`}
                 onClick={() => {
                   setShowPeek(false);
                 }}
+                data-read-more="Read more →"
               >
                 <Status status={status} instance={instance} size="s" readOnly />
-                <button type="button" class="status-post-link plain3">
-                  See post &raquo;
-                </button>
               </Link>
             </main>
           </div>
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 6b3fe0fa..337812bc 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -118,23 +118,20 @@
   --inset-offset: 16px;
   inset-block-end: var(--inset-offset);
   inset-inline-end: var(--inset-offset);
-  color: var(--link-color);
-  background-color: var(--bg-faded-blur-color);
-  backdrop-filter: blur(8px);
-  border: 1px solid var(--outline-color);
+  color: var(--text-color);
+  background-color: var(--bg-faded-color);
+  border: 1px dashed var(--link-color);
+  box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
+    0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
   padding: 0.5em 0.75em;
   border-radius: 10em;
   font-size: 90%;
   white-space: nowrap;
-  box-shadow: inset 0 0 0 1px var(--bg-color);
   text-shadow: 0 -1px var(--bg-color);
-  transition-property: transform, background-color, border-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-out;
+  transition: transform 0.2s ease-out;
 }
 .notification .status-link:is(:hover, :focus).truncated:after {
-  border-color: var(--link-color);
-  background-color: var(--bg-color);
+  color: var(--link-color);
   transform: translate(2px, 0);
 }
 .notification .status-link.status-type-mention {