Cleaned up CSS

elastic · Jul 15, 2020 · 1304b2c · 1304b2c
1 parent fade06c
commit 1304b2c
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 67 deletions.
diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss
@@ -1,3 +1,7 @@
+.homHome__synopsisItem {
+  max-width: 50%;
+}
+
 @include euiBreakpoint('xs', 's', 'm') {
   .homHome__synopsisItem {
     flex-basis: 100% !important;

diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss
@@ -1,21 +1,35 @@
 .homSolutionsPanel {
   margin-top: -$euiSizeXL*2;
 
-  .homSolutionsPanel__solutionWrapper {
+  .homeSolutionsPanel--restrictHalfWidth {
+    max-width: 50%;
+  }
+
+  .homSolutionsPanel__solutionPanel {
     display: flex;
     align-items: stretch;
 
+    .homSolutionsPanel__solutionTitle {
+      .euiToken {
+        padding: $euiSizeS;
+      }
+    }
+
     .homSolutionsPanel__CTA {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
       justify-content: center;
+      padding: $euiSize;
     }
   }
 
-  .homSolutionsPanel__appSearch {
-    .homSolutionsPanel__appSearchHeader {
+  .homSolutionsPanel__enterpriseSearch {
+    .homSolutionsPanel__enterpriseSearchHeader {
       background-color: #017d73;
       color: $euiColorEmptyShade;
 
-      .homSolutionsPanel__appSearchTopLeftImage {
+      .homSolutionsPanel__enterpriseSearchTopLeftImage {
         .euiImage__img {
           position: absolute;
           top: 0;
@@ -26,7 +40,7 @@
         }
       }
 
-      .homSolutionsPanel__appSearchBottomRightImage {
+      .homSolutionsPanel__enterpriseSearchBottomRightImage {
         .euiImage__img {
           position: absolute;
           right: 0;
@@ -79,8 +93,6 @@
   }
 
   .homSolutionsPanel__kibana {
-    max-width: 50%;
-
     .homSolutionsPanel__kibanaHeader {
       background-color: #006bb4;
       color: $euiColorEmptyShade;

diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
@@ -120,7 +120,7 @@ export class Home extends Component {
   findDirectoryById = (id) =>
     this.props.directories.find((directory) => directory.showOnHomePage && directory.id === id);
 
-  renderDirectory = (directory, { isBeta, betaLabel } = {}) => {
+  renderDirectory = (directory) => {
     const { addBasePath } = this.props;
 
     return directory ? (
@@ -132,8 +132,6 @@ export class Home extends Component {
           title={directory.title}
           url={addBasePath(directory.path)}
           wrapInPanel
-          isBeta={isBeta}
-          betaLabel={betaLabel}
         />
       </EuiFlexItem>
     ) : null;
@@ -143,7 +141,7 @@ export class Home extends Component {
     const { addBasePath, canChangeHomeRoute = true } = this.props;
 
     const fileDataVisualizer = this.findDirectoryById('ml_file_data_visualizer');
-    const ingestManager = this.findDirectoryById('ingestManager', { isBeta: true });
+    const ingestManager = this.findDirectoryById('ingestManager');
     const security = this.findDirectoryById('security');
     const monitoring = this.findDirectoryById('monitoring');
     const snapshotRestore = this.findDirectoryById('snapshot_restore');
@@ -224,7 +222,7 @@ export class Home extends Component {
             <SolutionsPanel
               addBasePath={addBasePath}
               observability={this.findDirectoryById('observability')}
-              appSearch={this.findDirectoryById('appSearch')}
+              enterpriseSearch={this.findDirectoryById('appSearch')}
               securitySolution={this.findDirectoryById('securitySolution')}
             />
 
@@ -242,7 +240,11 @@ export class Home extends Component {
                   </EuiTitle>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty iconType="tableDensityExpanded" size="s">
+                  <EuiButtonEmpty
+                    iconType="tableDensityExpanded"
+                    href="#/tutorial_directory/sampleData"
+                    size="s"
+                  >
                     <FormattedMessage
                       id="home.addData.sampleDataButtonLabel"
                       defaultMessage="Try our sample data"
@@ -255,9 +257,9 @@ export class Home extends Component {
 
               <EuiFlexGroup>
                 <EuiFlexItem grow={1}>
-                  <EuiFlexGroup>
+                  <EuiFlexGroup justifyContent="spaceAround">
                     {this.renderDirectory(fileDataVisualizer)}
-                    <EuiFlexItem>
+                    <EuiFlexItem className="homHome__synopsisItem">
                       <Synopsis
                         description={i18n.translate('home.addData.addIntegrationDescription', {
                           defaultMessage: 'Add data from a variety of common sources.',
@@ -294,7 +296,7 @@ export class Home extends Component {
 
                   <EuiSpacer />
 
-                  <EuiFlexGroup>
+                  <EuiFlexGroup justifyContent="spaceAround">
                     {this.renderDirectory(security)}
                     {this.renderDirectory(monitoring)}
                     {this.renderDirectory(snapshotRestore)}

diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx
@@ -26,54 +26,56 @@ import { createAppNavigationHandler } from '../app_navigation_handler';
 
 interface Props {
   addBasePath: (path: string) => string;
-  appSearch?: FeatureCatalogueEntry;
+  enterpriseSearch?: FeatureCatalogueEntry;
   observability?: FeatureCatalogueEntry;
   securitySolution?: FeatureCatalogueEntry;
 }
 
 // TODO: Bolding the first word/verb won't look write in other languages
 const getActionsText = (actions: Array<{ verb: string; text: string }>) => (
-  <EuiText size="s" style={{ padding: '16px' }}>
-    {actions.map(({ verb, text }) => (
-      <p key={`${verb} ${text}`}>
-        <strong>{verb}</strong> {text}
-      </p>
-    ))}
-  </EuiText>
+  <EuiFlexItem grow={1}>
+    <EuiText size="s" className="homSolutionsPanel__CTA">
+      {actions.map(({ verb, text }) => (
+        <p key={`${verb} ${text}`}>
+          <strong>{verb}</strong> {text}
+        </p>
+      ))}
+    </EuiText>
+  </EuiFlexItem>
 );
 
 // TODO: Should this live here? Should it be registered per app?
 const solutionCTAs = {
-  appSearch: [
+  enterpriseSearch: [
     {
-      verb: i18n.translate('home.solutionsPanel.appSearch.firstActionVerb', {
+      verb: i18n.translate('home.solutionsPanel.enterpriseSearch.firstActionVerb', {
         defaultMessage: 'Build',
         description:
           'The first word of this sentence is bolded. Full sentence: "Build a powerful website search."',
       }),
-      text: i18n.translate('home.solutionsPanel.appSearch.firstActionText', {
+      text: i18n.translate('home.solutionsPanel.enterpriseSearch.firstActionText', {
         defaultMessage: 'a powerful website search.',
         description: 'Full sentence: "Build a powerful website search."',
       }),
     },
     {
-      verb: i18n.translate('home.solutionsPanel.appSearch.secondActionVerb', {
+      verb: i18n.translate('home.solutionsPanel.enterpriseSearch.secondActionVerb', {
         defaultMessage: 'Search',
         description:
           'The first word of this sentence is bolded. Full sentence: "Search any data from any application."',
       }),
-      text: i18n.translate('home.solutionsPanel.appSearch.secondActionText', {
+      text: i18n.translate('home.solutionsPanel.enterpriseSearch.secondActionText', {
         defaultMessage: 'any data from any application.',
         description: 'Full sentence: "Search any data from any application."',
       }),
     },
     {
-      verb: i18n.translate('home.solutionsPanel.appSearch.thirdActionVerb', {
+      verb: i18n.translate('home.solutionsPanel.enterpriseSearch.thirdActionVerb', {
         defaultMessage: 'Unify',
         description:
           'The first word of this sentence is bolded. Full sentence: "Unify searchable workplace content."',
       }),
-      text: i18n.translate('home.solutionsPanel.appSearch.thirdActionText', {
+      text: i18n.translate('home.solutionsPanel.enterpriseSearch.thirdActionText', {
         defaultMessage: 'searchable workplace content.',
         description: 'Full sentence: "Unify searchable workplace content."',
       }),
@@ -219,27 +221,30 @@ const solutionCTAs = {
   ],
 };
 
+const halfWidthClass = 'homeSolutionsPanel--restrictHalfWidth';
+
 export const SolutionsPanel: FunctionComponent<Props> = ({
   addBasePath,
-  appSearch,
+  enterpriseSearch,
   observability,
   securitySolution,
 }) => (
-  <EuiFlexGroup>
-    {appSearch || observability || securitySolution ? (
-      <EuiFlexItem>
+  <EuiFlexGroup justifyContent="spaceAround">
+    {enterpriseSearch || observability || securitySolution ? (
+      <EuiFlexItem className={halfWidthClass}>
         {/* TODO: once app search is merged, register add to feature catalogue and remove hard coded text here */}
         <EuiFlexGroup direction="column">
-          {appSearch ? (
-            <EuiFlexItem className="homSolutionsPanel__appSearch">
+          {enterpriseSearch ? (
+            <EuiFlexItem className="homSolutionsPanel__enterpriseSearch">
               <EuiPanel
                 paddingSize="none"
+                className="homSolutionsPanel__solutionPanel"
                 onClick={createAppNavigationHandler('/app/app_search')} // TODO: double check this url once enterprise search plugin is merged
               >
                 <EuiFlexGroup gutterSize="none">
-                  <EuiFlexItem grow={1} className="homSolutionsPanel__appSearchHeader">
+                  <EuiFlexItem grow={1} className="homSolutionsPanel__enterpriseSearchHeader">
                     <EuiImage
-                      className="homSolutionsPanel__appSearchTopLeftImage"
+                      className="homSolutionsPanel__enterpriseSearchTopLeftImage"
                       url={addBasePath(
                         '/plugins/home/assets/background_enterprise_search_top_left_2x.png'
                       )}
@@ -248,26 +253,30 @@ export const SolutionsPanel: FunctionComponent<Props> = ({
                     <SolutionsTitle
                       iconType="logoEnterpriseSearch"
                       title="Enterprise Search"
-                      subtitle={i18n.translate('home.solutionsPanel.appSearchSubtitle', {
+                      subtitle={i18n.translate('home.solutionsPanel.enterpriseSearchSubtitle', {
                         defaultMessage: 'Search everything',
                       })}
                     />
                     <EuiImage
-                      className="homSolutionsPanel__appSearchBottomRightImage"
+                      className="homSolutionsPanel__enterpriseSearchBottomRightImage"
                       url={addBasePath(
                         '/plugins/home/assets/background_enterprise_search_bottom_right_2x.png'
                       )}
                       alt="Enterprise search bottom right background graphic"
                     />
                   </EuiFlexItem>
-                  <EuiFlexItem grow={1}>{getActionsText(solutionCTAs.appSearch)}</EuiFlexItem>
+                  {getActionsText(solutionCTAs.enterpriseSearch)}
                 </EuiFlexGroup>
               </EuiPanel>
             </EuiFlexItem>
           ) : null}
           {observability ? (
             <EuiFlexItem className="homSolutionsPanel__observability">
-              <EuiPanel paddingSize="none" onClick={createAppNavigationHandler(observability.path)}>
+              <EuiPanel
+                paddingSize="none"
+                className="homSolutionsPanel__solutionPanel"
+                onClick={createAppNavigationHandler(observability.path)}
+              >
                 <EuiFlexGroup gutterSize="none">
                   <EuiFlexItem grow={1} className="homSolutionsPanel__observabilityHeader">
                     <EuiImage
@@ -283,7 +292,7 @@ export const SolutionsPanel: FunctionComponent<Props> = ({
                       subtitle={observability.description}
                     />
                   </EuiFlexItem>
-                  <EuiFlexItem grow={1}>{getActionsText(solutionCTAs.observability)}</EuiFlexItem>
+                  {getActionsText(solutionCTAs.observability)}
                 </EuiFlexGroup>
               </EuiPanel>
             </EuiFlexItem>
@@ -292,6 +301,7 @@ export const SolutionsPanel: FunctionComponent<Props> = ({
             <EuiFlexItem className="homSolutionsPanel__securitySolution">
               <EuiPanel
                 paddingSize="none"
+                className="homSolutionsPanel__solutionPanel"
                 onClick={createAppNavigationHandler(securitySolution.path)}
               >
                 <EuiFlexGroup gutterSize="none">
@@ -309,18 +319,21 @@ export const SolutionsPanel: FunctionComponent<Props> = ({
                       subtitle={securitySolution.description}
                     />
                   </EuiFlexItem>
-                  <EuiFlexItem grow={1}>
-                    {getActionsText(solutionCTAs.securitySolution)}
-                  </EuiFlexItem>
+                  {getActionsText(solutionCTAs.securitySolution)}
                 </EuiFlexGroup>
               </EuiPanel>
             </EuiFlexItem>
           ) : null}
         </EuiFlexGroup>
       </EuiFlexItem>
     ) : null}
-    <EuiFlexItem className="homSolutionsPanel__kibana">
-      <EuiPanel paddingSize="none" onClick={createAppNavigationHandler('/app/dashboards')}>
+
+    <EuiFlexItem className={`homSolutionsPanel__kibana ${halfWidthClass}`}>
+      <EuiPanel
+        paddingSize="none"
+        className="homSolutionsPanel__solutionPanel"
+        onClick={createAppNavigationHandler('/app/dashboards')}
+      >
         <EuiFlexGroup gutterSize="none">
           <EuiFlexItem grow={1} className="homSolutionsPanel__kibanaHeader">
             <EuiImage
@@ -341,7 +354,7 @@ export const SolutionsPanel: FunctionComponent<Props> = ({
               alt="Kibana bottom right background graphic"
             />
           </EuiFlexItem>
-          <EuiFlexItem grow={1}>{getActionsText(solutionCTAs.kibana)}</EuiFlexItem>
+          {getActionsText(solutionCTAs.kibana)}
         </EuiFlexGroup>
       </EuiPanel>
     </EuiFlexItem>

diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx
@@ -35,7 +35,7 @@ interface Props {
 }
 
 export const SolutionsTitle: FunctionComponent<Props> = ({ title, subtitle, iconType }) => (
-  <EuiFlexGroup gutterSize="none" alignItems="center">
+  <EuiFlexGroup gutterSize="none" alignItems="center" className="homSolutionsPanel__solutionTitle">
     <EuiFlexItem className="eui-textCenter">
       <p>
         <EuiToken iconType={iconType} shape="circle" fill="light" size="l" />

diff --git a/src/plugins/home/public/application/components/synopsis.js b/src/plugins/home/public/application/components/synopsis.js
@@ -21,7 +21,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { EuiCard, EuiIcon, EuiBetaBadge, EuiTitle } from '@elastic/eui';
+import { EuiCard, EuiIcon } from '@elastic/eui';
 
 export function Synopsis({
   description,
@@ -32,7 +32,6 @@ export function Synopsis({
   wrapInPanel,
   onClick,
   isBeta,
-  betaLabel,
 }) {
   let optionalImg;
   if (iconUrl) {
@@ -51,22 +50,12 @@ export function Synopsis({
       layout="horizontal"
       icon={optionalImg}
       titleSize="xs"
-      title={
-        isBeta ? (
-          <EuiTitle size="xs">
-            <span className="homSynopsis__cardTitle">
-              {title}&nbsp;
-              <EuiBetaBadge label={betaLabel} />
-            </span>
-          </EuiTitle>
-        ) : (
-          title
-        )
-      }
+      title={title}
       description={description}
       onClick={onClick}
       href={url}
       data-test-subj={`homeSynopsisLink${title.toLowerCase()}`}
+      betaBadgeLabel={isBeta ? 'Beta' : null}
     />
   );
 }
@@ -83,5 +72,4 @@ Synopsis.propTypes = {
 
 Synopsis.defaultProps = {
   isBeta: false,
-  betaLabel: 'Beta',
 };