From eb628fbdb0a01793d1a7d16dca5ef7e7f16c2d8d Mon Sep 17 00:00:00 2001
From: Xavy <chibokaxavier@gmail.com>
Date: Sat, 28 Mar 2026 16:03:53 +0100
Subject: [PATCH] feat: implement streak sharing functionality with
 ShareStreakCard and ShareOptionsSheet components

---
 frontend/app/streak/page.tsx              |  27 ++--
 frontend/components/ShareOptionsSheet.tsx |  28 +++-
 frontend/components/ShareStreakCard.tsx   | 155 ++++++----------------
 3 files changed, 82 insertions(+), 128 deletions(-)

diff --git a/frontend/app/streak/page.tsx b/frontend/app/streak/page.tsx
index f844d0f..ca14e6d 100644
--- a/frontend/app/streak/page.tsx
+++ b/frontend/app/streak/page.tsx
@@ -162,7 +162,7 @@ const StreakCalendar: React.FC<StreakCalendarProps> = ({
                 <div className="flex items-center justify-between mb-[20px]">
                     <button
                         onClick={handlePreviousMonth}
-                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors"
+                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors cursor-pointer"
                         aria-label="Previous month"
                     >
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-[#FACC15]">
@@ -175,7 +175,7 @@ const StreakCalendar: React.FC<StreakCalendarProps> = ({
                     </h2>
                     <button
                         onClick={handleNextMonth}
-                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors"
+                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors cursor-pointer"
                         aria-label="Next month"
                     >
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-[#FACC15]">
@@ -333,7 +333,8 @@ const DEMO_STREAK_DATA: StreakData = (() => {
 
 export default function StreakPage() {
     const router = useRouter();
-    const [showShare, setShowShare] = useState(false);
+    const [showShareCard, setShowShareCard] = useState(false);
+    const [showShareSheet, setShowShareSheet] = useState(false);
 
     const streakCount = 4;
     const points = 1100;
@@ -344,7 +345,7 @@ export default function StreakPage() {
             <StreakNavbar
                 streakCount={streakCount}
                 points={points}
-                onShare={() => setShowShare(true)}
+                onShare={() => setShowShareCard(true)}
                 onClose={() => router.push("/dashboard")}
             />
 
@@ -352,7 +353,7 @@ export default function StreakPage() {
             <div className="w-full flex items-center justify-between px-[16px] md:px-8 pt-6 pb-2 max-w-[700px] mx-auto">
                 <button
                     onClick={() => router.push("/dashboard")}
-                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors"
+                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors cursor-pointer"
                     aria-label="Close"
                 >
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -361,8 +362,8 @@ export default function StreakPage() {
                 </button>
                 <h1 className="font-nunito font-bold text-white text-lg tracking-wide">Streak</h1>
                 <button
-                    onClick={() => setShowShare(true)}
-                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors"
+                    onClick={() => setShowShareCard(true)}
+                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors cursor-pointer"
                     aria-label="Share"
                 >
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -401,8 +402,8 @@ export default function StreakPage() {
 
             {/* Share Options Sheet */}
             <ShareOptionsSheet
-                isOpen={showShare}
-                onClose={() => setShowShare(false)}
+                isOpen={showShareSheet}
+                onClose={() => setShowShareSheet(false)}
                 onShare={(platform) => {
                     console.log(`Sharing streak to ${platform}`);
                     // Handle sharing logic here
@@ -448,10 +449,14 @@ export default function StreakPage() {
                 }}
             />
             {/* Share Modal */}
-            {showShare && (
+            {showShareCard && (
                 <ShareStreakCard
                     streakCount={streakCount}
-                    onClose={() => setShowShare(false)}
+                    onClose={() => setShowShareCard(false)}
+                    onShare={() => {
+                        setShowShareCard(false);
+                        setShowShareSheet(true);
+                    }}
                 />
             )}
         </div>
diff --git a/frontend/components/ShareOptionsSheet.tsx b/frontend/components/ShareOptionsSheet.tsx
index 213b6d8..c925dcc 100644
--- a/frontend/components/ShareOptionsSheet.tsx
+++ b/frontend/components/ShareOptionsSheet.tsx
@@ -77,6 +77,27 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
     };
   }, [isOpen, onClose]);
 
+  const handleTabKey = (event: React.KeyboardEvent) => {
+    if (event.key !== 'Tab' || !sheetRef.current) return;
+
+    const focusable = sheetRef.current.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (focusable.length === 0) return;
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
   // Prevent body scroll when sheet is open
   useEffect(() => {
     if (isOpen) {
@@ -101,7 +122,7 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
     <div className="fixed inset-0 z-50 flex flex-col justify-end">
       {/* Backdrop */}
       <div 
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"
         onClick={onClose}
         aria-label="Close share options"
       />
@@ -113,12 +134,13 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
         role="dialog"
         aria-modal="true"
         aria-labelledby="share-sheet-title"
+        onKeyDown={handleTabKey}
       >
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
           <Button
             onClick={onClose}
-            className="w-8 h-8 flex items-center justify-center text-white/60 hover:text-white transition-colors bg-transparent p-0"
+            className="w-8 h-8 flex items-center justify-center text-white/60 hover:text-white transition-colors bg-transparent p-0 cursor-pointer"
             aria-label="Close share options"
           >
             <svg 
@@ -153,7 +175,7 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
             <button
               key={option.id}
               onClick={() => handleShare(option.id)}
-              className="flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-blue-500/50 rounded-lg p-2 transition-all duration-200"
+              className="flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-blue-500/50 rounded-lg p-2 transition-all duration-200 cursor-pointer"
               aria-label={`Share via ${option.label}`}
             >
               {/* Circular Icon Button */}
diff --git a/frontend/components/ShareStreakCard.tsx b/frontend/components/ShareStreakCard.tsx
index 29d066b..a169462 100644
--- a/frontend/components/ShareStreakCard.tsx
+++ b/frontend/components/ShareStreakCard.tsx
@@ -7,17 +7,14 @@ interface ShareStreakCardProps {
     streakCount: number;
     username?: string;
     onClose?: () => void;
-}
-
-interface ShareOption {
-    label: string;
-    icon: React.ReactNode;
+    onShare?: () => void;
 }
 
 export default function ShareStreakCard({
     streakCount,
     username,
     onClose,
+    onShare,
 }: ShareStreakCardProps) {
     const EXIT_ANIMATION_MS = 220;
     const modalRef = useRef<HTMLDivElement>(null);
@@ -26,67 +23,6 @@ export default function ShareStreakCard({
     const descriptionId = useId();
     const [isClosing, setIsClosing] = useState(false);
     const [isEntering, setIsEntering] = useState(true);
-    const shareOptions: ShareOption[] = [
-        {
-            label: "Contacts",
-            icon: (
-                <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.3163 13.9111C14.1895 11.9631 12.4531 10.5662 10.4266 9.90408C11.429 9.30737 12.2078 8.39811 12.6434 7.31596C13.079 6.2338 13.1473 5.03857 12.8378 3.91383C12.5284 2.78909 11.8583 1.79702 10.9305 1.08997C10.0026 0.382926 8.86834 0 7.7018 0C6.53527 0 5.40098 0.382926 4.47314 1.08997C3.5453 1.79702 2.8752 2.78909 2.56576 3.91383C2.25632 5.03857 2.32464 6.2338 2.76023 7.31596C3.19582 8.39811 3.97459 9.30737 4.97696 9.90408C2.95052 10.5655 1.21411 11.9623 0.0873285 13.9111C0.0460074 13.9785 0.0185994 14.0534 0.00672162 14.1316C-0.00515616 14.2097 -0.00126311 14.2894 0.018171 14.366C0.0376052 14.4427 0.0721869 14.5146 0.119876 14.5776C0.167564 14.6407 0.227394 14.6935 0.295835 14.733C0.364276 14.7726 0.439941 14.798 0.518367 14.8078C0.596793 14.8176 0.676391 14.8116 0.752464 14.7902C0.828537 14.7687 0.899544 14.7323 0.961297 14.6829C1.02305 14.6336 1.0743 14.5724 1.11201 14.503C2.50588 12.094 4.96956 10.6558 7.7018 10.6558C10.434 10.6558 12.8977 12.094 14.2916 14.503C14.3293 14.5724 14.3806 14.6336 14.4423 14.6829C14.5041 14.7323 14.5751 14.7687 14.6511 14.7902C14.7272 14.8116 14.8068 14.8176 14.8852 14.8078C14.9637 14.798 15.0393 14.7726 15.1078 14.733C15.1762 14.6935 15.236 14.6407 15.2837 14.5776C15.3314 14.5146 15.366 14.4427 15.3854 14.366C15.4049 14.2894 15.4088 14.2097 15.3969 14.1316C15.385 14.0534 15.3576 13.9785 15.3163 13.9111ZM3.55868 5.32889C3.55868 4.50946 3.80167 3.70842 4.25692 3.02709C4.71217 2.34576 5.35924 1.81472 6.11629 1.50114C6.87335 1.18756 7.7064 1.10551 8.51009 1.26537C9.31377 1.42524 10.052 1.81983 10.6314 2.39926C11.2109 2.97868 11.6055 3.71692 11.7653 4.5206C11.9252 5.32429 11.8431 6.15734 11.5295 6.91439C11.216 7.67145 10.6849 8.31852 10.0036 8.77377C9.32226 9.22902 8.52123 9.47201 7.7018 9.47201C6.60334 9.47084 5.5502 9.03395 4.77347 8.25722C3.99673 7.48049 3.55985 6.42735 3.55868 5.32889Z" fill="#E6E6E6"/>
-</svg>
-
-            ),
-        },
-        {
-            label: "Telegram",
-            icon: (
-                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M16.7843 0.373876C16.5596 0.186916 16.2883 0.064386 15.9995 0.0193242C15.7107 -0.0257375 15.415 0.00835563 15.144 0.117975L0.998989 5.82886C0.696489 5.95332 0.438992 6.16683 0.260675 6.44106C0.0823585 6.71528 -0.00834495 7.03725 0.000603789 7.36424C0.00955252 7.69122 0.11773 8.00774 0.310779 8.27181C0.503827 8.53587 0.772617 8.73498 1.08147 8.8427L3.9427 9.83781L5.53748 15.1117C5.55916 15.1821 5.59061 15.2492 5.63092 15.3109C5.63704 15.3203 5.64566 15.3274 5.65217 15.3366C5.69874 15.4016 5.75503 15.459 5.81905 15.5069C5.83726 15.5208 5.8547 15.5338 5.87416 15.5461C5.94909 15.5958 6.03207 15.6322 6.11942 15.6535L6.12877 15.6543L6.13406 15.6566C6.18658 15.6673 6.24003 15.6727 6.29362 15.6728C6.29877 15.6728 6.30335 15.6703 6.30846 15.6702C6.38933 15.6688 6.4695 15.6549 6.54611 15.6289C6.56393 15.6229 6.57921 15.6127 6.5965 15.6054C6.65363 15.5817 6.70775 15.5513 6.75775 15.515C6.79778 15.4812 6.83783 15.4475 6.87789 15.4138L9.01072 13.059L12.1918 15.5232C12.4719 15.7413 12.8166 15.8598 13.1715 15.8601C13.5434 15.8596 13.9039 15.7313 14.1924 15.4966C14.4809 15.262 14.68 14.9353 14.7563 14.5713L17.3316 1.92936C17.3899 1.64483 17.3698 1.34979 17.2734 1.0758C17.177 0.801812 17.0079 0.559184 16.7843 0.373876ZM6.60659 10.0891C6.49715 10.1981 6.42234 10.337 6.39154 10.4884L6.14724 11.6755L5.52838 9.62876L8.7371 7.95785L6.60659 10.0891ZM13.1592 14.2753L9.39999 11.3632C9.24271 11.2417 9.04542 11.1839 8.84743 11.2013C8.64943 11.2187 8.46528 11.3101 8.33165 11.4572L7.64858 12.2112L7.88998 11.0379L13.4806 5.44729C13.6141 5.31402 13.6954 5.13737 13.7098 4.94933C13.7242 4.7613 13.6708 4.57431 13.5593 4.42223C13.4478 4.27016 13.2855 4.16306 13.1018 4.12034C12.9181 4.07762 12.7252 4.10209 12.558 4.18934L4.53448 8.36683L1.59483 7.29108L15.7853 1.61408L13.1592 14.2753Z" fill="#E6E6E6"/>
-                </svg>
-                
-            ),
-        },
-        {
-            label: "Twitter",
-            icon: (
-                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M18.1471 3.11687C18.1472 2.97745 18.1103 2.8405 18.0402 2.71996C17.9702 2.59943 17.8694 2.49961 17.7483 2.43067C17.6271 2.36174 17.4898 2.32615 17.3504 2.32754C17.211 2.32892 17.0744 2.36723 16.9546 2.43856C16.4926 2.71354 15.9952 2.92413 15.4763 3.06448C14.7351 2.42848 13.7898 2.08045 12.8132 2.08401C11.7417 2.08524 10.7127 2.50281 9.94341 3.24853C9.1741 3.99426 8.72471 5.00977 8.69012 6.08063C6.57793 5.74381 4.6636 4.64136 3.31217 2.98352C3.23074 2.88472 3.12675 2.80696 3.00896 2.75679C2.89118 2.70661 2.76306 2.6855 2.6354 2.69522C2.50782 2.70573 2.38472 2.74715 2.27674 2.81592C2.16876 2.88468 2.07915 2.97871 2.01567 3.08988C1.69011 3.65803 1.50312 4.29495 1.46991 4.94893C1.43669 5.6029 1.55818 6.2555 1.82451 6.85371L1.82297 6.85525C1.70327 6.92897 1.60449 7.03217 1.53606 7.15498C1.46764 7.27779 1.43187 7.4161 1.43217 7.55669C1.43072 7.67266 1.43768 7.78858 1.45299 7.90354C1.5336 8.8967 1.97375 9.82633 2.6909 10.5181C2.64225 10.6108 2.61256 10.7122 2.60356 10.8165C2.59456 10.9208 2.60643 11.0259 2.63848 11.1255C2.95113 12.0996 3.61603 12.922 4.50306 13.4317C3.60186 13.7802 2.62879 13.9017 1.66958 13.7856C1.49204 13.7633 1.31221 13.802 1.15957 13.8954C1.00693 13.9887 0.890558 14.1312 0.829535 14.2994C0.768513 14.4676 0.766466 14.6515 0.823731 14.8211C0.880995 14.9906 0.99417 15.1356 1.14469 15.2323C2.79441 16.2949 4.71524 16.8598 6.67753 16.8595C8.90278 16.8846 11.0739 16.1735 12.8532 14.8369C14.6325 13.5003 15.9202 11.6132 16.516 9.46903C16.7947 8.53499 16.937 7.5656 16.9385 6.59088C16.9385 6.53923 16.9385 6.48605 16.9377 6.43287C17.3498 5.98843 17.669 5.46621 17.8767 4.8968C18.0844 4.32739 18.1763 3.72226 18.1471 3.11687ZM15.5371 5.65204C15.4067 5.80623 15.3408 6.0047 15.3529 6.20625C15.3606 6.33649 15.3598 6.46751 15.3598 6.59088C15.3582 7.41455 15.2375 8.23366 15.0014 9.02277C14.5148 10.8472 13.43 12.4555 11.9208 13.5901C10.4116 14.7248 8.56529 15.3202 6.67753 15.2809C5.99942 15.2811 5.32365 15.2014 4.66419 15.0435C5.50512 14.7725 6.29141 14.3547 6.98662 13.8095C7.11466 13.7086 7.20837 13.5707 7.25489 13.4145C7.30141 13.2583 7.29846 13.0915 7.24644 12.9371C7.19442 12.7826 7.09588 12.6481 6.96434 12.5518C6.83281 12.4556 6.67472 12.4025 6.51177 12.3997C5.85573 12.3895 5.22926 12.125 4.76436 11.662C4.8823 11.6396 4.99946 11.6119 5.11585 11.5788C5.28635 11.5302 5.43555 11.4257 5.53944 11.2821C5.64332 11.1384 5.69585 10.964 5.68855 10.7869C5.68125 10.6098 5.61455 10.4403 5.4992 10.3057C5.38385 10.1711 5.22656 10.0792 5.05264 10.0449C4.67183 9.96965 4.3135 9.80764 4.00549 9.57142C3.69748 9.33519 3.44809 9.03112 3.27671 8.68284C3.41936 8.70231 3.56292 8.7144 3.70682 8.71907C3.87777 8.72165 4.04511 8.6698 4.18464 8.571C4.32418 8.4722 4.42867 8.33159 4.48302 8.16948C4.5351 8.00591 4.53242 7.82982 4.47539 7.66791C4.41835 7.50599 4.31008 7.36709 4.16699 7.27227C3.81981 7.04098 3.53542 6.72719 3.33929 6.35901C3.14316 5.99083 3.04141 5.57975 3.04316 5.16259C3.04316 5.11018 3.04469 5.05776 3.04778 5.00611C4.81682 6.65596 7.11137 7.62853 9.52717 7.75249C9.64911 7.75729 9.77056 7.73432 9.88232 7.68532C9.99409 7.63631 10.0933 7.56255 10.1723 7.4696C10.2506 7.37576 10.3061 7.26502 10.3343 7.14611C10.3625 7.0272 10.3627 6.90337 10.3349 6.78436C10.2898 6.596 10.2668 6.40303 10.2663 6.20934C10.2671 5.53412 10.5356 4.88676 11.0131 4.4093C11.4905 3.93185 12.1379 3.66331 12.8131 3.66259C13.1605 3.66166 13.5043 3.73276 13.8229 3.8714C14.1414 4.01004 14.4277 4.21321 14.6638 4.46809C14.7548 4.56603 14.8694 4.63904 14.9966 4.6802C15.1239 4.72135 15.2595 4.72928 15.3906 4.70321C15.7149 4.64011 16.0345 4.55513 16.3472 4.44885C16.1339 4.88531 15.8613 5.29021 15.5371 5.65204Z" fill="#E6E6E6"/>
-                </svg>
-                
-            ),
-        },
-        {
-            label: "Whatsapp",
-            icon: (
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M11.5238 9.49137C11.366 9.41244 10.3399 8.93886 10.182 8.85993C10.0242 8.781 9.86629 8.781 9.70843 8.93886C9.55057 9.09672 9.23485 9.5703 9.07699 9.72816C8.99806 9.88602 8.8402 9.88602 8.68234 9.80709C8.12982 9.5703 7.57731 9.25458 7.10373 8.85993C6.70908 8.46528 6.31443 7.99169 5.9987 7.51811C5.91977 7.36025 5.9987 7.20239 6.07763 7.12346C6.15657 7.04453 6.2355 6.88667 6.39336 6.80774C6.47229 6.72881 6.55122 6.57095 6.55122 6.49202C6.63015 6.41309 6.63015 6.25523 6.55122 6.1763C6.47229 6.09737 6.07763 5.1502 5.91977 4.75555C5.84084 4.20304 5.68298 4.20304 5.52512 4.20304C5.44619 4.20304 5.28833 4.20304 5.13047 4.20304C4.97261 4.20304 4.73582 4.3609 4.65689 4.43983C4.18331 4.91341 3.94652 5.46592 3.94652 6.09737C4.02545 6.80774 4.26224 7.51811 4.73582 8.14956C5.60405 9.41244 6.70908 10.4385 8.05089 11.07C8.44554 11.2278 8.76127 11.3857 9.15592 11.4646C9.55057 11.6225 9.94522 11.6225 10.4188 11.5436C10.9713 11.4646 11.4449 11.07 11.7606 10.5964C11.9185 10.2807 11.9185 9.96495 11.8395 9.64923C11.8395 9.64923 11.6817 9.5703 11.5238 9.49137ZM13.4971 2.30871C10.4188 -0.769571 5.44619 -0.769571 2.36791 2.30871C-0.157861 4.83448 -0.631443 8.70207 1.10502 11.7804L0 15.8058L4.18331 14.7008C5.36726 15.3322 6.63015 15.6479 7.89303 15.6479C12.2342 15.6479 15.7071 12.175 15.7071 7.83383C15.7861 5.78165 14.9178 3.80839 13.4971 2.30871ZM11.366 13.359C10.3399 13.9904 9.15592 14.3851 7.89303 14.3851C6.70908 14.3851 5.60405 14.0693 4.57796 13.5168L4.34117 13.359L1.89433 13.9904L2.52577 11.6225L2.36791 11.3857C0.473582 8.22849 1.42075 4.28197 4.49903 2.30871C7.57731 0.335454 11.5238 1.36155 13.4182 4.3609C15.3125 7.43918 14.4442 11.4646 11.366 13.359Z" fill="#E6E6E6"/>
-                </svg>
-                
-            ),
-        },
-        {
-            label: "E-mail",
-            icon: (
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M7.89303 0C3.53608 0 0 3.53608 0 7.89303C0 12.25 3.53608 15.7861 7.89303 15.7861H11.8395V14.2075H7.89303C4.46746 14.2075 1.57861 11.3186 1.57861 7.89303C1.57861 4.46746 4.46746 1.57861 7.89303 1.57861C11.3186 1.57861 14.2075 4.46746 14.2075 7.89303V9.02174C14.2075 9.64529 13.6471 10.2609 13.0235 10.2609C12.4 10.2609 11.8395 9.64529 11.8395 9.02174V7.89303C11.8395 5.71456 10.0715 3.94652 7.89303 3.94652C5.71456 3.94652 3.94652 5.71456 3.94652 7.89303C3.94652 10.0715 5.71456 11.8395 7.89303 11.8395C8.98227 11.8395 9.97679 11.3975 10.6872 10.6793C11.2002 11.3818 12.0842 11.8395 13.0235 11.8395C14.5784 11.8395 15.7861 10.5767 15.7861 9.02174V7.89303C15.7861 3.53608 12.25 0 7.89303 0ZM7.89303 10.2609C6.58279 10.2609 5.52512 9.20328 5.52512 7.89303C5.52512 6.58279 6.58279 5.52512 7.89303 5.52512C9.20328 5.52512 10.2609 6.58279 10.2609 7.89303C10.2609 9.20328 9.20328 10.2609 7.89303 10.2609Z" fill="#E6E6E6"/>
-                </svg>        
-            ),
-        },
-        {
-            label: "More",
-            icon: (
-                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g clip-path="url(#clip0_291_805)">
-                <path d="M14.2077 12.6915C13.6078 12.6915 13.0711 12.9283 12.6607 13.2993L7.03295 10.0237C7.07241 9.84213 7.10398 9.66059 7.10398 9.47116C7.10398 9.28172 7.07241 9.10018 7.03295 8.91865L12.5975 5.67461C13.0238 6.06926 13.5842 6.31394 14.2077 6.31394C15.518 6.31394 16.5756 5.25628 16.5756 3.94603C16.5756 2.63579 15.518 1.57812 14.2077 1.57812C12.8975 1.57812 11.8398 2.63579 11.8398 3.94603C11.8398 4.13547 11.8714 4.31701 11.9108 4.49855L6.34625 7.74258C5.92003 7.34793 5.35962 7.10325 4.73607 7.10325C3.42583 7.10325 2.36816 8.16091 2.36816 9.47116C2.36816 10.7814 3.42583 11.8391 4.73607 11.8391C5.35962 11.8391 5.92003 11.5944 6.34625 11.1997L11.9661 14.4832C11.9266 14.649 11.9029 14.8226 11.9029 14.9963C11.9029 16.2671 12.9369 17.301 14.2077 17.301C15.4785 17.301 16.5125 16.2671 16.5125 14.9963C16.5125 13.7255 15.4785 12.6915 14.2077 12.6915Z" fill="#E6E6E6"/>
-                </g>
-                <defs>
-                <clipPath id="clip0_291_805">
-                <rect width="18.9433" height="18.9433" fill="white"/>
-                </clipPath>
-                </defs>
-                </svg>                
-            ),
-        },
-    ];
 
     const handleClose = useCallback(() => {
         if (isClosing) return;
@@ -96,6 +32,10 @@ export default function ShareStreakCard({
         }, EXIT_ANIMATION_MS);
     }, [isClosing, onClose]);
 
+    const handleShare = useCallback(() => {
+        onShare?.();
+    }, [onShare]);
+
     useEffect(() => {
         const previousOverflow = document.body.style.overflow;
         document.body.style.overflow = "hidden";
@@ -153,7 +93,7 @@ export default function ShareStreakCard({
 
     return (
         <div
-            className={`fixed inset-0 z-50 transition-all backdrop-blur-sm duration-200 ${
+            className={`fixed inset-0 z-50 transition-all backdrop-blur-sm duration-200 cursor-pointer ${
                 isClosing || isEntering ? "bg-black/0" : "bg-black/60"
             }`}
             onClick={handleClose}
@@ -163,9 +103,20 @@ export default function ShareStreakCard({
             aria-describedby={descriptionId}
         >
             <div ref={modalRef} className="relative h-full w-full" onKeyDown={handleTabKey}>
-                <div className="absolute inset-0 flex items-center justify-center px-4 pb-[220px] md:pb-[240px]">
+                {/* Close Button Top Right */}
+                <button
+                    ref={closeButtonRef}
+                    onClick={handleClose}
+                    className="absolute right-6 top-6 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 cursor-pointer"
+                    type="button"
+                    aria-label="Close share modal"
+                >
+                    ✕
+                </button>
+
+                <div className="absolute inset-0 flex items-center justify-center px-4">
                     <div
-                        className={`relative w-full max-w-[360px] rounded-3xl bg-white px-6 py-7 shadow-[0_20px_45px_rgba(0,0,0,0.22)] transition-all duration-200 md:px-7 md:py-8 ${
+                        className={`relative w-full max-w-[360px] rounded-[32px] bg-white px-6 py-8 shadow-[0_20px_45px_rgba(0,0,0,0.22)] transition-all duration-200 md:px-8 md:py-10 ${
                             isClosing || isEntering
                                 ? "translate-y-2 scale-95 opacity-0"
                                 : "translate-y-0 scale-100 opacity-100"
@@ -177,65 +128,41 @@ export default function ShareStreakCard({
                                 <div className="flex-1">
                                     <h2
                                         id={titleId}
-                                        className="font-nunito text-[24px] font-extrabold leading-tight text-[#050C16] md:text-[28px]"
+                                        className="font-nunito text-[28px] font-extrabold leading-[1.1] text-[#050C16] md:text-[32px]"
                                     >
                                         <span>I'm on a </span>
-                                        <span className="my-1 inline-flex w-fit items-center rounded-[10px] bg-[#FACC15] px-4 py-1.5 align-middle text-[#050C16]">
+                                        <div className="my-2 inline-flex w-fit items-center rounded-[12px] bg-[#FACC15] px-5 py-2 align-middle text-[#050C16]">
                                             {streakCount}
-                                        </span>
+                                        </div>
                                         <span> day streak!</span>
                                     </h2>
                                     <p id={descriptionId} className="sr-only">
                                         {shareText}
                                     </p>
                                 </div>
-                                <Image
-                                    src="/flame.png"
-                                    alt="Streak flame"
-                                    width={90}
-                                    height={108}
-                                    className="h-[96px] w-auto object-contain md:h-[108px]"
-                                    priority
-                                />
+                                <div className="relative h-[110px] w-[90px] shrink-0 md:h-[130px] md:w-[110px]">
+                                    <Image
+                                        src="/flame.png"
+                                        alt="Streak flame"
+                                        fill
+                                        className="object-contain"
+                                        priority
+                                    />
+                                </div>
                             </div>
-                            <p className="mt-5 text-base font-bold text-[#3B82F6]">mind block</p>
-                        </div>
-                    </div>
-                </div>
+                            
+                            <p className="mt-8 text-lg font-bold text-[#3B82F6]">mind block</p>
 
-                <div
-                    className={`absolute inset-x-0 bottom-0 rounded-t-3xl bg-[#0D1D38] px-6 pb-10 pt-6 transition-transform duration-200 ${
-                        isClosing || isEntering ? "translate-y-full" : "translate-y-0"
-                    }`}
-                    onClick={(event) => event.stopPropagation()}
-                >
-                    <div className="mx-auto w-full max-w-[620px]">
-                        <div className="mb-6 flex items-center justify-between">
+                            {/* Share Button */}
                             <button
-                                ref={closeButtonRef}
-                                onClick={handleClose}
-                                className="flex h-8 w-8 items-center justify-center text-white/60 transition-colors hover:text-white"
-                                type="button"
-                                aria-label="Close share modal"
+                                onClick={handleShare}
+                                className="mt-8 flex w-full items-center justify-center gap-2 rounded-2xl bg-[#050C16] py-4 font-nunito text-lg font-bold text-white transition-all hover:bg-[#050C16]/90 active:scale-[0.98] cursor-pointer"
                             >
-                                ✕
+                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                    <path d="M15 6L11 2M11 2L7 6M11 2V13M19 13V17C19 17.5304 18.7893 18.0391 18.4142 18.4142C18.0391 18.7893 17.5304 19 17 19H5C4.46957 19 3.96086 18.7893 3.58579 18.4142C3.21071 18.0391 3 17.5304 3 17V13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                                </svg>
+                                Share
                             </button>
-                            <h3 className="font-nunito text-lg font-bold text-white">Share Your Streak</h3>
-                            <div className="h-8 w-8" />
-                        </div>
-                        <div className="grid grid-cols-6 gap-3">
-                            {shareOptions.map((option) => (
-                                <button key={option.label} type="button" className="group flex flex-col items-center gap-2">
-                                    <span 
-                                        className="flex h-12 w-12 items-center justify-center rounded-full bg-[#050C16] text-white/80 transition-colors group-hover:bg-[#EF4444]/20 group-hover:text-[#EF4444] group-active:bg-[#EF4444]/20 group-active:text-[#EF4444]"
-                                    >
-                                        {option.icon}
-                                    </span>
-                                    <span className="text-xs font-nunito text-white/60 transition-colors group-hover:text-[#EF4444] group-active:text-[#EF4444]">
-                                        {option.label}
-                                    </span>
-                                </button>
-                            ))}
                         </div>
                     </div>
                 </div>