From 23391aad022478acb38c56823d3042ac2a271d3d Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 29 Jul 2024 16:14:50 -0300
Subject: [PATCH] add changes to duplicated files

---
 .../CreateChannel/CreateChannelModal.tsx      | 174 ++++++++++--------
 .../header/CreateTeam/CreateTeamModal.tsx     | 128 +++++++------
 2 files changed, 166 insertions(+), 136 deletions(-)

diff --git a/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx b/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
index c45d300dc4c7..02aadb540f31 100644
--- a/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
+++ b/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
@@ -12,6 +12,8 @@ import {
 	FieldError,
 	FieldHint,
 	FieldDescription,
+	Accordion,
+	AccordionItem,
 } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
@@ -210,7 +212,7 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
 				<Modal.Close tabIndex={-1} title={t('Close')} onClick={onClose} />
 			</Modal.Header>
 			<Modal.Content mbe={2}>
-				<FieldGroup>
+				<FieldGroup mbe={24}>
 					<Field>
 						<FieldLabel required htmlFor={nameId}>
 							{t('Name')}
@@ -276,90 +278,100 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
 							{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}
 						</FieldHint>
 					</Field>
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={federatedId}>{t('Federation_Matrix_Federated')}</FieldLabel>
-							<Controller
-								control={control}
-								name='federated'
-								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch
-										aria-describedby={`${federatedId}-hint`}
-										id={federatedId}
-										ref={ref}
-										checked={value}
-										disabled={!canUseFederation}
-										onChange={onChange}
+				</FieldGroup>
+
+				<Accordion>
+					<AccordionItem title={t('Advanced_settings')}>
+						<FieldGroup>
+							<Box is='h5' fontScale='h5' color='titles-labels'>
+								{t('Security_and_permissions')}
+							</Box>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={federatedId}>{t('Federation_Matrix_Federated')}</FieldLabel>
+									<Controller
+										control={control}
+										name='federated'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												aria-describedby={`${federatedId}-hint`}
+												id={federatedId}
+												ref={ref}
+												checked={value}
+												disabled={!canUseFederation}
+												onChange={onChange}
+											/>
+										)}
 									/>
-								)}
-							/>
-						</FieldRow>
-						<FieldHint id={`${federatedId}-hint`}>{t(getFederationHintKey(federatedModule, federationEnabled))}</FieldHint>
-					</Field>
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={encryptedId}>{t('Encrypted')}</FieldLabel>
-							<Controller
-								control={control}
-								name='encrypted'
-								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch
-										id={encryptedId}
-										ref={ref}
-										checked={value}
-										disabled={e2eDisabled || federated}
-										onChange={onChange}
-										aria-describedby={`${encryptedId}-hint`}
-										aria-labelledby='Encrypted_channel_Label'
+								</FieldRow>
+								<FieldHint id={`${federatedId}-hint`}>{t(getFederationHintKey(federatedModule, federationEnabled))}</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={encryptedId}>{t('Encrypted')}</FieldLabel>
+									<Controller
+										control={control}
+										name='encrypted'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												id={encryptedId}
+												ref={ref}
+												checked={value}
+												disabled={e2eDisabled || federated}
+												onChange={onChange}
+												aria-describedby={`${encryptedId}-hint`}
+												aria-labelledby='Encrypted_channel_Label'
+											/>
+										)}
 									/>
-								)}
-							/>
-						</FieldRow>
-						<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
-					</Field>
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={readOnlyId}>{t('Read_only')}</FieldLabel>
-							<Controller
-								control={control}
-								name='readOnly'
-								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch
-										id={readOnlyId}
-										aria-describedby={`${readOnlyId}-hint`}
-										ref={ref}
-										checked={value}
-										disabled={!canSetReadOnly || broadcast || federated}
-										onChange={onChange}
+								</FieldRow>
+								<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={readOnlyId}>{t('Read_only')}</FieldLabel>
+									<Controller
+										control={control}
+										name='readOnly'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												id={readOnlyId}
+												aria-describedby={`${readOnlyId}-hint`}
+												ref={ref}
+												checked={value}
+												disabled={!canSetReadOnly || broadcast || federated}
+												onChange={onChange}
+											/>
+										)}
 									/>
-								)}
-							/>
-						</FieldRow>
-						<FieldHint id={`${readOnlyId}-hint`}>
-							{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'channel' }) : t('Anyone_can_send_new_messages')}
-						</FieldHint>
-					</Field>
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={broadcastId}>{t('Broadcast')}</FieldLabel>
-							<Controller
-								control={control}
-								name='broadcast'
-								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch
-										aria-describedby={`${broadcastId}-hint`}
-										id={broadcastId}
-										ref={ref}
-										checked={value}
-										disabled={!!federated}
-										onChange={onChange}
+								</FieldRow>
+								<FieldHint id={`${readOnlyId}-hint`}>
+									{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'channel' }) : t('Anyone_can_send_new_messages')}
+								</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={broadcastId}>{t('Broadcast')}</FieldLabel>
+									<Controller
+										control={control}
+										name='broadcast'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												aria-describedby={`${broadcastId}-hint`}
+												id={broadcastId}
+												ref={ref}
+												checked={value}
+												disabled={!!federated}
+												onChange={onChange}
+											/>
+										)}
 									/>
