Regression: Small UI changes Federation (#22811)

RocketChat · Jul 30, 2021 · bc9ed3e · bc9ed3e
1 parent a60e97d
commit bc9ed3e
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 75 deletions.
diff --git a/client/views/admin/info/FederationCard/components/FederationModal/DNSRecordItem.tsx b/client/views/admin/info/FederationCard/components/FederationModal/DNSRecordItem.tsx
@@ -10,8 +10,8 @@ export const DNSRecordItem: FC<{
 }> = ({ record: { status, title, expectedValue, value, hideErrorString } }) => (
 	<Box display='flex' alignItems='flex-start'>
 		{getStatusIcon(status)}
-		<Box flexDirection='column' style={{ marginTop: -2, fontWeight: 'bold', fontSize: '85%' }}>
-			{title}: {expectedValue}{' '}
+		<Box flexDirection='column' fontSize='x12'>
+			<b>{title}</b>: {expectedValue}{' '}
 			{!hideErrorString && status === SectionStatus.FAILED ? `(${value || '?'})` : ''}
 		</Box>
 	</Box>

diff --git a/client/views/admin/info/FederationCard/components/FederationModal/DNSRecords.tsx b/client/views/admin/info/FederationCard/components/FederationModal/DNSRecords.tsx
@@ -171,33 +171,37 @@ export const DNSRecords: FC<{
 	return (
 		<>
 			<DNSText text={t('Federation_Must_add_records')} />
-			<DNSText text={t('Federation_SRV_records_2.0.0')} />
-			<Box style={{ marginTop: 10 }}>
-				{srvDNSRecords.map((record: DNSRecord) => (
-					<DNSRecordItem key={record.title} record={record} />
-				))}
+			<Box mbs='x16'>
+				<DNSText text={t('Federation_SRV_records_200')} />
+				<Box mbs='x8'>
+					{srvDNSRecords.map((record: DNSRecord) => (
+						<DNSRecordItem key={record.title} record={record} />
+					))}
+				</Box>
 			</Box>
-			<DNSText text={t('Federation_Public_key_TXT_record')} />
-			<Box style={{ marginTop: 10 }}>
-				{txtDNSRecords.map((record: DNSRecord) => (
-					<DNSRecordItem key={record.title} record={record} />
-				))}
+			<Box mbs='x16'>
+				<DNSText text={t('Federation_Public_key_TXT_record')} />
+				<Box mbs='x8'>
+					{txtDNSRecords.map((record: DNSRecord) => (
+						<DNSRecordItem key={record.title} record={record} />
+					))}
+				</Box>
 			</Box>
 			{!legacy && (
-				<Box style={{ marginTop: 20, padding: 10, backgroundColor: '#F2F3F5' }}>
-					<p style={{ fontWeight: 'bold' }}>{t('Federation_HTTP_instead_HTTPS')}</p>
+				<Box mbs='x16' p='x16' bg='disabled' fontSize='x12'>
+					<Box fontWeight='c2'>{t('Federation_HTTP_instead_HTTPS')}</Box>
 					{t('Federation_HTTP_instead_HTTPS_details')}
 				</Box>
 			)}
 			{legacy && (
-				<>
+				<Box mbs='x16'>
 					<DNSText text={t('Federation_Protocol_TXT_record')} />
-					<Box style={{ marginTop: 10 }}>
+					<Box mbs='x8'>
 						{legacyTxtDNSRecords.map((record: DNSRecord) => (
 							<DNSRecordItem key={record.title} record={record} />
 						))}
 					</Box>
-				</>
+				</Box>
 			)}
 		</>
 	);

diff --git a/client/views/admin/info/FederationCard/components/FederationModal/DNSText.tsx b/client/views/admin/info/FederationCard/components/FederationModal/DNSText.tsx
@@ -3,4 +3,8 @@ import React, { FC } from 'react';
 
 export const DNSText: FC<{
 	text: string;
-}> = ({ text }) => <Box style={{ marginTop: 8, fontWeight: 'bold', fontSize: '95%' }}>{text}</Box>;
+}> = ({ text }) => (
+	<Box mbs='x8' fontWeight='c2' fontSize='p1'>
+		{text}
+	</Box>
+);
diff --git a/client/views/admin/info/FederationCard/components/FederationModal/FederationModal.tsx b/client/views/admin/info/FederationCard/components/FederationModal/FederationModal.tsx
@@ -20,6 +20,7 @@ import { useForm } from '../../../../../../hooks/useForm';
 import { DNSRecords } from './DNSRecords';
 import InviteUsers from './InviteUsers';
 import { DNSRecordName, ResolvedDNS, TXTRecordValue } from './Types';
+import './styles.css';
 
 export const FederationModal: FC<{ onClose: () => void }> = ({
 	onClose,
@@ -168,7 +169,7 @@ export const FederationModal: FC<{ onClose: () => void }> = ({
 								{t('Federation_Legacy_support')}
 							</Tabs.Item>
 						</Tabs>
-						<Box style={{ marginTop: 30 }}>
+						<Box mbs='x24'>
 							{currentTab === 1 && (
 								<DNSRecords
 									federationSubdomain={federationSubdomain}
@@ -181,9 +182,13 @@ export const FederationModal: FC<{ onClose: () => void }> = ({
 							)}
 							{currentTab === 2 && (
 								<>
-									<Box style={{ marginBottom: 15 }}>
-										<b>{t('Federation_SRV_no_support')}</b>
-										<p style={{ marginTop: 8 }}>{t('Federation_SRV_no_support_details')}</p>
+									<Box mbe='x16'>
+										<Box is='p' fontWeight='c2' fontSize='p1'>
+											{t('Federation_SRV_no_support')}
+										</Box>
+										<Box is='p' mbs='x8' fontSize='x12'>
+											{t('Federation_SRV_no_support_details')}
+										</Box>
 									</Box>
 									<DNSRecords
 										federationSubdomain={federationSubdomain}
@@ -213,7 +218,7 @@ export const FederationModal: FC<{ onClose: () => void }> = ({
 			)}
 			<Modal.Footer>
 				{currentStep === 2 && (
-					<Box style={{ color: '#6C727A', marginTop: 9, fontSize: 12, float: 'left' }}>
+					<Box mbs='x8' color='hint' fontSize='x12' position='absolute'>
 						{t('Federation_DNS_info_update')}
 					</Box>
 				)}

diff --git a/client/views/admin/info/FederationCard/components/FederationModal/InviteUsers.tsx b/client/views/admin/info/FederationCard/components/FederationModal/InviteUsers.tsx
@@ -15,24 +15,28 @@ const InviteUsers: FC<{ onClose: () => void }> = ({ onClose }): ReactElement =>
 
 	return (
 		<Box display='flex' flexDirection='column' alignItems='stretch' flexGrow={1}>
-			<Box style={{ fontWeight: 600 }}>{t('Federation_Inviting_users_from_another_server')}</Box>
-			<Box style={{ marginTop: 20 }}>{t('Federation_Search_users_you_want_to_connect')}</Box>
-			<Box style={{ marginTop: 20, paddingLeft: '1em' }}>
+			<Box fontWeight='c2' fontSize='p1'>
+				{t('Federation_Inviting_users_from_another_server')}
+			</Box>
+			<Box mbs='x16'>{t('Federation_Search_users_you_want_to_connect')}</Box>
+			<Box mbs='x16' pis='x16'>
 				<ul style={{ listStyle: 'disc', listStylePosition: 'inside' }}>
 					<li>{t('Federation_Username')}</li>
 					<li>{t('Federation_Email')}</li>
 				</ul>
 			</Box>
-			<Box style={{ marginTop: 20 }}>
+			<Box mbs='x16' mbe='x16'>
 				{t('Federation_You_will_invite_users_without_login_access')}
+				<ButtonGroup mbs='x20' align='start'>
+					<Button primary small onClick={handleDirectory}>
+						{t('Federation_Invite_User')}
+					</Button>
+				</ButtonGroup>
 			</Box>
-			<ButtonGroup align='start' style={{ marginTop: 20 }}>
-				<Button primary small onClick={handleDirectory}>
-					{t('Federation_Invite_User')}
-				</Button>
-			</ButtonGroup>
-			<Banner style={{ marginTop: 20 }}>
-				<h2 style={{ fontWeight: 600 }}>{t('Federation_Invite_Users_To_Private_Rooms')}</h2>
+			<Banner>
+				<Box is='h2' fontWeight='c2'>
+					{t('Federation_Invite_Users_To_Private_Rooms')}
+				</Box>
 				<p>{t('Federation_Channels_Will_Be_Replicated')}</p>
 			</Banner>
 		</Box>

diff --git a/client/views/admin/info/FederationCard/components/FederationModal/styles.css b/client/views/admin/info/FederationCard/components/FederationModal/styles.css
@@ -0,0 +1,8 @@
+.rcx-tabs,
+.rcx-tabs__wrapper {
+	margin: 0 !important;
+}
+
+.rcx-tabs__item:first-child {
+	margin-left: 0 !important;
+}
diff --git a/client/views/admin/info/FederationCard/components/InviteUsers.tsx b/client/views/admin/info/FederationCard/components/InviteUsers.tsx
diff --git a/client/views/admin/info/FederationCard/components/Section.tsx b/client/views/admin/info/FederationCard/components/Section.tsx
@@ -20,7 +20,7 @@ const Section: FC<{
 		{getStatusIcon(status)}
 		<Box flexDirection='column'>
 			<Card.Col.Title>{title}</Card.Col.Title>
-			{subtitle && <Box style={{ marginTop: 3 }}>{subtitle}</Box>}
+			{subtitle && <Box mbs='x2'>{subtitle}</Box>}
 			{children}
 		</Box>
 	</Card.Col.Section>

diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1840,7 +1840,7 @@
   "Federation_SRV_no_support": "If your DNS provider does not support SRV records with _http or _https",
   "Federation_SRV_no_support_details": "Some DNS providers will not allow setting _https or _http on SRV records, so we have support for those cases, using our old DNS record resolution method.",
   "Federation_Must_add_records": "You must add the following DNS records on your server:",
-  "Federation_SRV_records_2.0.0": "SRV Record (2.0.0 or newer)",
+  "Federation_SRV_records_200": "SRV Record (2.0.0 or newer)",
   "Federation_Public_key_TXT_record": "Public Key TXT Record",
   "Federation_Protocol_TXT_record": "Protocol TXT Record",
   "Federation_Legacy_support": "Legacy Support",