Skip to content

Commit 5032e82

Browse files
mintdartmintdart
committed
update styles
1 parent 14d44b0 commit 5032e82

File tree

5 files changed

+86
-86
lines changed

5 files changed

+86
-86
lines changed

‎src/containers/ProtocolOverview/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export function ProtocolOverviewLayout({
178178
</p>
179179
))}
180180

181-
<div className="isolate flex flex-col gap-2">
181+
<div className="isolate flex flex-1 flex-col gap-2">
182182
<div className="flex w-full overflow-x-auto text-xs font-medium">
183183
{otherProtocols?.length > 1 && (
184184
<Ariakit.MenuProvider>

‎src/pages/cex/assets/[...cex].tsx‎

Lines changed: 75 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { maxAgeForNext } from '~/api'
33
import { IBarChartProps, IChartProps, IPieChartProps } from '~/components/ECharts/types'
44
import { LazyChart } from '~/components/LazyChart'
55
import { LocalLoader } from '~/components/Loaders'
6+
import { oldBlue } from '~/constants/colors'
67
import { ProtocolOverviewLayout } from '~/containers/ProtocolOverview/Layout'
78
import { getProtocol } from '~/containers/ProtocolOverview/queries'
89
import { formatTvlsByChain, useFetchProtocolAddlChartsData } from '~/containers/ProtocolOverview/utils'
@@ -78,92 +79,90 @@ export default function Protocols(props) {
7879
tab="assets"
7980
isCEX={true}
8081
>
81-
<div className="grid grid-cols-2 rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2">
82-
{isLoading ? (
83-
<div className="col-span-full flex min-h-[400px] items-center justify-center">
84-
<LocalLoader />
85-
</div>
86-
) : (
87-
<>
88-
{chainsSplit && chainsUnique?.length > 1 && (
89-
<LazyChart className="relative col-span-full flex min-h-[400px] flex-col xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
82+
{isLoading ? (
83+
<div className="flex flex-1 items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
84+
<LocalLoader />
85+
</div>
86+
) : (
87+
<div className="grid grid-cols-2 gap-2">
88+
{chainsSplit && chainsUnique?.length > 1 && (
89+
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
90+
<React.Suspense fallback={<></>}>
91+
<AreaChart
92+
chartData={chainsSplit}
93+
title="Chains"
94+
customLegendName="Chain"
95+
customLegendOptions={chainsUnique}
96+
valueSymbol="$"
97+
/>
98+
</React.Suspense>
99+
</LazyChart>
100+
)}
101+
102+
{tokenBreakdownUSD?.length > 1 && tokensUnique?.length > 0 && (
103+
<>
104+
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
90105
<React.Suspense fallback={<></>}>
91106
<AreaChart
92-
chartData={chainsSplit}
93-
title="Chains"
94-
customLegendName="Chain"
95-
customLegendOptions={chainsUnique}
107+
chartData={tokenBreakdownUSD}
108+
title="Token Values (USD)"
109+
customLegendName="Token"
110+
customLegendOptions={tokensUnique}
96111
valueSymbol="$"
97112
/>
98113
</React.Suspense>
99114
</LazyChart>
100-
)}
115+
</>
116+
)}
101117

102-
{tokenBreakdownUSD?.length > 1 && tokensUnique?.length > 0 && (
103-
<>
104-
<LazyChart className="relative col-span-full flex min-h-[400px] flex-col xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
118+
{tokenBreakdownUSD?.length > 1 && tokensUnique?.length > 0 && (
119+
<>
120+
{tokenBreakdownPieChart?.length > 0 && (
121+
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
105122
<React.Suspense fallback={<></>}>
106-
<AreaChart
107-
chartData={tokenBreakdownUSD}
108-
title="Token Values (USD)"
109-
customLegendName="Token"
110-
customLegendOptions={tokensUnique}
111-
valueSymbol="$"
112-
/>
123+
<PieChart title="Tokens Breakdown" chartData={tokenBreakdownPieChart} />
113124
</React.Suspense>
114125
</LazyChart>
115-
</>
116-
)}
117-
118-
{tokenBreakdownUSD?.length > 1 && tokensUnique?.length > 0 && (
119-
<>
120-
{tokenBreakdownPieChart?.length > 0 && (
121-
<LazyChart className="relative col-span-full flex min-h-[440px] flex-col pt-10 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
122-
<React.Suspense fallback={<></>}>
123-
<PieChart title="Tokens Breakdown" chartData={tokenBreakdownPieChart} />
124-
</React.Suspense>
125-
</LazyChart>
126-
)}
127-
</>
128-
)}
129-
130-
{tokenBreakdown?.length > 1 && tokensUnique?.length > 0 && (
131-
<LazyChart className="relative col-span-full flex min-h-[400px] flex-col xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
132-
<React.Suspense fallback={<></>}>
133-
<AreaChart
134-
chartData={tokenBreakdown}
135-
title="Token Balances (Raw Quantities)"
136-
customLegendName="Token"
137-
customLegendOptions={tokensUnique}
138-
/>
139-
</React.Suspense>
140-
</LazyChart>
141-
)}
142-
143-
{usdInflows?.length > 0 && (
144-
<LazyChart className="relative col-span-full flex min-h-[400px] flex-col xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
145-
<React.Suspense fallback={<></>}>
146-
<BarChart chartData={usdInflows} color={props.backgroundColor} title="USD Inflows" valueSymbol="$" />
147-
</React.Suspense>
148-
</LazyChart>
149-
)}
150-
{tokenInflows?.length > 0 && tokensUnique?.length > 0 && (
151-
<LazyChart className="relative col-span-full flex min-h-[400px] flex-col xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
152-
<React.Suspense fallback={<></>}>
153-
<BarChart
154-
chartData={tokenInflows}
155-
title="Token Inflows"
156-
customLegendName="Token"
157-
customLegendOptions={tokensUnique}
158-
hideDefaultLegend={true}
159-
valueSymbol="$"
160-
/>
161-
</React.Suspense>
162-
</LazyChart>
163-
)}
164-
</>
165-
)}
166-
</div>
126+
)}
127+
</>
128+
)}
129+
130+
{tokenBreakdown?.length > 1 && tokensUnique?.length > 0 && (
131+
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
132+
<React.Suspense fallback={<></>}>
133+
<AreaChart
134+
chartData={tokenBreakdown}
135+
title="Token Balances (Raw Quantities)"
136+
customLegendName="Token"
137+
customLegendOptions={tokensUnique}
138+
/>
139+
</React.Suspense>
140+
</LazyChart>
141+
)}
142+
143+
{usdInflows?.length > 0 && (
144+
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
145+
<React.Suspense fallback={<></>}>
146+
<BarChart chartData={usdInflows} color={oldBlue} title="USD Inflows" valueSymbol="$" />
147+
</React.Suspense>
148+
</LazyChart>
149+
)}
150+
{tokenInflows?.length > 0 && tokensUnique?.length > 0 && (
151+
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
152+
<React.Suspense fallback={<></>}>
153+
<BarChart
154+
chartData={tokenInflows}
155+
title="Inflows by Token"
156+
customLegendName="Token"
157+
customLegendOptions={tokensUnique}
158+
hideDefaultLegend={true}
159+
valueSymbol="$"
160+
/>
161+
</React.Suspense>
162+
</LazyChart>
163+
)}
164+
</div>
165+
)}
167166
</ProtocolOverviewLayout>
168167
)
169168
}

‎src/pages/cex/stablecoins/[...cex].tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,11 +153,11 @@ export default function CEXStablecoins(props: {
153153
isCEX={true}
154154
>
155155
{isLoading ? (
156-
<div className="flex h-[408px] items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
156+
<div className="flex flex-1 items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
157157
<LocalLoader />
158158
</div>
159159
) : !data ? (
160-
<div className="flex h-[408px] items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
160+
<div className="flex flex-1 items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg) p-2">
161161
<p className="text-(--text-label)">No stablecoin data available for this exchange</p>
162162
</div>
163163
) : (
@@ -190,7 +190,7 @@ export default function CEXStablecoins(props: {
190190
)}
191191
</div>
192192

193-
<div className="grid min-h-[408px] grid-cols-2 gap-2 rounded-md">
193+
<div className="grid grid-cols-2 gap-2">
194194
{data.totalStablecoins && data.totalStablecoins.length > 1 && (
195195
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
196196
<React.Suspense fallback={<></>}>

‎src/pages/protocol/borrowed/[...protocol].tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,11 +102,11 @@ export default function Protocols(props) {
102102
toggleOptions={props.toggleOptions}
103103
>
104104
{isLoading ? (
105-
<div className="flex h-[408px] items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
105+
<div className="flex flex-1 items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
106106
<LocalLoader />
107107
</div>
108108
) : (
109-
<div className="grid min-h-[408px] grid-cols-2 gap-2 rounded-md">
109+
<div className="grid grid-cols-2 gap-2">
110110
{chainsSplit && chainsUnique?.length > 1 && (
111111
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
112112
<React.Suspense fallback={<></>}>

‎src/pages/protocol/tvl/[...protocol].tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { IBarChartProps, IChartProps, IPieChartProps } from '~/components/EChart
44
import { tvlOptionsMap } from '~/components/Filters/options'
55
import { LazyChart } from '~/components/LazyChart'
66
import { LocalLoader } from '~/components/Loaders'
7+
import { oldBlue } from '~/constants/colors'
78
import { ProtocolOverviewLayout } from '~/containers/ProtocolOverview/Layout'
89
import { getProtocol, getProtocolMetrics } from '~/containers/ProtocolOverview/queries'
910
import { IProtocolMetadata } from '~/containers/ProtocolOverview/types'
@@ -106,11 +107,11 @@ export default function Protocols(props) {
106107
toggleOptions={props.toggleOptions}
107108
>
108109
{isLoading ? (
109-
<div className="flex h-[408px] items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
110+
<div className="flex flex-1 items-center justify-center rounded-md border border-(--cards-border) bg-(--cards-bg)">
110111
<LocalLoader />
111112
</div>
112113
) : (
113-
<div className="grid min-h-[408px] grid-cols-2 gap-2 rounded-md">
114+
<div className="grid grid-cols-2 gap-2">
114115
{chainsSplit && chainsUnique?.length > 1 && (
115116
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
116117
<React.Suspense fallback={<></>}>
@@ -169,7 +170,7 @@ export default function Protocols(props) {
169170
{usdInflows?.length > 0 && (
170171
<LazyChart className="relative col-span-full flex min-h-[408px] flex-col rounded-md border border-(--cards-border) bg-(--cards-bg) pt-2 xl:col-span-1 xl:[&:last-child:nth-child(2n-1)]:col-span-full">
171172
<React.Suspense fallback={<></>}>
172-
<BarChart chartData={usdInflows} color={props.backgroundColor} title="USD Inflows" valueSymbol="$" />
173+
<BarChart chartData={usdInflows} color={oldBlue} title="USD Inflows" valueSymbol="$" />
173174
</React.Suspense>
174175
</LazyChart>
175176
)}
@@ -179,7 +180,7 @@ export default function Protocols(props) {
179180
<React.Suspense fallback={<></>}>
180181
<BarChart
181182
chartData={tokenInflows}
182-
title="Token Inflows"
183+
title="Inflows by Token"
183184
customLegendName="Token"
184185
customLegendOptions={tokensUnique}
185186
hideDefaultLegend={true}

0 commit comments

Comments
 (0)