From b19c7dd50152510da5cde118fc1a951dafd62989 Mon Sep 17 00:00:00 2001 From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com> Date: Mon, 25 Jan 2021 22:17:39 -0600 Subject: [PATCH] feat: fix repay + dark theme --- src/App.less | 8 ++++++++ src/ant-custom.less | 4 ++-- src/components/BorrowInput/index.tsx | 2 ++ src/components/BorrowInput/style.less | 5 ++++- src/components/DepositInput/style.less | 5 +++++ src/components/Layout/index.tsx | 2 +- src/components/LiquidateInput/style.less | 5 +++++ src/components/RepayInput/index.tsx | 6 ++++-- src/components/RepayInput/style.less | 7 ++++++- src/components/WithdrawInput/style.less | 5 +++++ src/views/borrow/itemStyle.less | 4 ++-- src/views/borrowReserve/index.tsx | 2 +- src/views/dashboard/style.less | 4 ++-- src/views/deposit/view/itemStyle.less | 4 ++-- src/views/home/index.tsx | 2 +- src/views/home/itemStyle.less | 4 ++-- src/views/liquidate/index.tsx | 2 +- src/views/liquidate/style.less | 4 ++-- src/views/margin/itemStyle.less | 4 ++-- src/views/margin/style.less | 4 ++-- src/views/repayReserve/index.tsx | 2 +- 21 files changed, 60 insertions(+), 25 deletions(-) diff --git a/src/App.less b/src/App.less index ca19287..bcddffb 100644 --- a/src/App.less +++ b/src/App.less @@ -358,6 +358,14 @@ em { } } +.ant-pro-sider { + background: transparent !important; + + .ant-menu { + background: transparent !important; + } +} + .dashboard-amount-quote-stat { font-size: 10px; font-style: normal; diff --git a/src/ant-custom.less b/src/ant-custom.less index 1c11268..a53b5d1 100644 --- a/src/ant-custom.less +++ b/src/ant-custom.less @@ -1,5 +1,5 @@ -@import '~antd/es/style/themes/default.less'; -// @import '~antd/es/style/themes/dark.less'; +@import '~antd/es/style/themes/dark.less'; +@import "~antd/dist/antd.dark.less"; @primary-color: #ff00a8; @popover-background: #1a2029; diff --git a/src/components/BorrowInput/index.tsx b/src/components/BorrowInput/index.tsx index 1d03e5e..66fe316 100644 --- a/src/components/BorrowInput/index.tsx +++ b/src/components/BorrowInput/index.tsx @@ -175,6 +175,7 @@ export const BorrowInput = (props: { justifyContent: "space-around", }} > +
{LABELS.BORROW_QUESTION}
{ [...Object.keys(paths)].find((key) => location.pathname.startsWith(key)) || ""; const defaultKey = paths[current] || "1"; - const theme = "light"; + const theme = "dark"; return (
diff --git a/src/components/LiquidateInput/style.less b/src/components/LiquidateInput/style.less index e79e00e..a1ae361 100644 --- a/src/components/LiquidateInput/style.less +++ b/src/components/LiquidateInput/style.less @@ -1,3 +1,8 @@ +@import "~antd/dist/antd.dark.less"; + .liquidate-input-title { font-size: 1.05rem; + margin-top: 15px; + margin-bottom: 15px; + color: @text-color-secondary; } \ No newline at end of file diff --git a/src/components/RepayInput/index.tsx b/src/components/RepayInput/index.tsx index 315ee2f..6c759b8 100644 --- a/src/components/RepayInput/index.tsx +++ b/src/components/RepayInput/index.tsx @@ -132,7 +132,7 @@ export const RepayInput = (props: { useEffect(() => { if (collateralReserve && lastTyped === "repay") { const collateralInQuote = obligation.info.collateralInQuote; - const collateral = collateralInQuote * collateralPrice; + const collateral = collateralInQuote / collateralPrice; if (value) { const borrowRatio = (parseFloat(value) / borrowAmount) * 100; const collateralAmount = (borrowRatio * collateral) / 100; @@ -153,7 +153,7 @@ export const RepayInput = (props: { useEffect(() => { if (collateralReserve && lastTyped === "collateral") { const collateralInQuote = obligation.info.collateralInQuote; - const collateral = collateralInQuote * collateralPrice; + const collateral = collateralInQuote / collateralPrice; if (collateralValue) { const collateralRatio = (parseFloat(collateralValue) / collateral) * 100; @@ -193,6 +193,7 @@ export const RepayInput = (props: { justifyContent: "space-around", }} > +
{LABELS.REPAY_QUESTION}
{ diff --git a/src/views/dashboard/style.less b/src/views/dashboard/style.less index 496b127..8dd051d 100644 --- a/src/views/dashboard/style.less +++ b/src/views/dashboard/style.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; +@import '~antd/es/style/themes/dark.less'; .dashboard-item { display: flex; @@ -21,7 +21,7 @@ flex: 200px } - border-bottom: 1px solid #eee; + border-bottom: 1px solid @border-color-split; } .dashboard-title { diff --git a/src/views/deposit/view/itemStyle.less b/src/views/deposit/view/itemStyle.less index ba7c116..a70b3ea 100644 --- a/src/views/deposit/view/itemStyle.less +++ b/src/views/deposit/view/itemStyle.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; +@import '~antd/es/style/themes/dark.less'; .deposit-item { display: flex; @@ -16,7 +16,7 @@ flex: 80px } - border-bottom: 1px solid #eee; + border-bottom: 1px solid @border-color-split; } .deposit-header { diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx index 0c7ffc2..6c3e636 100644 --- a/src/views/home/index.tsx +++ b/src/views/home/index.tsx @@ -95,7 +95,7 @@ export const HomeView = () => { title="Current market size" value={totals.marketSize} precision={2} - valueStyle={{ color: "#3f8600" }} + valueStyle={{ color: "#3fBB00" }} prefix="$" /> diff --git a/src/views/home/itemStyle.less b/src/views/home/itemStyle.less index d07a32d..eea3fcf 100644 --- a/src/views/home/itemStyle.less +++ b/src/views/home/itemStyle.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; +@import '~antd/es/style/themes/dark.less'; .home-item { display: flex; @@ -16,7 +16,7 @@ flex: 80px } - border-bottom: 1px solid #eee; + border-bottom: 1px solid @border-color-split; } .home-header { diff --git a/src/views/liquidate/index.tsx b/src/views/liquidate/index.tsx index 677eff6..ed275d3 100644 --- a/src/views/liquidate/index.tsx +++ b/src/views/liquidate/index.tsx @@ -56,7 +56,7 @@ export const LiquidateView = () => { title="Value at risk" value={valueAtRisk} precision={2} - valueStyle={{ color: "#3f8600" }} + valueStyle={{ color: "#3fBB00" }} prefix="$" /> diff --git a/src/views/liquidate/style.less b/src/views/liquidate/style.less index b4d6cbe..75c3a16 100644 --- a/src/views/liquidate/style.less +++ b/src/views/liquidate/style.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; +@import '~antd/es/style/themes/dark.less'; .liquidate-item { display: flex; @@ -16,7 +16,7 @@ flex: 80px } - border-bottom: 1px solid #eee; + border-bottom: 1px solid @border-color-split; } .liquidate-header { diff --git a/src/views/margin/itemStyle.less b/src/views/margin/itemStyle.less index 4d15206..de9ae5f 100644 --- a/src/views/margin/itemStyle.less +++ b/src/views/margin/itemStyle.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; +@import '~antd/es/style/themes/dark.less'; .choose-margin-item { display: flex; @@ -16,7 +16,7 @@ flex: 80px; } - border-bottom: 1px solid #eee; + border-bottom: 1px solid @border-color-split; } .choose-margin-header { diff --git a/src/views/margin/style.less b/src/views/margin/style.less index f32f4d3..f3078a5 100644 --- a/src/views/margin/style.less +++ b/src/views/margin/style.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; +@import '~antd/es/style/themes/dark.less'; .trading-item { display: flex; justify-content: space-between; @@ -19,7 +19,7 @@ flex: 300px; } - border-bottom: 1px solid #eee; + border-bottom: 1px solid @border-color-split; } .trading-header { diff --git a/src/views/repayReserve/index.tsx b/src/views/repayReserve/index.tsx index 8a07493..b16c9f0 100644 --- a/src/views/repayReserve/index.tsx +++ b/src/views/repayReserve/index.tsx @@ -69,7 +69,7 @@ export const RepayReserveView = () => {