[Core UI] Kibana Overview Page Style Tweaks (#76712)

elastic · Sep 17, 2020 · 3c7e7fa · 3c7e7fa
1 parent 7178374
commit 3c7e7fa
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 214 deletions.
diff --git a/src/plugins/home/public/application/components/_add_data.scss b/src/plugins/home/public/application/components/_add_data.scss
@@ -17,6 +17,17 @@
  * under the License.
  */
 
+.homDataAdd__actions {
+  // Prevent children from rendering as flex items
+  display: block;
+
+  // Accounting for no `flush="both"` prop on EuiButtonEmpty
+  .euiButtonEmpty__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 .homDataAdd__content .euiIcon__fillSecondary {
   fill: $euiColorDarkestShade;
 }
diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss
@@ -42,17 +42,10 @@ $homePageWidth: 1200px;
   }
 }
 
-#homHeader__title {
-  @include euiBreakpoint('xs', 's') {
-    text-align: center;
-  }
-}
-
-.homHeader__actionItem {
-  @include euiBreakpoint('xs', 's') {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-  }
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.homHeader__actionItem .euiButtonEmpty__content {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .homContent {
@@ -71,3 +64,16 @@ $homePageWidth: 1200px;
     margin-top: 0 !important;
   }
 }
+
+.homFooter {
+  // Prevent children from rendering as flex items
+  .euiFlexItem {
+    display: block;
+  }
+
+  // Accounting for no `flush="both"` prop on EuiButtonEmpty
+  .euiButtonEmpty__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss
@@ -30,10 +30,12 @@
 }
 
 .homSolutions__group {
-  max-width: 50%;
+  @include euiBreakpoint('l') {
+    max-width: calc(75% - #{$euiSizeM * 2});
+  }
 
-  @include euiBreakpoint('xs', 's') {
-    max-width: none;
+  @include euiBreakpoint('xl') {
+    max-width: calc(50% - #{$euiSizeM * 2});
   }
 }
 

diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx
@@ -34,7 +34,7 @@ interface Props {
 
 export const AddData: FC<Props> = ({ addBasePath, features }) => (
   <section className="homDataAdd" aria-labelledby="homDataAdd__title">
-    <EuiFlexGroup alignItems="center" responsive={false}>
+    <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={1}>
         <EuiTitle size="s">
           <h2 id="homDataAdd__title">
@@ -43,13 +43,8 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => (
         </EuiTitle>
       </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
-          iconType="visTable"
-          href="#/tutorial_directory/sampleData"
-          size="xs"
-          flush="right"
-        >
+      <EuiFlexItem className="homDataAdd__actions" grow={false}>
+        <EuiButtonEmpty iconType="visTable" href="#/tutorial_directory/sampleData" size="xs">
           <FormattedMessage
             id="home.addData.sampleDataButtonLabel"
             defaultMessage="Try our sample data"

diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
@@ -147,14 +147,14 @@ export class Home extends Component {
               <EuiFlexItem>
                 <EuiTitle size="m">
                   <h1 id="homHeader__title">
-                    <FormattedMessage id="home.pageHeader.title" defaultMessage="Home" />
+                    <FormattedMessage id="home.header.title" defaultMessage="Home" />
                   </h1>
                 </EuiTitle>
               </EuiFlexItem>
 
               <EuiFlexItem grow={false}>
-                <EuiFlexGroup className="homHeader__actions">
-                  <EuiFlexItem className="homHeader__actionItem">
+                <EuiFlexGroup className="homHeader__actions" responsive={false} wrap>
+                  <EuiFlexItem className="homHeader__actionItem" grow={false}>
                     <EuiButtonEmpty href="#/tutorial_directory" iconType="indexOpen">
                       {i18n.translate('home.pageHeader.addDataButtonLabel', {
                         defaultMessage: 'Add data',
@@ -163,10 +163,10 @@ export class Home extends Component {
                   </EuiFlexItem>
 
                   {stackManagement ? (
-                    <EuiFlexItem className="homHeader__actionItem">
+                    <EuiFlexItem className="homHeader__actionItem" grow={false}>
                       <EuiButtonEmpty
-                        onClick={createAppNavigationHandler(stackManagement.path)}
                         iconType="gear"
+                        onClick={createAppNavigationHandler(stackManagement.path)}
                       >
                         {i18n.translate('home.pageHeader.stackManagementButtonLabel', {
                           defaultMessage: 'Manage',
@@ -176,10 +176,10 @@ export class Home extends Component {
                   ) : null}
 
                   {devTools ? (
-                    <EuiFlexItem className="homHeader__actionItem">
+                    <EuiFlexItem className="homHeader__actionItem" grow={false}>
                       <EuiButtonEmpty
-                        onClick={createAppNavigationHandler(devTools.path)}
                         iconType="wrench"
+                        onClick={createAppNavigationHandler(devTools.path)}
                       >
                         {i18n.translate('home.pageHeader.devToolsButtonLabel', {
                           defaultMessage: 'Dev tools',
@@ -226,7 +226,7 @@ export class Home extends Component {
                     size="xs"
                   >
                     <FormattedMessage
-                      id="home.changeHomeRouteLink"
+                      id="home.footer.changeHomeRouteLink"
                       defaultMessage="Display a different page on log in"
                     />
                   </EuiButtonEmpty>
@@ -238,11 +238,10 @@ export class Home extends Component {
                   data-test-subj="allPlugins"
                   href="#/feature_directory"
                   size="xs"
-                  flush="right"
                   iconType="apps"
                 >
                   <FormattedMessage
-                    id="home.appDirectory.appDirectoryButtonLabel"
+                    id="home.footer.appDirectoryButtonLabel"
                     defaultMessage="View app directory"
                   />
                 </EuiButtonEmpty>

diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
@@ -49,14 +49,12 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions }) => {
     <>
       <section aria-labelledby="homSolutions__title" className="homSolutions">
         <EuiScreenReaderOnly>
-          <EuiTitle size="s">
-            <h2 id="homSolutions__title">
-              <FormattedMessage
-                id="home.solutionsSection.sectionTitle"
-                defaultMessage="Pick your solution"
-              />
-            </h2>
-          </EuiTitle>
+          <h2 id="homSolutions__title">
+            <FormattedMessage
+              id="home.solutionsSection.sectionTitle"
+              defaultMessage="Pick your solution"
+            />
+          </h2>
         </EuiScreenReaderOnly>
 
         <EuiFlexGroup className="homSolutions__content" justifyContent="spaceAround">

diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -20,50 +20,82 @@
 // Local page variables
 $pageWidth: 1200px;
 
-.kibanaOverviewWrapper {
+.kbnOverviewWrapper {
   background-color: $euiColorEmptyShade;
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - #{$euiHeaderHeightCompensation});
 }
 
-.kibanaOverviewHeader {
+.kbnOverviewHeader {
   background-color: $euiPageBackgroundColor;
   border-bottom: $euiBorderWidthThin solid $euiColorLightShade;
 }
 
-.kibanaOverviewHeader__inner {
+.kbnOverviewHeader__inner {
   margin: 0 auto;
   max-width: $pageWidth;
   padding: $euiSizeXL $euiSize;
 }
 
-#kibanaOverviewHeader__title {
-  @include euiBreakpoint('xs', 's') {
-    text-align: center;
-  }
+// Accounting for no `flush="both"` prop on EuiButtonEmpty
+.kbnOverviewHeader__actionItem .euiButtonEmpty__content {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.kibanaOverviewHeader__actionItem {
-  @include euiBreakpoint('xs', 's') {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-  }
-}
-
-.kibanaOverviewContent {
+.kbnOverviewContent {
   margin: 0 auto;
   max-width: $pageWidth;
   padding: $euiSizeXL $euiSize;
   width: 100%;
 }
 
-.kibanaOverviewData--expanded {
-  flex-direction: column;
+// Prevent children from rendering as flex items
+.kbnOverviewGettingStarted__content {
+  display: block;
+}
+
+.kbnOverviewGettingStarted__apps .euiIcon__fillSecondary {
+  fill: $euiColorDarkestShade;
+}
+
+.kbnOverviewApps__item {
+  .kbnOverviewApps__group--primary & {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      max-width: calc(50% - #{$euiSizeM * 2});
+    }
+  }
+
+  .kbnOverviewApps__group--secondary & {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      max-width: calc(25% - #{$euiSizeM * 2});
+    }
+  }
+}
+
+.kbnOverviewNews__content article {
+  & + article {
+    margin-top: $euiSizeL;
+  }
 
   &,
-  & > * {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
+  header {
+    & > * + * {
+      margin-top: $euiSizeXS;
+    }
+  }
+}
+
+.kbnOverviewFooter {
+  // Prevent children from rendering as flex items
+  .euiFlexItem {
+    display: block;
+  }
+
+  // Accounting for no `flush="both"` prop on EuiButtonEmpty
+  .euiButtonEmpty__content {
+    padding-left: 0;
+    padding-right: 0;
   }
 }