Improvement: Invite team members dialog and more

apps/web/app/dashboard/_components/DashboardInner.tsx

@@ -72,7 +72,7 @@ export default function DashboardInner({
       {/* Content Area */}
       <div
         className={clsx(
-          "flex overflow-auto flex-col flex-1 p-5 pb-5 border bg-gray-1 border-gray-3 lg:rounded-tl-2xl lg:p-8"
+          "flex overflow-auto flex-col flex-1 p-5 pb-5 border border-b-0 bg-gray-1 border-gray-3 lg:rounded-tl-2xl lg:p-8"
         )}
       >
         <div className="flex flex-col flex-1 gap-4 h-full">{children}</div>

apps/web/app/dashboard/settings/organization/Organization.tsx

@@ -14,7 +14,6 @@ import {
   CardTitle,
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -25,7 +24,7 @@ import {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow,
+  TableRow
 } from "@cap/ui";
 import { faChair, faUserGroup } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -45,7 +44,6 @@ export const Organization = () => {
   const [inviteEmails, setInviteEmails] = useState<string[]>([]);
   const [emailInput, setEmailInput] = useState("");
   const ownerToastShown = useRef(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const showOwnerToast = () => {
     if (!ownerToastShown.current) {
@@ -419,19 +417,19 @@ export const Organization = () => {
       </Card>
 
       <Dialog open={isInviteDialogOpen} onOpenChange={setIsInviteDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Invite Teammates</DialogTitle>
-            <DialogDescription>
-              Invite your teammates to join{" "}
-              {activeOrganization?.organization.name} organization.
-            </DialogDescription>
+        <DialogContent className="p-0 w-full max-w-md rounded-xl border bg-gray-2 border-gray-4">
+          <DialogHeader
+            icon={<FontAwesomeIcon icon={faUserGroup} className="size-3.5" />}
+            description="Invite your teammates to join the organization"
+          >
+            <DialogTitle>
+              Invite to{" "}
+              <span className="font-bold text-gray-12">
+                {activeOrganization?.organization.name}
+              </span>
+            </DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <Label htmlFor="emails" className="mb-1">
-                Email
-              </Label>
+          <div className="p-5">
               <Input
                 id="emails"
                 value={emailInput}
@@ -445,18 +443,20 @@ export const Organization = () => {
                   }
                 }}
               />
-            </div>
-            <div className="space-y-2">
+            <div className="flex overflow-y-auto flex-col gap-2.5 mt-4 max-h-60">
               {inviteEmails.map((email) => (
                 <div
                   key={email}
-                  className="flex justify-between items-center p-2 rounded bg-gray-1"
+                  className="flex justify-between items-center p-3 rounded-xl border transition-colors duration-200 cursor-pointer border-gray-3"
                 >
-                  <span>{email}</span>
+                  <span className="text-sm text-gray-12">{email}</span>
                   <Button
+                    style={{
+                      "--gradient-border-radius": "8px",
+                    } as React.CSSProperties}
                     type="button"
                     variant="destructive"
-                    size="sm"
+                    size="xs"
                     onClick={() => handleRemoveEmail(email)}
                     disabled={!isOwner}
                   >
@@ -466,23 +466,24 @@ export const Organization = () => {
               ))}
             </div>
           </div>
-          <DialogFooter className="flex justify-between items-center">
+          <DialogFooter className="p-5 border-t border-gray-4">
             <Button
               type="button"
-              variant="white"
+              size="sm"
+              variant="gray"
               onClick={() => setIsInviteDialogOpen(false)}
             >
               Cancel
             </Button>
-            <div className="flex space-x-2">
-              <Button
-                type="button"
-                onClick={handleSendInvites}
-                disabled={inviteEmails.length === 0}
-              >
-                Send Invites
-              </Button>
-            </div>
+            <Button
+              type="button"
+              size="sm"
+              variant="dark"
+              onClick={handleSendInvites}
+              disabled={inviteEmails.length === 0}
+            >
+              Send Invites
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

apps/web/app/globals.css

@@ -30,6 +30,7 @@
   --foreground-rgb: #000000;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+  --gradient-border-radius: 12px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -233,7 +234,7 @@ a.bg-primary:hover {
   position: absolute;
   inset: 0;
   padding: 1px;
-  border-radius: 12px;
+  border-radius: var(--gradient-border-radius);
   background: linear-gradient(to bottom, #ffffff40 70%, #ffffff00 100%);
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,

apps/web/components/UpgradeModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Dialog, DialogContent, Switch } from "@cap/ui";
+import { Button, Dialog, DialogContent, DialogTitle, Switch } from "@cap/ui";
 import { getProPlanId } from "@cap/utils";
 import NumberFlow from '@number-flow/react';
 import { Fit, Layout, useRive } from "@rive-app/react-canvas";
@@ -167,6 +167,7 @@ export const UpgradeModal = ({ open, onOpenChange }: UpgradeModalProps) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[1100px] w-[calc(100%-20px)] custom-scroll bg-gray-2 border 
       border-gray-4 overflow-y-auto md:overflow-hidden max-h-[90vh] p-0">
+        <DialogTitle className="sr-only">Upgrade to Cap Pro</DialogTitle>
         <AnimatePresence mode="wait">
           {open && (
             <motion.div

apps/web/components/pages/PricingPage.tsx

@@ -287,14 +287,15 @@ export const PricingPage = () => {
                           {isCommercialAnnual
                             ? licenseQuantity === 1
                               ? "billed annually"
-                              : `for ${licenseQuantity} licenses, billed annually`
+                              : <>for <NumberFlow value={licenseQuantity} className="text-sm font-medium tabular-nums" /> licenses, billed annually</>
                             : licenseQuantity === 1
                             ? "one-time payment"
-                            : `for ${licenseQuantity} licenses, one-time payment`}
+                            : <>for <NumberFlow value={licenseQuantity} className="text-sm font-medium tabular-nums" /> licenses, one-time payment</>
+                          }
                         </p>
                         {isCommercialAnnual && (
                           <p className="text-sm">
-                            or, ${58 * licenseQuantity} one-time payment
+                            or, <NumberFlow value={58 * licenseQuantity} className="text-sm tabular-nums" format={{ notation: "compact", style: "currency", currency: "USD" }} /> one-time payment
                           </p>
                         )}
                       </div>

packages/ui/src/components/Button.tsx

@@ -22,14 +22,14 @@ const buttonVariants = cva(
         white:
           "bg-gray-2 text-gray-12 hover:border-gray-4 hover:bg-gray-3 border disabled:bg-gray-1 border-gray-3",
         gray: "bg-gray-4 text-gray-12 hover:bg-gray-6 hover:border-gray-7 disabled:bg-gray-1 border-gray-5 border",
-        dark: "bg-gray-12 text-gray-1 hover:bg-gray-11 border disabled:bg-gray-1 border-gray-12",
+        dark: "bg-gray-12 text-gray-1 disabled:cursor-not-allowed hover:bg-gray-11 disabled:text-gray-10 border disabled:bg-gray-7 disabled:border-gray-8 border-gray-12",
         darkgradient:
           "bg-gradient-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
         radialblue:
           "text-gray-50 border button-gradient-border shadow-[0_0_0_1px] shadow-blue-400 disabled:bg-gray-1 border-0 [background:radial-gradient(90%_100%_at_15%_12%,#9BC4FF_0%,#3588FF_100%)] border-transparent hover:opacity-80",
       },
       size: {
-        xs: "text-sm h-[32px] px-[0.5rem] ",
+        xs: "text-xs [var(--gradient-border-radius: 20px)] rounded-lg h-[32px] px-[0.5rem] ",
         sm: "text-sm h-[40px] px-[0.75rem]",
         md: "text-sm px-[1rem] h-[48px]",
         lg: "text-md h-[48px] px-[1.25em]",