Skip to content

Commit b71ce71

Browse files
ameer2468ameer2468
authored
improvement: settings layout (#956)
* wip * update org settings layout * test showing A record * update custom domain settings ui * Update CustomDomain.tsx * Update CustomDomain.tsx * Update CustomDomain.tsx * Update CustomDomain.tsx * remove un-necessary ui * A record * check A record test * cleanup * Update VerifyStep.tsx
1 parent 417661c commit b71ce71

File tree

9 files changed

+116
-106
lines changed

9 files changed

+116
-106
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { manageBilling } from "@/actions/organization/manage-billing";
1313
import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
1414

1515
import { BillingCard } from "./components/BillingCard";
16-
import CapSettingsCard from "./components/CapSettingsCard";
1716
import { InviteDialog } from "./components/InviteDialog";
1817
import { MembersCard } from "./components/MembersCard";
1918
import { OrganizationDetailsCard } from "./components/OrganizationDetailsCard";
@@ -63,7 +62,6 @@ export const Organization = () => {
6362

6463
<div className="flex flex-col gap-6 justify-center items-stretch xl:flex-row">
6564
<OrganizationDetailsCard />
66-
<CapSettingsCard />
6765
</div>
6866

6967
<MembersCard

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const AccessEmailDomain = () => {
3131
};
3232

3333
return (
34-
<div className="space-y-4">
34+
<div className="flex-1 space-y-4">
3535
<div className="space-y-1">
3636
<Label htmlFor="allowedEmailDomain">Access email domain</Label>
3737
<p className="text-sm text-gray-10">
@@ -41,9 +41,10 @@ export const AccessEmailDomain = () => {
4141
</span>
4242
</p>
4343
</div>
44-
<div className="flex gap-3 items-center w-full h-fit">
44+
<div className="flex flex-col gap-3 w-full md:items-center md:flex-row h-fit">
4545
<Input
4646
type="text"
47+
className="bg-gray-2"
4748
placeholder="e.g. company.com"
4849
value={emailDomain || ""}
4950
id="allowedEmailDomain"

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

Lines changed: 74 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Button } from "@cap/ui";
22
import {
3+
faCheckCircle,
34
faExclamationCircle,
45
faGlobe,
6+
faX,
57
} from "@fortawesome/free-solid-svg-icons";
68
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
79
import { useMutation } from "@tanstack/react-query";
810
import clsx from "clsx";
9-
import { CheckCircle, XCircle } from "lucide-react";
1011
import { useRouter } from "next/navigation";
1112
import { useState } from "react";
1213
import { toast } from "sonner";
@@ -77,88 +78,90 @@ export function CustomDomain() {
7778
loading={removeDomainMutation.isPending}
7879
onCancel={() => setConfirmOpen(false)}
7980
/>
80-
<div className="flex gap-3 justify-between items-center w-full h-fit">
81-
<div className="space-y-1">
81+
<div className="flex flex-col flex-1 gap-3 justify-between w-full md:flex-row md:items-center h-fit">
82+
<div className="space-y-4 w-full">
8283
<div
8384
className={clsx(
84-
"flex gap-3 items-center",
85+
"flex flex-col md:flex-row gap-3 md:items-center",
8586
(isVerified && orgCustomDomain) ||
8687
(!isVerified && orgCustomDomain)
8788
? "mb-3"
8889
: "mb-0",
8990
)}
9091
>
91-
<h1 className="text-sm font-medium text-gray-12">Custom Domain</h1>
92-
{process.env.NODE_ENV === "development" && (
93-
<div className="flex gap-2 items-center p-2 text-xs bg-red-900 rounded-full w-fit text-gray-10">
94-
<FontAwesomeIcon
95-
className="text-red-200 size-3"
96-
icon={faExclamationCircle}
97-
/>
98-
<p className="text-xs text-white">
99-
Custom domains are not available in development mode
100-
</p>
92+
<div className="flex flex-col gap-1">
93+
<h1 className="text-sm font-medium text-gray-12">
94+
Custom Domain
95+
</h1>
96+
<p className="w-full text-sm text-gray-10">
97+
Set up a custom domain for your organization's shared caps.
98+
</p>
99+
</div>
100+
</div>
101+
<div className="flex flex-1 gap-2 justify-between items-center w-full">
102+
<div className="flex gap-2 justify-between items-center px-3 flex-1 h-[44px] rounded-xl border bg-gray-2 border-gray-3">
103+
<p className="text-[13px] text-gray-10">
104+
{orgCustomDomain || "No custom domain"}
105+
</p>
106+
<div className="flex items-center">
107+
{orgCustomDomain && isVerified ? (
108+
<Tooltip content="Verified">
109+
<div className="flex gap-2 items-center p-2 h-full text-xs rounded-full w-fit text-gray-10">
110+
<FontAwesomeIcon
111+
className="text-green-500 size-5"
112+
icon={faCheckCircle}
113+
/>
114+
</div>
115+
</Tooltip>
116+
) : (
117+
orgCustomDomain &&
118+
!isVerified && (
119+
<Tooltip content="Setup not complete">
120+
<div className="flex gap-2 items-center p-2 h-full text-xs rounded-full w-fit text-gray-10">
121+
<FontAwesomeIcon
122+
className="text-red-500 size-5"
123+
icon={faExclamationCircle}
124+
/>
125+
</div>
126+
</Tooltip>
127+
)
128+
)}
129+
130+
{orgCustomDomain && (
131+
<Tooltip content="Remove custom domain">
132+
<div
133+
onClick={(e) => {
134+
e.preventDefault();
135+
setConfirmOpen(true);
136+
}}
137+
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"
138+
>
139+
<FontAwesomeIcon
140+
icon={faX}
141+
className="text-gray-12 size-[10px]"
142+
/>
143+
</div>
144+
</Tooltip>
145+
)}
101146
</div>
147+
</div>
148+
149+
{!isVerified && (
150+
<Button
151+
type="submit"
152+
size="sm"
153+
className="min-w-fit"
154+
variant="dark"
155+
onClick={(e) => {
156+
e.preventDefault();
157+
setShowCustomDomainDialog(true);
158+
}}
159+
>
160+
Setup
161+
</Button>
102162
)}
103-
{isVerified && orgCustomDomain ? (
104-
<>
105-
<Tooltip content="Remove custom domain">
106-
<div
107-
onClick={() => setConfirmOpen(true)}
108-
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"
109-
>
110-
<CheckCircle className="text-green-200 size-2.5" />
111-
<p className="text-[11px] italic font-medium text-white">
112-
{orgCustomDomain}
113-
<span className="ml-1 not-italic text-white/60">
114-
verified
115-
</span>
116-
</p>
117-
</div>
118-
</Tooltip>
119-
</>
120-
) : orgCustomDomain ? (
121-
<>
122-
<Tooltip content="Remove custom domain">
123-
<div
124-
onClick={() => setConfirmOpen(true)}
125-
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"
126-
>
127-
<XCircle className="text-red-200 size-2.5" />
128-
<p className="text-[11px] italic font-medium text-white">
129-
{orgCustomDomain}
130-
<span className="ml-1 not-italic text-white/60">
131-
not verified
132-
</span>
133-
</p>
134-
</div>
135-
</Tooltip>
136-
</>
137-
) : null}
138163
</div>
139-
<p className="text-sm w-full max-w-[375px] text-gray-10">
140-
Set up a custom domain for your organization's shared caps and make
141-
it unique.
142-
</p>
143164
</div>
144-
<Button
145-
type="submit"
146-
size="sm"
147-
className="min-w-fit"
148-
spinner={isVerified ? removeDomainMutation.isPending : undefined}
149-
disabled={isVerified ? removeDomainMutation.isPending : undefined}
150-
variant="dark"
151-
onClick={async (e) => {
152-
e.preventDefault();
153-
if (isVerified) {
154-
setConfirmOpen(true);
155-
} else {
156-
setShowCustomDomainDialog(true);
157-
}
158-
}}
159-
>
160-
{isVerified ? "Remove" : "Setup"}
161-
</Button>
162165
</div>
163166

164167
{showUpgradeModal && (

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ interface VerifyStepProps {
1717

1818
const POLL_INTERVAL = 5000;
1919

20+
const TXTDomainValueHandler = (record: DomainVerification, domain: string) => {
21+
if (!record.domain) return "@";
22+
if (record.domain === domain) return "@";
23+
const suffix = `.${domain}`;
24+
if (record.domain.endsWith(suffix)) {
25+
return record.domain.replace(suffix, "") || "@";
26+
}
27+
return record.domain;
28+
};
29+
2030
const VerifyStep = ({
2131
domain,
2232
domainConfig,
@@ -114,16 +124,6 @@ const VerifyStep = ({
114124
};
115125
}, [activeOrganization?.organization.customDomain, isVerified]);
116126

117-
const TXTDomainValueHandler = (record: DomainVerification) => {
118-
if (!record.domain) return "@";
119-
if (record.domain === domain) return "@";
120-
const suffix = `.${domain}`;
121-
if (record.domain.endsWith(suffix)) {
122-
return record.domain.replace(suffix, "") || "@";
123-
}
124-
return record.domain;
125-
};
126-
127127
return (
128128
<div className="space-y-6">
129129
<div className="text-center">
@@ -174,7 +174,7 @@ const VerifyStep = ({
174174
</dt>
175175
<dd className="text-sm text-gray-10">
176176
<code className="px-2 py-1 text-xs rounded bg-gray-4">
177-
{TXTDomainValueHandler(record)}
177+
{TXTDomainValueHandler(record, domain)}
178178
</code>
179179
</dd>
180180
</div>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,18 @@ const OrgName = () => {
3232
};
3333

3434
return (
35-
<div className="space-y-4">
35+
<div className="flex-1 space-y-4">
3636
<div className="space-y-1">
3737
<Label htmlFor="organizationName">Name</Label>
3838
<p className="text-sm text-gray-10">
3939
Changing the name will update how your organization appears to others
4040
members.
4141
</p>
4242
</div>
43-
<div className="flex gap-3 items-center">
43+
<div className="flex flex-col gap-3 w-full md:items-center md:flex-row">
4444
<Input
4545
type="text"
46+
className="bg-gray-2"
4647
value={orgName}
4748
id="organizationName"
4849
name="organizationName"

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ export const OrganizationDetailsCard = () => {
1616
organization icon.
1717
</CardDescription>
1818
</CardHeader>
19-
<OrgName />
20-
<AccessEmailDomain />
21-
<div className="mt-2 w-full h-px border-t border-dashed border-gray-3" />
22-
<CustomDomain />
23-
<div className="w-full h-px border-t border-dashed border-gray-3" />
24-
<OrganizationIcon />
19+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
20+
<OrgName />
21+
<CustomDomain />
22+
<AccessEmailDomain />
23+
<OrganizationIcon />
24+
</div>
2525
</Card>
2626
);
2727
};

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,16 @@ export const OrganizationIcon = () => {
5858
};
5959

6060
return (
61-
<div className="space-y-4">
61+
<div className="flex-1 space-y-4">
6262
<div className="space-y-1">
6363
<Label htmlFor="icon">Organization Icon</Label>
6464
<CardDescription className="w-full">
65-
Upload a custom logo or icon for your organization and make it unique.
65+
Upload a custom logo or icon for your organization.
6666
</CardDescription>
6767
</div>
6868
<FileInput
69-
height={62}
70-
previewIconSize={32}
69+
height={44}
70+
previewIconSize={20}
7171
id="icon"
7272
name="icon"
7373
onChange={handleFileChange}

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,24 @@ export const SeatsInfoCards = () => {
1616
return (
1717
<div className="flex flex-col flex-1 gap-6 justify-center lg:flex-row">
1818
<Card className="flex flex-col flex-1 gap-3 justify-center items-center">
19-
<FontAwesomeIcon className="text-gray-10 size-5" icon={faChair} />
20-
<p className="text-gray-12">
19+
<div className="flex justify-center items-center p-3 rounded-full border bg-gray-4 border-gray-5">
20+
<FontAwesomeIcon className="text-gray-12 size-3.5" icon={faChair} />
21+
</div>
22+
<p className="text-gray-11">
2123
Seats Remaining
2224
<span className="ml-2 font-medium text-gray-12">
2325
{remainingSeats}
2426
</span>
2527
</p>
2628
</Card>
2729
<Card className="flex flex-col flex-1 gap-3 justify-center items-center">
28-
<FontAwesomeIcon className="text-gray-10 size-5" icon={faUserGroup} />
29-
<p className="text-gray-12">
30+
<div className="flex justify-center items-center p-3 rounded-full border bg-gray-4 border-gray-5">
31+
<FontAwesomeIcon
32+
className="text-gray-12 size-3.5"
33+
icon={faUserGroup}
34+
/>
35+
</div>
36+
<p className="text-gray-11">
3037
Seats Capacity
3138
<span className="ml-2 font-medium text-gray-12">{inviteQuota}</span>
3239
</p>

‎apps/web/components/FileInput.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -216,13 +216,13 @@ export const FileInput: React.FC<FileInputProps> = ({
216216
width: previewIconSize,
217217
height: previewIconSize,
218218
}}
219-
className="overflow-hidden relative flex-shrink-0 rounded-md"
219+
className="flex overflow-hidden relative flex-shrink-0 justify-center items-center rounded-md"
220220
>
221221
{previewUrl && (
222222
<Image
223223
src={previewUrl}
224-
width={36}
225-
height={36}
224+
width={32}
225+
height={32}
226226
alt="File preview"
227227
className="object-cover rounded-full"
228228
/>
@@ -236,7 +236,7 @@ export const FileInput: React.FC<FileInputProps> = ({
236236
<Button
237237
variant="outline"
238238
size="xs"
239-
className="!p-0 size-8 group mr-2"
239+
className="!p-0 size-7 group mr-2"
240240
disabled={isLoading || disabled}
241241
onClick={handleRemove}
242242
>

0 commit comments

Comments
 (0)