From 13860afbc237ce3ff85df287c03df3c6f85917ff Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 30 Jan 2025 10:50:39 +0530
Subject: [PATCH] Tweak

---
 .../components/Sidebar/SubscriptionCard.tsx   | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
index 368e65d736..029e48c1a2 100644
--- a/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
+++ b/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
@@ -1,6 +1,6 @@
 import { Overlay } from "@/base/components/containers";
 import type { ButtonishProps } from "@/base/components/mui";
-import { FocusVisibleUnstyledButton } from "@/new/photos/components/UnstyledButton";
+import { UnstyledButton } from "@/new/photos/components/UnstyledButton";
 import type { UserDetails } from "@/new/photos/services/user-details";
 import {
     familyUsage,
@@ -75,10 +75,13 @@ const ClickOverlay: React.FC<ButtonishProps> = ({ onClick }) => (
 );
 
 /**
- * The transparent button element offers activation of the subscription card is activated on clicks
- * A mixin of UnstyledButton, FocusVisibleUnstyledButton, {@link Overlay}, plus
- * custom styling. */
-const ClickOverlayButton = styled(FocusVisibleUnstyledButton)`
+ * The transparent button element offers activation of the subscription card.
+ *
+ * A mixin of {@link FocusVisibleUnstyledButton} and {@link Overlay}, plus
+ * custom styling to place its contents (chevron) at the middle right.
+ */
+const ClickOverlayButton = styled(UnstyledButton)(
+    ({ theme }) => `
     /* Overlay */
     position: absolute;
     width: 100%;
@@ -93,7 +96,21 @@ const ClickOverlayButton = styled(FocusVisibleUnstyledButton)`
 
     /* Reset the button color */
     color: inherit;
-`;
+
+    /* FocusVisibleUnstyledButton, but customized to work button with the larger
+       subscription card and its border radii. */
+    &:focus-visible {
+        outline: 1.5px solid ${theme.vars.palette.stroke.base};
+        outline-offset: 2px;
+        border-radius: 3px;
+    }
+    &:active {
+        outline: 2px solid ${theme.vars.palette.stroke.faint};
+        outline-offset: 1px;
+        border-radius: 3px;
+    }
+`,
+);
 
 interface SubscriptionCardContentOverlayProps {
     userDetails: UserDetails;