certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: fix repay + dark theme

This commit is contained in:
bartosz-lipinski 2021-01-25 22:17:39 -06:00
parent 135e61982f
commit b19c7dd501
21 changed files with 60 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.less
View File

@ -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;

4
src/ant-custom.less
View File

@ -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;

2
src/components/BorrowInput/index.tsx
View File

@ -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

5
src/components/BorrowInput/style.less
View File

@ -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;
} }

5
src/components/DepositInput/style.less
View File

@ -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;
} }

2
src/components/Layout/index.tsx
View File

@ -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">

5
src/components/LiquidateInput/style.less
View File

@ -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;
} }

6
src/components/RepayInput/index.tsx
View File

@ -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

7
src/components/RepayInput/style.less
View File

@ -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;
} }

5
src/components/WithdrawInput/style.less
View File

@ -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;
} }

4
src/views/borrow/itemStyle.less
View File

@ -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 {

2
src/views/borrowReserve/index.tsx
View File

@ -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="$"
/> />

4
src/views/dashboard/style.less
View File

@ -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 {

4
src/views/deposit/view/itemStyle.less
View File

@ -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 {

2
src/views/home/index.tsx
View File

@ -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>

4
src/views/home/itemStyle.less
View File

@ -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 {

2
src/views/liquidate/index.tsx
View File

@ -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>

4
src/views/liquidate/style.less
View File

@ -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 {

4
src/views/margin/itemStyle.less
View File

@ -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 {

4
src/views/margin/style.less
View File

@ -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 {

2
src/views/repayReserve/index.tsx
View File

@ -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="$"
/> />