From 20d0fc80a922f3cd9d416f0a01f71813dd11572d Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 12 Sep 2024 12:52:56 -0700
Subject: [PATCH] restructure decorative border for share courses dropdown

---
 src/components/elements/shareCourses.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/elements/shareCourses.tsx b/src/components/elements/shareCourses.tsx
index 49e62501..1aa1b7f7 100644
--- a/src/components/elements/shareCourses.tsx
+++ b/src/components/elements/shareCourses.tsx
@@ -60,28 +60,32 @@ const ShareCourses = ({courseName, courseUrl, courseNum}: Props) => {
       >
         <div className="absolute -top-3 left-3/4 z-0 h-10 w-10 rotate-45 bg-white" />
         <ul className="list-unstyled bg-white">
-          <li className="relative m-0 text-nowrap border-b border-spirited-light py-0 hocus:border-transparent">
+          <li className="relative m-0 text-nowrap py-0">
             <a
               href={emailCopy}
-              className="block border-b-[4px] border-transparent px-6 py-5 font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
+              className="group block border-b-4 border-transparent font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
               data-course-shared={courseNum}
             >
-              Share via email
+              <span className="block border-b border-spirited-light px-6 py-5 group-hocus:border-transparent">
+                Share via email
+              </span>
             </a>
           </li>
-          <li className="relative m-0 text-nowrap border-b border-spirited-light py-0 hocus:border-transparent">
+          <li className="relative m-0 text-nowrap py-0">
             <a
               href={smsCopy}
-              className="block border-b-[4px] border-transparent px-6 py-5 font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
+              className="group block border-b-4 border-transparent font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
               data-course-shared={courseNum}
             >
-              Share via text
+              <span className="block border-b border-spirited-light px-6 py-5 group-hocus:border-transparent">
+                Share via text
+              </span>
             </a>
           </li>
           <li className="relative m-0 text-nowrap py-0">
             <button
               onClick={() => copy(copyUrl)}
-              className="block border-b-0 border-b-[4px] border-transparent px-6 py-5 font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
+              className="block border-b-0 border-b-4 border-transparent px-6 py-5 font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
               data-course-shared={courseNum}
             >
               Copy share link