From e728d60c8f23a5e842c53fcf7048ad24b8825f73 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Mon, 20 Sep 2021 14:40:03 -0300
Subject: [PATCH] fix: add FieldGroup to CreateTeamModal

---
 .../teams/CreateTeamModal/CreateTeamModal.tsx | 173 +++++++++---------
 1 file changed, 88 insertions(+), 85 deletions(-)

diff --git a/client/views/teams/CreateTeamModal/CreateTeamModal.tsx b/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
index b3b0a85acd12..5c1a64675cc5 100644
--- a/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
+++ b/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
@@ -6,6 +6,7 @@ import {
 	TextInput,
 	Field,
 	ToggleSwitch,
+	FieldGroup,
 } from '@rocket.chat/fuselage';
 import {
 	useMutableCallback,
@@ -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'>