Scan: Polish revamp guanyu (Part 1)

CHANGELOG_UNRELEASED.md

@@ -18,6 +18,7 @@
 
 ### Scan
 
+- (impv) [\#2593](https://github.com/bandprotocol/bandchain/pull/2593) Polish UI
 - (feat) [\#2592](https://github.com/bandprotocol/bandchain/pull/2592) Added new voting overview and results box to proposal index page
 - (feat) [\#2591](https://github.com/bandprotocol/bandchain/pull/2591) Implemented the deposit overview, depositors table
 - (feat) [\#2578](https://github.com/bandprotocol/bandchain/pull/2578) Implemented the top part for proposal index page, markdown component

scan/src/Colors.re

@@ -89,6 +89,7 @@ let gray8 = Css.hex("333333");
 let gray9 = Css.hex("EAEAEA");
 
 let white = Css.hex("ffffff");
+let black = Css.hex("000000");
 
 let chartBalanceAtStake = Css.hex("ABB6FF");
 let chartReward = Css.hex("000C5C");

scan/src/components/ChainInfoHighlights.re

@@ -6,7 +6,7 @@ module Styles = {
       position(`relative),
       backgroundColor(Colors.white),
       borderRadius(`px(4)),
-      boxShadow(Shadow.box(~x=`zero, ~y=`px(4), ~blur=`px(8), Css.rgba(0, 0, 0, 0.1))),
+      boxShadow(Shadow.box(~x=`zero, ~y=`zero, ~blur=`px(4), Css.rgba(0, 0, 0, 0.08))),
       Media.smallMobile([margin2(~v=`zero, ~h=`px(-5))]),
     ]);
 
@@ -55,7 +55,7 @@ module HighlightCard = {
         {switch (valueAndExtraComponentSub) {
          | Data((valueComponent, extraComponent)) =>
            <>
-             <Text value=label size=Text.Lg color=Colors.gray7 weight=Text.Medium block=true />
+             <Text value=label size=Text.Lg color=Colors.gray7 weight=Text.Semibold block=true />
              valueComponent
              extraComponent
            </>
@@ -90,7 +90,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
           (
             {
               let bandPriceInUSD = "$" ++ (financial.usdPrice |> Format.fPretty(~digits=2));
-              <Text value=bandPriceInUSD size=Text.Xxxl color=Colors.gray8 code=true />;
+              <Text value=bandPriceInUSD size=Text.Xxxl color=Colors.gray7 code=true />;
             },
             {
               let bandPriceInBTC = financial.btcPrice;
@@ -103,7 +103,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                 ])}>
                 <Text
                   value={bandPriceInBTC->Format.fPretty ++ " BTC"}
-                  color=Colors.gray7
+                  color=Colors.gray6
                   code=true
                   spacing={Text.Em(0.01)}
                 />
@@ -135,7 +135,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
               <Text
                 value={"$" ++ (financial.usdMarketCap |> Format.fCurrency)}
                 size=Text.Xxxl
-                color=Colors.gray8
+                color=Colors.gray7
                 code=true
               />;
             },
@@ -180,7 +180,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
           (
             {
               let activeValidators = activeValidatorCount->Format.iPretty ++ " Nodes";
-              <Text value=activeValidators size=Text.Xxxl color=Colors.gray8 />;
+              <Text value=activeValidators size=Text.Xxxl color=Colors.gray7 />;
             },
             <Text
               value={

scan/src/components/HistoricalBondedGraph.re

@@ -12,7 +12,7 @@ module Styles = {
       justifyContent(`center),
       alignItems(`center),
       backgroundColor(white),
-    ])
+    ]);
 
   let chart = show => style([important(display(show ? `block : `none))]);
 };
@@ -74,10 +74,17 @@ function(data) {
           ],
           yAxes: [
             {
+              gridLines: {
+                display: true,
+                color: "#f2f2f2",
+                drawBorder: false,
+                zeroLineColor: '#eaeaea'
+              },
               ticks: {
                 fontFamily: 'Inter',
                 fontColor: '#888888',
                 fontSize: 10,
+                maxTicksLimit: 5,
                 stepSize: 100000,
                 callback: function(value) {
                   var ranges = [

scan/src/components/TotalRequestsGraph.re

@@ -97,10 +97,17 @@ function(data) {
           ],
           yAxes: [
             {
+              gridLines: {
+                display: true,
+                color: "#f2f2f2",
+                drawBorder: false,
+                zeroLineColor: '#eaeaea'
+              },
               ticks: {
                 fontFamily: 'Inter',
                 fontColor: '#888888',
                 fontSize: 10,
+                maxTicksLimit: 5,
                 callback: function(value) {
                   var ranges = [
                       { divider: 1e6, suffix: 'M' },

scan/src/components/data-source/DataSourceExecute.re

@@ -124,7 +124,7 @@ let resultRender = result => {
   | Error(err) =>
     <>
       <VSpacing size=Spacing.lg />
-      <div className=Styles.resultWrapper> <Text value=err /> </div>
+      <div className=Styles.resultWrapper> <Text value=err breakAll=true /> </div>
     </>
   | Success({returncode, stdout, stderr}) =>
     <div className=Styles.resultContainer>

scan/src/components/msgs/Msg.re

@@ -215,7 +215,7 @@ let make = (~msg: TxSub.Msg.t, ~width: int) => {
       </div>
       <TypeID.Request id />
       <HSpacing size=Spacing.sm />
-      <Text value={j|➜|j} size=Text.Xxl weight=Text.Bold code=true nowrap=true block=true />
+      <Icon name="far fa-arrow-right" color=Colors.black />
       <HSpacing size=Spacing.sm />
       <TypeID.OracleScript id=oracleScriptID />
       <HSpacing size=Spacing.sm />
@@ -242,7 +242,7 @@ let make = (~msg: TxSub.Msg.t, ~width: int) => {
           />
         </div>
       </div>
-      <Text value={j|➜|j} size=Text.Xxl weight=Text.Bold code=true nowrap=true block=true />
+      <Icon name="far fa-arrow-right" color=Colors.black />
       <HSpacing size=Spacing.sm />
       <TypeID.Request id=requestID />
     </div>
@@ -999,7 +999,7 @@ let make = (~msg: TxSub.Msg.t, ~width: int) => {
       </div>
       <AmountRender coins=amount />
       <HSpacing size=Spacing.sm />
-      <Text value={j|➜|j} size=Text.Xxl weight=Text.Bold code=true nowrap=true block=true />
+      <Icon name="far fa-arrow-right" color=Colors.black />
       <HSpacing size=Spacing.sm />
       <div className={Styles.rowWithWidth(200)}>
         <Text
@@ -1027,7 +1027,7 @@ let make = (~msg: TxSub.Msg.t, ~width: int) => {
       </div>
       <Text value=option weight=Text.Regular code=true nowrap=true block=true />
       <HSpacing size=Spacing.sm />
-      <Text value={j|➜|j} size=Text.Xxl weight=Text.Bold code=true nowrap=true block=true />
+      <Icon name="far fa-arrow-right" color=Colors.black />
       <HSpacing size=Spacing.sm />
       <div className={Styles.rowWithWidth(200)}>
         <Text
@@ -1076,7 +1076,7 @@ let make = (~msg: TxSub.Msg.t, ~width: int) => {
         <HSpacing size=Spacing.sm />
         <Text value="Inputs" />
         <HSpacing size=Spacing.sm />
-        <Text value={j|➜|j} size=Text.Xxl weight=Text.Bold code=true nowrap=true block=true />
+        <Icon name="far fa-arrow-right" color=Colors.black />
         <HSpacing size=Spacing.sm />
         <Text value={outputs |> Belt_List.length |> string_of_int} weight=Text.Semibold />
         <HSpacing size=Spacing.sm />

scan/src/pages/BlockHomePage.re

@@ -114,7 +114,7 @@ let make = () => {
             <Heading value="All Blocks" size=Heading.H2 marginBottom=40 marginBottomSm=24 />
             {switch (allSub) {
              | Data((_, blocksCount)) =>
-               <Heading value={blocksCount->string_of_int ++ " In total"} size=Heading.H3 />
+               <Heading value={(blocksCount |> Format.iPretty) ++ " In total"} size=Heading.H3 />
              | _ => <LoadingCensorBar width=65 height=21 />
              }}
           </Col.Grid>

scan/src/pages/DataSourceHomePage.re

@@ -57,7 +57,7 @@ let renderBody =
       </Col.Grid>
       <Col.Grid col=Col.Four>
         {switch (dataSourcesSub) {
-         | Data({description}) => <Text value=description weight=Text.Medium block=true />
+         | Data({description}) => <Text value=description block=true />
          | _ => <LoadingCensorBar width=270 height=15 />
          }}
       </Col.Grid>
@@ -166,7 +166,10 @@ let make = () => {
             <Heading value="All Data Sources" size=Heading.H2 marginBottom=40 marginBottomSm=24 />
             {switch (allSub) {
              | Data((_, dataSourcesCount)) =>
-               <Heading value={dataSourcesCount->string_of_int ++ " In total"} size=Heading.H3 />
+               <Heading
+                 value={(dataSourcesCount |> Format.iPretty) ++ " In total"}
+                 size=Heading.H3
+               />
              | _ => <LoadingCensorBar width=65 height=21 />
              }}
           </Col.Grid>

scan/src/pages/OracleScriptHomePage.re

@@ -4,7 +4,7 @@ module Styles = {
     style([
       backgroundColor(Colors.white),
       boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(4), Css.rgba(0, 0, 0, 0.08))),
-      padding(`px(24)),
+      padding3(~top=`px(24), ~h=`px(24), ~bottom=`px(16)),
       height(`calc((`sub, `percent(100.), `px(24)))),
       marginBottom(`px(24)),
     ]);
@@ -145,7 +145,7 @@ let renderBody =
         {switch (oracleScriptSub) {
          | Data({description}) =>
            let text = Ellipsis.format(~text=description, ~limit=70, ());
-           <Text value=text weight=Text.Medium block=true />;
+           <Text value=text block=true />;
          | _ => <LoadingCensorBar width=270 height=15 />
          }}
       </Col.Grid>
@@ -299,7 +299,10 @@ let make = () => {
           <Col.Grid>
             {switch (allSub) {
              | Data((_, oracleScriptsCount)) =>
-               <Heading value={oracleScriptsCount->string_of_int ++ " In total"} size=Heading.H3 />
+               <Heading
+                 value={(oracleScriptsCount |> Format.iPretty) ++ " In total"}
+                 size=Heading.H3
+               />
              | _ => <LoadingCensorBar width=65 height=21 />
              }}
           </Col.Grid>

scan/src/pages/RequestHomePage.re

@@ -147,7 +147,10 @@ let make = () => {
           <Heading value="All Requests" size=Heading.H2 marginBottom=40 marginBottomSm=24 />
           {switch (allSub) {
            | Data((_, totalRequestCount)) =>
-             <Heading value={totalRequestCount->string_of_int ++ " In total"} size=Heading.H3 />
+             <Heading
+               value={(totalRequestCount |> Format.iPretty) ++ " In total"}
+               size=Heading.H3
+             />
            | _ => <LoadingCensorBar width=65 height=21 />
            }}
         </Col.Grid>

scan/src/pages/TxHomePage.re

@@ -15,7 +15,7 @@ let make = () => {
           <Heading value="All Transactions" size=Heading.H2 marginBottom=40 marginBottomSm=24 />
           {switch (txsCountSub) {
            | Data(txsCountSub) =>
-             <Heading value={txsCountSub->string_of_int ++ " In total"} size=Heading.H3 />
+             <Heading value={(txsCountSub |> Format.iPretty) ++ " In total"} size=Heading.H3 />
            | _ => <LoadingCensorBar width=65 height=21 />
            }}
         </Col.Grid>

scan/src/pages/ValidatorIndexPage.re

@@ -287,7 +287,7 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
                      clickable=false
                      wordBreak=true
                    />
-                 | _ => <LoadingCensorBar width=284 height=15 />
+                 | _ => <LoadingCensorBar width=260 height=15 />
                  }}
               </Col.Grid>
               <Col.Grid col=Col.Six>
@@ -302,7 +302,7 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
                 {switch (allSub) {
                  | Data(({operatorAddress}, _, _)) =>
                    <AddressRender address=operatorAddress position=AddressRender.Subtitle />
-                 | _ => <LoadingCensorBar width=284 height=15 />
+                 | _ => <LoadingCensorBar width=260 height=15 />
                  }}
               </Col.Grid>
             </Row.Grid>
@@ -324,7 +324,7 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
                      size=Text.Lg
                      block=true
                    />
-                 | _ => <LoadingCensorBar width=284 height=15 />
+                 | _ => <LoadingCensorBar width=260 height=15 />
                  }}
               </Col.Grid>
               <Col.Grid col=Col.Six>
@@ -344,29 +344,29 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
                      size=Text.Lg
                      block=true
                    />
-                 | _ => <LoadingCensorBar width=284 height=15 />
+                 | _ => <LoadingCensorBar width=260 height=15 />
                  }}
               </Col.Grid>
             </Row.Grid>
             <Row.Grid marginBottom=24>
               <Col.Grid>
-                <Heading value="Website" size=Heading.H5 marginBottom=16 />
+                <Heading value="Website" size=Heading.H5 marginBottom=8 />
                 {switch (allSub) {
                  | Data(({website}, _, _)) =>
                    <a href=website target="_blank" className=Styles.link>
                      <Text value=website size=Text.Lg color=Colors.bandBlue block=true />
                    </a>
-                 | _ => <LoadingCensorBar width=284 height=15 />
+                 | _ => <LoadingCensorBar width=260 height=15 />
                  }}
               </Col.Grid>
             </Row.Grid>
-            <Row.Grid marginBottom=24>
+            <Row.Grid>
               <Col.Grid>
-                <Heading value="Description" size=Heading.H5 marginBottom=16 />
+                <Heading value="Description" size=Heading.H5 marginBottom=8 />
                 {switch (allSub) {
                  | Data(({details}, _, _)) =>
                    <p> <Text value=details size=Text.Lg color=Colors.gray7 block=true /> </p>
-                 | _ => <LoadingCensorBar width=284 height=15 />
+                 | _ => <LoadingCensorBar width=260 height=15 />
                  }}
               </Col.Grid>
             </Row.Grid>

scan/src/reusable/THead.re

@@ -14,6 +14,7 @@ module Styles = {
   let containerBase = height_ =>
     style([
       backgroundColor(Colors.blueGray1),
+      boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(2), Css.rgba(0, 0, 0, 0.05))),
       padding2(~v=`zero, ~h=`px(24)),
       selector("> div", [height(`px(height_))]),
     ]);