From 6d723752361637598c3d6e75a9f22efd8dbd0241 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Mar 2023 19:17:04 +0800
Subject: [PATCH] Small style nudge for clicking the timestamp

---
 src/components/status.css | 11 ++++++++---
 src/components/status.jsx |  6 +++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index bd4b555f..745121c9 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -141,13 +141,18 @@
   margin-left: 4px;
   white-space: nowrap;
 }
-.status > .container > .meta a.time:is(:hover, :focus) {
-  text-decoration: underline;
-}
 .status > .container > .meta a.time {
   position: relative;
   overflow: visible;
 }
+.status > .container > .meta a.time:is(:hover, :focus) {
+  text-decoration: underline;
+}
+.status > .container > .meta a.time:active,
+.status > .container > .meta a.time.is-open {
+  text-decoration: none;
+  opacity: 1;
+}
 .status > .container > .meta a.time:after {
   content: '';
   position: absolute;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index e0216f82..9b1c7563 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -579,14 +579,14 @@ function Status({
                 viewScroll="close"
                 boundingBoxPadding="8 8 8 8"
                 unmountOnClose
-                menuButton={
+                menuButton={({ open }) => (
                   <Link
                     to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
                     }}
-                    class="time"
+                    class={`time ${open ? 'is-open' : ''}`}
                   >
                     <Icon
                       icon={visibilityIconsMap[visibility]}
@@ -595,7 +595,7 @@ function Status({
                     />{' '}
                     <RelativeTime datetime={createdAtDate} format="micro" />
                   </Link>
-                }
+                )}
               >
                 {StatusMenuItems}
               </Menu>