From 0be2d169c25f5b5f93ded81b28f70fe4464ad7e9 Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Tue, 26 Jan 2021 12:49:44 -0500
Subject: [PATCH] changed loaninfoline into small cards

---
 src/components/LoanInfoLine/index.tsx | 92 +++++++++++++++------------
 src/views/liquidateReserve/index.tsx  | 40 ++++++------
 2 files changed, 75 insertions(+), 57 deletions(-)

diff --git a/src/components/LoanInfoLine/index.tsx b/src/components/LoanInfoLine/index.tsx
index 2fdd832..f896743 100644
--- a/src/components/LoanInfoLine/index.tsx
+++ b/src/components/LoanInfoLine/index.tsx
@@ -1,4 +1,4 @@
-import { Card, Statistic } from "antd";
+import { Card, Col, Row, Statistic } from "antd";
 import {
   formatNumber,
   formatPct,
@@ -13,6 +13,7 @@ import {
 } from "../../hooks";
 import { useMint } from "../../contexts/accounts";
 import { calculateBorrowAPY, collateralToLiquidity } from "../../models";
+import { GUTTER } from "../../constants";
 
 export const LoanInfoLine = (props: {
   className?: string;
@@ -46,43 +47,56 @@ export const LoanInfoLine = (props: {
   const collateral = fromLamports(collateralLamports, collateralMint);
 
   return (
-    <Card
-      className={props.className}
-      bodyStyle={{ display: "flex", justifyContent: "space-between" }}
-    >
-      <Statistic
-        title="Loan Balance"
-        value={obligation.info.borrowedInQuote}
-        formatter={(val) => (
-          <div>
-            <div>
-              <em>{formatNumber.format(borrowAmount)}</em> {repayName}
-            </div>
-            <div className="dashboard-amount-quote">
-              ${formatNumber.format(parseFloat(val.toString()))}
-            </div>
-          </div>
-        )}
-      />
-      <Statistic
-        title="Collateral"
-        value={obligation.info.borrowedInQuote}
-        formatter={(val) => (
-          <div>
-            <div>
-              <em>{formatNumber.format(collateral)}</em> {withdrawName}
-            </div>
-            <div className="dashboard-amount-quote">
-              ${formatNumber.format(parseFloat(val.toString()))}
-            </div>
-          </div>
-        )}
-      />
-      <Statistic title="APY" value={formatPct.format(borrowAPY)} />
-      <Statistic
-        title="Health Factor"
-        value={obligation.info.health.toFixed(2)}
-      />
-    </Card>
+    <Row gutter={GUTTER}>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <Statistic
+            title="Loan Balance"
+            value={obligation.info.borrowedInQuote}
+            formatter={(val) => (
+              <div>
+                <div>
+                  <em>{formatNumber.format(borrowAmount)}</em> {repayName}
+                </div>
+                <div className="dashboard-amount-quote">
+                  ${formatNumber.format(parseFloat(val.toString()))}
+                </div>
+              </div>
+            )}
+          />
+        </Card>
+      </Col>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <Statistic
+            title="Collateral"
+            value={obligation.info.borrowedInQuote}
+            formatter={(val) => (
+              <div>
+                <div>
+                  <em>{formatNumber.format(collateral)}</em> {withdrawName}
+                </div>
+                <div className="dashboard-amount-quote">
+                  ${formatNumber.format(parseFloat(val.toString()))}
+                </div>
+              </div>
+            )}
+          />
+        </Card>
+      </Col>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <Statistic title="APY" value={formatPct.format(borrowAPY)} />
+        </Card>
+      </Col>
+      <Col xs={24} xl={9}>
+        <Card className={props.className}>
+          <Statistic
+            title="Health Factor"
+            value={obligation.info.health.toFixed(2)}
+          />
+        </Card>
+      </Col>
+    </Row>
   );
 };
diff --git a/src/views/liquidateReserve/index.tsx b/src/views/liquidateReserve/index.tsx
index 652dc79..b722035 100644
--- a/src/views/liquidateReserve/index.tsx
+++ b/src/views/liquidateReserve/index.tsx
@@ -11,6 +11,9 @@ import { LoanInfoLine } from "../../components/LoanInfoLine";
 import { LiquidateInput } from "../../components/LiquidateInput";
 
 import "./style.less";
+import { Col, Row } from "antd";
+import { GUTTER } from "../../constants";
+import { BorrowInput } from "../../components/BorrowInput";
 
 export const LiquidateReserveView = () => {
   const { id } = useParams<{ id: string }>();
@@ -25,24 +28,25 @@ export const LiquidateReserveView = () => {
   }
 
   return (
-    <div className="liquidate-reserve">
-      <LoanInfoLine
-        className="liquidate-reserve-item"
-        obligation={obligation}
-      />
-      <div className="liquidate-reserve-container">
-        <LiquidateInput
-          className="liquidate-reserve-item liquidate-reserve-item-left"
-          obligation={obligation}
-          withdrawReserve={withdrawReserve}
-          repayReserve={repayReserve}
-        />
-        <SideReserveOverview
-          className="liquidate-reserve-item liquidate-reserve-item-right"
-          reserve={repayReserve}
-          mode={SideReserveOverviewMode.Deposit}
-        />
-      </div>
+    <div className="borrow-reserve">
+      <LoanInfoLine className="card-fill" obligation={obligation} />
+      <Row gutter={GUTTER} style={{ flex: 1 }}>
+        <Col xs={24} xl={15}>
+          <LiquidateInput
+            className="card-fill"
+            obligation={obligation}
+            withdrawReserve={withdrawReserve}
+            repayReserve={repayReserve}
+          />
+        </Col>
+        <Col xs={24} xl={9}>
+          <SideReserveOverview
+            className="card-fill"
+            reserve={repayReserve}
+            mode={SideReserveOverviewMode.Deposit}
+          />
+        </Col>
+      </Row>
     </div>
   );
 };