chore: AnalyticsReports visual adequacy (#30617)

RocketChat · Oct 11, 2023 · 38e1216 · 38e1216
1 parent 223dce1
commit 38e1216
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 23 deletions.
diff --git a/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx b/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, Skeleton } from '@rocket.chat/fuselage';
+import { Box, Icon, Skeleton, Scrollable } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
@@ -10,8 +10,8 @@ const AnalyticsReports = () => {
 	const { data, isLoading, isSuccess, isError } = useAnalyticsObject();
 
 	return (
-		<>
-			<Box p={20} pbe={28} mbe={24}>
+		<Box display='flex' flexDirection='column' overflow='hidden' height='100%'>
+			<Box backgroundColor='light' p={20} pbe={28} mbe={16} borderRadius={4}>
 				<Box display='flex' flexDirection='row' alignItems='center' mbe={20}>
 					<Box display='flex' justifyContent='center' alignItems='center' borderRadius={2} p={4} mie={8} bg='status-background-info'>
 						<Icon name='info' size={20} color='info' />
@@ -23,18 +23,15 @@ const AnalyticsReports = () => {
 				</Box>
 				<Box fontScale='p1'>{t('Analytics_page_briefing_second_paragraph')}</Box>
 			</Box>
-			<Box display='flex' flexDirection='column' padding={8} flexGrow={1} color='default' bg='neutral' borderRadius={4} overflow='scroll'>
-				{isSuccess && <pre>{JSON.stringify(data, null, '\t')}</pre>}
-				{isError && t('Something_went_wrong_try_again_later')}
-				{isLoading && (
-					<>
-						<Skeleton />
-						<Skeleton />
-						<Skeleton />
-					</>
-				)}
-			</Box>
-		</>
+			<Scrollable vertical>
+				<Box mbe={8} padding={8} bg='neutral' borderRadius={4} height='100%'>
+					{isSuccess && <pre>{JSON.stringify(data, null, '\t')}</pre>}
+					{isError && t('Something_went_wrong_try_again_later')}
+					{isLoading && Array.from({ length: 10 }).map((_, index) => <Skeleton key={index} />)}
+					<></>
+				</Box>
+			</Scrollable>
+		</Box>
 	);
 };
 

diff --git a/apps/meteor/client/views/admin/viewLogs/ServerLogs.tsx b/apps/meteor/client/views/admin/viewLogs/ServerLogs.tsx
@@ -166,7 +166,7 @@ const ServerLogs = (): ReactElement => {
 	}, [sendToBottomIfNecessary]);
 
 	return (
-		<Box width='full' height='full' overflow='hidden' position='relative' display='flex' marginBlock={8}>
+		<Box width='full' height='full' overflow='hidden' position='relative' display='flex' mbe={8}>
 			<Scrollable vertical>
 				<Box
 					ref={wrapperRef}

diff --git a/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.tsx b/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@rocket.chat/fuselage';
+import { Margins, Tabs } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useState } from 'react';
@@ -9,23 +9,22 @@ import ServerLogs from './ServerLogs';
 
 const ViewLogsPage = (): ReactElement => {
 	const t = useTranslation();
-
 	const [tab, setTab] = useState('Logs');
 
 	return (
-		<Page>
+		<Page background='tint'>
 			<Page.Header title={t('Reports')} />
-			<Page.Content>
-				<Tabs mbe={24}>
+			<Margins blockEnd={24}>
+				<Tabs>
 					<Tabs.Item onClick={() => setTab('Logs')} selected={tab === 'Logs'}>
 						{t('Logs')}
 					</Tabs.Item>
 					<Tabs.Item onClick={() => setTab('Analytics')} selected={tab === 'Analytics'}>
 						{t('Analytic_reports')}
 					</Tabs.Item>
 				</Tabs>
-				{tab === 'Logs' ? <ServerLogs /> : <AnalyticsReports />}
-			</Page.Content>
+			</Margins>
+			<Page.Content>{tab === 'Logs' ? <ServerLogs /> : <AnalyticsReports />}</Page.Content>
 		</Page>
 	);
 };