Skip to content

Commit

Permalink
[FIX] Modals is cutting pixels of the content (#23243)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dougfabris
dougfabris authored Sep 23, 2021
1 parent 5c1a762 commit 1efdd25
Showing 1 changed file with 88 additions and 85 deletions.
173 changes: 88 additions & 85 deletions client/views/teams/CreateTeamModal/CreateTeamModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
TextInput,
Field,
ToggleSwitch,
FieldGroup,
} from '@rocket.chat/fuselage';
import {
useMutableCallback,
Expand Down Expand Up @@ -251,95 +252,97 @@ const CreateTeamModal: FC<CreateTeamModalProps> = ({ onClose }) => {
<Modal.Close onClick={onClose} />
</Modal.Header>
<Modal.Content>
<Field mbe='x24'>
<Field.Label>{t('Teams_New_Name_Label')}</Field.Label>
<Field.Row>
<TeamNameInput
ref={focusRef}
private={type}
error={hasUnsavedChanges ? nameError : undefined}
value={name}
onChange={onChangeName}
/>
</Field.Row>
{hasUnsavedChanges && nameError && <Field.Error>{nameError}</Field.Error>}
</Field>
<Field mbe='x24'>
<Field.Label>
{t('Teams_New_Description_Label')}{' '}
<Box is='span' color='neutral-600'>
({t('optional')})
<FieldGroup>
<Field>
<Field.Label>{t('Teams_New_Name_Label')}</Field.Label>
<Field.Row>
<TeamNameInput
ref={focusRef}
private={type}
error={hasUnsavedChanges ? nameError : undefined}
value={name}
onChange={onChangeName}
/>
</Field.Row>
{hasUnsavedChanges && nameError && <Field.Error>{nameError}</Field.Error>}
</Field>
<Field>
<Field.Label>
{t('Teams_New_Description_Label')}{' '}
<Box is='span' color='neutral-600'>
({t('optional')})
</Box>
</Field.Label>
<Field.Row>
<TextInput
placeholder={t('Teams_New_Description_Placeholder')}
value={description}
onChange={onChangeDescription}
/>
</Field.Row>
</Field>
<Field>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Private_Label')}</Field.Label>
<Field.Description>
{type
? t('Teams_New_Private_Description_Enabled')
: t('Teams_New_Private_Description_Disabled')}
</Field.Description>
</Box>
<ToggleSwitch checked={type} onChange={onChangeType} />
</Box>
</Field.Label>
<Field.Row>
<TextInput
placeholder={t('Teams_New_Description_Placeholder')}
value={description}
onChange={onChangeDescription}
/>
</Field.Row>
</Field>
<Field mbe='x24'>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Private_Label')}</Field.Label>
<Field.Description>
{type
? t('Teams_New_Private_Description_Enabled')
: t('Teams_New_Private_Description_Disabled')}
</Field.Description>
</Field>
<Field disabled={!canChangeReadOnly}>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Read_only_Label')}</Field.Label>
<Field.Description>{t('Teams_New_Read_only_Description')}</Field.Description>
</Box>
<ToggleSwitch
checked={readOnly}
disabled={!canChangeReadOnly}
onChange={onChangeReadOnly}
/>
</Box>
<ToggleSwitch checked={type} onChange={onChangeType} />
</Box>
</Field>
<Field mbe='x24' disabled={!canChangeReadOnly}>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Read_only_Label')}</Field.Label>
<Field.Description>{t('Teams_New_Read_only_Description')}</Field.Description>
</Field>
<Field disabled={!canChangeEncrypted}>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Encrypted_Label')}</Field.Label>
<Field.Description>
{type
? t('Teams_New_Encrypted_Description_Enabled')
: t('Teams_New_Encrypted_Description_Disabled')}
</Field.Description>
</Box>
<ToggleSwitch
checked={encrypted}
disabled={!canChangeEncrypted}
onChange={onChangeEncrypted}
/>
</Box>
<ToggleSwitch
checked={readOnly}
disabled={!canChangeReadOnly}
onChange={onChangeReadOnly}
/>
</Box>
</Field>
<Field disabled={!canChangeEncrypted} mbe='x24'>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Encrypted_Label')}</Field.Label>
<Field.Description>
{type
? t('Teams_New_Encrypted_Description_Enabled')
: t('Teams_New_Encrypted_Description_Disabled')}
</Field.Description>
</Field>
<Field>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Broadcast_Label')}</Field.Label>
<Field.Description>{t('Teams_New_Broadcast_Description')}</Field.Description>
</Box>
<ToggleSwitch checked={broadcast} onChange={onChangeBroadcast} />
</Box>
<ToggleSwitch
checked={encrypted}
disabled={!canChangeEncrypted}
onChange={onChangeEncrypted}
/>
</Box>
</Field>
<Field mbe='x24'>
<Box display='flex' justifyContent='space-between' alignItems='start'>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Teams_New_Broadcast_Label')}</Field.Label>
<Field.Description>{t('Teams_New_Broadcast_Description')}</Field.Description>
</Box>
<ToggleSwitch checked={broadcast} onChange={onChangeBroadcast} />
</Box>
</Field>
<Field mbe='x24'>
<Field.Label>
{t('Teams_New_Add_members_Label')}{' '}
<Box is='span' color='neutral-600'>
({t('optional')})
</Box>
</Field.Label>
<UsersInput value={members} onChange={onChangeMembers} />
</Field>
</Field>
<Field>
<Field.Label>
{t('Teams_New_Add_members_Label')}{' '}
<Box is='span' color='neutral-600'>
({t('optional')})
</Box>
</Field.Label>
<UsersInput value={members} onChange={onChangeMembers} />
</Field>
</FieldGroup>
</Modal.Content>
<Modal.Footer>
<ButtonGroup align='end'>
Expand Down

0 comments on commit 1efdd25

Please sign in to comment.