[Core UI] Home Page Solution Cards Fix (#75670)

Author: MichaelMarcialis

src/plugins/home/public/application/components/__snapshots__/home.test.js.snap

@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.homDataAdd__content .euiIcon__fillSecondary {
+  fill: $euiColorDarkestShade;
+}

src/plugins/home/public/application/components/_add_data.scss

@@ -6,6 +6,7 @@
 //   homChart__legend-isLoading
 
 @import 'home';
+@import 'add_data';
 @import 'manage_data';
 @import 'sample_data_set_cards';
 @import 'solutions_section';

src/plugins/home/public/application/components/_index.scss

@@ -38,21 +38,29 @@
 }
 
 .homSolutionPanel {
-  align-items: stretch; // Necessary because element is a button
-  display: flex !important;
-  flex-direction: column;
-  overflow: hidden;
+  border-radius: $euiBorderRadius;
+  color: inherit;
+  flex: 1;
+  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+
+  &:hover,
+  &:focus {
+    @include euiSlightShadowHover;
+    transform: translateY(-2px);
 
-  &:focus,
-  &:hover {
     .euiTitle {
       text-decoration: underline;
     }
   }
 
-  &:focus {
-    @include euiFocusRing('large');
-    @include euiSlightShadowHover;
+  &,
+  .euiPanel {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .euiPanel {
+    overflow: hidden;
   }
 }
 

src/plugins/home/public/application/components/_solutions_section.scss

@@ -67,7 +67,7 @@ const mockFeatures = [
     category: 'admin',
     description: 'Add and manage your fleet of Elastic Agents and integrations.',
     homePageSection: 'add_data',
-    icon: 'logstashInput',
+    icon: 'indexManagementApp',
     id: 'ingestManager',
     order: 510,
     path: '/app/ingestManager',
@@ -77,7 +77,7 @@ const mockFeatures = [
     category: 'data',
     description: 'Import your own CSV, NDJSON, or log file',
     homePageSection: 'add_data',
-    icon: 'importAction',
+    icon: 'document',
     id: 'ml_file_data_visualizer',
     order: 520,
     path: '/app/ml#/filedatavisualizer',

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

@@ -155,7 +155,7 @@ export class Home extends Component {
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup className="homHeader__actions">
                   <EuiFlexItem className="homHeader__actionItem">
-                    <EuiButtonEmpty href="#/tutorial_directory" iconType="plusInCircle">
+                    <EuiButtonEmpty href="#/tutorial_directory" iconType="indexOpen">
                       {i18n.translate('home.pageHeader.addDataButtonLabel', {
                         defaultMessage: 'Add data',
                       })}

src/plugins/home/public/application/components/add_data/add_data.test.tsx

@@ -58,8 +58,12 @@ export const SolutionPanel: FC<Props> = ({ addBasePath, solution }) => (
     } homSolutions__item`}
     grow={1}
   >
-    <a href={addBasePath(solution.path)} onClick={createAppNavigationHandler(solution.path)}>
-      <EuiPanel paddingSize="none" className={`homSolutionPanel homSolutionPanel--${solution.id}`}>
+    <a
+      className={`homSolutionPanel homSolutionPanel--${solution.id}`}
+      href={addBasePath(solution.path)}
+      onClick={createAppNavigationHandler(solution.path)}
+    >
+      <EuiPanel paddingSize="none">
         <EuiFlexGroup gutterSize="none">
           <EuiFlexItem grow={1} className={`homSolutionPanel__header`}>
             <SolutionTitle

src/plugins/home/public/application/components/home.js

@@ -108,7 +108,7 @@ export class IngestManagerPlugin
         description: i18n.translate('xpack.ingestManager.featureCatalogueDescription', {
           defaultMessage: 'Add and manage your fleet of Elastic Agents and integrations.',
         }),
-        icon: 'logstashInput',
+        icon: 'indexManagementApp',
         showOnHomePage: true,
         path: BASE_PATH,
         category: FeatureCatalogueCategory.DATA,