fix: incorporated all design changes

Author: parthivrh

packages/react-core/src/demos/Animations/Animations.md

@@ -39,6 +39,7 @@ import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
 import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
 import openshiftLogo from '../assets/Summit-collage-depoying-openshift-product-icon-RH.png'
+import emptyStateLogo from '../assets/Summit-collage-hybrid-cloud-dark-RH.png'
 
 
 

packages/react-core/src/demos/Animations/AnimationsCreateDatabaseForm.tsx

@@ -18,6 +18,7 @@ import { useGuidedTour } from './GuidedTourContext';
 
 interface Props {
   onClose: () => void;
+  emptyStateLogo?: any;
 }
 
 export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose }) => {

packages/react-core/src/demos/Animations/AnimationsOverview.tsx

@@ -25,13 +25,16 @@ import AnimationsOverviewClusterInventory from './AnimationsOverviewClusterInven
 import AnimationsOverviewNetworkActivity from './AnimationsOverviewNetworkActivity';
 import AnimationsOverviewStorage from './AnimationsOverviewStorage';
 import AnimationsOverviewMemoryUtilization from './AnimationsOverviewMemoryUtilization';
-import openshiftLogo from './assets/Summit-collage-depoying-openshift-product-icon-RH.png';
 
 interface AnimationsOverviewProps {
   recentActivityCard?: React.ReactNode;
+  openshiftLogo?: any;
 }
 
-export const AnimationsOverview: FunctionComponent<AnimationsOverviewProps> = ({ recentActivityCard }) => {
+export const AnimationsOverview: FunctionComponent<AnimationsOverviewProps> = ({
+  recentActivityCard,
+  openshiftLogo
+}) => {
   const [displayMultiContentCard, setDisplayMultiContentCard] = useState(true);
 
   const handleCloseMultiContentCard = () => {

packages/react-core/src/demos/Animations/examples/Animations.tsx

@@ -49,7 +49,6 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import BoltIcon from '@patternfly/react-icons/dist/esm/icons/bolt-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
@@ -67,6 +66,13 @@ import { AnimationsHeaderToolbar } from '../../../../dist/esm/demos/Animations/A
 import { AnimationsStartTourModal } from '../../../../dist/esm/demos/Animations/AnimationsStartTourModal';
 import { AnimationsEndTourModal } from '../../../../dist/esm/demos/Animations/AnimationsEndTourModal';
 import { applicationsData } from './ResourceTableData';
+import openshiftLogo from '../../assets/Summit-collage-depoying-openshift-product-icon-RH.png';
+import emptyStateLogo from '../../assets/Summit-collage-hybrid-cloud-dark-RH.png';
+
+// Simple component to wrap the empty state logo
+const EmptyStateLogoIcon: React.FunctionComponent = () => (
+  <img src={emptyStateLogo} alt="Empty state" style={{ width: '200px', height: '200px' }} />
+);
 
 const mainContainerPageId = 'main-content-page-layout-default-nav';
 const expandableColumns = ['Applications', 'Server', 'Branch', 'Status'];
@@ -665,7 +671,13 @@ const AnimationsPage: FunctionComponent = () => {
           </Tabs>
         )}
       </PageSection>
-      {selectedTab === 0 && <AnimationsOverview recentActivityCard={recentActivityCard} />}
+      {selectedTab === 0 && (
+        <AnimationsOverview
+          recentActivityCard={recentActivityCard}
+          openshiftLogo={openshiftLogo}
+          emptyStateLogo={emptyStateLogo}
+        />
+      )}
 
       {selectedTab === 1 && (
         <PageSection id="resources">
@@ -678,7 +690,7 @@ const AnimationsPage: FunctionComponent = () => {
           {showForm ? (
             <AnimationsCreateDatabaseForm onClose={() => setShowForm(false)} />
           ) : (
-            <EmptyState titleText="No databases found" headingLevel="h4" icon={SearchIcon}>
+            <EmptyState titleText="No databases found" headingLevel="h4" icon={EmptyStateLogoIcon}>
               <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
               <EmptyStateFooter>
                 <EmptyStateActions>