SONAR-21382 Migrate Groups page to MIUI

2 files changed, 15 insertions, 11 deletions

diff --git a/server/sonar-web/src/main/js/app/components/AlmSynchronisationWarning.tsx b/server/sonar-web/src/main/js/app/components/AlmSynchronisationWarning.tsx
index 83e933e4858..411b4ae79f8 100644
--- a/server/sonar-web/src/main/js/app/components/AlmSynchronisationWarning.tsx
+++ b/server/sonar-web/src/main/js/app/components/AlmSynchronisationWarning.tsx
@@ -17,12 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import styled from '@emotion/styled';
 import { formatDistance } from 'date-fns';
+import { CheckIcon, FlagMessage, FlagWarningIcon, Link, themeColor } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import Link from '../../components/common/Link';
-import CheckIcon from '../../components/icons/CheckIcon';
-import WarningIcon from '../../components/icons/WarningIcon';
 import { Alert } from '../../components/ui/Alert';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { AlmSyncStatus } from '../../types/provisioning';
@@ -50,13 +49,13 @@ function LastSyncAlert({ info, short }: Readonly<LastSyncProps>) {
   if (short) {
     return status === TaskStatuses.Success ? (
       <div>
-        <span className="authentication-enabled spacer-left">
+        <IconWrapper className="sw-ml-2">
           {warningMessage ? (
-            <WarningIcon className="spacer-right" />
+            <FlagWarningIcon className="sw-mr-2" />
           ) : (
-            <CheckIcon className="spacer-right" />
+            <CheckIcon width={32} height={32} className="sw-mr-2" />
           )}
-        </span>
+        </IconWrapper>
         <i>
           {warningMessage ? (
             <FormattedMessage
@@ -67,7 +66,7 @@ function LastSyncAlert({ info, short }: Readonly<LastSyncProps>) {
               values={{
                 date: formattedDate,
                 details: (
-                  <Link to="/admin/settings?category=authentication&tab=github">
+                  <Link className="sw-ml-2" to="/admin/settings?category=authentication&tab=github">
                     {translate('settings.authentication.github.synchronization_details_link')}
                   </Link>
                 ),
@@ -82,19 +81,19 @@ function LastSyncAlert({ info, short }: Readonly<LastSyncProps>) {
         </i>
       </div>
     ) : (
-      <Alert variant="error">
+      <FlagMessage variant="error">
         <FormattedMessage
           id="settings.authentication.github.synchronization_failed_short"
           defaultMessage={translate('settings.authentication.github.synchronization_failed_short')}
           values={{
             details: (
-              <Link to="/admin/settings?category=authentication&tab=github">
+              <Link className="sw-ml-2" to="/admin/settings?category=authentication&tab=github">
                 {translate('settings.authentication.github.synchronization_details_link')}
               </Link>
             ),
           }}
         />
-      </Alert>
+      </FlagMessage>
     );
   }
 
@@ -165,3 +164,7 @@ export default function AlmSynchronisationWarning({
     </>
   );
 }
+
+const IconWrapper = styled.span`
+  color: ${themeColor('iconSuccess')};
+`;
diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
index d8d409bd004..4ea23f1fec2 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
@@ -77,6 +77,7 @@ const TEMP_PAGELIST_WITH_NEW_BACKGROUND_WHITE = [
   '/admin/permission_templates',
   '/project/background_tasks',
   '/admin/background_tasks',
+  '/admin/groups',
 ];
 
 export default function GlobalContainer() {