From 3d53acddeedc3e2cf45ccec5ba950f77a69d3cff Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Wed, 17 Nov 2021 12:08:43 +0100
Subject: [PATCH] feedback fix

---
 .../src/components/CheckboxConfirmation/index.js  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/plugins/i18n/admin/src/components/CheckboxConfirmation/index.js b/packages/plugins/i18n/admin/src/components/CheckboxConfirmation/index.js
index 44b5b3fbd9..28552ced58 100644
--- a/packages/plugins/i18n/admin/src/components/CheckboxConfirmation/index.js
+++ b/packages/plugins/i18n/admin/src/components/CheckboxConfirmation/index.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
@@ -10,6 +11,10 @@ import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import { getTrad } from '../../utils';
 
+const TextAlignTypography = styled(Typography)`
+  text-align: center;
+`;
+
 const CheckboxConfirmation = ({ description, isCreating, intlLabel, name, onChange, value }) => {
   const { formatMessage } = useIntl();
   const [isOpen, setIsOpen] = useState(false);
@@ -63,17 +68,17 @@ const CheckboxConfirmation = ({ description, isCreating, intlLabel, name, onChan
         <Dialog onClose={handleToggle} title="Confirmation" isOpen={isOpen}>
           <DialogBody icon={<ExclamationMarkCircle />}>
             <Stack size={2}>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description">
+              <Flex justifyContent="center">
+                <TextAlignTypography id="confirm-description">
                   {formatMessage({
                     id: getTrad('CheckboxConfirmation.Modal.content'),
                     defaultMessage:
                       'Disabling localization will engender the deletion of all your content but the one associated to your default locale (if existing).',
                   })}
-                </Typography>
+                </TextAlignTypography>
               </Flex>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description" bold>
+              <Flex justifyContent="center">
+                <Typography fontWeight="semiBold" id="confirm-description">
                   {formatMessage({
                     id: getTrad('CheckboxConfirmation.Modal.body'),
                     defaultMessage: 'Do you want to disable it?',