Skip to content
This repository has been archived by the owner on Nov 16, 2022. It is now read-only.

Scan: Remove redundant emptyContainer styles #2713

Merged
merged 9 commits into from
Oct 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG_UNRELEASED.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
14 changes: 3 additions & 11 deletions scan/src/components/BlockIndexTxsTable.re
Original file line number Diff line number Diff line change
@@ -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))]);
};

Expand Down Expand Up @@ -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
Expand All @@ -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) =>
Expand Down
34 changes: 11 additions & 23 deletions scan/src/components/HistoricalBondedGraph.re
Original file line number Diff line number Diff line change
Expand Up @@ -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))]);
};

Expand Down Expand Up @@ -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 />
};
Expand Down
14 changes: 2 additions & 12 deletions scan/src/components/RequestProof.re
Original file line number Diff line number Diff line change
@@ -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)),
Expand Down Expand Up @@ -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
Expand All @@ -108,6 +98,6 @@ let make = (~request: RequestSub.t) => {
weight=Heading.Regular
color=Colors.bandBlue
/>
</div>
</EmptyContainer>
};
};
14 changes: 2 additions & 12 deletions scan/src/components/TotalRequestsGraph.re
Original file line number Diff line number Diff line change
Expand Up @@ -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))]);
};

Expand Down Expand Up @@ -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
Expand All @@ -219,7 +209,7 @@ let make = () => {
weight=Heading.Regular
color=Colors.bandBlue
/>
</div>
</EmptyContainer>
</div>;
| _ => <LoadingCensorBar fullWidth=true height=200 />
}}
Expand Down
13 changes: 2 additions & 11 deletions scan/src/components/ValidatorsTable.re
Original file line number Diff line number Diff line change
@@ -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 =>
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down
13 changes: 2 additions & 11 deletions scan/src/components/account/AccountIndexDelegations.re
Original file line number Diff line number Diff line change
Expand Up @@ -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))]);
};

Expand Down Expand Up @@ -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
Expand All @@ -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) =>
Expand Down
13 changes: 2 additions & 11 deletions scan/src/components/account/AccountIndexRedelegate.re
Original file line number Diff line number Diff line change
Expand Up @@ -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))]);
};

Expand Down Expand Up @@ -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
Expand All @@ -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) =>
Expand Down
13 changes: 2 additions & 11 deletions scan/src/components/account/AccountIndexUnbonding.re
Original file line number Diff line number Diff line change
Expand Up @@ -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))]);
};

Expand Down Expand Up @@ -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
Expand All @@ -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) =>
Expand Down
13 changes: 2 additions & 11 deletions scan/src/components/data-source/DataSourceRequestTable.re
Original file line number Diff line number Diff line change
Expand Up @@ -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))]);
};

Expand Down Expand Up @@ -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
Expand All @@ -228,7 +219,7 @@ let make = (~dataSourceID: ID.DataSource.t) => {
weight=Heading.Regular
color=Colors.bandBlue
/>
</div>}
</EmptyContainer>}
{isMobile
? React.null
: <Pagination
Expand Down
16 changes: 4 additions & 12 deletions scan/src/components/oracle-script/OracleScriptRequestTable.re
Original file line number Diff line number Diff line change
Expand Up @@ -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))]);
};

Expand Down Expand Up @@ -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 />
</>
Expand Down Expand Up @@ -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
Expand All @@ -213,7 +205,7 @@ let make = (~oracleScriptID: ID.OracleScript.t) => {
weight=Heading.Regular
color=Colors.bandBlue
/>
</div>}
</EmptyContainer>}
{isMobile
? React.null
: <Pagination
Expand Down
Loading