Merge pull request #2515 from bandprotocol/fix-bug-and-clean

Scan: Fix bug and styles on each page
bandprotocol · Aug 21, 2020 · 3758a0c · 3758a0c
2 parents 9ddb028 + 5d04575
commit 3758a0c
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 134 deletions.
diff --git a/scan/src/components/ChainInfoHighlights.re b/scan/src/components/ChainInfoHighlights.re
@@ -16,7 +16,7 @@ module Styles = {
       zIndex(2),
       height(`px(130)),
       padding2(~v=`px(16), ~h=`px(24)),
-      Media.mobile([padding2(~v=`px(16), ~h=`px(12))]),
+      Media.mobile([padding2(~v=`px(10), ~h=`px(12)), height(`px(120))]),
     ]);
 
   let bgCard = (url: string) =>
@@ -119,7 +119,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
         }
       />
       <div className={Css.merge([CssHelper.flexBox(), Styles.creditContaier])}>
-        <Text value="Empowered by" size=Text.Sm color=Colors.gray7 />
+        <Text value="Powered by" size=Text.Sm color=Colors.gray7 />
         <HSpacing size=Spacing.xs />
         // TODO: make it to link later
         <Text value="Band Oracle" size=Text.Sm color=Colors.bandBlue weight=Text.Medium />

diff --git a/scan/src/components/account/AccountIndexDelegations.re b/scan/src/components/account/AccountIndexDelegations.re
@@ -127,7 +127,6 @@ let make = (~address) =>
              isMobile ? renderBodyMobile(delegation) : renderBody(delegation)
            })
          ->React.array}
-        <VSpacing size=Spacing.lg />
         <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />
       </>
     </div>

diff --git a/scan/src/components/account/AccountIndexRedelegate.re b/scan/src/components/account/AccountIndexRedelegate.re
@@ -174,7 +174,6 @@ let make = (~address) =>
              isMobile ? renderBodyMobile(redelegateEntry) : renderBody(redelegateEntry)
            )
          ->React.array}
-        <VSpacing size=Spacing.lg />
         <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />
       </>
     </div>

diff --git a/scan/src/components/account/AccountIndexTransactions.re b/scan/src/components/account/AccountIndexTransactions.re
@@ -43,11 +43,9 @@ let make = (~accountAddress: Address.t) => {
     {switch (txsCountSub) {
      | Data(txsCount) =>
        let pageCount = Page.getPageCount(txsCount, pageSize);
-       <>
-         <VSpacing size=Spacing.lg />
-         <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />
-         <VSpacing size=Spacing.lg />
-       </>;
+
+       <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />;
+
      | _ => React.null
      }}
   </div>;

diff --git a/scan/src/components/account/AccountIndexUnbonding.re b/scan/src/components/account/AccountIndexUnbonding.re
@@ -61,7 +61,7 @@ let renderBodyMobile =
     (operatorAddress |> Address.toBech32)
     ++ (completionTime |> MomentRe.Moment.toISOString)
     ++ (amount |> Coin.getBandAmountFromCoin |> Js.Float.toString);
-    
+
   <MobileCard
     values=InfoMobileCard.[
       ("VALIDATOR", Validator(operatorAddress, moniker, identity)),
@@ -149,7 +149,6 @@ let make = (~address) =>
              isMobile ? renderBodyMobile(unbondingEntry) : renderBody(unbondingEntry)
            )
          ->React.array}
-        <VSpacing size=Spacing.lg />
         <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />
       </>
     </div>

diff --git a/scan/src/components/data-source/DataSourceExecute.re b/scan/src/components/data-source/DataSourceExecute.re
@@ -36,8 +36,6 @@ module Styles = {
       border(`zero, `solid, Colors.white),
     ]);
 
