Style home page header and other misc design tweaks

Author: ryankeairns

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

@@ -1,3 +1,28 @@
+// Local page vars
+$homePageHeaderHeight: $euiSize * 8;
+$homePageWidth: 1200px;
+
+.homPageHeader {
+  height: $homePageHeaderHeight;
+  margin: 0 auto;
+  max-width: $homePageWidth;
+  padding: $euiSizeXL $euiSize 0;
+}
+
+.homPageContainer {
+  min-height: calc(100vh - #{$homePageHeaderHeight});
+  background-color: $euiColorEmptyShade;
+  border-top: 1px solid $euiColorLightShade;
+}
+
+.homPage {
+  display: flex;
+  max-width: $homePageWidth;
+  margin: 0 auto;
+  padding: 0 $euiSize $euiSizeXL;
+  background-color: transparent;
+}
+
 .homHome__synopsisItem {
   max-width: 50%;
 }

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

@@ -1,5 +1,5 @@
 .homSolutionsPanel {
-  margin-top: -$euiSizeXL*2;
+  margin-top: -$euiSizeXL;
 
   .homeSolutionsPanel--restrictHalfWidth {
     max-width: 50%;
@@ -24,97 +24,72 @@
     }
   }
 
+  .homSolutionsPanel__header {
+    border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
+    color: $euiColorEmptyShade;
+
+    img {
+      position: absolute;
+      width: auto;
+    }
+  }
+
   .homSolutionsPanel__enterpriseSearch {
     .homSolutionsPanel__enterpriseSearchHeader {
       background-color: #017d73;
-      color: $euiColorEmptyShade;
-
-      .homSolutionsPanel__enterpriseSearchTopLeftImage {
-        .euiImage__img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          margin-top: $euiSizeS;
-          height: $euiSizeXL;
-          width: auto;
-        }
+
+      .homSolutionsPanel__enterpriseSearchTopLeftImage img {
+        top: $euiSizeS;
+        left: 0;
+        height: $euiSizeXL;
       }
 
-      .homSolutionsPanel__enterpriseSearchBottomRightImage {
-        .euiImage__img {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          height: $euiSizeXL;
-          width: auto;
-          margin-bottom: $euiSizeS;
-          margin-right: $euiSizeS;
-        }
+      .homSolutionsPanel__enterpriseSearchBottomRightImage img {
+        right: $euiSizeS;
+        bottom: $euiSizeS;
+        height: $euiSizeXL;
       }
     }
   }
 
   .homSolutionsPanel__observability {
     .homSolutionsPanel__observabilityHeader {
       background-color: #c42373;
-      color: $euiColorEmptyShade;
-
-      .homSolutionsPanel__observabilityTopRightImage {
-        .euiImage__img {
-          position: absolute;
-          top: 0;
-          right: 0;
-          height: $euiSizeXL;
-          width: auto;
-          margin-top: $euiSizeS;
-          margin-right: $euiSizeS;
-        }
+
+      .homSolutionsPanel__observabilityTopRightImage img {
+        top: $euiSizeS;
+        right: $euiSizeS;
+        height: $euiSizeXL;
       }
     }
   }
 
   .homSolutionsPanel__securitySolution {
     .homSolutionsPanel__securitySolutionHeader {
       background-color: #343741;
-      color: $euiColorEmptyShade;
-
-      .homSolutionsPanel__securitySolutionTopLeftImage {
-        .euiImage__img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: $euiSizeXXL;
-          width: auto;
-          margin-top: $euiSize;
-          margin-left: $euiSize;
-        }
+
+      .homSolutionsPanel__securitySolutionTopLeftImage img {
+        top: $euiSizeS;
+        left: $euiSizeS;
+        height: $euiSizeXXL;
       }
     }
   }
 
   .homSolutionsPanel__kibana {
     .homSolutionsPanel__kibanaHeader {
       background-color: #006bb4;
-      color: $euiColorEmptyShade;
-
-      .homSolutionsPanel__kibanaTopLeftImage {
-        .euiImage__img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: $euiSizeXXL * 4;
-          width: auto;
-        }
+
+      .homSolutionsPanel__kibanaTopLeftImage img {
+        top: 0;
+        left: 0;
+        height: $euiSizeXXL * 4;
       }
 
-      .homSolutionsPanel__kibanaBottomRightImage {
-        .euiImage__img {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          height: $euiSizeXXL * 4;
-          width: auto;
-        }
+      .homSolutionsPanel__kibanaBottomRightImage img {
+        right: 0;
+        bottom: 0;
+        height: $euiSizeXXL * 4;
       }
     }
   }

src/plugins/home/public/application/components/change_home_route/change_home_route.tsx

@@ -18,7 +18,7 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiButtonEmpty, EuiText } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { HOME_APP_BASE_PATH } from '../../../../common/constants';
 import { getServices } from '../../kibana_services';
@@ -32,20 +32,26 @@ export const ChangeHomeRoute: FunctionComponent<Props> = ({ defaultRoute }) => {
   const changeDefaultRoute = () => uiSettings.set('defaultRoute', defaultRoute);
 
   return (
-    <EuiText>
-      <p>
-        <FormattedMessage
-          id="home.changeHomeRouteText"
-          defaultMessage="Would you prefer to have an alternate home page for this Elastic space? "
-        />
-        <EuiButtonEmpty iconType="home" onClick={changeDefaultRoute}>
+    <EuiFlexGroup className="homPage__footer" alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiText size="s" color="subdued">
+          <p>
+            <FormattedMessage
+              id="home.changeHomeRouteText"
+              defaultMessage="Would you prefer to have an alternate home page for this Elastic space? "
+            />
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty size="xs" iconType="home" onClick={changeDefaultRoute}>
           <FormattedMessage
             id="home.changeHomeRouteLink"
             defaultMessage="Change your home page route"
           />
         </EuiButtonEmpty>
-      </p>
-    </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };