Regression: Margins on Export Messages (#18682)

* Fix Margins on Export Messages

* Add Content Scroll

client/admin/users/UserForm.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Field, TextInput, TextAreaInput, PasswordInput, MultiSelectFiltered, Box, ToggleSwitch, Icon, Divider } from '@rocket.chat/fuselage';
+import { Field, TextInput, TextAreaInput, PasswordInput, MultiSelectFiltered, Box, ToggleSwitch, Icon, Divider, FieldGroup } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { isEmail } from '../../../app/utils/lib/isEmail.js';
@@ -47,6 +47,7 @@ export default function UserForm({ formValues, formHandlers, availableRoles, app
 	const onLoadCustomFields = useCallback((hasCustomFields) => setHasCustomFields(hasCustomFields), []);
 
 	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
+		<FieldGroup>
 			{ prepend }
 			{useMemo(() => <Field>
 				<Field.Label>{t('Name')}</Field.Label>
@@ -135,5 +136,6 @@ export default function UserForm({ formValues, formHandlers, availableRoles, app
 			</>}
 			<CustomFieldsForm onLoadFields={onLoadCustomFields} customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
 			{ append }
+		</FieldGroup>
 	</VerticalBar.ScrollableContent>;
 }

client/channel/ExportMessages/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Field, TextInput, Select, ButtonGroup, Button, Box, Icon, Callout } from '@rocket.chat/fuselage';
+import { Field, TextInput, Select, ButtonGroup, Button, Box, Icon, Callout, FieldGroup } from '@rocket.chat/fuselage';
 import { css } from '@rocket.chat/css-in-js';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import toastr from 'toastr';
@@ -61,7 +61,7 @@ const FileExport = ({ onCancel, rid }) => {
 	};
 
 	return (
-		<>
+		<FieldGroup>
 			<Field>
 				<Field.Label>{t('Date')}</Field.Label>
 				<Field.Row>
@@ -83,7 +83,7 @@ const FileExport = ({ onCancel, rid }) => {
 					{t('Export')}
 				</Button>
 			</ButtonGroup>
-		</>
+		</FieldGroup>
 	);
 };
 
@@ -185,12 +185,14 @@ const MailExportForm = ({ onCancel, rid }) => {
 	};
 
 	return (
-		<>
+		<FieldGroup>
+			<Field>
 				<Callout onClick={reset} title={t('Messages selected')} type={selectedMessages.length > 0 ? 'success' : 'info'}>
 					<p>{`${ selectedMessages.length } Messages selected`}</p>
 					{ selectedMessages.length > 0 && <Box is='p' className={clickable} >{t('Click here to clear the selection')}</Box> }
 					{ selectedMessages.length === 0 && <Box is='p'>{t('Click_the_messages_you_would_like_to_send_by_email')}</Box> }
 				</Callout>
+			</Field>
 			<Field>
 				<Field.Label>{t('To_users')}</Field.Label>
 				<Field.Row>
@@ -220,7 +222,7 @@ const MailExportForm = ({ onCancel, rid }) => {
 					{t('Send')}
 				</Button>
 			</ButtonGroup>
-		</>
+		</FieldGroup>
 	);
 };
 
@@ -240,16 +242,18 @@ export const ExportMessages = function ExportMessages({ rid, tabBar }) {
 				{t('Export_Messages')}
 				<VerticalBar.Close onClick={() => tabBar.close()} />
 			</VerticalBar.Header>
-			<VerticalBar.Content>
+			<VerticalBar.ScrollableContent>
+				<FieldGroup>
 					<Field>
 						<Field.Label>{t('Method')}</Field.Label>
 						<Field.Row>
 							<Select value={type} onChange={(value) => setType(value)} placeholder={t('Type')} options={exportOptions}/>
 						</Field.Row>
 					</Field>
+				</FieldGroup>
 				{type && type === 'file' && <FileExport rid={rid} onCancel={() => tabBar.close()} />}
 				{type && type === 'email' && <MailExportForm rid={rid} onCancel={() => tabBar.close()} />}
-			</VerticalBar.Content>
+			</VerticalBar.ScrollableContent>
 		</VerticalBar>
 	);
 };

client/components/basic/Buttons/ActionButton.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import { Button, Icon } from '@rocket.chat/fuselage';
 // TODO fuselage
-export const ActionButton = ({ icon, ...props }) => <Button {...props} square ghost small><Icon name={icon} size='x20'/></Button>;
+export const ActionButton = ({ icon, ...props }) => <Button {...props} square ghost small flexShrink={0}><Icon name={icon} size='x20'/></Button>;

client/components/basic/PlanTag.js

@@ -16,7 +16,7 @@ function PlanTag() {
 		})();
 	}, []);
 
-	return plans.map(({ plan, background }) => <Tag key={plan} backgroundColor={background} marginInline='x4' color='#fff' textTransform='capitalize'>{plan}</Tag>);
+	return plans.map(({ plan, background }) => <Tag key={plan} verticalAlign='middle' backgroundColor={background} marginInline='x4' color='#fff' textTransform='capitalize'>{plan}</Tag>);
 }
 
 export default PlanTag;

client/components/basic/Sidebar.js

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Scrollable, Button, Icon } from '@rocket.chat/fuselage';
+import { Box, Scrollable, Icon } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useRoutePath } from '../../contexts/RouterContext';
+import { ActionButton } from './Buttons/ActionButton';
 
 const Sidebar = ({ children, ...props }) => <Box display='flex' flexDirection='column' h='100vh' {...props}>
 	{children}
@@ -18,7 +19,7 @@ const Content = ({ children, ...props }) => <Scrollable {...props}>
 const Header = ({ title, onClose, children = undefined, ...props }) => <Box is='header' display='flex' flexDirection='column' pb='x16' {...props}>
 	{(title || onClose) && <Box display='flex' flexDirection='row' alignItems='center' pi='x24' justifyContent='space-between' flexGrow={1}>
 		{title && <Box color='neutral-800' fontSize='p1' fontWeight='p1' flexShrink={1} withTruncatedText>{title}</Box>}
-		{onClose && <Button square small ghost onClick={onClose}><Icon name='cross' size='x20'/></Button>}
+		{onClose && <ActionButton icon='cross' onClick={onClose}/>}
 	</Box>}
 	{children}
 </Box>;