[Workplace Search] Design polish: overview page (#95363)

* Rework panels to subdued style

* Fix button when source has been onboarded

* Update content_section test for EuiSpacer

* Update content_section test for EuiSpacer Length

* Lint fix for onboarding_card

* Remove spacer size due to default

Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>

* Remove test line for Spacer now that size=default

Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx

@@ -47,8 +47,7 @@ describe('ContentSection', () => {
       />
     );
 
-    expect(wrapper.find(EuiSpacer).first().prop('size')).toEqual('s');
-    expect(wrapper.find(EuiSpacer)).toHaveLength(2);
+    expect(wrapper.find(EuiSpacer)).toHaveLength(1);
     expect(wrapper.find('.header')).toHaveLength(1);
   });
 });

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx

@@ -30,7 +30,6 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
   description,
   action,
   headerChildren,
-  headerSpacer,
   testSubj,
 }) => (
   <div className={className} data-test-subj={testSubj}>
@@ -38,10 +37,9 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
       <>
         <ViewContentHeader title={title} titleSize="s" description={description} action={action} />
         {headerChildren}
-        {headerSpacer && <EuiSpacer size={headerSpacer} />}
       </>
     )}
     {children}
-    <EuiSpacer size={'xxl'} />
+    <EuiSpacer />
   </div>
 );

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx

@@ -18,7 +18,7 @@ import {
   IconType,
 } from '@elastic/eui';
 
