Skip to content

Commit ff1533d

Browse files
sean-brydoncubic-dev-ai[bot]
sean-brydon
and
cubic-dev-ai[bot]
authored
chore: UI Nits onboarding v3 (calcom#25409)
* Fix UI nits * fix bio + team name on invite orgs * use bg-cal-muted * Fix error from mass edit * Update apps/web/public/static/locales/en/common.json Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * fix org labels * Fix i18n --------- Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
1 parent d9cddd8 commit ff1533d

19 files changed

Lines changed: 50 additions & 42 deletions

‎apps/web/modules/onboarding/components/EmailInviteForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ export function EmailInviteForm({
6464

6565
<div
6666
className={
67-
showTeamSelect ? "flex flex-col gap-2" : "scroll-bar flex max-h-72 flex-col gap-1 overflow-y-auto"
67+
showTeamSelect ? "flex flex-col gap-2" : "scroll-bar flex max-h-72 flex-col gap-2 overflow-y-auto"
6868
}>
6969
{fields.map((field, index) => (
70-
<div key={field.id} className="flex items-start gap-0.5 p-0.5">
70+
<div key={field.id} className="flex items-start gap-2">
7171
<div className={showTeamSelect ? "grid flex-1 items-start gap-2 md:grid-cols-2" : "flex-1"}>
7272
<TextField
7373
labelSrOnly

‎apps/web/modules/onboarding/components/OnboardingLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const OnboardingLayout = ({ userEmail, currentStep, totalSteps, children
2828
const column2 = childrenArray[1];
2929

3030
return (
31-
<div className="bg-muted flex min-h-screen w-full flex-col items-center justify-between overflow-clip rounded-[12px] px-4 py-2 md:px-6">
31+
<div className="bg-cal-muted flex min-h-screen w-full flex-col items-center justify-between overflow-clip rounded-[12px] px-4 py-2 md:px-6">
3232
{/* Logo and container - centered */}
3333
<div className="flex w-full flex-1 flex-col items-center justify-center gap-6">
3434
<Logo className="mt-4 h-5 w-auto shrink-0" />

‎apps/web/modules/onboarding/components/onboarding-browser-view.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,14 @@ export const OnboardingBrowserView = ({
9494
<Icon name="arrow-right" className="text-subtle h-4 w-4" />
9595
<Icon name="rotate-cw" className="text-subtle h-4 w-4" />
9696
</div>
97-
<div className="bg-muted flex w-full min-w-0 items-center gap-2 rounded-[32px] px-3 py-2">
97+
<div className="bg-cal-muted flex w-full min-w-0 items-center gap-2 rounded-[32px] px-3 py-2">
9898
<Icon name="lock" className="text-subtle h-4 w-4" />
9999
<p className="text-default truncate text-sm font-medium leading-tight">{displayUrl}</p>
100100
</div>
101101
<Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
102102
</div>
103103
{/* Content */}
104-
<div className="bg-muted h-full pl-11 pt-11">
104+
<div className="bg-cal-muted h-full pl-11 pt-11">
105105
<AnimatePresence mode="wait">
106106
<motion.div
107107
key={pathname}

‎apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const OnboardingInviteBrowserView = ({
6363
const displayName = useOrganizationInvites
6464
? organizationDetails.name || teamName || "Deel"
6565
: teamName || teamDetails.name || "Deel";
66+
const displayBio = useOrganizationInvites ? organizationDetails.bio || "" : teamDetails.bio || "";
6667
const avatar = useOrganizationInvites ? organizationBrand.logo || null : teamBrand.logo || null;
6768

6869
// Get invites based on context - use watched invites if provided, otherwise fall back to store
@@ -117,7 +118,7 @@ export const OnboardingInviteBrowserView = ({
117118
}
118119

119120
return (
120-
<div className="border-subtle bg-muted hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border xl:flex">
121+
<div className="border-subtle bg-cal-muted hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border xl:flex">
121122
{/* Content */}
122123
<div className="h-full px-6 pt-6">
123124
<AnimatePresence mode="wait">
@@ -142,21 +143,23 @@ export const OnboardingInviteBrowserView = ({
142143
/>
143144
<div className="flex w-full flex-col items-start gap-1">
144145
<h2 className="text-emphasis font-cal w-full text-left text-xl font-semibold leading-tight">
145-
{displayInviterName} invited you to join {displayName}
146+
{displayName}
146147
</h2>
147148
<p className="text-subtle text-left text-sm font-normal leading-tight">
148-
We&apos;re emailing you all the details
149+
{displayBio || "We're emailing you all the details"}
149150
</p>
150151
</div>
151152
</div>
152153
</div>
153154

154155
{/* Email Body */}
155-
<div className="bg-default border-subtle mt-3 grid grid-cols-3 gap-4 rounded-t-2xl border p-6 opacity-60">
156+
<div className="bg-default border-subtle mt-3 grid grid-cols-3 gap-4 rounded-t-2xl border p-6">
156157
{displayItems.map((item, index) => (
157158
<div
158159
key={`${item.email}-${index}`}
159-
className="bg-default border-subtle flex aspect-square w-full min-w-0 flex-col items-center justify-center gap-2 overflow-hidden rounded-lg border p-4">
160+
className={`bg-default border-subtle flex aspect-square w-full min-w-0 flex-col items-center justify-center gap-2 overflow-hidden rounded-lg border p-4 ${
161+
!item.isReal ? "opacity-60" : ""
162+
}`}>
160163
<Avatar size="mdLg" imageSrc={undefined} alt={item.name} className="mt-4" />
161164
<div className="flex w-full min-w-0 flex-col items-center gap-4">
162165
<div className="flex w-full min-w-0 flex-col items-center">

‎apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,14 +88,14 @@ export const OnboardingOrganizationBrowserView = ({
8888
<Icon name="arrow-right" className="text-subtle h-4 w-4" />
8989
<Icon name="rotate-cw" className="text-subtle h-4 w-4" />
9090
</div>
91-
<div className="bg-muted flex w-full min-w-0 items-center gap-2 rounded-[32px] px-3 py-2">
91+
<div className="bg-cal-muted flex w-full min-w-0 items-center gap-2 rounded-[32px] px-3 py-2">
9292
<Icon name="lock" className="text-subtle h-4 w-4" />
9393
<p className="text-default truncate text-sm font-medium leading-tight">{displayUrl}</p>
9494
</div>
9595
<Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
9696
</div>
9797
{/* Content */}
98-
<div className="bg-muted h-full pl-11 pt-11">
98+
<div className="bg-cal-muted h-full pl-11 pt-11">
9999
<AnimatePresence mode="wait">
100100
<motion.div
101101
key={pathname}

‎apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,15 @@ export const OnboardingTeamsBrowserView = ({
5454
<Icon name="arrow-right" className="text-subtle h-4 w-4" />
5555
<Icon name="rotate-cw" className="text-subtle h-4 w-4" />
5656
</div>
57-
<div className="bg-muted flex w-full items-center gap-2 rounded-[32px] px-3 py-2">
57+
<div className="bg-cal-muted flex w-full items-center gap-2 rounded-[32px] px-3 py-2">
5858
<Icon name="lock" className="text-subtle h-4 w-4" />
5959
<p className="text-default text-sm font-medium leading-tight">{webappUrl}/teams</p>
6060
</div>
6161
<Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
6262
</div>
6363

6464
{/* Content */}
65-
<div className="bg-muted h-full pl-11 pt-11">
65+
<div className="bg-cal-muted h-full pl-11 pt-11">
6666
<AnimatePresence mode="wait">
6767
<motion.div
6868
key={pathname}
@@ -149,7 +149,7 @@ export const OnboardingTeamsBrowserView = ({
149149
))
150150
) : (
151151
<div className="flex flex-col items-center justify-center gap-3 px-5 py-12">
152-
<div className="bg-muted flex h-16 w-16 items-center justify-center rounded-full">
152+
<div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-full">
153153
<Icon name="users" className="text-subtle h-8 w-8" />
154154
</div>
155155
<div className="flex flex-col gap-1 text-center">

‎apps/web/modules/onboarding/getting-started/onboarding-view.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const OnboardingView = ({ userEmail }: OnboardingViewProps) => {
126126
</div>
127127
}>
128128
{/* Card */}
129-
<div className="bg-muted border-muted relative flex min-h-0 w-full flex-col overflow-hidden rounded-xl border p-1">
129+
<div className="bg-cal-muted border-muted relative flex min-h-0 w-full flex-col overflow-hidden rounded-xl border p-1">
130130
<div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
131131
{/* Plan options */}
132132
<RadioAreaGroup.Group
@@ -174,7 +174,7 @@ export const OnboardingView = ({ userEmail }: OnboardingViewProps) => {
174174
</OnboardingCard>
175175

176176
{/* Right column - Icon display */}
177-
<div className="bg-muted border-subtle hidden h-full w-full rounded-l-2xl border-b border-l border-t xl:flex xl:items-center xl:justify-center">
177+
<div className="bg-cal-muted border-subtle hidden h-full w-full rounded-l-2xl border-b border-l border-t xl:flex xl:items-center xl:justify-center">
178178
<AnimatePresence mode="wait">
179179
{selectedPlanData && (
180180
<PlanIcon

‎apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
109109
<div className="flex w-full flex-col gap-2">
110110
<p className="text-emphasis text-sm font-medium leading-4">{t("onboarding_banner_label")}</p>
111111
<div className="flex w-full flex-col gap-2">
112-
<div className="bg-muted border-muted relative h-[92px] w-full overflow-hidden rounded-md border">
112+
<div className="bg-cal-muted border-muted relative h-[92px] w-full overflow-hidden rounded-md border">
113113
{bannerPreview && (
114114
<img
115115
src={bannerPreview}
@@ -143,7 +143,7 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
143143
<div className="flex w-full flex-col gap-2">
144144
<p className="text-emphasis text-sm font-medium leading-4">{t("logo")}</p>
145145
<div className="flex items-center gap-2">
146-
<div className="bg-muted border-muted relative h-16 w-16 shrink-0 overflow-hidden rounded-md border">
146+
<div className="bg-cal-muted border-muted relative h-16 w-16 shrink-0 overflow-hidden rounded-md border">
147147
{logoPreview && (
148148
<img
149149
src={logoPreview}

‎apps/web/modules/onboarding/organization/details/organization-details-view.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewPr
105105
<div className="flex w-full flex-col gap-4 rounded-xl">
106106
{/* Organization Name */}
107107
<div className="flex w-full flex-col gap-1.5">
108-
<Label className="text-emphasis text-sm font-medium leading-4">
108+
<Label className="text-emphasis mb-0 text-sm font-medium leading-4">
109109
{t("organization_name")}
110110
</Label>
111111
<TextField
@@ -124,7 +124,7 @@ export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewPr
124124

125125
{/* Organization Bio */}
126126
<div className="flex w-full flex-col gap-1.5">
127-
<Label className="text-emphasis text-sm font-medium leading-4">
127+
<Label className="text-emphasis mb-0 text-sm font-medium leading-4">
128128
{t("onboarding_org_bio_label")}
129129
</Label>
130130
<TextArea

‎apps/web/modules/onboarding/organization/details/validated-organization-slug.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export function ValidatedOrganizationSlug({
7676

7777
return (
7878
<div className="flex w-full flex-col gap-1.5">
79-
<Label className="text-emphasis text-sm font-medium leading-4">Organization link</Label>
79+
<Label className="text-emphasis mb-0 text-sm font-medium leading-4">Organization link</Label>
8080
<TextField
8181
value={value}
8282
onChange={(e) => onChange(e.target.value)}

0 commit comments

Comments
 (0)