Scan: Implemented the new layout for Validator Homepage

CHANGELOG_UNRELEASED.md

@@ -21,6 +21,7 @@
 
 ### Scan
 
+- (impv) [\#2561](https://github.com/bandprotocol/bandchain/pull/2561) Implemented the new layout for Validator Homepage
 - (impv) [\#2557](https://github.com/bandprotocol/bandchain/pull/2557) Fix and clean up copy button
 - (impv) [\#2552](https://github.com/bandprotocol/bandchain/pull/2552) Wire up related data source, handle nullable timestamp
 - (impv) [\#2550](https://github.com/bandprotocol/bandchain/pull/2550) Polish request index page

scan/src/AppStyle.re

@@ -171,7 +171,7 @@ body {
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -moz-osx-font-smoothing: grayscale;
-  background: #FFFFFF;
+  background: #FCFCFC;
 }
 
 code {

scan/src/Colors.re

@@ -67,6 +67,7 @@ let blue7 = Css.hex("142AB8");
 let blue8 = Css.hex("0B1D8E");
 let blue9 = Css.hex("0017AE");
 let blue10 = Css.hex("D7E1FF");
+let blue11 = Css.hex("99A7FF");
 
 let blueGray1 = Css.hex("F8FAFF");
 let blueGray2 = Css.hex("E2E3E9");

scan/src/components/ProgressBar.re

@@ -50,6 +50,16 @@ module Styles = {
         paddingLeft(`px(10)),
       ]),
     ]);
+
+  // uptimeBar
+
+  let progressUptimeInner = (p, color) =>
+    style([
+      width(`percent(p)),
+      height(`percent(100.)),
+      borderRadius(`px(7)),
+      background(color),
+    ]);
 };
 
 [@react.component]
@@ -75,3 +85,21 @@ let make = (~reportedValidators, ~minimumValidators, ~requestValidators) => {
     </div>
   </div>;
 };
+
+module Uptime = {
+  [@react.component]
+  let make = (~percent) => {
+    let color =
+      if (percent == 100.) {
+        Colors.bandBlue;
+      } else if (percent < 100. && percent >= 79.) {
+        Colors.blue11;
+      } else {
+        Colors.red4;
+      };
+
+    <div className=Styles.progressOuter>
+      <div className={Styles.progressUptimeInner(percent, color)} />
+    </div>;
+  };
+};

scan/src/components/ToggleButton.re

@@ -1,54 +1,49 @@
 module Styles = {
   open Css;
-
-  let container =
+  let buttonContainer = style([Media.mobile([width(`percent(100.))])]);
+  let baseBtn =
     style([
-      display(`flex),
-      alignItems(`center),
-      Media.mobile([marginTop(`px(16)), marginBottom(`px(36))]),
+      border(`px(1), `solid, Colors.bandBlue),
+      textAlign(`center),
+      Media.mobile([flexGrow(0.), flexShrink(0.), flexBasis(`percent(50.))]),
     ]);
-  let word = style([display(`flex), cursor(`pointer)]);
 
-  let toggle = isActive =>
+  let activeBtn = isActive => {
     style([
-      display(`flex),
-      justifyContent(isActive ? `flexStart : `flexEnd),
-      backgroundColor(Colors.gray2),
-      borderRadius(`px(15)),
-      padding2(~v=`px(2), ~h=`px(3)),
-      width(`px(45)),
-      cursor(`pointer),
-      boxShadow(
-        Shadow.box(
-          ~inset=true,
-          ~x=`zero,
-          ~y=`zero,
-          ~blur=`px(4),
-          isActive ? Colors.purple2 : Colors.gray7,
-        ),
-      ),
-      margin2(~h=`px(6), ~v=`zero),
-      minHeight(`px(20)),
-      Media.mobile([width(`px(60)), minHeight(`px(30)), margin2(~h=`px(12), ~v=`zero)]),
+      borderTopRightRadius(`zero),
+      borderBottomRightRadius(`zero),
+      backgroundColor(isActive ? Colors.bandBlue : Colors.white),
     ]);
-
-  let imgLogo = style([width(`px(15)), Media.mobile([width(`px(24))])]);
+  };
+  let inActiveBtn = isActive => {
+    style([
+      borderTopLeftRadius(`zero),
+      borderBottomLeftRadius(`zero),
+      backgroundColor(isActive ? Colors.white : Colors.bandBlue),
+    ]);
+  };
 };
 
 [@react.component]
 let make = (~isActive, ~setIsActive) => {
-  <div className=Styles.container>
-    <div onClick={_ => setIsActive(_ => true)} className=Styles.word>
-      <Text value="Active" color=Colors.purple8 />
-    </div>
-    <div className={Styles.toggle(isActive)} onClick={_ => setIsActive(oldVal => !oldVal)}>
-      <img
-        src={isActive ? Images.activeValidatorLogo : Images.inactiveValidatorLogo}
-        className=Styles.imgLogo
-      />
+  <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
+    <div
+      onClick={_ => setIsActive(_ => true)}
+      className={Css.merge([
+        CssHelper.btn(~px=22, ~py=5, ()),
+        Styles.baseBtn,
+        Styles.activeBtn(isActive),
+      ])}>
+      <Text value="Active" color={isActive ? Colors.white : Colors.bandBlue} />
     </div>
-    <div onClick={_ => setIsActive(_ => false)} className=Styles.word>
-      <Text value="Inactive" />
+    <div
+      onClick={_ => setIsActive(_ => false)}
+      className={Css.merge([
+        CssHelper.btn(~px=22, ~py=5, ()),
+        Styles.baseBtn,
+        Styles.inActiveBtn(isActive),
+      ])}>
+      <Text value="Inactive" color={isActive ? Colors.bandBlue : Colors.white} />
     </div>
   </div>;
 };