Merge pull request #6181 from MinaProtocol/website/button-fixes-variant

Button's href is a variant
MinaProtocol · Sep 29, 2020 · 0092249 · 0092249
2 parents 5dc95d8 + 448076c
commit 0092249
Show file tree

Hide file tree

Showing 23 changed files with 74 additions and 84 deletions.
diff --git a/frontend/website-redesign/src/components/AlternatingRowsButton.re b/frontend/website-redesign/src/components/AlternatingRowsButton.re
@@ -75,7 +75,7 @@ module Section = {
       title: string,
       description: string,
       buttonCopy: string,
-      buttonUrl: string,
+      buttonUrl: [`External(string) | `Internal(string)],
       image: string,
     };
 
@@ -114,7 +114,7 @@ module Section = {
                  {React.string(row.description)}
                </p>
                <div className=Styles.button>
-                 <Button bgColor=Theme.Colors.white>
+                 <Button href=row.buttonUrl bgColor=Theme.Colors.white>
                    {React.string(row.buttonCopy)}
                    <span className=SectionStyles.icon>
                      <Icon kind=Icon.ArrowRightMedium />
@@ -134,7 +134,7 @@ module Section = {
       title: string,
       description: string,
       linkCopy: string,
-      linkUrl: string,
+      linkUrl: [`External(string) | `Internal(string)],
       image: string,
     };
 

diff --git a/frontend/website-redesign/src/components/AlternatingSections.re b/frontend/website-redesign/src/components/AlternatingSections.re
@@ -72,7 +72,7 @@ module Section = {
       title: string,
       description: string,
       buttonCopy: string,
-      buttonUrl: string,
+      buttonUrl: [`External(string) | `Internal(string)],
       image: string,
     };
 

diff --git a/frontend/website-redesign/src/components/BlogModule.re b/frontend/website-redesign/src/components/BlogModule.re
@@ -73,7 +73,7 @@ let make = (~source) => {
       <Title
         copy="In the News"
         buttonCopy="See All Press"
-        buttonHref="/blog"
+        buttonHref=`Internal("/blog")
       />
     </Wrapped>
     <ListModule

diff --git a/frontend/website-redesign/src/components/Button.re b/frontend/website-redesign/src/components/Button.re
@@ -79,9 +79,12 @@ module Styles = {
 module Link = {
   [@react.component]
   let make = (~href, ~children) => {
-    Js.Re.test_(Js.Re.fromString("https?::"), href) ? 
-      <a href> children </a> :
+    switch (href) {
+    | `Scroll_to_top => <Next.Link href=""> children </Next.Link>
+    | `External(href) => <a className=Css.(style([textDecoration(`none)])) href> children </a>
+    | `Internal(href) =>
       <Next.Link href> children </Next.Link>
+    }
   };
 };
 
@@ -92,7 +95,7 @@ module Link = {
 [@react.component]
 let make =
     (
-      ~href="",
+      ~href,
       ~children=?,
       ~height=`rem(3.25),
       ~width=`rem(10.9),

diff --git a/frontend/website-redesign/src/components/Contributors.re b/frontend/website-redesign/src/components/Contributors.re
@@ -86,10 +86,6 @@ module GenesisMembersGrid = {
              "Meet the node operators, developers, and community builders making Mina happen.",
            )}
         </p>
-        <Button bgColor=Theme.Colors.orange width={`rem(13.5)}>
-          {React.string("See More Members ")}
-          <Icon kind=Icon.ArrowRightMedium size=1. />
-        </Button>
       </div>
       <TeamMember
         fullName="Greg | DeFidog"

diff --git a/frontend/website-redesign/src/components/EmailInput.re b/frontend/website-redesign/src/components/EmailInput.re
@@ -93,12 +93,11 @@ let make = () => {
            />
            <div className=Styles.submitButton>
              <Button
-               onClick=[%bs.raw "() => window.location = 'https://share.hsforms.com/1olz9N8_zTHW-RKQus2o3Kw4xuul'"]
                height={`rem(3.25)}
                width={`rem(7.93)}
                href={
-                 "https://share.hsforms.com/1olz9N8_zTHW-RKQus2o3Kw4xuul?email="
-                 ++ email
+                 `External("https://share.hsforms.com/1olz9N8_zTHW-RKQus2o3Kw4xuul?email="
+                 ++ email)
                }
                dark=true>
                {React.string("Submit")}

diff --git a/frontend/website-redesign/src/components/FeaturedSingleRow.re b/frontend/website-redesign/src/components/FeaturedSingleRow.re
@@ -12,7 +12,7 @@ module Row = {
     buttonTextColor: Css.color,
     buttonText: string,
     dark: bool,
-    href: string,
+    href: [`External(string) | `Internal(string)],
   };
 
   type t = {

diff --git a/frontend/website-redesign/src/components/Footer.re b/frontend/website-redesign/src/components/Footer.re
@@ -81,24 +81,28 @@ module SocialIcons = {
         height(`rem(2.)),
         color(white),
       ]);
