[Guided Onboarding] Add shadow to landing page cards #144809 (#147121)

Adding a drop shadow to cards on guided onboarding landing page:

![image](https://user-images.githubusercontent.com/11224465/205962845-c4a1da02-dba0-4f53-a606-59dd5e6ef400.png)

**Notes:**
From the [docs](https://elastic.github.io/eui/#/display/card), setting
the `display` value removes the shadow. So I removed that and I tried to
use `$euiTheme` vars but there was no color that matched the subdued one
(`subduedText` and `lightestShade` were all too dark), so I made this as
an inline style, let me know if you think it should be done differently.

packages/kbn-guided-onboarding/src/components/landing_page/use_case_card.tsx

@@ -86,7 +86,6 @@ export const UseCaseCard = ({
 
   return (
     <EuiCard
-      display="subdued"
       image={<EuiImage src={getImageUrl(useCase)} alt={constants[useCase].logAltText} />}
       title={titleElement}
       description={description}

src/plugins/home/public/application/components/guided_onboarding/__snapshots__/getting_started.test.tsx.snap

@@ -7,109 +7,104 @@ exports[`getting started should render getting started component 1`] = `
 >
   <_EuiPageSection
     alignment="center"
-  >
-    <EuiPanel
-      color="plain"
-      css={
-        Object {
-          "map": undefined,
-          "name": "hdi05h",
-          "next": undefined,
-          "styles": "
+    css={
+      Object {
+        "map": undefined,
+        "name": "hdi05h",
+        "next": undefined,
+        "styles": "
     padding: calc(16px*3) calc(16px*4);
   ",
-          "toString": [Function],
-        }
+        "toString": [Function],
       }
-      data-test-subj="onboarding--landing-page"
-      hasShadow={true}
+    }
+    data-test-subj="onboarding--landing-page"
+  >
+    <EuiTitle
+      className="eui-textCenter"
+      size="l"
     >
-      <EuiTitle
-        className="eui-textCenter"
-        size="l"
+      <h1>
+        What would you like to do first?
+      </h1>
+    </EuiTitle>
+    <EuiSpacer
+      size="s"
+    />
+    <EuiText
+      size="m"
+      textAlign="center"
+    >
+      <p>
+        Select a guide to help you make the most of your data.
+      </p>
+    </EuiText>
+    <EuiSpacer
+      size="s"
+    />
+    <EuiSpacer
+      size="xxl"
+    />
+    <EuiFlexGrid
+      columns={4}
+      gutterSize="l"
+    >
+      <EuiFlexItem
+        key="guideCard-search"
       >
-        <h1>
-          What would you like to do first?
-        </h1>
-      </EuiTitle>
-      <EuiSpacer
-        size="s"
-      />
-      <EuiText
-        size="m"
-        textAlign="center"
+        <GuideCard
+          activateGuide={[Function]}
+          addBasePath={[Function]}
+          guides={Array []}
+          isDarkTheme={false}
+          useCase="search"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem
+        key="guideCard-observability"
       >
-        <p>
-          Select a guide to help you make the most of your data.
-        </p>
-      </EuiText>
-      <EuiSpacer
-        size="s"
-      />
-      <EuiSpacer
-        size="xxl"
-      />
-      <EuiFlexGrid
-        columns={4}
-        gutterSize="l"
+        <GuideCard
+          activateGuide={[Function]}
+          addBasePath={[Function]}
+          guides={Array []}
+          isDarkTheme={false}
+          useCase="observability"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem
+        key="linkCard-observabilityLink"
       >
-        <EuiFlexItem
-          key="guideCard-search"
-        >
-          <GuideCard
-            activateGuide={[Function]}
-            addBasePath={[Function]}
-            guides={Array []}
-            isDarkTheme={false}
-            useCase="search"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem
-          key="guideCard-observability"
-        >
-          <GuideCard
-            activateGuide={[Function]}
-            addBasePath={[Function]}
-            guides={Array []}
-            isDarkTheme={false}
-            useCase="observability"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem
-          key="linkCard-observabilityLink"
-        >
-          <ObservabilityLinkCard
-            addBasePath={[Function]}
-            isDarkTheme={false}
-            navigateToApp={[MockFunction]}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem
-          key="guideCard-security"
-        >
-          <GuideCard
-            activateGuide={[Function]}
-            addBasePath={[Function]}
-            guides={Array []}
-            isDarkTheme={false}
-            useCase="security"
-          />
-        </EuiFlexItem>
-      </EuiFlexGrid>
-      <EuiSpacer />
-      <EuiHorizontalRule />
-      <EuiSpacer />
-      <div
-        className="eui-textCenter"
+        <ObservabilityLinkCard
+          addBasePath={[Function]}
+          isDarkTheme={false}
+          navigateToApp={[MockFunction]}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem
+        key="guideCard-security"
       >
-        <EuiLink
-          data-test-subj="onboarding--skipGuideLink"
-          onClick={[Function]}
-        >
-          I’d like to do something else (skip)
-        </EuiLink>
-      </div>
-    </EuiPanel>
+        <GuideCard
+          activateGuide={[Function]}
+          addBasePath={[Function]}
+          guides={Array []}
+          isDarkTheme={false}
+          useCase="security"
+        />
+      </EuiFlexItem>
+    </EuiFlexGrid>
+    <EuiSpacer />
+    <EuiHorizontalRule />
+    <EuiSpacer />
+    <div
+      className="eui-textCenter"
+    >
+      <EuiLink
+        data-test-subj="onboarding--skipGuideLink"
+        onClick={[Function]}
+      >
+        I’d like to do something else (skip)
+      </EuiLink>
+    </div>
   </_EuiPageSection>
 </_KibanaPageTemplate>
 `;

src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx

@@ -15,7 +15,6 @@ import {
   EuiLink,
   EuiLoadingSpinner,
   EuiPageTemplate,
-  EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -182,58 +181,55 @@ export const GettingStarted = () => {
 
   return (
     <KibanaPageTemplate panelled={false} grow>
-      <EuiPageTemplate.Section alignment="center">
-        <EuiPanel
-          color="plain"
-          hasShadow
-          css={paddingCss}
-          data-test-subj="onboarding--landing-page"
-        >
-          <EuiTitle size="l" className="eui-textCenter">
-            <h1>{title}</h1>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText size="m" textAlign="center">
-            <p>{subtitle}</p>
-          </EuiText>
-          <EuiSpacer size="s" />
-          <EuiSpacer size="xxl" />
-          <EuiFlexGrid columns={4} gutterSize="l">
-            {['search', 'observability', 'observabilityLink', 'security'].map((useCase) => {
-              if (useCase === 'observabilityLink') {
-                return (
-                  <EuiFlexItem key={`linkCard-${useCase}`}>
-                    <ObservabilityLinkCard
-                      navigateToApp={application.navigateToApp}
-                      isDarkTheme={isDarkTheme}
-                      addBasePath={http.basePath.prepend}
-                    />
-                  </EuiFlexItem>
-                );
-              }
+      <EuiPageTemplate.Section
+        alignment="center"
+        css={paddingCss}
+        data-test-subj="onboarding--landing-page"
+      >
+        <EuiTitle size="l" className="eui-textCenter">
+          <h1>{title}</h1>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiText size="m" textAlign="center">
+          <p>{subtitle}</p>
+        </EuiText>
+        <EuiSpacer size="s" />
+        <EuiSpacer size="xxl" />
+        <EuiFlexGrid columns={4} gutterSize="l">
+          {['search', 'observability', 'observabilityLink', 'security'].map((useCase) => {
+            if (useCase === 'observabilityLink') {
               return (
-                <EuiFlexItem key={`guideCard-${useCase}`}>
-                  <GuideCard
-                    useCase={useCase as UseCase}
-                    guides={guidesState}
-                    activateGuide={activateGuide}
+                <EuiFlexItem key={`linkCard-${useCase}`}>
+                  <ObservabilityLinkCard
+                    navigateToApp={application.navigateToApp}
                     isDarkTheme={isDarkTheme}
                     addBasePath={http.basePath.prepend}
                   />
                 </EuiFlexItem>
               );
-            })}
-          </EuiFlexGrid>
-          <EuiSpacer />
-          <EuiHorizontalRule />
-          <EuiSpacer />
-          <div className="eui-textCenter">
-            {/* data-test-subj used for FS tracking */}
-            <EuiLink onClick={onSkip} data-test-subj="onboarding--skipGuideLink">
-              {skipText}
-            </EuiLink>
-          </div>
-        </EuiPanel>
+            }
+            return (
+              <EuiFlexItem key={`guideCard-${useCase}`}>
+                <GuideCard
+                  useCase={useCase as UseCase}
+                  guides={guidesState}
+                  activateGuide={activateGuide}
+                  isDarkTheme={isDarkTheme}
+                  addBasePath={http.basePath.prepend}
+                />
+              </EuiFlexItem>
+            );
+          })}
+        </EuiFlexGrid>
+        <EuiSpacer />
+        <EuiHorizontalRule />
+        <EuiSpacer />
+        <div className="eui-textCenter">
+          {/* data-test-subj used for FS tracking */}
+          <EuiLink onClick={onSkip} data-test-subj="onboarding--skipGuideLink">
+            {skipText}
+          </EuiLink>
+        </div>
       </EuiPageTemplate.Section>
     </KibanaPageTemplate>
   );