fix: Frontend issues

Author: boazpoolman

admin/src/components/ConfigDiff/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
 
 import { ModalLayout, ModalBody, ModalHeader } from '@strapi/design-system/ModalLayout';
-import { ButtonText } from '@strapi/design-system/Text';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
 
@@ -17,9 +16,9 @@ const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
       labelledBy="title"
     >
       <ModalHeader>
-        <ButtonText textColor="neutral800" as="h2" id="title">
+        <Typography variant="omega" fontWeight="bold" textColor="neutral800">
           Config changes for {configName}
-        </ButtonText>
+        </Typography>
       </ModalHeader>
       <ModalBody>
         <Grid paddingBottom={4} style={{ textAlign: 'center' }}>

admin/src/components/ConfigList/index.js

@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
 
 import { Table, Thead, Tbody, Tr, Th } from '@strapi/design-system/Table';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { Loader } from '@strapi/design-system/Loader';
 
@@ -127,13 +127,13 @@ const ConfigList = ({ diff, isLoading }) => {
               />
             </Th>
             <Th>
-              <TableLabel>Config name</TableLabel>
+              <Typography variant="sigma">Config name</Typography>
             </Th>
             <Th>
-              <TableLabel>Config type</TableLabel>
+              <Typography variant="sigma">Config type</Typography>
             </Th>
             <Th>
-              <TableLabel>State</TableLabel>
+              <Typography variant="sigma">State</Typography>
             </Th>
           </Tr>
         </Thead>

admin/src/components/ConfirmModal/index.js

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
@@ -22,10 +22,10 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description" style={{ textAlign: 'center' }}>
+            <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
               {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
               {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
-            </Text>
+            </Typography>
           </Flex>
         </Stack>
       </DialogBody>

admin/src/containers/ConfigPage/index.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
 import { Box } from '@strapi/design-system/Box';
+import { ContentLayout } from '@strapi/design-system/Layout';
 import { useNotification } from '@strapi/helper-plugin';
 import { Alert } from '@strapi/design-system/Alert';
 import { Typography } from '@strapi/design-system/Typography';
@@ -23,7 +24,7 @@ const ConfigPage = () => {
   }, []);
 
   return (
-    <Box paddingLeft={8} paddingRight={8} paddingBottom={8}>
+    <ContentLayout paddingBottom={8}>
       {appEnv === 'production' && (
         <Box paddingBottom={4}>
           <Alert variant="danger">
@@ -35,7 +36,7 @@ const ConfigPage = () => {
       )}
       <ActionButtons />
       <ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
-    </Box>
+    </ContentLayout>
   );
 };