+
+    let anchor = style([
+      textDecoration(`none)
+    ]);
   };
 
   [@react.component]
   let make = () => {
     <div className=Styles.iconsRow>
-      <Next.Link href="https://discord.com/invite/Vexf4ED">
+      <a className=Styles.anchor href="https://discord.com/invite/Vexf4ED">
         <Icon kind=Icon.Discord size=2. />
-      </Next.Link>
-      <Next.Link href="https://twitter.com/minaprotocol">
+      </a>
+      <a className=Styles.anchor href="https://twitter.com/minaprotocol">
         <Icon kind=Icon.Twitter size=2. />
-      </Next.Link>
-      <Next.Link href="https://facebook.com/minaprotocol">
+      </a>
+      <a className=Styles.anchor href="https://facebook.com/minaprotocol">
         <Icon kind=Icon.Facebook size=2. />
-      </Next.Link>
-      <Next.Link href="https://t.me/minaprotocol">
+      </a>
+      <a className=Styles.anchor href="https://t.me/minaprotocol">
         <Icon kind=Icon.Telegram size=2. />
-      </Next.Link>
-      <Next.Link href=""> <Icon kind=Icon.WeChat size=2. /> </Next.Link>
+      </a>
+      <a className=Styles.anchor href="https://forums.codaprotocol.com/t/coda-protocol-chinese-resources/200"> <Icon kind=Icon.WeChat size=2. /> </a>
     </div>;
   };
 };
@@ -266,6 +270,7 @@ let make = () => {
     <Subfooter />
     <div className=Styles.backToTopButton>
       <Button
+        href=`Scroll_to_top
         height={`rem(4.125)}
         width={`rem(3.75)}
         bgColor=Theme.Colors.black

diff --git a/frontend/website-redesign/src/components/GenesisMemberProfile.re b/frontend/website-redesign/src/components/GenesisMemberProfile.re
@@ -121,14 +121,6 @@ let make = (~name, ~photo, ~quote, ~location, ~twitter, ~github, ~blogPost) => {
            }}
         </div>
       </div>
-      <div className=Styles.button>
-        <Button bgColor=Theme.Colors.white>
-          <a className=Styles.buttonLink href=blogPost>
-            {React.string("Learn More")}
-          </a>
-          <Icon kind=Icon.ArrowRightMedium />
-        </Button>
-      </div>
     </div>
   </div>;
 };
diff --git a/frontend/website-redesign/src/components/HomepageHero.re b/frontend/website-redesign/src/components/HomepageHero.re
@@ -155,7 +155,7 @@ let make = (~backgroundImg) => {
             </span>
             <span className=Styles.heroButton>
               <Button
-                href="/tech"
+                href=`Internal("/tech")
                 bgColor=Theme.Colors.white
                 paddingX=1.
                 width={`rem(13.5)}>

diff --git a/frontend/website-redesign/src/components/Nav.re b/frontend/website-redesign/src/components/Nav.re
@@ -246,7 +246,7 @@ let make = (~dark=false) => {
       <NavLink label="Blog" href="/blog" dark />
       <Spacer width=1.5 />
       <div className=Styles.ctaContainer>
-        <Button href="/genesis" width={`rem(13.)} paddingX=1. dark>
+        <Button href=`Internal("/genesis") width={`rem(13.)} paddingX=1. dark>
           <img src="/static/img/promo-logo.svg" height="40" />
           <Spacer width=0.5 />
           <span> {React.string("Join Genesis Token Program")} </span>

diff --git a/frontend/website-redesign/src/components/ProfileHero.re b/frontend/website-redesign/src/components/ProfileHero.re
@@ -164,19 +164,15 @@ module Links = {
   let make = () => {
     <div className=Styles.buttonAndLinks>
       <Button
-        href="https://forums.minaprotocol.com/t/testnet-beta-release-3-2b-challenges/435"
+        href=`External("https://forums.minaprotocol.com/t/testnet-beta-release-3-2b-challenges/435")
         bgColor=Theme.Colors.black>
         {React.string("Current Challenges")}
       </Button>
       <div className=Styles.linksColumn>
-        <Next.Link href="https://bit.ly/leaderboardFAQ">
-          <a className=Styles.link> {React.string("Leaderboard FAQ")} </a>
-        </Next.Link>
-        <Next.Link href="https://bit.ly/MinaDiscord">
-          <a className=Styles.link>
+          <a href="https://bit.ly/leaderboardFAQ" className=Styles.link> {React.string("Leaderboard FAQ")} </a>
+          <a href="https://bit.ly/MinaDiscord" className=Styles.link>
             {React.string("Discord #leaderboard-qa Channel")}
           </a>
-        </Next.Link>
       </div>
     </div>;
   };

diff --git a/frontend/website-redesign/src/components/SecuredBySection.re b/frontend/website-redesign/src/components/SecuredBySection.re
@@ -234,7 +234,7 @@ let make = () => {
           </p>
           <Spacer height=2. />
           <span className=Styles.button>
-            <Button bgColor=Theme.Colors.orange dark=true href="/docs">
+            <Button bgColor=Theme.Colors.orange dark=true href=`Internal("/docs")>
               {React.string("Get Started")}
               <Icon kind=Icon.ArrowRightMedium />
             </Button>

diff --git a/frontend/website-redesign/src/components/Summary.re b/frontend/website-redesign/src/components/Summary.re
@@ -296,7 +296,7 @@ let make = () => {
       <div className=Styles.heroRight>
         <div className=Styles.buttonRow>
           <Button
-            href="https://bit.ly/3dNmPle"
+            href=`External("https://bit.ly/3dNmPle")
             bgColor=Theme.Colors.black
             width={`rem(15.)}
             paddingX=1.5>
@@ -306,7 +306,7 @@ let make = () => {
             <Icon kind=Icon.ArrowRightMedium />
           </Button>
           <Spacer width=2.0 height=1.0 />
-          <Button bgColor=Theme.Colors.black width={`rem(13.)} paddingX=1.5>
+          <Button href=`Internal("/genesis") bgColor=Theme.Colors.black width={`rem(13.)} paddingX=1.5>
             <p className=Theme.Type.buttonLabel>
               {React.string("Genesis Program")}
             </p>

diff --git a/frontend/website-redesign/src/components/WorkWithMina.re b/frontend/website-redesign/src/components/WorkWithMina.re
@@ -141,10 +141,11 @@ let make = () => {
   <div className=Styles.container>
     <div className=Styles.headerCopy>
       <h2 className=Styles.header> {React.string("Work with Mina")} </h2>
+      /* TODO: Re-enable when we have an href for this 
       <Button bgColor=Theme.Colors.black width={`rem(14.6)} paddingX=1.3>
         {React.string("See All Opportunities")}
         <Icon kind=Icon.ArrowRightMedium />
-      </Button>
+      </Button> */
     </div>
     <div className=Styles.content> <FeaturedContent /> <ContentColumn /> </div>
   </div>;

diff --git a/frontend/website-redesign/src/pages/Blog.re b/frontend/website-redesign/src/pages/Blog.re
@@ -115,7 +115,7 @@ module MorePosts = {
       <BlogModule.Title
         copy="More Blog posts"
         buttonCopy="See all posts"
-        buttonHref="/blog/all"
+        buttonHref=`Internal("/blog/all")
       />
       <Content posts />
     </div>;
@@ -180,9 +180,7 @@ let make = (~posts) => {
             buttonTextColor: Theme.Colors.white,
             buttonText: "Read more",
             dark: true,
-            href:
-              {Js.log("/blog/" ++ featured.slug);
-               "/blog/" ++ featured.slug},
+            href: `Internal("/blog/" ++ featured.slug),
           },
         }
       />

diff --git a/frontend/website-redesign/src/pages/Community.re b/frontend/website-redesign/src/pages/Community.re
@@ -227,7 +227,7 @@ let make = (~profiles) => {
           buttonTextColor: Theme.Colors.white,
           buttonText: "Apply now",
           dark: true,
-          href: "/genesis",
+          href: `Internal("/genesis"),
         },
       }>
       <Spacer height=4. />
@@ -276,7 +276,7 @@ let make = (~profiles) => {
                "Mina rewards community members for contributing to Testnet with Testnet Points, making them stronger applicants for the Genesis Program. ",
              )}
           </p>
-          <Button bgColor=Theme.Colors.orange href="/leaderboard">
+          <Button bgColor=Theme.Colors.orange href=`Internal("/leaderboard")>
             {React.string("See The Full Leaderboard")}
             <Icon kind=Icon.ArrowRightSmall />
           </Button>
@@ -310,7 +310,7 @@ let make = (~profiles) => {
             buttonColor: Theme.Colors.white,
             buttonTextColor: Theme.Colors.orange,
             dark: false,
-            href: Constants.codeOfConductUrl,
+            href: `External(Constants.codeOfConductUrl),
           },
         }
       />

diff --git a/frontend/website-redesign/src/pages/Demo.re b/frontend/website-redesign/src/pages/Demo.re
@@ -48,19 +48,19 @@ let make = () => {
       <div className=Styles.container>
         /*** Regular buttons */
 
-          <Button bgColor=Theme.Colors.orange>
+          <Button href=`Scroll_to_top bgColor=Theme.Colors.orange>
             {React.string("Button Label")}
             <Icon kind=Icon.ArrowRightMedium />
           </Button>
-          <Button bgColor=Theme.Colors.mint dark=true>
+          <Button href=`Scroll_to_top bgColor=Theme.Colors.mint dark=true>
             {React.string("Button label ")}
             <Icon kind=Icon.ArrowRightMedium />
           </Button>
-          <Button bgColor=Theme.Colors.black>
+          <Button href=`Scroll_to_top bgColor=Theme.Colors.black>
             {React.string("Button label")}
             <Icon kind=Icon.ArrowRightMedium />
           </Button>
-          <Button bgColor=Theme.Colors.white>
+          <Button href=`Scroll_to_top bgColor=Theme.Colors.white>
             {React.string("Button label")}
             <Icon kind=Icon.ArrowRightMedium />
           </Button>
@@ -72,7 +72,7 @@ let make = () => {
             </span>
           </PromoButton>
           /***Join Genesis Button, uses the CoreProtocolLarge icon */
-          <Button bgColor=Theme.Colors.orange paddingX=1. paddingY=0.5>
+          <Button href=`Scroll_to_top bgColor=Theme.Colors.orange paddingX=1. paddingY=0.5>
             <Icon kind=Icon.CoreProtocolLarge size=2.5 />
             <span className=Styles.joinGenesisButton>
               {React.string("Join Genesis + Earn Mina")}
@@ -143,7 +143,7 @@ let make = () => {
               AlternatingSections.Section.SimpleRow.title: "Run a Node",
               description: "You don't have to have expensive hardware, wait days for the blockchain to sync, or use a ton of compute power to participate in consensus. Just follow clear, straightforward instructions and connect to the live peer-to-peer Mina network.",
               buttonCopy: "Get Started",
-              buttonUrl: "/",
+              buttonUrl: `Internal("/"),
               image: "/static/img/ProgrammableMoney.png",
             },
           |])

diff --git a/frontend/website-redesign/src/pages/Genesis.re b/frontend/website-redesign/src/pages/Genesis.re
@@ -351,9 +351,7 @@ let make = (~profiles) => {
       }>
       <Spacer height=2. />
       <Button
-        onClick=[%bs.raw
-          "() => window.location = 'https://docs.google.com/forms/d/e/1FAIpQLSebjJSGobXHIOPlnjnGtp0InsNFU3Z7Sig_xoqCfeaKebJ0XQ/viewform'"
-        ]
+        href=`External("https://docs.google.com/forms/d/e/1FAIpQLSebjJSGobXHIOPlnjnGtp0InsNFU3Z7Sig_xoqCfeaKebJ0XQ/viewform")
         bgColor=Theme.Colors.black>
         {React.string("Apply Now")}
         <Icon kind=Icon.ArrowRightMedium />
@@ -375,7 +373,7 @@ let make = (~profiles) => {
             buttonColor: Theme.Colors.orange,
             buttonTextColor: Theme.Colors.white,
             dark: false,
-            href: "#",
+            href: `External("https://docs.google.com/forms/d/e/1FAIpQLSebjJSGobXHIOPlnjnGtp0InsNFU3Z7Sig_xoqCfeaKebJ0XQ/viewform"),
           },
         }
       />
@@ -404,7 +402,7 @@ let make = (~profiles) => {
                  "Mina rewards community members for contributing to Testnet with Testnet Points, making them stronger applicants for the Genesis Program. ",
                )}
             </p>
-            <Button bgColor=Theme.Colors.orange href="/leaderboard">
+            <Button bgColor=Theme.Colors.orange href=`Internal("/leaderboard")>
               {React.string("See The Full Leaderboard")}
               <Icon kind=Icon.ArrowRightSmall />
             </Button>