mirror of https://github.com/certusone/oyster.git
feat: fix repay + dark theme
This commit is contained in:
parent
135e61982f
commit
b19c7dd501
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -175,6 +175,7 @@ export const BorrowInput = (props: {
|
|||
justifyContent: "space-around",
|
||||
}}
|
||||
>
|
||||
<div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
|
@ -203,6 +204,7 @@ export const BorrowInput = (props: {
|
|||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
alignItems: "center",
|
||||
marginBottom: 20
|
||||
}}
|
||||
>
|
||||
<CollateralInput
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
@import "~antd/dist/antd.dark.less";
|
||||
|
||||
.borrow-input-title {
|
||||
font-size: 1.05rem;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
color: @text-color-secondary;
|
||||
}
|
|
@ -1,3 +1,8 @@
|
|||
@import "~antd/dist/antd.dark.less";
|
||||
|
||||
.deposit-input-title {
|
||||
font-size: 1.05rem;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
color: @text-color-secondary;
|
||||
}
|
|
@ -37,7 +37,7 @@ export const AppLayout = React.memo((props: any) => {
|
|||
[...Object.keys(paths)].find((key) => location.pathname.startsWith(key)) ||
|
||||
"";
|
||||
const defaultKey = paths[current] || "1";
|
||||
const theme = "light";
|
||||
const theme = "dark";
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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",
|
||||
}}
|
||||
>
|
||||
<div className="repay-input-title">{LABELS.REPAY_QUESTION}</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
|
@ -220,6 +221,7 @@ export const RepayInput = (props: {
|
|||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
alignItems: "center",
|
||||
marginBottom: 20
|
||||
}}
|
||||
>
|
||||
<CollateralInput
|
||||
|
|
|
@ -1,3 +1,8 @@
|
|||
.borrow-input-title {
|
||||
@import "~antd/dist/antd.dark.less";
|
||||
|
||||
.repay-input-title {
|
||||
font-size: 1.05rem;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
color: @text-color-secondary;
|
||||
}
|
|
@ -1,3 +1,8 @@
|
|||
@import "~antd/dist/antd.dark.less";
|
||||
|
||||
.withdraw-input-title {
|
||||
font-size: 1.05rem;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
color: @text-color-secondary;
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
@import '~antd/es/style/themes/default.less';
|
||||
@import '~antd/es/style/themes/dark.less';
|
||||
|
||||
.borrow-item {
|
||||
display: flex;
|
||||
|
@ -16,7 +16,7 @@
|
|||
flex: 80px
|
||||
}
|
||||
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
}
|
||||
|
||||
.borrow-header {
|
||||
|
|
|
@ -55,7 +55,7 @@ export const BorrowReserveView = () => {
|
|||
<Statistic
|
||||
title={LABELS.BORROWING_POWER_VALUE}
|
||||
value={borrowingPower}
|
||||
valueStyle={{ color: "#3f8600" }}
|
||||
valueStyle={{ color: "#3fBB00" }}
|
||||
precision={2}
|
||||
prefix="$"
|
||||
/>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -95,7 +95,7 @@ export const HomeView = () => {
|
|||
title="Current market size"
|
||||
value={totals.marketSize}
|
||||
precision={2}
|
||||
valueStyle={{ color: "#3f8600" }}
|
||||
valueStyle={{ color: "#3fBB00" }}
|
||||
prefix="$"
|
||||
/>
|
||||
</Card>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -56,7 +56,7 @@ export const LiquidateView = () => {
|
|||
title="Value at risk"
|
||||
value={valueAtRisk}
|
||||
precision={2}
|
||||
valueStyle={{ color: "#3f8600" }}
|
||||
valueStyle={{ color: "#3fBB00" }}
|
||||
prefix="$"
|
||||
/>
|
||||
</Card>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -69,7 +69,7 @@ export const RepayReserveView = () => {
|
|||
<Statistic
|
||||
title={LABELS.BORROWING_POWER_VALUE}
|
||||
value={borrowingPower}
|
||||
valueStyle={{ color: "#3f8600" }}
|
||||
valueStyle={{ color: "#3fBB00" }}
|
||||
precision={2}
|
||||
prefix="$"
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue