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 {
|
.dashboard-amount-quote-stat {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-style: normal;
|
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;
|
@primary-color: #ff00a8;
|
||||||
@popover-background: #1a2029;
|
@popover-background: #1a2029;
|
||||||
|
|
|
@ -175,6 +175,7 @@ export const BorrowInput = (props: {
|
||||||
justifyContent: "space-around",
|
justifyContent: "space-around",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
@ -203,6 +204,7 @@ export const BorrowInput = (props: {
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-evenly",
|
justifyContent: "space-evenly",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
marginBottom: 20
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CollateralInput
|
<CollateralInput
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
|
@import "~antd/dist/antd.dark.less";
|
||||||
|
|
||||||
.borrow-input-title {
|
.borrow-input-title {
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
margin-top: 15px;
|
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 {
|
.deposit-input-title {
|
||||||
font-size: 1.05rem;
|
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)) ||
|
[...Object.keys(paths)].find((key) => location.pathname.startsWith(key)) ||
|
||||||
"";
|
"";
|
||||||
const defaultKey = paths[current] || "1";
|
const defaultKey = paths[current] || "1";
|
||||||
const theme = "light";
|
const theme = "dark";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
|
|
|
@ -1,3 +1,8 @@
|
||||||
|
@import "~antd/dist/antd.dark.less";
|
||||||
|
|
||||||
.liquidate-input-title {
|
.liquidate-input-title {
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: @text-color-secondary;
|
||||||
}
|
}
|
|
@ -132,7 +132,7 @@ export const RepayInput = (props: {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (collateralReserve && lastTyped === "repay") {
|
if (collateralReserve && lastTyped === "repay") {
|
||||||
const collateralInQuote = obligation.info.collateralInQuote;
|
const collateralInQuote = obligation.info.collateralInQuote;
|
||||||
const collateral = collateralInQuote * collateralPrice;
|
const collateral = collateralInQuote / collateralPrice;
|
||||||
if (value) {
|
if (value) {
|
||||||
const borrowRatio = (parseFloat(value) / borrowAmount) * 100;
|
const borrowRatio = (parseFloat(value) / borrowAmount) * 100;
|
||||||
const collateralAmount = (borrowRatio * collateral) / 100;
|
const collateralAmount = (borrowRatio * collateral) / 100;
|
||||||
|
@ -153,7 +153,7 @@ export const RepayInput = (props: {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (collateralReserve && lastTyped === "collateral") {
|
if (collateralReserve && lastTyped === "collateral") {
|
||||||
const collateralInQuote = obligation.info.collateralInQuote;
|
const collateralInQuote = obligation.info.collateralInQuote;
|
||||||
const collateral = collateralInQuote * collateralPrice;
|
const collateral = collateralInQuote / collateralPrice;
|
||||||
if (collateralValue) {
|
if (collateralValue) {
|
||||||
const collateralRatio =
|
const collateralRatio =
|
||||||
(parseFloat(collateralValue) / collateral) * 100;
|
(parseFloat(collateralValue) / collateral) * 100;
|
||||||
|
@ -193,6 +193,7 @@ export const RepayInput = (props: {
|
||||||
justifyContent: "space-around",
|
justifyContent: "space-around",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<div className="repay-input-title">{LABELS.REPAY_QUESTION}</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
@ -220,6 +221,7 @@ export const RepayInput = (props: {
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-evenly",
|
justifyContent: "space-evenly",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
marginBottom: 20
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CollateralInput
|
<CollateralInput
|
||||||
|
|
|
@ -1,3 +1,8 @@
|
||||||
.borrow-input-title {
|
@import "~antd/dist/antd.dark.less";
|
||||||
|
|
||||||
|
.repay-input-title {
|
||||||
font-size: 1.05rem;
|
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 {
|
.withdraw-input-title {
|
||||||
font-size: 1.05rem;
|
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 {
|
.borrow-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
flex: 80px
|
flex: 80px
|
||||||
}
|
}
|
||||||
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
.borrow-header {
|
.borrow-header {
|
||||||
|
|
|
@ -55,7 +55,7 @@ export const BorrowReserveView = () => {
|
||||||
<Statistic
|
<Statistic
|
||||||
title={LABELS.BORROWING_POWER_VALUE}
|
title={LABELS.BORROWING_POWER_VALUE}
|
||||||
value={borrowingPower}
|
value={borrowingPower}
|
||||||
valueStyle={{ color: "#3f8600" }}
|
valueStyle={{ color: "#3fBB00" }}
|
||||||
precision={2}
|
precision={2}
|
||||||
prefix="$"
|
prefix="$"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import '~antd/es/style/themes/default.less';
|
@import '~antd/es/style/themes/dark.less';
|
||||||
|
|
||||||
.dashboard-item {
|
.dashboard-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
flex: 200px
|
flex: 200px
|
||||||
}
|
}
|
||||||
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-title {
|
.dashboard-title {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import '~antd/es/style/themes/default.less';
|
@import '~antd/es/style/themes/dark.less';
|
||||||
|
|
||||||
.deposit-item {
|
.deposit-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
flex: 80px
|
flex: 80px
|
||||||
}
|
}
|
||||||
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deposit-header {
|
.deposit-header {
|
||||||
|
|
|
@ -95,7 +95,7 @@ export const HomeView = () => {
|
||||||
title="Current market size"
|
title="Current market size"
|
||||||
value={totals.marketSize}
|
value={totals.marketSize}
|
||||||
precision={2}
|
precision={2}
|
||||||
valueStyle={{ color: "#3f8600" }}
|
valueStyle={{ color: "#3fBB00" }}
|
||||||
prefix="$"
|
prefix="$"
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import '~antd/es/style/themes/default.less';
|
@import '~antd/es/style/themes/dark.less';
|
||||||
|
|
||||||
.home-item {
|
.home-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
flex: 80px
|
flex: 80px
|
||||||
}
|
}
|
||||||
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-header {
|
.home-header {
|
||||||
|
|
|
@ -56,7 +56,7 @@ export const LiquidateView = () => {
|
||||||
title="Value at risk"
|
title="Value at risk"
|
||||||
value={valueAtRisk}
|
value={valueAtRisk}
|
||||||
precision={2}
|
precision={2}
|
||||||
valueStyle={{ color: "#3f8600" }}
|
valueStyle={{ color: "#3fBB00" }}
|
||||||
prefix="$"
|
prefix="$"
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import '~antd/es/style/themes/default.less';
|
@import '~antd/es/style/themes/dark.less';
|
||||||
|
|
||||||
.liquidate-item {
|
.liquidate-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
flex: 80px
|
flex: 80px
|
||||||
}
|
}
|
||||||
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
.liquidate-header {
|
.liquidate-header {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import '~antd/es/style/themes/default.less';
|
@import '~antd/es/style/themes/dark.less';
|
||||||
|
|
||||||
.choose-margin-item {
|
.choose-margin-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
flex: 80px;
|
flex: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-margin-header {
|
.choose-margin-header {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import '~antd/es/style/themes/default.less';
|
@import '~antd/es/style/themes/dark.less';
|
||||||
.trading-item {
|
.trading-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
flex: 300px;
|
flex: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trading-header {
|
.trading-header {
|
||||||
|
|
|
@ -69,7 +69,7 @@ export const RepayReserveView = () => {
|
||||||
<Statistic
|
<Statistic
|
||||||
title={LABELS.BORROWING_POWER_VALUE}
|
title={LABELS.BORROWING_POWER_VALUE}
|
||||||
value={borrowingPower}
|
value={borrowingPower}
|
||||||
valueStyle={{ color: "#3f8600" }}
|
valueStyle={{ color: "#3fBB00" }}
|
||||||
precision={2}
|
precision={2}
|
||||||
prefix="$"
|
prefix="$"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue