fix icons issues

src/react/account/AccountDetails.tsx

@@ -1,21 +1,23 @@
+import { Icon } from '@scality/core-ui';
+import { Tabs } from '@scality/core-ui/dist/next';
+import { useParams } from 'react-router-dom';
 import { useTheme } from 'styled-components';
 import { Account } from '../../types/account';
-import { Tabs } from '@scality/core-ui/dist/next';
-import Properties from './details/Properties';
 import { Warning } from '../ui-elements/Warning';
-import { useParams } from 'react-router-dom';
-import AccountUserList from './AccountUserList';
-import AccountPoliciesList from './AccountPoliciesList';
-import { AccountLocations } from './AccountLocations';
 import { useAuthGroups } from '../utils/hooks';
+import { AccountLocations } from './AccountLocations';
+import AccountPoliciesList from './AccountPoliciesList';
+import AccountUserList from './AccountUserList';
+import Properties from './details/Properties';
+
 type Props = {
   account: Account | null | undefined;
 };
 
 const NotFound = () => (
   <Warning
-    //@ts-expect-error fix this when you are working on it
-    iconClass="fas fa-3x fa-exclamation-triangle"
+    centered={true}
+    icon={<Icon name="Exclamation-triangle" size="3x" />}
     title="Account not found."
   />
 );

src/react/account/AccountUserAccessKeys.tsx

