fixes svg animation and small style fixes

Author: vaninawohlleb

src/theme/components/graph.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-// const animatedSvg = useBaseUrl('img/gulp-graph1.svg');
-
-// import { ReactComponent as GulpVisual } from animatedSvg;
+import Svg from './svg';
 
 const fill = keyframes`
   0% {
@@ -42,7 +38,7 @@ const stroke = keyframes`
   }
 `
 
-const GulpVisual = styled.object` 
+const GulpVisual = styled.div` 
   width: 100%;
   height: 100%;
 
@@ -100,7 +96,9 @@ const Graph = (props) => {
           <p>or any otehr templating language</p>
         </li>
       </TechList>
-      <GulpVisual type="image/svg+xml" data={useBaseUrl('img/gulp-graph1.svg')} />
+      <GulpVisual>
+        <Svg />
+      </GulpVisual>
       <TechList>
         <li>
           <p className="uppercase">html</p>

src/theme/components/hero-animation.js

@@ -6,6 +6,10 @@ import GulpGraph from './graph';
 import GulpSource from './source';
 
 const AnimationContainer = styled.div`
+  .fade {
+    min-height: 78vh;
+  }
+
   .fade-entering, .fade-exiting {
     opacity: 1%;
   }
@@ -54,9 +58,11 @@ class Animation extends React.Component {
   constructor(props) {
     super(props);
     this.state = {viewSource: false}
+
+    this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(e) {
+  handleClick() {
     this.setState({
       viewSource: !this.state.viewSource
     });

src/theme/components/svg.js

@@ -4,16 +4,17 @@ import styled from 'styled-components';
 const BenefitContainer = styled.div`
   background: var(--light-gray);
   box-shadow: 1px 2px 5px 1px #ddd;
-  padding: var(--medium);
+  padding: var(--big) var(--medium);
 
   @media(min-width: 768px) {
     min-height: 52vh;
-    // transition: box-shadow .2s ease-in;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
 
-    // &:hover {
-    //   box-shadow: 4px 5px 7px 3px #ddd;
-    //   transition: box-shadow .2s ease-in;
-    // }
+    p {
+      margin: var(--big) 0;
+    }
   }
 `
 
@@ -23,6 +24,12 @@ const Heading = styled.div`
   img {
     margin-right: var(--tiny);
   }
+
+  h3 {
+    margin: 0;
+    display: flex;
+    align-self: center;
+  }
 `
 const Benefit = (props) => {
   return (

src/theme/sections/benefit.js

@@ -30,7 +30,7 @@ const Benefits = (props) => {
     <BenefitsContainer>
       <Benefit icon={useBaseUrl('img/code-block.svg')} title="Simple Usage" text="By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like never before. By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like never before."/>
       <Benefit icon={useBaseUrl('img/timer.svg')} title="Efficient Builds" text="Using the power of node streams, gulp gives you fast builds that don’t write intermediary files to disk. Using the power of node streams, gulp gives you fast builds that don’t write intermediary files to disk."/>
-      <Benefit icon={useBaseUrl('img/atom-benefit.svg')} title="Quality Ecosystem" text="By enforcing strict guidelines, we ensure our plugins stay simple and work as expected. By enforcing strict guidelines, we ensure our plugins stay simple and work as expected."/>
+      <Benefit icon={useBaseUrl('img/system.svg')} title="Quality Ecosystem" text="By enforcing strict guidelines, we ensure our plugins stay simple and work as expected. By enforcing strict guidelines, we ensure our plugins stay simple and work as expected."/>
     </BenefitsContainer>
   )
 }

src/theme/sections/benefits.js

@@ -5,10 +5,11 @@ const PluginContainer = styled.div`
   box-shadow: 1px 2px 5px 1px #ddd;
   background: white;
   padding: var(--small);
+  min-height: 184px;
   display: flex;
   width: 100%;
   flex-direction: column;
-  justify-items: center;
+  justify-content: center;
 
   @media(min-width: 768px) {
     transform: scale(0.95);