Website/Leaderboard - Implemented radio buttons for filtering (#5046)

* added radio buttons

* moved placement of radio buttons

* Added docs and fix to filter metrics

* minor css fixes

* css fixes and renamed filter to toggle to match figma scheme

* added key param

* added toggle button file

* reformat

Co-authored-by: Carey Janecka <careyjanecka@gmail.com>

frontend/website/src/Theme.re

@@ -16,6 +16,8 @@ module Colors = {
     `hsla((`deg(201.), `percent(71.), `percent(52.), `num(a)));
   let hyperlink = hyperlinkAlpha(1.0);
 
+  let blackAlpha = a => `rgba((0, 0, 0, a));
+
   let hyperlinkHover = `hex("0AA9FF");
   let hyperlinkLight = `hsl((`deg(201.), `percent(71.), `percent(70.)));
 
@@ -329,6 +331,35 @@ module H5 = {
   let basic = merge([init, style([lineHeight(`rem(1.5))])]);
 
   let tight = merge([init, style([lineHeight(`rem(1.25))])]);
+
+  let semiBold =
+    merge([
+      style([
+        Typeface.ibmplexsans,
+        fontStyle(`normal),
+        fontWeight(`semiBold),
+        fontSize(`rem(1.25)),
+        lineHeight(`rem(1.5)),
+        color(Colors.saville),
+      ]),
+    ]);
+};
+
+module H6 = {
+  open Css;
+  let init =
+    style([Typeface.ibmplexsans, fontStyle(`normal), textAlign(`center)]);
+
+  let extraSmall =
+    merge([
+      init,
+      style([
+        fontSize(`rem(0.75)),
+        letterSpacing(`rem(0.0875)),
+        fontWeight(`num(500)),
+        lineHeight(`rem(1.0)),
+      ]),
+    ]);
 };
 
 module Body = {

frontend/website/src/components/ToggleButton.re

@@ -0,0 +1,53 @@
+module ButtonStyles = {
+  open Css;
+
+  let textStyles =
+    merge([Theme.H6.extraSmall, style([textTransform(`uppercase)])]);
+
+  let hover =
+    hover([
+      backgroundColor(Theme.Colors.hyperlinkHover),
+      color(Theme.Colors.white),
+      textShadow(~y=`px(1), Theme.Colors.blackAlpha(0.25)),
+    ]);
+
+  let button =
+    merge([
+      textStyles,
+      style([
+        hover,
+        display(`flex),
+        justifyContent(`center),
+        alignItems(`center),
+        width(`rem(13.5)),
+        height(`rem(2.5)),
+        textAlign(`center),
+        backgroundColor(Theme.Colors.gandalf),
+        color(Theme.Colors.denimTwo),
+        cursor(`pointer),
+      ]),
+    ]);
+
+  let selectedButton =
+    merge([
+      button,
+      style([
+        boxShadow(~blur=`px(8), ~inset=true, Theme.Colors.blackAlpha(0.1)),
+        textShadow(~y=`px(1), Theme.Colors.blackAlpha(0.25)),
+        backgroundColor(Theme.Colors.hyperlink),
+        color(Theme.Colors.white),
+      ]),
+    ]);
+};
+
+[@react.component]
+let make = (~currentOption, ~onTogglePress, ~label) => {
+  <div
+    className={
+      currentOption == label
+        ? ButtonStyles.selectedButton : ButtonStyles.button
+    }
+    onClick={_ => onTogglePress(label)}>
+    {React.string(label)}
+  </div>;
+};

frontend/website/src/pages/LeaderboardPage.re

@@ -8,11 +8,82 @@ module Styles = {
     ]);
 };
 
+module ToggleButtons = {
+  module ToggleStyles = {
+    open Css;
+
+    let flexColumn =
+      style([
+        display(`flex),
+        flexDirection(`column),
+        justifyContent(`center),
+        height(`rem(4.5)),
+        media("(max-width: 960px)", [display(`none)]),
+      ]);
+
+    let buttonRow =
+      merge([
+        style([
+          display(`flex),
+          width(`rem(40.5)),
+          borderRadius(`px(4)),
+          overflow(`hidden),
+          selector(
+            "*:not(:last-child)",
+            [borderRight(`px(1), `solid, Theme.Colors.grey)],
+          ),
+        ]),
+      ]);
+  };
+
+  let toggleLabels = [|
+    "All Participants",
+    "Genesis Members",
+    "Non-Genesis Members",
+  |];
+
+  [@react.component]
+  let make = (~currentOption, ~onTogglePress) => {
+    let renderToggleButtons = () => {
+      toggleLabels
+      |> Array.map(label => {
+           <ToggleButton currentOption onTogglePress label key=label />
+         })
+      |> React.array;
+    };
+
+    <div className=ToggleStyles.flexColumn>
+      <h3 className=Theme.H5.semiBold> {React.string("View")} </h3>
+      <Spacer height=0.5 />
+      <div className=ToggleStyles.buttonRow> {renderToggleButtons()} </div>
+    </div>;
+  };
+};
+
+type state = {currentOption: string};
+let initialState = {currentOption: ToggleButtons.toggleLabels[0]};
+
+type action =
+  | Toggled(string);
+
+let reducer = (_, action) => {
+  switch (action) {
+  | Toggled(option) => {currentOption: option}
+  };
+};
+
 [@react.component]
 let make = (~lastManualUpdatedDate) => {
+  let (state, dispatch) = React.useReducer(reducer, initialState);
+
+  let onTogglePress = s => {
+    dispatch(Toggled(s));
+  };
+
   <Page title="Testnet Leaderboard">
     <Wrapped>
       <div className=Styles.page> <Summary lastManualUpdatedDate /> </div>
+      <ToggleButtons currentOption={state.currentOption} onTogglePress />
     </Wrapped>
   </Page>;
 };