dynamic button text for mobile

closes dubinc#3627

Author: steven-tey

apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/partner-payout-settings-button.tsx

@@ -4,7 +4,7 @@ import { hasPermission } from "@/lib/auth/partner-users/partner-user-permissions
 import usePartnerPayoutSettings from "@/lib/swr/use-partner-payout-settings";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { ConnectPayoutButton } from "@/ui/partners/payouts/connect-payout-button";
-import { Button } from "@dub/ui";
+import { Button, useMediaQuery } from "@dub/ui";
 import { usePartnerPayoutSettingsSheet } from "./partner-payout-settings-sheet";
 
 export function PartnerPayoutSettingsButton() {
@@ -14,6 +14,8 @@ export function PartnerPayoutSettingsButton() {
   const { PartnerPayoutSettingsSheet, openSettings } =
     usePartnerPayoutSettingsSheet();
 
+  const { isMobile } = useMediaQuery();
+
   const hasConnectedPayoutMethod = payoutMethods.some((m) => m.connected);
 
   if (partner && !hasPermission(partner.role, "payout_settings.update")) {
@@ -25,12 +27,15 @@ export function PartnerPayoutSettingsButton() {
       <PartnerPayoutSettingsSheet />
 
       {!partner?.payoutsEnabledAt && !hasConnectedPayoutMethod && (
-        <ConnectPayoutButton className="h-9 px-3" />
+        <ConnectPayoutButton
+          className="h-9 px-3"
+          text={isMobile ? "Connect" : "Connect payout method"}
+        />
       )}
 
       <Button
         type="button"
-        text="Payout settings"
+        text={isMobile ? "Settings" : "Payout settings"}
         variant="secondary"
         className="h-9 px-3"
         onClick={openSettings}

apps/web/ui/partners/payouts/connect-payout-button.tsx

@@ -70,7 +70,7 @@ export function ConnectPayoutButton({
             ? "Manage"
             : payoutMethod
               ? "Connect"
-              : "Connect payout method"
+              : props.text || "Connect payout method"
         }
         loading={isPending}
         disabledTooltip={