Fix formatting in re-share invite modal (#14120)

[Linear
ticket](https://linear.app/lightsparkdev/issue/LIG-7080/fix-formatting-in-re-share-invite-modal)

Also adds the ability to add an icon to the submit button on a modal as
well as determine button order.

<img width="533" alt="Screenshot 2024-12-09 at 12 40 10 PM"
src="https://github.com/user-attachments/assets/e3f9f61f-5ee2-4f88-802b-0252852bb8d8">
<img width="449" alt="Screenshot 2024-12-09 at 12 40 16 PM"
src="https://github.com/user-attachments/assets/f72925d4-5619-4d50-87d6-d9bc178c24d0">
GitOrigin-RevId: d23398a1e830ee041f78502766c52b9b9024e5fc

packages/ui/src/components/Modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 import styled from "@emotion/styled";
 
+import { type PartialBy } from "@lightsparkdev/core";
 import type { ComponentProps, MutableRefObject, ReactNode } from "react";
 import React, {
   Fragment,
@@ -37,6 +38,8 @@ import { type LoadingKind } from "./Loading.js";
 import { ProgressBar, type ProgressBarProps } from "./ProgressBar.js";
 import { UnstyledButton } from "./UnstyledButton.js";
 
+type IconProps = ComponentProps<typeof Icon>;
+
 type ExtraAction = ComponentProps<typeof Button> & {
   /** Determines the placement relative to the submission/cancel buttons. */
   placement: "above" | "below";
@@ -79,6 +82,11 @@ type ModalProps = {
   submitDisabled?: boolean;
   submitLoading?: boolean;
   submitLoadingKind?: LoadingKind | undefined;
+  submitIcon?:
+    | (Pick<IconProps, "name" | "color" | "iconProps"> &
+        /* We'll set a default width if not provided, leave unrequired: */
+        PartialBy<IconProps, "width">)
+    | undefined;
   submitText?: string;
   submitLink?:
     | {
@@ -97,6 +105,8 @@ type ModalProps = {
   nonDismissable?: boolean;
   width?: number;
   progressBar?: ProgressBarProps;
+  /** Determines which order we display the buttons */
+  buttonOrder?: "submit-first" | "cancel-first";
   /** Determines if buttons are laid out horizontally or vertically */
   buttonLayout?: "horizontal" | "vertical";
   /** Allows placing extra buttons in the same button layout */
@@ -125,6 +135,7 @@ export function Modal({
   submitLoading,
   submitLoadingKind,
   submitText,
+  submitIcon,
   submitLink,
   cancelText = "Cancel",
   firstFocusRef,
@@ -134,6 +145,7 @@ export function Modal({
   autoFocus = true,
   width = 460,
   progressBar,
+  buttonOrder = "cancel-first",
   buttonLayout = "horizontal",
   extraActions,
   handleBack,
@@ -271,7 +283,7 @@ export function Modal({
         .map(({ placement, text, ...rest }, i) => (
           <Button key={text || `no-text-${i}`} text={text} {...rest} />
         ))}
-      {!isSm && !cancelHidden && (
+      {!isSm && !cancelHidden && buttonOrder === "cancel-first" && (
         <Button
           disabled={cancelDisabled}
           onClick={onClickCancel}
@@ -282,6 +294,7 @@ export function Modal({
         <Button
           kind="primary"
           disabled={submitDisabled}
+          icon={submitIcon}
           text={submitText ?? "Continue"}
           loading={submitLoading}
           loadingKind={submitLoadingKind}
@@ -295,7 +308,13 @@ export function Modal({
           onClick={submitLink ? onSubmit : undefined}
         />
       )}
-      {isSm && !cancelHidden && <Button onClick={onClose} text={cancelText} />}
+      {(isSm || buttonOrder === "submit-first") && !cancelHidden && (
+        <Button
+          disabled={cancelDisabled}
+          onClick={onClickCancel}
+          text={cancelText}
+        />
+      )}
       {extraActions
         ?.filter((action) => action.placement === "below")
         .map(({ placement, text, ...rest }, i) => (

packages/ui/src/icons/EmailPlus.tsx

@@ -0,0 +1,35 @@
+export function EmailPlus() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M35 16.6667V8.33337H5V31.6667H20"
+        stroke="currentColor"
+        strokeWidth="3.33333"
+        strokeLinecap="square"
+      />
+      <path
+        d="M35 9.39368L20 18.3331L5 9.39368"
+        stroke="currentColor"
+        strokeWidth="3.33333"
+      />
+      <path
+        d="M31.668 23.3334V33.3334"
+        stroke="currentColor"
+        strokeWidth="3.33333"
+        strokeLinecap="square"
+      />
+      <path
+        d="M36.668 28.3334H26.668"
+        stroke="currentColor"
+        strokeWidth="3.33333"
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+}

packages/ui/src/icons/MessageBubble.tsx

@@ -0,0 +1,19 @@
+export function MessageBubble() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.7096 8.125H7.29297M10.2096 11.875H7.29297M2.29297 16.875H13.543C15.8441 16.875 17.7096 15.0095 17.7096 12.7083V7.29167C17.7096 4.99048 15.8441 3.125 13.543 3.125H6.45964C4.15845 3.125 2.29297 4.99048 2.29297 7.29167V16.875Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

packages/ui/src/icons/index.tsx

@@ -49,6 +49,7 @@ export { DollarManrope } from "./DollarManrope.js";
 export { DollarManropeSmall } from "./DollarManropeSmall.js";
 export { DotGrid1x3Horizontal } from "./DotGrid1x3Horizontal.js";
 export { Download } from "./Download.js";
+export { EmailPlus } from "./EmailPlus.js";
 export { Envelope } from "./Envelope.js";
 export { EnvelopePlus } from "./EnvelopePlus.js";
 export { ExclamationPoint } from "./ExclamationPoint.js";
@@ -81,6 +82,7 @@ export { LogoBolt } from "./LogoBolt.js";
 export { LogoOnCircle } from "./LogoOnCircle.js";
 export { Logout } from "./Logout.js";
 export { MagicWand } from "./MagicWand.js";
+export { MessageBubble } from "./MessageBubble.js";
 export { Messages } from "./Messages.js";
 export { Messenger } from "./Messenger.js";
 export { Minus } from "./Minus.js";