-  let hFlex = style([display(`flex), flexDirection(`row)]);
-
   let withWH = (w, h) =>
     style([
       width(w),
@@ -47,16 +45,26 @@ module Styles = {
       alignItems(`center),
     ]);
 
-  let resultWrapper = (w, h, overflowChioce) =>
+  let resultContainer =
     style([
-      width(w),
-      height(h),
-      display(`flex),
-      flexDirection(`column),
-      justifyContent(`center),
       backgroundColor(Colors.white),
-      borderRadius(`px(4)),
-      overflow(overflowChioce),
+      margin2(~v=`px(20), ~h=`zero),
+      selector("> div + div", [borderTop(`px(1), `solid, Colors.gray9)]),
+    ]);
+  let resultBox = style([padding(`px(20))]);
+  let labelWrapper =
+    style([
+      flexShrink(0.),
+      flexGrow(0.),
+      flexBasis(`px(220)),
+      Media.mobile([flexBasis(`px(100))]),
+    ]);
+  let resultWrapper =
+    style([
+      flexShrink(0.),
+      flexGrow(0.),
+      flexBasis(`calc((`sub, `percent(100.), `px(220)))),
+      Media.mobile([flexBasis(`calc((`sub, `percent(100.), `px(100))))]),
     ]);
 };
 
