Scan: Remove redundant emptyContainer styles

CHANGELOG_UNRELEASED.md

@@ -26,7 +26,8 @@
 
 ### Scan
 
-- (impv) [\#2695](https://github.com/bandprotocol/bandchain/pull/2695) Remove unused images and replace with icon.
+- (chore) [\#2713](https://github.com/bandprotocol/bandchain/pull/2713) Remove redundant emptyContainer styles
+- (chore) [\#2695](https://github.com/bandprotocol/bandchain/pull/2695) Remove unused images and replace with icon
 - (impv) [\#2693](https://github.com/bandprotocol/bandchain/pull/2693) Created the new button component and patched to all buttons
 - (impv) [\#2689](https://github.com/bandprotocol/bandchain/pull/2689) Styled the top part of account index page
 - (bugs) [\#2687](https://github.com/bandprotocol/bandchain/pull/2687) Fixed NaN number (Urgent)

scan/src/components/BlockIndexTxsTable.re

@@ -1,14 +1,6 @@
 module Styles = {
   open Css;
-  let emptyContainer =
-    style([
-      height(`px(300)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(white),
-    ]);
+
   let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 };
 
@@ -128,7 +120,7 @@ let make = (~txsSub: ApolloHooks.Subscription.variant(array(TxSub.t))) => {
                isMobile ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
              )
            ->React.array
-         : <div className=Styles.emptyContainer>
+         : <EmptyContainer>
              <img src=Images.noBlock className=Styles.noDataImage />
              <Heading
                size=Heading.H4
@@ -137,7 +129,7 @@ let make = (~txsSub: ApolloHooks.Subscription.variant(array(TxSub.t))) => {
                weight=Heading.Regular
                color=Colors.bandBlue
              />
-           </div>
+           </EmptyContainer>
      | _ =>
        Belt_Array.make(isMobile ? 1 : 10, ApolloHooks.Subscription.NoData)
        ->Belt_Array.mapWithIndex((i, noData) =>

scan/src/components/HistoricalBondedGraph.re

@@ -4,16 +4,6 @@ module Styles = {
   let container =
     style([width(`percent(100.)), height(`px(180)), margin2(~v=`zero, ~h=`auto)]);
 
-  let emptyContainer =
-    style([
-      height(`percent(100.)),
-      display(`flex),
-      flexDirection(`column),
-      justifyContent(`center),
-      alignItems(`center),
-      backgroundColor(white),
-    ]);
-
   let chart = show => style([important(display(show ? `block : `none))]);
 };
 
@@ -164,19 +154,17 @@ let make = (~operatorAddress) => {
 
     <div className=Styles.container>
       <canvas id="historicalBonded" className={Styles.chart(show)} />
-      {!show
-         ? <div className=Styles.emptyContainer>
-             <Icon name="fal fa-clock" size=40 color=Colors.bandBlue />
-             <VSpacing size={`px(16)} />
-             <Heading
-               size=Heading.H4
-               value="Insufficient data to visualize"
-               align=Heading.Center
-               weight=Heading.Regular
-               color=Colors.bandBlue
-             />
-           </div>
-         : React.null}
+      <EmptyContainer height={`percent(100.)} display={!show}>
+        <Icon name="fal fa-clock" size=40 color=Colors.bandBlue />
+        <VSpacing size={`px(16)} />
+        <Heading
+          size=Heading.H4
+          value="Insufficient data to visualize"
+          align=Heading.Center
+          weight=Heading.Regular
+          color=Colors.bandBlue
+        />
+      </EmptyContainer>
     </div>;
   | _ => <LoadingCensorBar fullWidth=true height=180 />
   };

scan/src/components/RequestProof.re

@@ -1,16 +1,6 @@
 module Styles = {
   open Css;
 
-  let emptyContainer =
-    style([
-      height(`px(130)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(Colors.blueGray1),
-    ]);
-
   let proofContainer =
     style([
       padding4(~top=`zero, ~left=`px(24), ~right=`px(24), ~bottom=`px(24)),
@@ -99,7 +89,7 @@ let make = (~request: RequestSub.t) => {
          : React.null}
     </>
   | None =>
-    <div className=Styles.emptyContainer>
+    <EmptyContainer height={`px(130)} backgroundColor=Colors.blueGray1>
       <img src=Images.loadingCircles className=Styles.loading />
       <Heading
         size=Heading.H4
@@ -108,6 +98,6 @@ let make = (~request: RequestSub.t) => {
         weight=Heading.Regular
         color=Colors.bandBlue
       />
-    </div>
+    </EmptyContainer>
   };
 };

scan/src/components/TotalRequestsGraph.re

@@ -23,16 +23,6 @@ module Styles = {
       paddingBottom(`px(16)),
     ]);
 
-  let emptyContainer = show =>
-    style([
-      height(`percent(100.)),
-      flexDirection(`column),
-      justifyContent(`center),
-      alignItems(`center),
-      backgroundColor(white),
-      display(show ? `flex : `none),
-    ]);
-
   let chart = show => style([important(display(show ? `block : `none))]);
 };
 
@@ -209,7 +199,7 @@ let make = () => {
        let show = data->Belt.Array.size > 5;
        <div className=Styles.innerCard>
          <canvas id="historicalRequest" className={Styles.chart(show)} />
-         <div className={Styles.emptyContainer(!show)}>
+         <EmptyContainer display={!show} height={`percent(100.)}>
            <Icon name="fal fa-clock" size=40 color=Colors.bandBlue />
            <VSpacing size={`px(16)} />
            <Heading
@@ -219,7 +209,7 @@ let make = () => {
              weight=Heading.Regular
              color=Colors.bandBlue
            />
-         </div>
+         </EmptyContainer>
        </div>;
      | _ => <LoadingCensorBar fullWidth=true height=200 />
      }}

scan/src/components/ValidatorsTable.re

@@ -1,15 +1,6 @@
 module Styles = {
   open Css;
 
-  let emptyContainer =
-    style([
-      height(`px(300)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(white),
-    ]);
   let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 
   let sortableTHead = isRight =>
@@ -406,7 +397,7 @@ let make = (~allSub, ~searchTerm, ~sortedBy, ~setSortedBy) => {
                     : renderBody(e.rank, Sub.resolve(e), votingPower);
                 })
               ->React.array
-            : <div className=Styles.emptyContainer>
+            : <EmptyContainer>
                 <img src=Images.noSource className=Styles.noDataImage />
                 <Heading
                   size=Heading.H4
@@ -415,7 +406,7 @@ let make = (~allSub, ~searchTerm, ~sortedBy, ~setSortedBy) => {
                   weight=Heading.Regular
                   color=Colors.bandBlue
                 />
-              </div>}
+              </EmptyContainer>}
        </>;
      | _ =>
        Belt_Array.make(pageSize, ApolloHooks.Subscription.NoData)

scan/src/components/account/AccountIndexDelegations.re

@@ -2,15 +2,6 @@ module Styles = {
   open Css;
 
   let tableWrapper = style([Media.mobile([padding2(~v=`px(16), ~h=`zero)])]);
-  let emptyContainer =
-    style([
-      height(`px(300)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(white),
-    ]);
   let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 };
 
@@ -181,7 +172,7 @@ let make = (~address) => {
                isMobile ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
              )
            ->React.array
-         : <div className=Styles.emptyContainer>
+         : <EmptyContainer>
              <img src=Images.noBlock className=Styles.noDataImage />
              <Heading
                size=Heading.H4
@@ -190,7 +181,7 @@ let make = (~address) => {
                weight=Heading.Regular
                color=Colors.bandBlue
              />
-           </div>
+           </EmptyContainer>
      | _ =>
        Belt_Array.make(pageSize, ApolloHooks.Subscription.NoData)
        ->Belt_Array.mapWithIndex((i, noData) =>

scan/src/components/account/AccountIndexRedelegate.re

@@ -2,15 +2,6 @@ module Styles = {
   open Css;
 
   let tableWrapper = style([Media.mobile([padding2(~v=`px(16), ~h=`zero)])]);
-  let emptyContainer =
-    style([
-      height(`px(300)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(white),
-    ]);
   let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 };
 
@@ -242,7 +233,7 @@ let make = (~address) => {
                isMobile ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
              )
            ->React.array
-         : <div className=Styles.emptyContainer>
+         : <EmptyContainer>
              <img src=Images.noBlock className=Styles.noDataImage />
              <Heading
                size=Heading.H4
@@ -251,7 +242,7 @@ let make = (~address) => {
                weight=Heading.Regular
                color=Colors.bandBlue
              />
-           </div>
+           </EmptyContainer>
      | _ =>
        Belt_Array.make(pageSize, ApolloHooks.Subscription.NoData)
        ->Belt_Array.mapWithIndex((i, noData) =>

scan/src/components/account/AccountIndexUnbonding.re

@@ -2,15 +2,6 @@ module Styles = {
   open Css;
 
   let tableWrapper = style([Media.mobile([padding2(~v=`px(16), ~h=`zero)])]);
-  let emptyContainer =
-    style([
-      height(`px(300)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(white),
-    ]);
   let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 };
 
@@ -194,7 +185,7 @@ let make = (~address) => {
                isMobile ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
              )
            ->React.array
-         : <div className=Styles.emptyContainer>
+         : <EmptyContainer>
              <img src=Images.noBlock className=Styles.noDataImage />
              <Heading
                size=Heading.H4
@@ -203,7 +194,7 @@ let make = (~address) => {
                weight=Heading.Regular
                color=Colors.bandBlue
              />
-           </div>
+           </EmptyContainer>
      | _ =>
        Belt_Array.make(pageSize, ApolloHooks.Subscription.NoData)
        ->Belt_Array.mapWithIndex((i, noData) =>

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

@@ -10,15 +10,6 @@ module Styles = {
       flexDirection(`column),
       alignItems(`center),
     ]);
-  let emptyContainer =
-    style([
-      height(`px(300)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(white),
-    ]);
   let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 };
 
@@ -219,7 +210,7 @@ let make = (~dataSourceID: ID.DataSource.t) => {
                     ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
                 )
               ->React.array
-            : <div className=Styles.emptyContainer>
+            : <EmptyContainer>
                 <img src=Images.noSource className=Styles.noDataImage />
                 <Heading
                   size=Heading.H4
@@ -228,7 +219,7 @@ let make = (~dataSourceID: ID.DataSource.t) => {
                   weight=Heading.Regular
                   color=Colors.bandBlue
                 />
-              </div>}
+              </EmptyContainer>}
          {isMobile
             ? React.null
             : <Pagination

scan/src/components/oracle-script/OracleScriptRequestTable.re

@@ -10,15 +10,6 @@ module Styles = {
       flexDirection(`column),
       alignItems(`center),
     ]);
-  let emptyContainer =
-    style([
-      height(`px(300)),
-      display(`flex),
-      justifyContent(`center),
-      alignItems(`center),
-      flexDirection(`column),
-      backgroundColor(white),
-    ]);
   let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 };
 
@@ -73,7 +64,8 @@ let renderBody = (reserveIndex, requestsSub: ApolloHooks.Subscription.variant(Re
                weight=Text.Regular
                textAlign=Text.Right
              />
-           | _ =>     <>
+           | _ =>
+             <>
                <LoadingCensorBar width=70 height=15 />
                <LoadingCensorBar width=80 height=15 mt=5 />
              </>
@@ -204,7 +196,7 @@ let make = (~oracleScriptID: ID.OracleScript.t) => {
                     ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
                 )
               ->React.array
-            : <div className=Styles.emptyContainer>
+            : <EmptyContainer>
                 <img src=Images.noSource className=Styles.noDataImage />
                 <Heading
                   size=Heading.H4
@@ -213,7 +205,7 @@ let make = (~oracleScriptID: ID.OracleScript.t) => {
                   weight=Heading.Regular
                   color=Colors.bandBlue
                 />
-              </div>}
+              </EmptyContainer>}
          {isMobile
             ? React.null
             : <Pagination