[Docs] Rebrand (#4727)

* Adding new logo and new hero illustration

* Adding Figma community file for Amsterdam

* Replacing favicon

* Adding elastic logo and link into the footer

* Adding react helmet. Favicons for dev and prod.

* social media thumbnail

* Social media tags

* Footer elastic logo

* Moving react-helmet to devDependencies

* Reconciling meta tags

* Adding title and description meta tags into index.html

package.json

@@ -184,6 +184,7 @@
     "react": "^16.12.0",
     "react-docgen-typescript": "^1.20.5",
     "react-dom": "^16.12.0",
+    "react-helmet": "^6.1.0",
     "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src-docs/src/components/guide_components.scss

@@ -2,6 +2,8 @@
 
 $guideSideNavWidth: 240px;
 $guideZLevelHighest: $euiZLevel9 + 1000;
+$elasticLogoTextLight: #FFF;
+$elasticLogoTextDark: #1C1E23;
 
 #guide { // sass-lint:disable-line no-ids
   display: flex;
@@ -361,33 +363,26 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
-.guideHomePage__illustrationLightShade {
-  fill: $euiColorLightShade;
-}
-
-.guideHomePage__illustrationEmptyShade {
-  fill: $euiColorEmptyShade;
-}
+.guideHomePage__illustration {
+  @include euiBreakpoint('s', 'm') {
+    justify-content: center;
+  }
 
-.guideHomePage__illustrationDots,
-.guideHomePage__illustrationComponents {
-  position: absolute;
-  top: 0;
-  right: 0;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .guideHomePage__illustrationEffect {
   display: block;
-  height: auto;
   position: relative;
-  width: auto;
 
-  .guideHomePage__illustrationEffectParts {
-    height: auto;
+  .guideHomePage__illustrationEffectSVG {
     transform: perspective(1600px);
     transform-style: preserve-3d;
     transition: all .3s ease-in-out;
     width: 100%;
+    height: auto;
 
     &:before {
       content: '';
@@ -400,18 +395,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     }
   }
 
-  .guideHomePage__illustrationEffectPartsDots,
-  .guideHomePage__illustrationEffectPartsComps {
-    position: absolute;
-    left: 0;
-    top: 0;
-    transform: translateZ(16px) scale(.9);
-    transition: all .4s ease;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
-
   .guideHomePage__illustrationTopLeftCorner {
     height: 50%;
     left: 0;
@@ -420,12 +403,9 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     width: 50%;
     z-index: 300;
 
-    &:hover ~ .guideHomePage__illustrationEffectParts {
+    &:hover ~ .guideHomePage__illustrationEffectSVG {
       transform: perspective(1600px) rotateX(-5deg) rotateY(5deg);
 
-      .guideHomePage__illustrationEffectPartsDots {
-        transform: translate3d(-.1px, -.1px, 16px) scale(.9);
-      }
     }
   }
 
@@ -437,12 +417,8 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     width: 50%;
     z-index: 300;
 
-    &:hover ~ .guideHomePage__illustrationEffectParts  {
+    &:hover ~ .guideHomePage__illustrationEffectSVG  {
       transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg);
-
-      .guideHomePage__illustrationEffectPartsDots {
-        transform: translate3d(.1px, -.1px, 16px) scale(.9);
-      }
     }
   }
 
@@ -454,12 +430,8 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     width: 50%;
     z-index: 300;
 
-    &:hover ~ .guideHomePage__illustrationEffectParts {
+    &:hover ~ .guideHomePage__illustrationEffectSVG {
       transform: perspective(1600px) rotateX(5deg) rotateY(5deg);
-
-      .guideHomePage__illustrationEffectPartsDots {
-        transform: translate3d(-.1px, .1px, 1px) scale(.9);
-      }
     }
   }
 
@@ -471,13 +443,36 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     width: 50%;
     z-index: 300;
 
-    &:hover ~ .guideHomePage__illustrationEffectParts  {
+    &:hover ~ .guideHomePage__illustrationEffectSVG  {
       transform: perspective(1600px) rotateX(5deg) rotateY(-5deg);
-
-
-      .guideHomePage__illustrationEffectPartsDots {
-        transform: translate3d(.1px, .1px, 1px) scale(.9);
-      }
     }
 	}
 }
+
+.guideHome__footer {
+  display: flex;
+  align-items: center;
+}
+
+.guideHome__footerHeart {
+  color: $euiColorAccentText;
+}
+
+.guideHome__footerLogo {
+  // sass-lint:disable-block no-important
+  vertical-align: middle;
+  display: inline-block !important;
+  margin-bottom: 0 !important;
+  position: relative;
+  top: -1px;
+}
+
+.guideHome__footerLogoText {
+  fill: lightOrDarkTheme($elasticLogoTextDark, $elasticLogoTextLight);
+}
+
+.guideHome__hero {
+  > * {
+    padding: $euiSizeL;
+  }
+}

src-docs/src/components/guide_page/guide_page_header.tsx

@@ -14,6 +14,7 @@ import { EuiButtonEmpty } from '../../../../src/components/button';
 
 // @ts-ignore Not TS
 import { CodeSandboxLink } from '../../components/codesandbox/link';
+import logoEUI from '../../images/logo-eui.svg';
 import {
   GuideThemeSelector,
   GuideSketchLink,
@@ -35,7 +36,7 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
 
   function renderLogo() {
     return (
-      <EuiHeaderLogo iconType="logoElastic" href="#/" aria-label="EUI home">
+      <EuiHeaderLogo iconType={logoEUI} href="#/" aria-label="EUI home">
         Elastic UI
       </EuiHeaderLogo>
     );

src-docs/src/components/guide_theme_selector/guide_figma_link.tsx

@@ -31,12 +31,10 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
   const isAmsterdam = context.theme.includes('amsterdam');
 
   let href = 'https://www.figma.com/community/file/809845546262698150';
-  let label = 'EUI Figma Design Library';
+  const label = 'EUI Figma Design Library';
 
   if (isAmsterdam) {
-    href =
-      'https://www.figma.com/file/RzfYLj2xmH9K7gQtbSKygn/BETA-EUI-Amsterdam';
-    label = `${label} (private beta)`;
+    href = 'https://www.figma.com/community/file/964536385682658129';
   }
 
   return isMobileSize ? (
@@ -48,7 +46,6 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
       title={label}
       content="The Figma Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics.">
       <EuiHeaderSectionItemButton
-        notification={isAmsterdam && 'B'}
         notificationColor="subdued"
         aria-label={label}
         // @ts-ignore TODO: FIX