@@ -21,7 +21,7 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 import { Column } from 'react-table';
-import styled, { useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 import { useIAMClient } from '../IAMProvider';
 import { getUserAccessKeysQuery } from '../queries';
 import { BreadcrumbAccount } from '../ui-elements/Breadcrumb';
@@ -34,15 +34,6 @@ import {
 import AccountUserSecretKeyModal from './AccountUserSecretKeyModal';
 import { TableHeaderWrapper } from '../ui-elements/Table';
 
-const CustomIcon = styled.i`
-  color: ${(props) => props.theme.textSecondary};
-  font-size: 32px;
-  cursor: pointer;
-  :hover {
-    color: ${(props) => props.theme.textPrimary};
-  }
-`;
-
 const CreatedOnCell = (rowValue) => {
   const outdatedAlert = useAccessKeyOutdatedStatus(rowValue);
   return (
@@ -286,8 +277,10 @@ const AccountUserAccessKeys = () => {
       <AppContainer.OverallSummary>
         <Stack withSeparators gap="r32">
           <>
-            <CustomIcon
-              className="fas fa-arrow-left"
+            <Icon
+              name="Arrow-left"
+              size="2x"
+              style={{ cursor: 'pointer' }}
               onClick={() => {
                 history.push('../');
               }}

src/react/databrowser/buckets/ObjectLockSetting.tsx

@@ -133,7 +133,7 @@ export default function ObjectLockSetting() {
               type="submit"
               variant="primary"
               label="Save"
-              icon={<i className="fas fa-save"></i>}
+              icon={<Icon name="Save" />}
             />
           </Stack>
         }

src/react/databrowser/objects/MetadataSearch.tsx

@@ -1,20 +1,21 @@
 import { useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { Hint, Hints, HintsTitle } from '../../ui-elements/Input';
 import {
   SearchButton,
-  SearchInputIcon,
   SearchMetadataContainer,
-  SearchMetadataInput,
   SearchMetadataInputAndIcon,
   SearchValidationIcon,
 } from '../../ui-elements/Table';
 import {
   useOutsideClick,
-  useQueryParams,
   usePrefixWithSlash,
+  useQueryParams,
 } from '../../utils/hooks';
+import { Icon, spacing } from '@scality/core-ui';
+import { Input } from '@scality/core-ui/dist/next';
 
 export const METADATA_SEARCH_HINT_ITEMS = [
   {
@@ -50,6 +51,19 @@ export const METADATA_SEARCH_HINT_ITEMS = [
     q: 'replication-status="PENDING"',
   },
 ];
+
+const SearchMetadataInputContainer = styled.div`
+  width: 100%;
+  > div {
+    width: 100%;
+  }
+`;
+const SearchMetadataInput = styled(Input)`
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  padding: 0px ${spacing.r32};
+  max-height: ${spacing.r32};
+  box-sizing: border-box;
+`;
 type Props = {
   isMetadataType: boolean;
   errorZenkoMsg: string | null | undefined;
@@ -110,6 +124,8 @@ const MetadataSearch = ({ isMetadataType, errorZenkoMsg }: Props) => {
     setHintsShown(true);
   };
 
+  const isHidden = !isMetadataType && !errorZenkoMsg;
+
   return (
     <SearchMetadataContainer
       //@ts-expect-error fix this when you are working on it
@@ -121,20 +137,27 @@ const MetadataSearch = ({ isMetadataType, errorZenkoMsg }: Props) => {
           isMetadataType={isMetadataType}
           isError={!!errorZenkoMsg}
         />
-        <SearchMetadataInput
-          //@ts-expect-error fix this when you are working on it
-          disableToggle={true}
-          ref={inputRef}
-          onChange={handleChange}
-          placeholder="Metadata Search"
-          value={inputText}
-          onClick={handleInputClicked}
-        />
-        <SearchInputIcon
-          className="fas fa-times-circle"
+        <SearchMetadataInputContainer>
+          <SearchMetadataInput
+            id="metadata-search-input"
+            ref={inputRef}
+            onChange={handleChange}
+            placeholder="Metadata Search"
+            value={inputText}
+            onClick={handleInputClicked}
+          />
+        </SearchMetadataInputContainer>
+
+        <Icon
+          name="Times-circle"
+          style={{
+            position: 'absolute',
+            visibility: isHidden ? 'hidden' : 'visible',
+            right: '10px',
+            cursor: 'pointer',
+          }}
+          //@ts-expect-error Need to improve typing on core-ui for including the event
           onClick={reset}
-          //@ts-expect-error fix this when you are working on it
-          isHidden={!isMetadataType && !errorZenkoMsg ? 1 : 0}
         />
       </SearchMetadataInputAndIcon>
       {hintsShown && !inputText && (

src/react/databrowser/objects/ObjectListTable.tsx

@@ -5,10 +5,9 @@ import { AutoSizer } from 'react-virtualized';
 import { FixedSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { List } from 'immutable';
-import { FormattedDateTime, PrettyBytes, Text } from '@scality/core-ui';
+import { FormattedDateTime, Icon, PrettyBytes, Text } from '@scality/core-ui';
 import { convertRemToPixels } from '@scality/core-ui/dist/utils';
 import { spacing } from '@scality/core-ui';
-import styled from 'styled-components';
 import { useHistory, useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
@@ -34,10 +33,6 @@ import { useAccountsLocationsAndEndpoints } from '../../next-architecture/domain
 import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 
-export const Icon = styled.i<{ isMargin?: boolean }>`
-  margin-right: ${spacing.r4};
-  margin-left: ${(props) => (props.isMargin ? spacing.r16 : '0px')};
-`;
 type CellProps = {
   row: {
     original: ObjectEntity;
@@ -195,7 +190,7 @@ export default function ObjectListTable({
           if (original.isFolder) {
             return (
               <span>
-                <Icon className="far fa-folder"></Icon>
+                <Icon name="Folder" />
                 <T.CellClick
                   onClick={handleCellClicked(bucketName, original.key)}
                 >
@@ -205,34 +200,31 @@ export default function ObjectListTable({
             );
           }
 
+          const iconStyle = {
+            marginRight: spacing.r4,
+            marginLeft: !original.isLatest ? spacing.r16 : 0,
+          };
+
           if (original.isDeleteMarker) {
             return (
               <span>
                 {' '}
-                <Icon
-                  isMargin={!original.isLatest}
-                  className="fas fa-ban"
-                ></Icon>
+                <Icon style={iconStyle} name="Deletion-marker" />
                 {original.name}
               </span>
             );
           }
 
           return (
             <span>
-              <Icon
-                isMargin={!original.isLatest}
-                className="far fa-file"
-              ></Icon>
+              <Icon style={iconStyle} name="File" />
               {original.lockStatus === 'LOCKED' && (
-                <Icon className="fa fa-lock"></Icon>
+                <Icon style={iconStyle} name="Lock" />
               )}
               {original.lockStatus === 'RELEASED' && (
-                <Icon className="fa fa-lock-open"></Icon>
-              )}
-              {original.isLegalHoldEnabled && (
-                <Icon className="fas fa-balance-scale"></Icon>
+                <Icon style={iconStyle} name="Lock-open" />
               )}
+              {original.isLegalHoldEnabled && <Icon name="Rebalance" />}
               {isObjectInColdStorage &&
               (headObjectStatus === 'idle' ||
                 headObjectStatus === 'loading' ||

src/react/locations/LocationDetails/LocationDetails.tsx

@@ -4,7 +4,7 @@ import {
   LocationTypeKey,
 } from '../../../types/config';
 import React from 'react';
-import { Tooltip } from '@scality/core-ui';
+import { Tooltip, Icon } from '@scality/core-ui';
 import { storageOptions } from './storageOptions';
 
 type Props = {
@@ -66,7 +66,7 @@ export default class LocationDetails extends React.Component<Props> {
       } else if (this.props.repStatus === 'disabled') {
         msg = (
           <div>
-            <span className="mr-2 fa fa-exclamation-circle" />
+            <Icon name="Exclamation-triangle" />
             <span>
               Your instance failed to automatically resume this location. Please
               resume manually.

src/react/ui-elements/Table.tsx

@@ -1,6 +1,6 @@
 import { fontSize } from '@scality/core-ui/dist/style/theme';
 
-import { spacing, SecondaryText, Wrap } from '@scality/core-ui';
+import { spacing, SecondaryText, Wrap, Icon } from '@scality/core-ui';
 import { Box, Button, Input } from '@scality/core-ui/dist/next';
 import { Link } from 'react-router-dom';
 
@@ -68,9 +68,7 @@ export const HeadCell = styled.th`
   text-align: left;
   padding: ${spacing.r16};
 `;
-export const Icon = styled.i`
-  margin-left: ${spacing.r4};
-`;
+
 // * table body
 export const Body = styled.tbody`
   // following is needed to display scroll bar onto the table
@@ -192,46 +190,30 @@ const Table = styled.table`
   border-collapse: collapse;
 `;
 // specific to listobject/md search
-export const SearchMetadataInput = styled(Input)`
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  padding: 0px ${spacing.r32};
-  max-height: ${spacing.r32};
-  box-sizing: border-box;
-`;
 export const ContainerWithSubHeader = styled(Container)`
   height: 100%;
   margin-top: 0px;
 `;
-export const SearchInputIcon = styled.i<{ isHidden?: boolean }>`
-  position: absolute;
-  visibility: ${(props) => (props.isHidden ? 'hidden' : 'visible')};
-  right: 10px;
-  cursor: pointer;
-  &:hover {
-    color: ${(props) => props.theme.infoPrimary};
-  }
-`;
-const ValidationIcon = styled.i`
-  position: absolute;
-  left: 10px;
-  color: ${(props) =>
-    props.className === 'fa fa-times'
-      ? props.theme.statusCritical
-      : props.className === 'fas fa-check'
-      ? props.theme.statusHealthy
-      : props.theme.infoSecondary};
-`;
+
 type Props = {
   isMetadataType: boolean;
   isError: boolean;
 };
 export const SearchValidationIcon = ({ isMetadataType, isError }: Props) => {
-  const className = isError
-    ? 'fa fa-times'
-    : isMetadataType
-    ? 'fas fa-check'
-    : 'fas fa-search';
-  return <ValidationIcon className={className} />;
+  const style = {
+    position: 'absolute' as const,
+    left: '10px',
+    marginLeft: `${spacing.r4}`,
+  };
+  if (isError) {
+    return <Icon name="Close" color="statusCritical" style={style} />;
+  }
+
+  if (isMetadataType) {
+    return <Icon name="Check" color="statusHealthy" style={style} />;
+  }
+
+  return <Icon name="Search" color="infoPrimary" style={style} />;
 };
 export const SearchButton = styled(Button)`
   flex: 0 0 auto;