Join Connect & import and the chevron into one squircle.

apps/desktop/src/imports/screen.test.tsx

@@ -202,9 +202,20 @@ describe("MeetingImportScreen", () => {
     expect(
       screen.getAllByRole("button", { name: "Connect & import" }),
     ).toHaveLength(3);
+    expect(
+      screen.getAllByRole("button", { name: "Connect & import" })[0]?.className,
+    ).toContain("hover:bg-primary-foreground/10");
+    expect(
+      screen
+        .getAllByRole("button", { name: "Connect & import" })[0]
+        ?.closest('[role="group"]')?.parentElement?.className,
+    ).toContain("focus-within:ring-[3px]");
     expect(screen.getAllByRole("button", { name: "Use files" })).toHaveLength(
       3,
     );
+    expect(
+      screen.getAllByRole("button", { name: "Use files" })[0]?.className,
+    ).toContain("hover:bg-primary-foreground/10");
     expect(screen.queryByRole("menuitem", { name: "Use files" })).toBeNull();
     expect(
       screen.getAllByRole("button", { name: "Choose files" }),

apps/desktop/src/imports/screen.tsx

@@ -26,6 +26,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@anlg/ui/components/ui/dropdown-menu";
+import { useSquircleRef } from "@anlg/ui/hooks/use-squircle";
 import { cn } from "@anlg/utils";
 
 import {
@@ -71,6 +72,27 @@ const IMPORT_EXTENSIONS = [
   "vtt",
 ];
 
+function ImportSplitButtonGroup({
+  signedIn,
+  children,
+}: {
+  signedIn: boolean;
+  children: ReactNode;
+}) {
+  const ref = useSquircleRef<HTMLDivElement>();
+  return (
+    <div
+      ref={ref}
+      className={cn([
+        "focus-within:ring-ring/50 w-fit overflow-hidden focus-within:ring-[3px]",
+        signedIn ? "bg-primary" : "border-input border",
+      ])}
+    >
+      <ButtonGroup>{children}</ButtonGroup>
+    </div>
+  );
+}
+
 function ProviderIcon({
   provider,
 }: {
@@ -513,11 +535,12 @@ export function MeetingImportScreen({
                             </Button>
                           </>
                         ) : (
-                          <ButtonGroup>
+                          <ImportSplitButtonGroup signedIn={signedIn}>
                             <Button
                               type="button"
                               size="sm"
                               variant={signedIn ? "default" : "outline"}
+                              smoothCorners={false}
                               aria-label={
                                 signedIn ? undefined : t`Sign in to connect`
                               }
@@ -530,8 +553,11 @@ export function MeetingImportScreen({
                                   : signInMutation.isPending
                               }
                               className={cn([
+                                "rounded-none border-0 shadow-none",
+                                signedIn &&
+                                  "hover:bg-primary-foreground/10 bg-transparent",
                                 !signedIn &&
-                                  "group/sign-in bg-muted hover:border-primary hover:bg-primary hover:text-primary-foreground focus-visible:border-primary focus-visible:bg-primary focus-visible:text-primary-foreground",
+                                  "group/sign-in bg-muted hover:bg-primary hover:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground",
                               ])}
                               onClick={() => {
                                 if (!signedIn) {
@@ -590,13 +616,15 @@ export function MeetingImportScreen({
                                   type="button"
                                   size="sm"
                                   variant={signedIn ? "default" : "outline"}
+                                  smoothCorners={false}
                                   aria-label={t`Use files`}
                                   disabled={fileImportMutation.isPending}
                                   className={cn([
-                                    "relative w-6 px-0 before:absolute before:inset-y-1.5 before:left-0 before:w-px",
+                                    "relative w-6 rounded-none border-0 px-0 shadow-none",
+                                    "before:absolute before:inset-y-1.5 before:left-0 before:w-px",
                                     signedIn
-                                      ? "before:bg-primary-foreground/20"
-                                      : "before:bg-border",
+                                      ? "hover:bg-primary-foreground/10 before:bg-primary-foreground/20 bg-transparent"
+                                      : "bg-muted before:bg-border",
                                   ])}
                                 >
                                   <CaretDown className="size-3.5" />
@@ -621,7 +649,7 @@ export function MeetingImportScreen({
                                 </AppFloatingPanel>
                               </DropdownMenuContent>
                             </DropdownMenu>
-                          </ButtonGroup>
+                          </ImportSplitButtonGroup>
                         )}
                         {connected ? (
                           <Button

packages/ui/src/components/ui/button.tsx

@@ -44,17 +44,28 @@ export interface ButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  smoothCorners?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      smoothCorners = true,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
     const squircleRef = useSquircleRef(ref);
     return (
       <Comp
         className={cn([buttonVariants({ variant, size, className })])}
         {...props}
-        ref={squircleRef}
+        ref={smoothCorners ? squircleRef : ref}
       />
     );
   },