improvement: settings layout

apps/web/app/(org)/dashboard/settings/organization/Organization.tsx

@@ -13,7 +13,6 @@ import { manageBilling } from "@/actions/organization/manage-billing";
 import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
 
 import { BillingCard } from "./components/BillingCard";
-import CapSettingsCard from "./components/CapSettingsCard";
 import { InviteDialog } from "./components/InviteDialog";
 import { MembersCard } from "./components/MembersCard";
 import { OrganizationDetailsCard } from "./components/OrganizationDetailsCard";
@@ -63,7 +62,6 @@ export const Organization = () => {
 
 			<div className="flex flex-col gap-6 justify-center items-stretch xl:flex-row">
 				<OrganizationDetailsCard />
-				<CapSettingsCard />
 			</div>
 
 			<MembersCard

apps/web/app/(org)/dashboard/settings/organization/components/AccessEmailDomain.tsx

@@ -31,7 +31,7 @@ export const AccessEmailDomain = () => {
 	};
 
 	return (
-		<div className="space-y-4">
+		<div className="flex-1 space-y-4">
 			<div className="space-y-1">
 				<Label htmlFor="allowedEmailDomain">Access email domain</Label>
 				<p className="text-sm text-gray-10">
@@ -41,9 +41,10 @@ export const AccessEmailDomain = () => {
 					</span>
 				</p>
 			</div>
-			<div className="flex gap-3 items-center w-full h-fit">
+			<div className="flex flex-col gap-3 w-full md:items-center md:flex-row h-fit">
 				<Input
 					type="text"
+					className="bg-gray-2"
 					placeholder="e.g. company.com"
 					value={emailDomain || ""}
 					id="allowedEmailDomain"

apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx

@@ -1,12 +1,13 @@
 import { Button } from "@cap/ui";
 import {
+	faCheckCircle,
 	faExclamationCircle,
 	faGlobe,
+	faX,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
-import { CheckCircle, XCircle } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -77,88 +78,90 @@ export function CustomDomain() {
 				loading={removeDomainMutation.isPending}
 				onCancel={() => setConfirmOpen(false)}
 			/>
-			<div className="flex gap-3 justify-between items-center w-full h-fit">
-				<div className="space-y-1">
+			<div className="flex flex-col flex-1 gap-3 justify-between w-full md:flex-row md:items-center h-fit">
+				<div className="space-y-4 w-full">
 					<div
 						className={clsx(
-							"flex gap-3 items-center",
+							"flex flex-col md:flex-row gap-3 md:items-center",
 							(isVerified && orgCustomDomain) ||
 								(!isVerified && orgCustomDomain)
 								? "mb-3"
 								: "mb-0",
 						)}
 					>
-						<h1 className="text-sm font-medium text-gray-12">Custom Domain</h1>
-						{process.env.NODE_ENV === "development" && (
-							<div className="flex gap-2 items-center p-2 text-xs bg-red-900 rounded-full w-fit text-gray-10">
-								<FontAwesomeIcon
-									className="text-red-200 size-3"
-									icon={faExclamationCircle}
-								/>
-								<p className="text-xs text-white">
-									Custom domains are not available in development mode
-								</p>
+						<div className="flex flex-col gap-1">
+							<h1 className="text-sm font-medium text-gray-12">
+								Custom Domain
+							</h1>
+							<p className="w-full text-sm text-gray-10">
+								Set up a custom domain for your organization's shared caps.
+							</p>
+						</div>
+					</div>
+					<div className="flex flex-1 gap-2 justify-between items-center w-full">
+						<div className="flex gap-2 justify-between items-center px-3 flex-1 h-[44px] rounded-xl border bg-gray-2 border-gray-3">
+							<p className="text-[13px] text-gray-10">
+								{orgCustomDomain || "No custom domain"}
+							</p>
+							<div className="flex items-center">
+								{orgCustomDomain && isVerified ? (
+									<Tooltip content="Verified">
+										<div className="flex gap-2 items-center p-2 h-full text-xs rounded-full w-fit text-gray-10">
+											<FontAwesomeIcon
+												className="text-green-500 size-5"
+												icon={faCheckCircle}
+											/>
+										</div>
+									</Tooltip>
+								) : (
+									orgCustomDomain &&
+									!isVerified && (
+										<Tooltip content="Setup not complete">
+											<div className="flex gap-2 items-center p-2 h-full text-xs rounded-full w-fit text-gray-10">
+												<FontAwesomeIcon
+													className="text-red-500 size-5"
+													icon={faExclamationCircle}
+												/>
+											</div>
+										</Tooltip>
+									)
+								)}
+
+								{orgCustomDomain && (
+									<Tooltip content="Remove custom domain">
+										<div
+											onClick={(e) => {
+												e.preventDefault();
+												setConfirmOpen(true);
+											}}
+											className="flex justify-center items-center text-xs rounded-full border transition-colors duration-200 cursor-pointer hover:bg-gray-8 hover:border-gray-9 size-5 bg-gray-6 border-gray-7"
+										>
+											<FontAwesomeIcon
+												icon={faX}
+												className="text-gray-12 size-[10px]"
+											/>
+										</div>
+									</Tooltip>
+								)}
 							</div>
+						</div>
+
+						{!isVerified && (
+							<Button
+								type="submit"
+								size="sm"
+								className="min-w-fit"
+								variant="dark"
+								onClick={(e) => {
+									e.preventDefault();
+									setShowCustomDomainDialog(true);
+								}}
+							>
+								Setup
+							</Button>
 						)}
-						{isVerified && orgCustomDomain ? (
-							<>
-								<Tooltip content="Remove custom domain">
-									<div
-										onClick={() => setConfirmOpen(true)}
-										className="flex gap-2 items-center hover:bg-green-800 transition-colors cursor-pointer px-3 py-0.5 bg-green-900 rounded-full w-fit"
-									>
-										<CheckCircle className="text-green-200 size-2.5" />
-										<p className="text-[11px] italic font-medium text-white">
-											{orgCustomDomain}
-											<span className="ml-1 not-italic text-white/60">
-												verified
-											</span>
-										</p>
-									</div>
-								</Tooltip>
-							</>
-						) : orgCustomDomain ? (
-							<>
-								<Tooltip content="Remove custom domain">
-									<div
-										onClick={() => setConfirmOpen(true)}
-										className="flex gap-2 items-center px-3 py-0.5 cursor-pointer hover:bg-red-800 transition-colors bg-red-900 rounded-full w-fit"
-									>
-										<XCircle className="text-red-200 size-2.5" />
-										<p className="text-[11px] italic font-medium text-white">
-											{orgCustomDomain}
-											<span className="ml-1 not-italic text-white/60">
-												not verified
-											</span>
-										</p>
-									</div>
-								</Tooltip>
-							</>
-						) : null}
 					</div>
-					<p className="text-sm w-full max-w-[375px] text-gray-10">
-						Set up a custom domain for your organization's shared caps and make
-						it unique.
-					</p>
 				</div>
-				<Button
-					type="submit"
-					size="sm"
-					className="min-w-fit"
-					spinner={isVerified ? removeDomainMutation.isPending : undefined}
-					disabled={isVerified ? removeDomainMutation.isPending : undefined}
-					variant="dark"
-					onClick={async (e) => {
-						e.preventDefault();
-						if (isVerified) {
-							setConfirmOpen(true);
-						} else {
-							setShowCustomDomainDialog(true);
-						}
-					}}
-				>
-					{isVerified ? "Remove" : "Setup"}
-				</Button>
 			</div>
 
 			{showUpgradeModal && (

apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/VerifyStep.tsx

@@ -17,6 +17,16 @@ interface VerifyStepProps {
 
 const POLL_INTERVAL = 5000;
 
+const TXTDomainValueHandler = (record: DomainVerification, domain: string) => {
+	if (!record.domain) return "@";
+	if (record.domain === domain) return "@";
+	const suffix = `.${domain}`;
+	if (record.domain.endsWith(suffix)) {
+		return record.domain.replace(suffix, "") || "@";
+	}
+	return record.domain;
+};
+
 const VerifyStep = ({
 	domain,
 	domainConfig,
@@ -114,16 +124,6 @@ const VerifyStep = ({
 		};
 	}, [activeOrganization?.organization.customDomain, isVerified]);
 
-	const TXTDomainValueHandler = (record: DomainVerification) => {
-		if (!record.domain) return "@";
-		if (record.domain === domain) return "@";
-		const suffix = `.${domain}`;
-		if (record.domain.endsWith(suffix)) {
-			return record.domain.replace(suffix, "") || "@";
-		}
-		return record.domain;
-	};
-
 	return (
 		<div className="space-y-6">
 			<div className="text-center">
@@ -174,7 +174,7 @@ const VerifyStep = ({
 													</dt>
 													<dd className="text-sm text-gray-10">
 														<code className="px-2 py-1 text-xs rounded bg-gray-4">
-															{TXTDomainValueHandler(record)}
+															{TXTDomainValueHandler(record, domain)}
 														</code>
 													</dd>
 												</div>

apps/web/app/(org)/dashboard/settings/organization/components/OrgName.tsx

@@ -32,17 +32,18 @@ const OrgName = () => {
 	};
 
 	return (
-		<div className="space-y-4">
+		<div className="flex-1 space-y-4">
 			<div className="space-y-1">
 				<Label htmlFor="organizationName">Name</Label>
 				<p className="text-sm text-gray-10">
 					Changing the name will update how your organization appears to others
 					members.
 				</p>
 			</div>
-			<div className="flex gap-3 items-center">
+			<div className="flex flex-col gap-3 w-full md:items-center md:flex-row">
 				<Input
 					type="text"
+					className="bg-gray-2"
 					value={orgName}
 					id="organizationName"
 					name="organizationName"

apps/web/app/(org)/dashboard/settings/organization/components/OrganizationDetailsCard.tsx

@@ -16,12 +16,12 @@ export const OrganizationDetailsCard = () => {
 					organization icon.
 				</CardDescription>
 			</CardHeader>
-			<OrgName />
-			<AccessEmailDomain />
-			<div className="mt-2 w-full h-px border-t border-dashed border-gray-3" />
-			<CustomDomain />
-			<div className="w-full h-px border-t border-dashed border-gray-3" />
-			<OrganizationIcon />
+			<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+				<OrgName />
+				<CustomDomain />
+				<AccessEmailDomain />
+				<OrganizationIcon />
+			</div>
 		</Card>
 	);
 };

apps/web/app/(org)/dashboard/settings/organization/components/OrganizationIcon.tsx

@@ -58,16 +58,16 @@ export const OrganizationIcon = () => {
 	};
 
 	return (
-		<div className="space-y-4">
+		<div className="flex-1 space-y-4">
 			<div className="space-y-1">
 				<Label htmlFor="icon">Organization Icon</Label>
 				<CardDescription className="w-full">
-					Upload a custom logo or icon for your organization and make it unique.
+					Upload a custom logo or icon for your organization.
 				</CardDescription>
 			</div>
 			<FileInput
-				height={62}
-				previewIconSize={32}
+				height={44}
+				previewIconSize={20}
 				id="icon"
 				name="icon"
 				onChange={handleFileChange}

apps/web/app/(org)/dashboard/settings/organization/components/SeatsInfoCards.tsx

@@ -16,17 +16,24 @@ export const SeatsInfoCards = () => {
 	return (
 		<div className="flex flex-col flex-1 gap-6 justify-center lg:flex-row">
 			<Card className="flex flex-col flex-1 gap-3 justify-center items-center">
-				<FontAwesomeIcon className="text-gray-10 size-5" icon={faChair} />
-				<p className="text-gray-12">
+				<div className="flex justify-center items-center p-3 rounded-full border bg-gray-4 border-gray-5">
+					<FontAwesomeIcon className="text-gray-12 size-3.5" icon={faChair} />
+				</div>
+				<p className="text-gray-11">
 					Seats Remaining
 					<span className="ml-2 font-medium text-gray-12">
 						{remainingSeats}
 					</span>
 				</p>
 			</Card>
 			<Card className="flex flex-col flex-1 gap-3 justify-center items-center">
-				<FontAwesomeIcon className="text-gray-10 size-5" icon={faUserGroup} />
-				<p className="text-gray-12">
+				<div className="flex justify-center items-center p-3 rounded-full border bg-gray-4 border-gray-5">
+					<FontAwesomeIcon
+						className="text-gray-12 size-3.5"
+						icon={faUserGroup}
+					/>
+				</div>
+				<p className="text-gray-11">
 					Seats Capacity
 					<span className="ml-2 font-medium text-gray-12">{inviteQuota}</span>
 				</p>

apps/web/components/FileInput.tsx

@@ -216,13 +216,13 @@ export const FileInput: React.FC<FileInputProps> = ({
 												width: previewIconSize,
 												height: previewIconSize,
 											}}
-											className="overflow-hidden relative flex-shrink-0 rounded-md"
+											className="flex overflow-hidden relative flex-shrink-0 justify-center items-center rounded-md"
 										>
 											{previewUrl && (
 												<Image
 													src={previewUrl}
-													width={36}
-													height={36}
+													width={32}
+													height={32}
 													alt="File preview"
 													className="object-cover rounded-full"
 												/>
@@ -236,7 +236,7 @@ export const FileInput: React.FC<FileInputProps> = ({
 							<Button
 								variant="outline"
 								size="xs"
-								className="!p-0 size-8 group mr-2"
+								className="!p-0 size-7 group mr-2"
 								disabled={isLoading || disabled}
 								onClick={handleRemove}
 							>