-								)}
-							/>
-						</FieldRow>
-						{broadcast && <FieldHint id={`${broadcastId}-hint`}>{t('Broadcast_hint_enabled', { roomType: 'channel' })}</FieldHint>}
-					</Field>
-				</FieldGroup>
+								</FieldRow>
+								{broadcast && <FieldHint id={`${broadcastId}-hint`}>{t('Broadcast_hint_enabled', { roomType: 'channel' })}</FieldHint>}
+							</Field>
+						</FieldGroup>
+					</AccordionItem>
+				</Accordion>
 			</Modal.Content>
 			<Modal.Footer>
 				<Modal.FooterControllers>
diff --git a/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx b/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx
index b56bb003aa9e..dcdf78589e6c 100644
--- a/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx
+++ b/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx
@@ -12,6 +12,8 @@ import {
 	FieldError,
 	FieldDescription,
 	FieldHint,
+	Accordion,
+	AccordionItem,
 } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import {
@@ -169,7 +171,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 				<Box fontScale='p2' mbe={16}>
 					{t('Teams_new_description')}
 				</Box>
-				<FieldGroup>
+				<FieldGroup mbe={24}>
 					<Field>
 						<FieldLabel required htmlFor={nameId}>
 							{t('Teams_New_Name_Label')}
@@ -229,62 +231,78 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 							{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}
 						</FieldDescription>
 					</Field>
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={readOnlyId}>{t('Teams_New_Read_only_Label')}</FieldLabel>
-							<Controller
-								control={control}
-								name='readOnly'
-								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch
-										id={readOnlyId}
-										aria-describedby={`${readOnlyId}-hint`}
-										disabled={!canChangeReadOnly}
-										onChange={onChange}
-										checked={value}
-										ref={ref}
+				</FieldGroup>
+
+				<Accordion>
+					<AccordionItem title={t('Advanced_settings')}>
+						<FieldGroup>
+							<Box is='h5' fontScale='h5' color='titles-labels'>
+								{t('Security_and_permissions')}
+							</Box>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={encryptedId}>{t('Teams_New_Encrypted_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='encrypted'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												id={encryptedId}
+												disabled={!canSetReadOnly || !canChangeEncrypted}
+												onChange={onChange}
+												aria-describedby={`${encryptedId}-hint`}
+												checked={value}
+												ref={ref}
+											/>
+										)}
 									/>
-								)}
-							/>
-						</FieldRow>
-						<FieldDescription id={`${readOnlyId}-hint`}>
-							{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
-						</FieldDescription>
-					</Field>
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={encryptedId}>{t('Teams_New_Encrypted_Label')}</FieldLabel>
-							<Controller
-								control={control}
-								name='encrypted'
-								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch
-										id={encryptedId}
-										disabled={!canSetReadOnly || !canChangeEncrypted}
-										onChange={onChange}
-										aria-describedby={`${encryptedId}-hint`}
-										checked={value}
-										ref={ref}
+								</FieldRow>
+								<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={readOnlyId}>{t('Teams_New_Read_only_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='readOnly'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												id={readOnlyId}
+												aria-describedby={`${readOnlyId}-hint`}
+												disabled={!canChangeReadOnly}
+												onChange={onChange}
+												checked={value}
+												ref={ref}
+											/>
+										)}
 									/>
-								)}
-							/>
-						</FieldRow>
-						<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
-					</Field>
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={broadcastId}>{t('Teams_New_Broadcast_Label')}</FieldLabel>
-							<Controller
-								control={control}
-								name='broadcast'
-								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch aria-describedby={`${broadcastId}-hint`} id={broadcastId} onChange={onChange} checked={value} ref={ref} />
-								)}
-							/>
-						</FieldRow>
-						{broadcast && <FieldDescription id={`${broadcastId}-hint`}>{t('Teams_New_Broadcast_Description')}</FieldDescription>}
-					</Field>
-				</FieldGroup>
+								</FieldRow>
+								<FieldDescription id={`${readOnlyId}-hint`}>
+									{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
+								</FieldDescription>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={broadcastId}>{t('Teams_New_Broadcast_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='broadcast'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												aria-describedby={`${broadcastId}-hint`}
+												id={broadcastId}
+												onChange={onChange}
+												checked={value}
+												ref={ref}
+											/>
+										)}
+									/>
+								</FieldRow>
+								{broadcast && <FieldDescription id={`${broadcastId}-hint`}>{t('Teams_New_Broadcast_Description')}</FieldDescription>}
+							</Field>
+						</FieldGroup>
+					</AccordionItem>
+				</Accordion>
 			</Modal.Content>
 			<Modal.Footer>
 				<Modal.FooterControllers>