feat: add scrolling animation to install buttons

newrelic · May 3, 2022 · cce614b · cce614b
1 parent 988d224
commit cce614b
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 60 deletions.
diff --git a/src/components/InstallButton.js b/src/components/InstallButton.js
@@ -172,6 +172,83 @@ const InstallButton = ({ quickstart, location, ...props }) => {
     });
   };
 
+  const InstallAnimationStyles = () => {
+    return (
+      <div
+        css={css`
+          overflow: hidden;
+          line-height: 30px;
+          text-align: center;
+          width: 106px;
+          height: 48px;
+          margin: 0;
+
+          > div {
+            margin: 10px auto 0;
+            white-space: nowrap;
+          }
+
+          .scroll {
+            -webkit-animation: scroll-back 0.2s
+              cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+            animation: scroll-back 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+              forwards;
+          }
+          &:hover .scroll {
+            -webkit-animation: scroll 0.2s
+              cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+            animation: scroll 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+              forwards;
+          }
+
+          @-webkit-keyframes scroll {
+            0% {
+              -webkit-transform: translateY(0);
+              transform: translateY(0);
+            }
+            100% {
+              -webkit-transform: translateY(-40px);
+              transform: translateY(-40px);
+            }
+          }
+          @-webkit-keyframes scroll-back {
+            0% {
+              -webkit-transform: translateY(-40px);
+              transform: translateY(-40px);
+            }
+            100% {
+              -webkit-transform: translateY(0);
+              transform: translateY(0);
+            }
+          }
+
+          @keyframes scroll {
+            0% {
+              -webkit-transform: translateY(0);
+              transform: translateY(0);
+            }
+            100% {
+              -webkit-transform: translateY(-40px);
+              transform: translateY(-40px);
+            }
+          }
+          @keyframes scroll-back {
+            0% {
+              -webkit-transform: translateY(-40px);
+              transform: translateY(-40px);
+            }
+            100% {
+              -webkit-transform: translateY(0);
+              transform: translateY(0);
+            }
+          }
+        `}
+      >
+        <div class="scroll scroll-top">Install now</div>
+        <div class="scroll scroll-bottom">Install now</div>
+      </div>
+    );
+  };
   return (
     <Button
       {...props}
@@ -182,14 +259,26 @@ const InstallButton = ({ quickstart, location, ...props }) => {
       css={css`
         border-radius: 4px;
         padding: 1rem;
-
         background-color: #1d252c;
+        font-family: 'Söhne-Leicht';
+        font-size: 14px;
+        font-weight: 400;
+
         &:hover {
           background-color: #1d252c;
         }
+        ${hasInstallableComponent &&
+        css`
+          padding: 0;
+          width: 106px;
+        `};
       `}
     >
-      {hasInstallableComponent ? <>Install now</> : 'See installation docs'}
+      {hasInstallableComponent ? (
+        <InstallAnimationStyles />
+      ) : (
+        'See installation docs'
+      )}
     </Button>
   );
 };

