updae ui

yimingWOW · Jan 17, 2025 · 9f9b50b · 9f9b50b
1 parent 7487a58
commit 9f9b50b
Show file tree

Hide file tree

Showing 32 changed files with 1,245 additions and 2,166 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -6,8 +6,9 @@ import { NetworkSelect } from './WalletContextProvider';
 import { useNetwork } from './contexts/NetworkContext';
 import '@solana/wallet-adapter-react-ui/styles.css';
 import './style/App.css';
-import logo from '../public/favicon.png'; 
-
+import './style/Theme.css';
+import './style/Typography.css';
+import logo from '../public/favicon.png';
 
 const App: FC = () => {
   const { connected } = useWallet();
@@ -16,28 +17,26 @@ const App: FC = () => {
   return (
     <div className="app-container">
       <nav className="app-nav">
-        <div className="nav-content">
-          <div className="nav-left">
-            <img src={logo} alt="Fall Logo" className="app-logo" />
-            <h1 className="app-title">Fall</h1>
-          </div>
-          <div className="nav-right">
-            <NetworkSelect 
-              onChange={setNetwork} 
-              value={network} 
-            />
-            <WalletMultiButton className="wallet-button" />
-          </div>
+        <div className="brand">
+          <img src={logo} alt="Fall Logo" className="app-logo" />
+          <h1 className="fall-title">Fall</h1>
+        </div>
+        <div className="controls">
+          <NetworkSelect 
+            onChange={setNetwork} 
+            value={network} 
+          />
+          <WalletMultiButton className="btn btn-primary" />
         </div>
       </nav>
 
       <main className="app-main">
         {!connected ? (
           <div className="connect-wallet">
-            <div className="connect-card">
+            <div className="card gradient-border compact">
               <img src={logo} alt="Fall Logo" className="connect-logo" />
-              <h2>Welcome to Fall</h2>
-              <p>Please connect your wallet to continue</p>
+              <h2 className="section-title">Welcome to Fall</h2>
+              <p className="body-text">Please connect your wallet to continue</p>
             </div>
           </div>
         ) : (
@@ -50,15 +49,15 @@ const App: FC = () => {
           href="https://github.com/yimingWOW/fall" 
           target="_blank" 
           rel="noopener noreferrer"
-          className="social-icon"
+          className="text-link"
         >
           <i className="fab fa-github"></i>
         </a>
         <a 
           href="https://x.com/fall_labs" 
           target="_blank" 
           rel="noopener noreferrer"
-          className="social-icon"
+          className="text-link"
         >
           <i className="fa-brands fa-x-twitter"></i>
         </a>

diff --git a/app/src/components/BorrowForm.tsx b/app/src/components/BorrowForm.tsx
@@ -5,8 +5,9 @@ import { borrow } from '../utils/borrow';
 import BN from 'bn.js';
 import { PoolInfo } from '../utils/getPoolList';
 import { PoolDetailInfo } from '../utils/getPoolDetail';
-import '../style/BorrowForm.css';
 import { BASE_RATE } from '../utils/constants';
+import '../style/Theme.css';
+import '../style/Typography.css';
 
 interface BorrowFormProps {
   pool: PoolInfo;
@@ -68,25 +69,27 @@ export const BorrowForm: FC<BorrowFormProps> = ({ pool, details, onSuccess }) =>
     }
   };
 
-  const minCollateralRatio = (pool.minCollateralRatio / 100).toFixed(2);
-
   return (
-    <div className="form-wrapper">
-      <h3>Borrow Tokens</h3>
+    <div className="card gradient-border compact">
+      <h3 className="section-title">Borrow Tokens</h3>
+
       {error && (
-        <div className="error-message">
+        <div className="secondary-text" style={{ color: 'var(--error)' }}>
           {error}
         </div>
       )}
+
       <form onSubmit={handleSubmit}>
         <div className="form-group">
-          <label>
-            Amount to Borrow (Token A):
-            <span className="max-amount">
+          <div className="code-text">
+            <span className="secondary-text">Amount to Borrow (Token A)</span>
+            <span className="highlight-text">
               Max: {maxBorrowAmount.toFixed(6)}
             </span>
-          </label>
+          </div>
+
           <input
+            className="input"
             type="number"
             value={borrowAmount}
             onChange={(e) => setBorrowAmount(e.target.value)}
@@ -98,23 +101,20 @@ export const BorrowForm: FC<BorrowFormProps> = ({ pool, details, onSuccess }) =>
             disabled={isLoading}
           />
         </div>
-        <div className="lending-pool-info-summary">
-          <div>Pool: {pool.poolPk.toString().slice(0, 4)}...{pool.poolPk.toString().slice(-4)}</div>
-          <div>Token A (Borrow): {pool.mintA.toString().slice(0, 4)}...{pool.mintA.toString().slice(-4)}</div>
-          <div>Token B (Collateral): {pool.mintB.toString().slice(0, 4)}...{pool.mintB.toString().slice(-4)}</div>
-          <div>Min Collateral Ratio: {minCollateralRatio}%</div>
-          <div>Base Rate: {(pool.fee / 100).toFixed(2)}%</div>
-        </div>
-        <div className="warning-message">
+
+        <div className="note-text" style={{ marginBottom: 'var(--spacing-md)' }}>
           Note: Please ensure you provide sufficient collateral based on the minimum collateral ratio.
         </div>
-        <button 
-          type="submit" 
-          className="action-button"
-          disabled={isLoading || !wallet}
-        >
-          {isLoading ? 'Processing...' : 'Confirm Borrow'}
-        </button>
+
+        <div className="align-center">
+          <button 
+            type="submit" 
+            className="btn btn-primary"
+            disabled={isLoading || !wallet}
+          >
+            {isLoading ? 'Processing...' : 'Confirm Borrow'}
+          </button>
+        </div>
       </form>
     </div>
   );