Skip to content

Commit abafaaa

Browse files
iagodahlemiagodahlem
committed
refactor: update TaskSelectOrganization spacing
1 parent 604b65f commit abafaaa

File tree

3 files changed

+86
-73
lines changed

3 files changed

+86
-73
lines changed

‎packages/clerk-js/sandbox/template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@
351351
<script
352352
type="text/javascript"
353353
src="/<%= htmlRspackPlugin.files.js[0] %>"
354-
data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
354+
data-clerk-publishable-key="pk_test_aG9wZWZ1bC1sZWVjaC0yMy5jbGVyay5hY2NvdW50c3N0YWdlLmRldiQ"
355355
></script>
356356
<script
357357
type="text/javascript"

‎packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/CreateOrganizationScreen.tsx

Lines changed: 83 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
44

55
import { OrganizationAvatarUploader } from '@/ui/common/organizations/OrganizationAvatarUploader';
66
import { useSessionTasksContext } from '@/ui/contexts/components/SessionTasks';
7-
import { Col, descriptors, Icon, localizationKeys } from '@/ui/customizables';
7+
import { Col, descriptors, Flex, Icon, localizationKeys } from '@/ui/customizables';
88
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
99
import { Form } from '@/ui/elements/Form';
1010
import { FormButtonContainer } from '@/ui/elements/FormButtons';
@@ -91,83 +91,95 @@ export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrga
9191
return (
9292
<FormContainer>
9393
<Form.Root onSubmit={onSubmit}>
94-
<Col>
95-
<OrganizationAvatarUploader
96-
organization={{ name: nameField.value }}
97-
onAvatarChange={async file => setFile(file)}
98-
onAvatarRemove={file ? onAvatarRemove : null}
99-
actionTitle={localizationKeys('taskSelectOrganization.createOrganizationScreen.action__uploadAvatar')}
100-
imageTitle={localizationKeys('taskSelectOrganization.createOrganizationScreen.avatarLabel')}
101-
elementDescriptor={descriptors.organizationAvatarUploaderContainer}
102-
avatarPreviewPlaceholder={
103-
<IconButton
104-
variant='ghost'
105-
aria-label='Upload organization logo'
106-
icon={
107-
<Icon
108-
size='md'
109-
icon={Organization}
94+
<Flex
95+
direction='col'
96+
gap={8}
97+
sx={t => ({ padding: `${t.space.$none} ${t.space.$10} ${t.space.$8}` })}
98+
>
99+
<Flex
100+
direction='col'
101+
gap={6}
102+
>
103+
<Col>
104+
<OrganizationAvatarUploader
105+
organization={{ name: nameField.value }}
106+
onAvatarChange={async file => setFile(file)}
107+
onAvatarRemove={file ? onAvatarRemove : null}
108+
actionTitle={localizationKeys('taskSelectOrganization.createOrganizationScreen.action__uploadAvatar')}
109+
imageTitle={localizationKeys('taskSelectOrganization.createOrganizationScreen.avatarLabel')}
110+
elementDescriptor={descriptors.organizationAvatarUploaderContainer}
111+
avatarPreviewPlaceholder={
112+
<IconButton
113+
variant='ghost'
114+
aria-label='Upload organization logo'
115+
icon={
116+
<Icon
117+
size='md'
118+
icon={Organization}
119+
sx={t => ({
120+
color: t.colors.$colorMutedForeground,
121+
transitionDuration: t.transitionDuration.$controls,
122+
})}
123+
/>
124+
}
110125
sx={t => ({
111-
color: t.colors.$colorMutedForeground,
112-
transitionDuration: t.transitionDuration.$controls,
126+
width: t.sizes.$16,
127+
height: t.sizes.$16,
128+
borderRadius: t.radii.$md,
129+
borderWidth: t.borderWidths.$normal,
130+
borderStyle: t.borderStyles.$dashed,
131+
borderColor: t.colors.$borderAlpha200,
132+
backgroundColor: t.colors.$neutralAlpha50,
133+
':hover': {
134+
backgroundColor: t.colors.$neutralAlpha50,
135+
svg: {
136+
transform: 'scale(1.2)',
137+
},
138+
},
113139
})}
114140
/>
115141
}
116-
sx={t => ({
117-
width: t.sizes.$16,
118-
height: t.sizes.$16,
119-
borderRadius: t.radii.$md,
120-
borderWidth: t.borderWidths.$normal,
121-
borderStyle: t.borderStyles.$dashed,
122-
borderColor: t.colors.$borderAlpha200,
123-
backgroundColor: t.colors.$neutralAlpha50,
124-
':hover': {
125-
backgroundColor: t.colors.$neutralAlpha50,
126-
svg: {
127-
transform: 'scale(1.2)',
128-
},
129-
},
130-
})}
131142
/>
132-
}
133-
/>
134-
</Col>
135-
<Form.ControlRow elementId={nameField.id}>
136-
<Form.PlainInput
137-
{...nameField.props}
138-
onChange={onChangeName}
139-
isRequired
140-
// TODO -> Remove auto focus?
141-
autoFocus
142-
ignorePasswordManager
143-
/>
144-
</Form.ControlRow>
145-
{!props.hideSlug && (
146-
<Form.ControlRow elementId={slugField.id}>
147-
<Form.PlainInput
148-
{...slugField.props}
149-
onChange={event => updateSlugField(event.target.value)}
150-
isRequired
151-
pattern='^(?=.*[a-z0-9])[a-z0-9\-]+$'
152-
ignorePasswordManager
153-
/>
154-
</Form.ControlRow>
155-
)}
156-
<FormButtonContainer sx={t => ({ marginTop: t.space.$none, flexDirection: 'column' })}>
157-
<Form.SubmitButton
158-
block={false}
159-
sx={() => ({ width: '100%' })}
160-
isDisabled={isSubmitButtonDisabled}
161-
localizationKey={localizationKeys('taskSelectOrganization.createOrganizationScreen.formButtonSubmit')}
162-
/>
163-
{props.onCancel && (
164-
<Form.ResetButton
165-
localizationKey={localizationKeys('taskSelectOrganization.createOrganizationScreen.formButtonReset')}
143+
</Col>
144+
<Form.ControlRow elementId={nameField.id}>
145+
<Form.PlainInput
146+
{...nameField.props}
147+
onChange={onChangeName}
148+
isRequired
149+
// TODO -> Remove auto focus?
150+
autoFocus
151+
ignorePasswordManager
152+
/>
153+
</Form.ControlRow>
154+
{!props.hideSlug && (
155+
<Form.ControlRow elementId={slugField.id}>
156+
<Form.PlainInput
157+
{...slugField.props}
158+
onChange={event => updateSlugField(event.target.value)}
159+
isRequired
160+
pattern='^(?=.*[a-z0-9])[a-z0-9\-]+$'
161+
ignorePasswordManager
162+
/>
163+
</Form.ControlRow>
164+
)}
165+
</Flex>
166+
167+
<FormButtonContainer sx={t => ({ marginTop: t.space.$none, flexDirection: 'column' })}>
168+
<Form.SubmitButton
166169
block={false}
167-
onClick={props.onCancel}
170+
sx={() => ({ width: '100%' })}
171+
isDisabled={isSubmitButtonDisabled}
172+
localizationKey={localizationKeys('taskSelectOrganization.createOrganizationScreen.formButtonSubmit')}
168173
/>
169-
)}
170-
</FormButtonContainer>
174+
{props.onCancel && (
175+
<Form.ResetButton
176+
localizationKey={localizationKeys('taskSelectOrganization.createOrganizationScreen.formButtonReset')}
177+
block={false}
178+
onClick={props.onCancel}
179+
/>
180+
)}
181+
</FormButtonContainer>
182+
</Flex>
171183
</Form.Root>
172184
</FormContainer>
173185
);

‎packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@ const TaskSelectOrganizationInternal = () => {
2929
<Card.Root>
3030
{!isLoading && user ? (
3131
<>
32-
<Card.Content>
32+
<Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}` })}>
3333
<Header.Root showLogo>
3434
<Header.Title localizationKey={localizationKeys('taskSelectOrganization.title')} />
3535
<Header.Subtitle localizationKey={localizationKeys('taskSelectOrganization.subtitle')} />
3636
</Header.Root>
3737

3838
<TaskSelectOrganizationFlows initialFlow={hasExistingResources ? 'select' : 'create'} />
3939
</Card.Content>
40+
4041
<Card.Footer>
4142
<Card.Action elementId='signOut'>
4243
<Card.ActionText

0 commit comments

Comments
 (0)