diff --git a/src/components/LandingBanner.js b/src/components/LandingBanner.js
@@ -188,9 +188,11 @@ const LandingBanner = ({ quickstart, className }) => {
           <InstallButton
             css={css`
               background-color: white;
-              color: #000000;
+              color: #1d252c;
+
               &:hover {
                 background-color: white;
+                color: #1d252c;
               }
             `}
             quickstart={quickstart}

diff --git a/src/components/QuickstartHowToUse.js b/src/components/QuickstartHowToUse.js
@@ -1,75 +1,64 @@
 import React from 'react';
-import {
-  Link,
-  PageTools,
-} from '@newrelic/gatsby-theme-newrelic';
+import { Link, PageTools } from '@newrelic/gatsby-theme-newrelic';
 import { css } from '@emotion/react';
 import { quickstart } from '../types';
-import {
-  LOGIN_LINK,
-  SIGNUP_LINK,
-} from '../data/constants';
+import { LOGIN_LINK, SIGNUP_LINK } from '../data/constants';
 import InstallButton from './InstallButton';
 
-const QuickstartHowToUse = ({
-  quickstart,
-  trackQuickstart,
-  location
-}) => {
+const QuickstartHowToUse = ({ quickstart, trackQuickstart, location }) => {
   return (
     <>
       <div
         css={css`
-          @media screen and (min-width: 760px){
+          @media screen and (min-width: 760px) {
             margin-left: 156px;
             margin-right: 155px;
           }
 
-          @media screen and (max-width: 760px){
+          @media screen and (max-width: 760px) {
             display: grid;
             grid-template-columns: repeat(1, 1fr);
             margin-left: 40px;
             margin-right: 23px;
-        }
-        `}>
+          }
+        `}
+      >
         <PageTools.Section>
           <div
             css={css`
-            top: 0;
-            padding-top: 0.5rem;
-            height: 2.5rem;
-            width: 100%;
-            @media screen and (max-width: 760px){
-              padding-bottom: 58px !important;
-            }
-          `}
-          > 
-              <h1
-                css={css`
-                  `}>
-                How to use this quickstart
-              </h1>
+              top: 0;
+              padding-top: 0.5rem;
+              height: 2.5rem;
+              width: 100%;
+              @media screen and (max-width: 760px) {
+                padding-bottom: 58px !important;
+              }
+            `}
+          >
+            <h1 css={css``}>How to use this quickstart</h1>
           </div>
         </PageTools.Section>
 
         <PageTools.Section>
           <ul
-          css={css`
-          color: var(--black-text-color);
-          `}>
+            css={css`
+              color: var(--black-text-color);
+            `}
+          >
             <li
               css={css`
-        ::marker{
-          color: var(--link-font-color);
-        }
-        `}>
+                ::marker {
+                  color: var(--link-font-color);
+                }
+              `}
+            >
               <Link
                 css={css`
-              color: var(--link-font-color);
-              &:hover{
-                color: var(--hover-color);
-          }
-          `}
+                  color: var(--link-font-color);
+                  &:hover {
+                    color: var(--hover-color);
+                  }
+                `}
                 to={SIGNUP_LINK}
                 onClick={trackQuickstart(
                   'QuickstartDetailsSignUpClick',
@@ -81,11 +70,11 @@ const QuickstartHowToUse = ({
               for a free New Relic account or{' '}
               <Link
                 css={css`
-                    color: var(--link-font-color);
-                    &:hover{
-                      color: var(--hover-color);
-                    }
-           `}
+                  color: var(--link-font-color);
+                  &:hover {
+                    color: var(--hover-color);
+                  }
+                `}
                 to={LOGIN_LINK}
                 onClick={trackQuickstart(
                   'QuickstartDetailsLoginClick',
@@ -98,16 +87,20 @@ const QuickstartHowToUse = ({
             </li>
             <li
               css={css`
-                ::marker{
+                ::marker {
                   color: var(--link-font-color);
                 }
-         `}>Click the install button.</li>
+              `}
+            >
+              Click the install button.
+            </li>
             <li
               css={css`
-                ::marker{
+                ::marker {
                   color: var(--link-font-color);
                 }
-         `}>
+              `}
+            >
               Install the quickstart to get started or improve how you monitor
               your environment. They’re filled with pre-built resources like
               dashboards, instrumentation, and alerts.
@@ -116,20 +109,24 @@ const QuickstartHowToUse = ({
         </PageTools.Section>
 
         <PageTools.Section>
-          <InstallButton quickstart={quickstart}
+          <InstallButton
+            quickstart={quickstart}
             location={location}
             css={css`
-                            background: var(--background-color);
-                            padding: 13px 20px 14px 20px;
-                          `} />
+              background: var(--background-color);
+              &:hover {
+                background-color: #1d252c;
+              }
+            `}
+          />
         </PageTools.Section>
       </div>
     </>
   );
 };
 
 QuickstartHowToUse.propTypes = {
-  quickstart: quickstart.isRequired
+  quickstart: quickstart.isRequired,
 };
 
 export default QuickstartHowToUse;