Merge pull request #80 from auth0-lab/share-drawer-fix

Fix share button styles
auth0-lab · Oct 14, 2024 · 0048bc7 · 0048bc7
2 parents 117697a + a9a7b00
commit 0048bc7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/components/chat/navbar.tsx b/components/chat/navbar.tsx
@@ -70,12 +70,7 @@ function MenuMobile({ user, children }: { user: Claims; children?: React.ReactNo
                 <ArrowRightIcon />
               </Link>
             </li>
-            {children && (
-              <li className="flex items-center py-3 px-5 border-t border-[#E2E8F0] justify-between">
-                <DrawerClose asChild>{children}</DrawerClose>
-                <ArrowRightIcon />
-              </li>
-            )}
+            {children && <li className="border-t border-[#E2E8F0]">{children}</li>}
 
             <li className="border-t border-[#E2E8F0]">
               <Link

diff --git a/components/chat/share.tsx b/components/chat/share.tsx
@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
 import { addChatUsers } from "@/sdk/fga/chats";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import { CircleCheckBigIcon, LinkIcon2, ShareIcon, ShareMenuIcon } from "../icons";
+import { ArrowRightIcon, CircleCheckBigIcon, LinkIcon2, ShareIcon, ShareMenuIcon } from "../icons";
 import Loader from "../loader";
 import { Button, ButtonProps } from "../ui/button";
 import {
@@ -38,30 +38,44 @@ const formSchema = z.object({
   role: z.enum(["Viewer", "Editor"]),
 });
 
-const ShareButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const ShareButton = React.forwardRef<HTMLButtonElement & HTMLAnchorElement, ButtonProps>((props, ref) => {
   const { disabled, className, ...rest } = props;
   return (
-    <>
-      <Button
-        ref={ref}
-        className={cn(
-          "sm:bg-gray-100 text-slate-800 sm:gap-2 items-center sm:px-3 sm:py-2 rounded-md shadow-none hover:ring-2 ring-[#CFD1D4] border-gray-100 text-sm hover:bg-gray-100 hover:text-black transition-all duration-300",
-          { "disabled opacity-50 cursor-not-allowed": disabled },
-
-          "flex items-center gap-4 px-0 font-normal bg-transparent shadow-none",
-          className
-        )}
-        {...rest}
-      >
-        <span className="hidden sm:inline-flex">
-          <ShareIcon />
-        </span>
-        <span className="sm:hidden inline-flex">
-          <ShareMenuIcon />
-        </span>{" "}
+    <Button
+      ref={ref}
+      className={cn(
+        // common styles
+        "flex items-center text-slate-800 shadow-none font-normal bg-transparent hover:bg-transparent h-full w-full",
+        // button navbar styles (desktop)
+        "sm:text-sm sm:bg-gray-100 sm:hover:bg-gray-100 sm:border-gray-100 sm:ring-[#CFD1D4] sm:hover:ring-2 sm:rounded-md hover:text-black sm:transition-all sm:duration-300",
+        "sm:justify-center sm:px-3 sm:py-2 ",
+        // collapsible navbar link styles (mobile)
+        "justify-between px-5 py-3",
+        // disabled styles
+        { "disabled opacity-50 cursor-not-allowed": disabled },
+        // additional styles provided by user
+        className
+      )}
+      {...rest}
+    >
+      {/** As button (desktop) */}
+
+      <div className="hidden sm:flex items-center gap-2">
+        <ShareIcon />
         Share chat
-      </Button>
-    </>
+      </div>
+
+      {/** As collapsible navbar link (mobile) */}
+
+      <div className="flex sm:hidden items-center gap-4">
+        <ShareMenuIcon />
+        Share Chat
+      </div>
+
+      <span className="inline-flex sm:hidden">
+        <ArrowRightIcon />
+      </span>
+    </Button>
   );
 });