Skip to content

Commit 50c34f7

Browse files
emir-karabegemir-karabeg
committed
improvement(team): ui/ux
1 parent b5ad77d commit 50c34f7

File tree

8 files changed

+147
-146
lines changed

8 files changed

+147
-146
lines changed

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -131,18 +131,18 @@ export function MemberInvitationCard({
131131
}
132132

133133
return (
134-
<div className='rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)] p-4'>
135-
<div className='space-y-3'>
136-
{/* Header */}
137-
<div>
138-
<h4 className='font-medium text-[13px]'>Invite Team Members</h4>
139-
<p className='text-[var(--text-muted)] text-xs'>
140-
Add new members to your team and optionally give them access to specific workspaces
141-
</p>
142-
</div>
134+
<div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
135+
{/* Header */}
136+
<div className='px-[14px] py-[10px]'>
137+
<h4 className='font-medium text-[14px] text-[var(--text-primary)]'>Invite Team Members</h4>
138+
<p className='text-[12px] text-[var(--text-muted)]'>
139+
Add new members to your team and optionally give them access to specific workspaces
140+
</p>
141+
</div>
143142

143+
<div className='flex flex-col gap-[12px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
144144
{/* Main invitation input */}
145-
<div className='flex items-start gap-2'>
145+
<div className='flex items-start gap-[8px]'>
146146
<div className='flex-1'>
147147
{/* Hidden decoy fields to prevent browser autofill */}
148148
<input
@@ -177,7 +177,7 @@ export function MemberInvitationCard({
177177
aria-autocomplete='none'
178178
/>
179179
{emailError && (
180-
<p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
180+
<p className='mt-1 text-[11px] text-[var(--text-error)] leading-tight'>
181181
{emailError}
182182
</p>
183183
)}
@@ -193,7 +193,7 @@ export function MemberInvitationCard({
193193
>
194194
<PopoverTrigger asChild>
195195
<Button
196-
variant='ghost'
196+
variant='active'
197197
disabled={isInviting || !hasAvailableSeats}
198198
className='min-w-[110px]'
199199
>
@@ -279,7 +279,7 @@ export function MemberInvitationCard({
279279
</PopoverContent>
280280
</Popover>
281281
<Button
282-
variant='secondary'
282+
variant='tertiary'
283283
onClick={handleInviteClick}
284284
disabled={!inviteEmail || isInviting || !hasAvailableSeats}
285285
>
@@ -289,7 +289,7 @@ export function MemberInvitationCard({
289289

290290
{/* Invitation error - inline */}
291291
{invitationError && (
292-
<p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
292+
<p className='text-[11px] text-[var(--text-error)] leading-tight'>
293293
{invitationError instanceof Error && invitationError.message
294294
? invitationError.message
295295
: String(invitationError)}
@@ -298,9 +298,9 @@ export function MemberInvitationCard({
298298

299299
{/* Success message */}
300300
{inviteSuccess && (
301-
<div className='flex items-start gap-2 rounded-md bg-green-500/10 p-2.5 text-green-600 dark:text-green-400'>
301+
<div className='flex items-start gap-[8px] rounded-[6px] bg-green-500/10 px-[10px] py-[8px] text-green-600 dark:text-green-400'>
302302
<CheckCircle className='h-4 w-4 flex-shrink-0' />
303-
<p className='text-xs'>
303+
<p className='text-[12px]'>
304304
Invitation sent successfully
305305
{selectedCount > 0 &&
306306
` with access to ${selectedCount} workspace${selectedCount !== 1 ? 's' : ''}`}

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,20 @@ export function NoOrganizationView({
4242
if (hasTeamPlan || hasEnterprisePlan) {
4343
return (
4444
<div>
45-
<div className='flex flex-col gap-6'>
45+
<div className='flex flex-col gap-[20px]'>
4646
{/* Header - matching settings page style */}
4747
<div>
48-
<h4 className='font-medium text-[13px]'>Create Your Team Workspace</h4>
49-
<p className='mt-1 text-[var(--text-muted)] text-xs'>
48+
<h4 className='font-medium text-[14px] text-[var(--text-primary)]'>
49+
Create Your Team Workspace
50+
</h4>
51+
<p className='mt-[4px] text-[12px] text-[var(--text-muted)]'>
5052
You're subscribed to a {hasEnterprisePlan ? 'enterprise' : 'team'} plan. Create your
5153
workspace to start collaborating with your team.
5254
</p>
5355
</div>
5456

5557
{/* Form fields - clean layout without card */}
56-
<div className='space-y-4'>
58+
<div className='flex flex-col gap-[16px]'>
5759
{/* Hidden decoy field to prevent browser autofill */}
5860
<input
5961
type='text'
@@ -64,15 +66,15 @@ export function NoOrganizationView({
6466
readOnly
6567
/>
6668
<div>
67-
<Label htmlFor='team-name-field' className='font-medium text-[13px]'>
69+
<Label htmlFor='team-name-field' className='font-medium text-[12px]'>
6870
Team Name
6971
</Label>
7072
<Input
7173
id='team-name-field'
7274
value={orgName}
7375
onChange={onOrgNameChange}
7476
placeholder='My Team'
75-
className='mt-1'
77+
className='mt-[4px]'
7678
name='team_name_field'
7779
autoComplete='off'
7880
autoCorrect='off'
@@ -83,11 +85,11 @@ export function NoOrganizationView({
8385
</div>
8486

8587
<div>
86-
<Label htmlFor='orgSlug' className='font-medium text-[13px]'>
88+
<Label htmlFor='orgSlug' className='font-medium text-[12px]'>
8789
Team URL
8890
</Label>
89-
<div className='mt-1 flex items-center'>
90-
<div className='rounded-l-[8px] border border-r-0 bg-[var(--surface-3)] px-3 py-2 text-[var(--text-muted)] text-sm'>
91+
<div className='mt-[4px] flex items-center'>
92+
<div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
9193
sim.ai/team/
9294
</div>
9395
<Input
@@ -100,17 +102,15 @@ export function NoOrganizationView({
100102
</div>
101103
</div>
102104

103-
<div className='flex flex-col gap-2'>
105+
<div className='flex flex-col gap-[8px]'>
104106
{error && (
105-
<p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
106-
{error}
107-
</p>
107+
<p className='text-[11px] text-[var(--text-error)] leading-tight'>{error}</p>
108108
)}
109109
<div className='flex justify-end'>
110110
<Button
111+
variant='tertiary'
111112
onClick={onCreateOrganization}
112113
disabled={!orgName || !orgSlug || isCreatingOrg}
113-
className='h-[32px] px-[12px]'
114114
>
115115
{isCreatingOrg ? 'Creating...' : 'Create Team Workspace'}
116116
</Button>
@@ -128,7 +128,7 @@ export function NoOrganizationView({
128128
</ModalDescription>
129129
</ModalHeader>
130130

131-
<div className='space-y-4'>
131+
<div className='flex flex-col gap-[16px]'>
132132
{/* Hidden decoy field to prevent browser autofill */}
133133
<input
134134
type='text'
@@ -139,7 +139,7 @@ export function NoOrganizationView({
139139
readOnly
140140
/>
141141
<div>
142-
<Label htmlFor='org-name-field' className='font-medium text-[13px]'>
142+
<Label htmlFor='org-name-field' className='font-medium text-[12px]'>
143143
Organization Name
144144
</Label>
145145
<Input
@@ -148,7 +148,7 @@ export function NoOrganizationView({
148148
value={orgName}
149149
onChange={onOrgNameChange}
150150
disabled={isCreatingOrg}
151-
className='mt-1'
151+
className='mt-[4px]'
152152
name='org_name_field'
153153
autoComplete='off'
154154
autoCorrect='off'
@@ -159,7 +159,7 @@ export function NoOrganizationView({
159159
</div>
160160

161161
<div>
162-
<Label htmlFor='org-slug-field' className='font-medium text-[13px]'>
162+
<Label htmlFor='org-slug-field' className='font-medium text-[12px]'>
163163
Organization Slug
164164
</Label>
165165
<Input
@@ -168,7 +168,7 @@ export function NoOrganizationView({
168168
value={orgSlug}
169169
onChange={(e) => setOrgSlug(e.target.value)}
170170
disabled={isCreatingOrg}
171-
className='mt-1'
171+
className='mt-[4px]'
172172
name='org_slug_field'
173173
autoComplete='off'
174174
autoCorrect='off'
@@ -179,25 +179,20 @@ export function NoOrganizationView({
179179
</div>
180180
</div>
181181

182-
{error && (
183-
<p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
184-
{error}
185-
</p>
186-
)}
182+
{error && <p className='text-[11px] text-[var(--text-error)] leading-tight'>{error}</p>}
187183

188184
<ModalFooter>
189185
<Button
190-
variant='outline'
186+
variant='active'
191187
onClick={() => setCreateOrgDialogOpen(false)}
192188
disabled={isCreatingOrg}
193-
className='h-[32px] px-[12px]'
194189
>
195190
Cancel
196191
</Button>
197192
<Button
193+
variant='tertiary'
198194
onClick={onCreateOrganization}
199195
disabled={isCreatingOrg || !orgName.trim()}
200-
className='h-[32px] px-[12px]'
201196
>
202197
{isCreatingOrg ? 'Creating...' : 'Create Organization'}
203198
</Button>
@@ -209,22 +204,24 @@ export function NoOrganizationView({
209204
}
210205

211206
return (
212-
<div className='space-y-4 p-6'>
213-
<div className='space-y-6'>
214-
<h3 className='font-medium text-[13px]'>No Team Workspace</h3>
215-
<p className='text-[var(--text-muted)] text-sm'>
207+
<div className='flex flex-col gap-[20px]'>
208+
<div className='flex flex-col gap-[8px]'>
209+
<h3 className='font-medium text-[14px] text-[var(--text-primary)]'>No Team Workspace</h3>
210+
<p className='text-[12px] text-[var(--text-secondary)]'>
216211
You don't have a team workspace yet. To collaborate with others, first upgrade to a team
217212
or enterprise plan.
218213
</p>
214+
</div>
219215

216+
<div>
220217
<Button
218+
variant='tertiary'
221219
onClick={() => {
222220
const event = new CustomEvent('open-settings', {
223221
detail: { tab: 'subscription' },
224222
})
225223
window.dispatchEvent(event)
226224
}}
227-
className='h-[32px] px-[12px]'
228225
>
229226
Upgrade to Team Plan
230227
</Button>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
2+
import { Checkbox } from '@/components/ui/checkbox'
23

34
interface RemoveMemberDialogProps {
45
open: boolean
@@ -28,37 +29,35 @@ export function RemoveMemberDialog({
2829
<ModalContent className='w-[400px]'>
2930
<ModalHeader>{isSelfRemoval ? 'Leave Organization' : 'Remove Team Member'}</ModalHeader>
3031
<ModalBody>
31-
<p className='text-[12px] text-[var(--text-tertiary)]'>
32+
<p className='text-[12px] text-[var(--text-muted)]'>
3233
{isSelfRemoval
3334
? 'Are you sure you want to leave this organization? You will lose access to all team resources.'
3435
: `Are you sure you want to remove ${memberName} from the team?`}{' '}
3536
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
3637
</p>
3738

3839
{!isSelfRemoval && (
39-
<div className='mt-4'>
40-
<div className='flex items-center space-x-2'>
41-
<input
42-
type='checkbox'
40+
<div className='mt-[16px]'>
41+
<div className='flex items-center gap-[8px]'>
42+
<Checkbox
4343
id='reduce-seats'
44-
className='rounded-[4px]'
4544
checked={shouldReduceSeats}
46-
onChange={(e) => onShouldReduceSeatsChange(e.target.checked)}
45+
onCheckedChange={(checked) => onShouldReduceSeatsChange(checked === true)}
4746
/>
48-
<label htmlFor='reduce-seats' className='text-xs'>
47+
<label htmlFor='reduce-seats' className='text-[12px] text-[var(--text-primary)]'>
4948
Also reduce seat count in my subscription
5049
</label>
5150
</div>
52-
<p className='mt-1 text-[var(--text-muted)] text-xs'>
51+
<p className='mt-[4px] text-[12px] text-[var(--text-muted)]'>
5352
If selected, your team seat count will be reduced by 1, lowering your monthly
5453
billing.
5554
</p>
5655
</div>
5756
)}
5857

5958
{error && (
60-
<div className='mt-2'>
61-
<p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
59+
<div className='mt-[8px]'>
60+
<p className='text-[11px] text-[var(--text-error)] leading-tight'>
6261
{error instanceof Error && error.message ? error.message : String(error)}
6362
</p>
6463
</div>

0 commit comments

Comments
 (0)