Apply Fuselage components to GroupPage

client/components/admin/settings/GroupPage.js

@@ -1,6 +1,6 @@
+import { Button, Paragraph } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { Button } from '../../basic/Button';
 import { Header } from '../../header/Header';
 import { useTranslation } from '../../providers/TranslationProvider';
 import { useGroup, useBulkActions } from './EditingState';
@@ -17,31 +17,42 @@ export function GroupPage({ children, headerButtons }) {
 		</section>;
 	}
 
-	const handleCancelClick = () => {
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		save(group);
+	};
+
+	const handleCancelClick = (event) => {
+		event.preventDefault();
 		cancel(group);
 	};
 
-	const handleSaveClick = () => {
+	const handleSaveClick = (event) => {
+		event.preventDefault();
 		save(group);
 	};
 
-	return <section className='page-container page-static page-settings'>
+	return <form action='#' className='page-container page-static page-settings' method='post' onSubmit={handleSubmit}>
 		<Header rawSectionName={t(group.i18nLabel)}>
 			<Header.ButtonSection>
-				{group.changed && <Button cancel onClick={handleCancelClick}>{t('Cancel')}</Button>}
-				<Button primary disabled={!group.changed} onClick={handleSaveClick}>{t('Save_changes')}</Button>
+				{group.changed && <Button danger primary type='reset' onClick={handleCancelClick}>{t('Cancel')}</Button>}
+				<Button
+					className='save'
+					disabled={!group.changed}
+					primary
+					type='submit'
+					onClick={handleSaveClick}
+				>{t('Save_changes')}</Button>
 				{headerButtons}
 			</Header.ButtonSection>
 		</Header>
 
 		<div className='content'>
-			{t.has(group.i18nDescription) && <div className='info'>
-				<p className='settings-description'>{t(group.i18nDescription)}</p>
-			</div>}
+			{t.has(group.i18nDescription) && <Paragraph hintColor>{t(group.i18nDescription)}</Paragraph>}
 
 			<div className='page-settings rocket-form'>
 				{children}
 			</div>
 		</div>
-	</section>;
+	</form>;
 }