-import { EuiButtonTo, EuiButtonEmptyTo } from '../../../shared/react_router_helpers';
+import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { TelemetryLogic } from '../../../shared/telemetry';
 
 interface OnboardingCardProps {
@@ -49,15 +49,15 @@ export const OnboardingCard: React.FC<OnboardingCardProps> = ({
     });
 
   const completeButton = actionPath ? (
-    <EuiButtonEmptyTo to={actionPath} data-test-subj={testSubj} onClick={onClick}>
+    <EuiButtonTo to={actionPath} data-test-subj={testSubj} onClick={onClick} fill>
       {actionTitle}
-    </EuiButtonEmptyTo>
+    </EuiButtonTo>
   ) : (
     <EuiButtonEmpty data-test-subj={testSubj}>{actionTitle}</EuiButtonEmpty>
   );
 
   const incompleteButton = actionPath ? (
-    <EuiButtonTo to={actionPath} data-test-subj={testSubj} onClick={onClick}>
+    <EuiButtonTo to={actionPath} data-test-subj={testSubj} onClick={onClick} fill>
       {actionTitle}
     </EuiButtonTo>
   ) : (
@@ -66,7 +66,7 @@ export const OnboardingCard: React.FC<OnboardingCardProps> = ({
 
   return (
     <EuiFlexItem>
-      <EuiPanel>
+      <EuiPanel color="subdued" hasShadow={false}>
         <EuiEmptyPrompt
           iconType={complete ? 'checkInCircleFilled' : (icon as IconType)}
           iconColor={complete ? 'secondary' : 'subdued'}

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_steps.tsx

@@ -21,7 +21,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiButtonEmptyTo } from '../../../shared/react_router_helpers';
+import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { TelemetryLogic } from '../../../shared/telemetry';
 import { AppLogic } from '../../app_logic';
 import sharedSourcesIcon from '../../components/shared/assets/source_icons/share_circle.svg';
@@ -142,10 +142,10 @@ export const OrgNameOnboarding: React.FC = () => {
     });
 
   return (
-    <EuiPanel paddingSize="l">
+    <EuiPanel color="subdued" hasShadow={false} paddingSize="l">
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
         <EuiFlexItem className="eui-hideFor--xs eui-hideFor--s" grow={false}>
-          <EuiIcon type="training" color="subdued" size="xl" />
+          <EuiIcon type="documentEdit" size="xl" />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiTitle size="xs">
@@ -158,16 +158,17 @@ export const OrgNameOnboarding: React.FC = () => {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonEmptyTo
+          <EuiButtonTo
             to={ORG_SETTINGS_PATH}
             onClick={onClick}
             data-test-subj="orgNameChangeButton"
+            size="s"
           >
             <FormattedMessage
               id="xpack.enterpriseSearch.workplaceSearch.orgNameOnboarding.buttonLabel"
               defaultMessage="Name your organization"
             />
-          </EuiButtonEmptyTo>
+          </EuiButtonTo>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiFlexGrid } from '@elastic/eui';
+import { EuiFlexGrid, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -35,45 +35,46 @@ export const OrganizationStats: React.FC = () => {
           defaultMessage="Usage statistics"
         />
       }
-      headerSpacer="m"
     >
-      <EuiFlexGrid columns={isFederatedAuth ? 2 : 4}>
-        <StatisticCard
-          title={i18n.translate(
-            'xpack.enterpriseSearch.workplaceSearch.organizationStats.sharedSources',
-            { defaultMessage: 'Shared sources' }
+      <EuiPanel color="subdued" hasShadow={false}>
+        <EuiFlexGrid columns={isFederatedAuth ? 2 : 4}>
+          <StatisticCard
+            title={i18n.translate(
+              'xpack.enterpriseSearch.workplaceSearch.organizationStats.sharedSources',
+              { defaultMessage: 'Shared sources' }
+            )}
+            count={sourcesCount}
+            actionPath={SOURCES_PATH}
+          />
+          {!isFederatedAuth && (
+            <>
+              <StatisticCard
+                title={i18n.translate(
+                  'xpack.enterpriseSearch.workplaceSearch.organizationStats.invitations',
+                  { defaultMessage: 'Invitations' }
+                )}
+                count={pendingInvitationsCount}
+                actionPath={USERS_PATH}
+              />
+              <StatisticCard
+                title={i18n.translate(
+                  'xpack.enterpriseSearch.workplaceSearch.organizationStats.activeUsers',
+                  { defaultMessage: 'Active users' }
+                )}
+                count={accountsCount}
+                actionPath={USERS_PATH}
+              />
+            </>
           )}
-          count={sourcesCount}
-          actionPath={SOURCES_PATH}
-        />
-        {!isFederatedAuth && (
-          <>
-            <StatisticCard
-              title={i18n.translate(
-                'xpack.enterpriseSearch.workplaceSearch.organizationStats.invitations',
-                { defaultMessage: 'Invitations' }
-              )}
-              count={pendingInvitationsCount}
-              actionPath={USERS_PATH}
-            />
-            <StatisticCard
-              title={i18n.translate(
-                'xpack.enterpriseSearch.workplaceSearch.organizationStats.activeUsers',
-                { defaultMessage: 'Active users' }
-              )}
-              count={accountsCount}
-              actionPath={USERS_PATH}
-            />
-          </>
-        )}
-        <StatisticCard
-          title={i18n.translate(
-            'xpack.enterpriseSearch.workplaceSearch.organizationStats.privateSources',
-            { defaultMessage: 'Private sources' }
-          )}
-          count={personalSourcesCount}
-        />
-      </EuiFlexGrid>
+          <StatisticCard
+            title={i18n.translate(
+              'xpack.enterpriseSearch.workplaceSearch.organizationStats.privateSources',
+              { defaultMessage: 'Private sources' }
+            )}
+            count={personalSourcesCount}
+          />
+        </EuiFlexGrid>
+      </EuiPanel>
     </ContentSection>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx

@@ -41,7 +41,7 @@ export const RecentActivity: React.FC = () => {
 
   return (
     <ContentSection title={RECENT_ACTIVITY_TITLE} headerSpacer="m">
-      <EuiPanel>
+      <EuiPanel color="subdued" hasShadow={false}>
         {activityFeed.length > 0 ? (
           <>
             {activityFeed.map((props: FeedActivity, index) => (

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx

@@ -24,6 +24,7 @@ export const StatisticCard: React.FC<StatisticCardProps> = ({ title, count = 0,
       layout="horizontal"
       title={title}
       titleSize="xs"
+      display="plain"
       description={
         <EuiTitle size="l">
           <EuiTextColor color="default">{count}</EuiTextColor>
@@ -36,6 +37,7 @@ export const StatisticCard: React.FC<StatisticCardProps> = ({ title, count = 0,
       layout="horizontal"
       title={title}
       titleSize="xs"
+      display="plain"
       description={
         <EuiTitle size="l">
           <EuiTextColor color="subdued">{count}</EuiTextColor>