change(ui) - add button and other changes

frontend/app/components/Client/Roles/Roles.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import cn from 'classnames';
-import { Loader, IconButton, Popup, NoContent, SlideModal } from 'UI';
+import { Loader, Popup, NoContent, Button } from 'UI';
 import { connect } from 'react-redux';
 import stl from './roles.module.css';
 import RoleForm from './components/RoleForm';
@@ -78,26 +78,17 @@ function Roles(props: Props) {
     return (
         <React.Fragment>
             <Loader loading={loading}>
-                {/* <SlideModal
-                    title={instance.exists() ? 'Edit Role' : 'Create Role'}
-                    size="small"
-                    isDisplayed={showModal}
-                    content={showModal && <RoleForm closeModal={closeModal} permissionsMap={permissionsMap} deleteHandler={deleteHandler} />}
-                    onClose={closeModal}
-                /> */}
                 <div className={stl.wrapper}>
                     <div className={cn(stl.tabHeader, 'flex items-center')}>
                         <div className="flex items-center mr-auto">
                             <h3 className={cn(stl.tabTitle, 'text-2xl')}>Roles and Access</h3>
                             <Popup content="You don’t have the permissions to perform this action." disabled={isAdmin}>
-                                <div>
-                                    <IconButton id="add-button" circle icon="plus" outline disabled={!isAdmin} onClick={() => setShowmModal(true)} />
-                                </div>
+                                <Button variant="primary" onClick={() => setShowmModal(true)}>Add</Button>
                             </Popup>
                         </div>
                     </div>
 
-                    <NoContent title="No roles are available." size="small" show={false} icon>
+                    <NoContent title="No roles are available." size="small" show={false}>
                         <div className={''}>
                             <div className={cn('flex items-start py-3 border-b px-3 pr-20 font-medium')}>
                                 <div className="" style={{ width: '20%' }}>

frontend/app/components/Client/Sites/Sites.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import withPageTitle from 'HOCs/withPageTitle';
-import { Loader, Button, Popup, TextLink } from 'UI';
+import { Loader, Button, Popup, TextLink, NoContent } from 'UI';
 import { init, remove, fetchGDPR } from 'Duck/site';
 import { RED, YELLOW, GREEN, STATUS_COLOR_MAP } from 'Types/site';
 import stl from './sites.module.css';
@@ -13,6 +13,7 @@ import InstallButton from './InstallButton';
 import ProjectKey from './ProjectKey';
 import { useModal } from 'App/components/Modal';
 import { getInitials } from 'App/utils';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 const STATUS_MESSAGE_MAP = {
     [RED]: ' There seems to be an issue (please verify your installation)',
@@ -74,8 +75,18 @@ class Sites extends React.PureComponent {
                             <SiteSearch onChange={(value) => this.setState({ searchQuery: value })} />
                         </div>
                     </div>
-
+                    
                     <div className={stl.list}>
+                    <NoContent
+                        title={
+                            <div className="flex flex-col items-center justify-center">
+                            <AnimatedSVG name={ICONS.NO_AUDIT_TRAIL} size={80} />
+                            <div className="text-center text-gray-600 my-4">No matching results.</div>
+                            </div>
+                        }
+                        size="small"
+                        show={!loading && filteredSites.size === 0}
+                    >
                         <div className="grid grid-cols-12 gap-2 w-full items-center border-b px-2 py-3 font-medium">
                             <div className="col-span-4">Project Name</div>
                             <div className="col-span-4">Key</div>
@@ -115,6 +126,7 @@ class Sites extends React.PureComponent {
                                 </div>
                             </div>
                         ))}
+                        </NoContent>
                     </div>
                 </div>
             </Loader>