@@ -74,7 +82,8 @@ let parameterInput = (name, index, setCalldataList) => {
     <input
       className=Styles.input
       type_="text"
-      placeholder="Value"
+      // TODO: Think about placeholder later
+      // placeholder="Value"
       onChange={event => {
         let newVal = ReactEvent.Form.target(event)##value;
         setCalldataList(prev => {
@@ -115,39 +124,31 @@ let resultRender = result => {
   | Error(err) =>
     <>
       <VSpacing size=Spacing.lg />
-      <div className={Styles.resultWrapper(`percent(100.), `px(90), `scroll)}>
-        <Text value=err />
-      </div>
+      <div className=Styles.resultWrapper> <Text value=err /> </div>
     </>
   | Success({returncode, stdout, stderr}) =>
-    <>
-      <VSpacing size=Spacing.lg />
-      <div className={Styles.resultWrapper(`percent(100.), `px(95), `auto)}>
-        <div className=Styles.hFlex>
-          <HSpacing size=Spacing.lg />
-          <div className={Styles.resultWrapper(`px(120), `px(12), `auto)}>
-            <Text value="Exit Status" color=Colors.gray6 weight=Text.Semibold />
-          </div>
-          <Text value={returncode |> string_of_int} />
+    <div className=Styles.resultContainer>
+      <div className={Css.merge([CssHelper.flexBox(), Styles.resultBox])}>
+        <div className=Styles.labelWrapper>
+          <Text value="Exit Status" color=Colors.gray6 weight=Text.Semibold />
         </div>
-        <VSpacing size=Spacing.md />
-        <div className=Styles.hFlex>
-          <HSpacing size=Spacing.lg />
-          <div className={Styles.resultWrapper(`px(120), `px(12), `auto)}>
-            <Text value="Output" color=Colors.gray6 weight=Text.Semibold />
-          </div>
-          <Text value=stdout code=true weight=Text.Semibold />
+        <div className=Styles.resultWrapper> <Text value={returncode |> string_of_int} /> </div>
+      </div>
+      <div className={Css.merge([CssHelper.flexBox(), Styles.resultBox])}>
+        <div className=Styles.labelWrapper>
+          <Text value="Output" color=Colors.gray6 weight=Text.Semibold />
         </div>
-        <VSpacing size=Spacing.md />
-        <div className=Styles.hFlex>
-          <HSpacing size=Spacing.lg />
-          <div className={Styles.resultWrapper(`px(120), `px(12), `auto)}>
-            <Text value="Error" color=Colors.gray6 weight=Text.Semibold />
-          </div>
+        <div className=Styles.resultWrapper> <Text value=stdout /> </div>
+      </div>
+      <div className={Css.merge([CssHelper.flexBox(), Styles.resultBox])}>
+        <div className=Styles.labelWrapper>
+          <Text value="Error" color=Colors.gray6 weight=Text.Semibold />
+        </div>
+        <div className=Styles.resultWrapper>
           <Text value=stderr code=true weight=Text.Semibold />
         </div>
       </div>
-    </>
+    </div>
   };
 };
 

diff --git a/scan/src/pages/BlockHomePage.re b/scan/src/pages/BlockHomePage.re
@@ -204,15 +204,11 @@ let make = () => {
               ->React.array}
              {isMobile
                 ? React.null
-                : <>
-                    <VSpacing size=Spacing.lg />
-                    <Pagination
-                      currentPage=page
-                      pageCount
-                      onPageChange={newPage => setPage(_ => newPage)}
-                    />
-                    <VSpacing size=Spacing.lg />
-                  </>}
+                : <Pagination
+                    currentPage=page
+                    pageCount
+                    onPageChange={newPage => setPage(_ => newPage)}
+                  />}
            </>;
          | _ =>
            Belt_Array.make(10, ApolloHooks.Subscription.NoData)

diff --git a/scan/src/pages/BlockIndexPage.re b/scan/src/pages/BlockIndexPage.re
@@ -132,15 +132,8 @@ let make = (~height) => {
       {switch (blockSub) {
        | Data({txn}) =>
          let pageCount = Page.getPageCount(txn, pageSize);
-         <>
-           <VSpacing size=Spacing.lg />
-           <Pagination
-             currentPage=page
-             pageCount
-             onPageChange={newPage => setPage(_ => newPage)}
-           />
-           <VSpacing size=Spacing.lg />
-         </>;
+
+         <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />;
        | _ => React.null
        }}
     </div>

diff --git a/scan/src/pages/DataSourceHomePage.re b/scan/src/pages/DataSourceHomePage.re
@@ -217,15 +217,11 @@ let make = () => {
               ->React.array}
              {isMobile
                 ? React.null
-                : <>
-                    <VSpacing size=Spacing.lg />
-                    <Pagination
-                      currentPage=page
-                      pageCount
-                      onPageChange={newPage => setPage(_ => newPage)}
-                    />
-                    <VSpacing size=Spacing.lg />
-                  </>}
+                : <Pagination
+                    currentPage=page
+                    pageCount
+                    onPageChange={newPage => setPage(_ => newPage)}
+                  />}
            </>;
          | _ =>
            Belt_Array.make(10, ApolloHooks.Subscription.NoData)

diff --git a/scan/src/pages/TxHomePage.re b/scan/src/pages/TxHomePage.re
@@ -63,15 +63,8 @@ let make = () => {
       {switch (txsCountSub) {
        | Data(txsCount) =>
          let pageCount = Page.getPageCount(txsCount, pageSize);
-         <>
-           <VSpacing size=Spacing.lg />
-           <Pagination
-             currentPage=page
-             pageCount
-             onPageChange={newPage => setPage(_ => newPage)}
-           />
-           <VSpacing size=Spacing.lg />
-         </>;
+
+         <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />;
        | _ => React.null
        }}
     </div>

diff --git a/scan/src/pages/ValidatorIndexPage.re b/scan/src/pages/ValidatorIndexPage.re
@@ -6,6 +6,7 @@ module Styles = {
       backgroundColor(Colors.white),
       boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(4), Css.rgba(0, 0, 0, 0.08))),
       padding(`px(24)),
+      height(`percent(100.)),
       Media.mobile([padding(`px(16))]),
     ]);
   let infoHeader =
@@ -14,6 +15,7 @@ module Styles = {
   let idContainer = style([marginBottom(`px(16)), Media.mobile([marginBottom(`px(8))])]);
   let containerSpacingSm = style([Media.mobile([marginTop(`px(16))])]);
 
+  let infoHeaderCustom = style([margin3(~top=`px(8), ~h=`px(12), ~bottom=`px(20))]);
   // Avatar Box
 
   let avatarContainer =
@@ -387,10 +389,9 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
               className={Css.merge([
                 CssHelper.flexBox(),
                 Styles.infoHeader,
-                CssHelper.px(~size=12, ()),
-                CssHelper.mb(~size=14, ()),
+                Styles.infoHeaderCustom,
               ])}>
-              <Heading value="Bonded Token" size=Heading.H5 />
+              <Heading value="Bonded Token" size=Heading.H4 />
               <HSpacing size=Spacing.xs />
               //TODO: remove mock message later
               <CTooltip tooltipText="Lorem ipsum, or lipsum as it is sometimes known.">
@@ -439,7 +440,7 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
                 CssHelper.mb(~size=24, ()),
                 Styles.infoHeader,
               ])}>
-              <Heading value="Oracle Data Report" size=Heading.H5 />
+              <Heading value="Oracle Data Report" size=Heading.H4 />
               <HSpacing size=Spacing.xs />
               <CTooltip
                 tooltipText="Last 90 days of Report" align=`center tooltipPlacement=CTooltip.Top>

diff --git a/scan/src/reusable/InfoMobileCard.re b/scan/src/reusable/InfoMobileCard.re
@@ -67,14 +67,7 @@ let make = (~info) => {
     <div className=Styles.vFlex> <TypeID.Block id=height position=TypeID.Subtitle /> </div>
   | Coin({value, hasDenom}) =>
     <AmountRender coins=value pos={hasDenom ? AmountRender.TxIndex : Fee} />
-  | Count(value) =>
-    <Text
-      value={value |> Format.iPretty}
-      size=Text.Md
-      weight=Text.Semibold
-      spacing={Text.Em(0.02)}
-      code=true
-    />
+  | Count(value) => <Text value={value |> Format.iPretty} size=Text.Md />
   | DataSource(id, name) =>
     <div className=Styles.vFlex>
       <TypeID.DataSource id />
@@ -90,24 +83,17 @@ let make = (~info) => {
   | RequestID(id) => <TypeID.Request id />
   | RequestResponse({request, responseTime}) =>
     <div className={CssHelper.flexBox()}>
-      <Text value={request |> Format.iPretty} weight=Text.Regular block=true ellipsis=true />
+      <Text value={request |> Format.iPretty} block=true ellipsis=true />
       <HSpacing size=Spacing.sm />
       <Text
         value={"(" ++ (responseTime |> Format.iPretty) ++ "ms)"}
-        weight=Text.Regular
         block=true
         color=Colors.gray6
       />
     </div>
   | ProgressBar({reportedValidators, minimumValidators, requestValidators}) =>
     <ProgressBar reportedValidators minimumValidators requestValidators />
-  | Float(value, digits) =>
-    <Text
-      value={value |> Format.fPretty(~digits?)}
-      size=Text.Md
-      spacing={Text.Em(0.02)}
-      code=true
-    />
+  | Float(value, digits) => <Text value={value |> Format.fPretty(~digits?)} />
   | KVTableReport(heading, rawReports) =>
     <KVTable
       tableWidth=480
@@ -142,21 +128,14 @@ let make = (~info) => {
         spacing={Text.Em(0.02)}
         nowrap=true
         ellipsis=true
-        code=true
         block=true
       />
     }
   | CopyButton(calldata) => <CopyButton data=calldata title="Copy as bytes" />
-  | Percentage(value, digits) =>
-    <Text
-      value={value |> Format.fPercent(~digits?)}
-      size=Text.Md
-      spacing={Text.Em(0.02)}
-      code=true
-    />
+  | Percentage(value, digits) => <Text value={value |> Format.fPercent(~digits?)} />
   | Text(text) =>
-    <Text value=text spacing={Text.Em(0.02)} nowrap=true ellipsis=true code=true block=true />
-  | Timestamp(time) => <Timestamp time size=Text.Md weight=Text.Regular code=true />
+    <Text value=text spacing={Text.Em(0.02)} nowrap=true ellipsis=true block=true />
+  | Timestamp(time) => <Timestamp time size=Text.Md weight=Text.Regular />
   | Validator(address, moniker, identity) =>
     <ValidatorMonikerLink
       validatorAddress=address
@@ -178,18 +157,13 @@ let make = (~info) => {
       <Text
         value={tokens |> Coin.getBandAmountFromCoin |> Format.fPretty(~digits=0)}
         color=Colors.gray7
-        code=true
-        weight=Text.Regular
-        spacing={Text.Em(0.02)}
         block=true
       />
       <HSpacing size=Spacing.sm />
       <Text
         value={"(" ++ (votingPercent |> Format.fPercent(~digits=2)) ++ ")"}
         color=Colors.gray6
-        code=true
         weight=Text.Thin
-        spacing={Text.Em(0.02)}
         block=true
       />
     </div>
@@ -198,16 +172,11 @@ let make = (~info) => {
     switch (uptimeOpt) {
     | Some(uptime) =>
       <div className=Styles.vFlex>
-        <Text
-          value={uptime |> Format.fPercent(~digits=2)}
-          spacing={Text.Em(0.02)}
-          code=true
-          nowrap=true
-        />
+        <Text value={uptime |> Format.fPercent(~digits=2)} spacing={Text.Em(0.02)} nowrap=true />
         <HSpacing size=Spacing.lg />
         <UptimeBar percent=uptime />
       </div>
-    | None => <Text value="N/A" spacing={Text.Em(0.02)} code=true nowrap=true />
+    | None => <Text value="N/A" nowrap=true />
     }
   | Loading(width) => <LoadingCensorBar width height=21 />
   | Nothing => React.null