Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix stake page UI desktop/mobile #400

Merged
merged 9 commits into from
Dec 19, 2024
Merged

Fix stake page UI desktop/mobile #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
43d33d3
Fix-Stake-page-UI
ONEONUORA Dec 16, 2024
78d8a63
fix:stack-page-ui
ONEONUORA Dec 17, 2024
14da194
fix:stake-page-ui
ONEONUORA Dec 17, 2024
42cbf82
Merge branch 'Fix-Stake-page-UI--desktop/mobile-' of https://github.c…
ONEONUORA Dec 17, 2024
71f0902
fix:stakepage-ui
ONEONUORA Dec 17, 2024
ebfa8a0
fix:stackpage-ui
ONEONUORA Dec 18, 2024
5d10ee1
fix: stake page-ui
ONEONUORA Dec 18, 2024
4e36d7b
fix: stake ui
ONEONUORA Dec 18, 2024
23ab797
Merge branch 'djeck1432:main' into Fix-Stake-page-UI--desktop/mobile-
ONEONUORA Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/GasFee/GasFee.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import './gasfee.css';
export default function GasFee() {
return (
<div className="main-card-footer">
<div className="divider"></div>

<div className="gas-fee-container">
<div className="gas-fee-circle">
<SettingIcon className="gas-fee-icon" />
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/components/GasFee/gasfee.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0rem 3rem;
padding-bottom: 1rem;
}

.gas-fee-circle {
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/components/StakeCard/metricCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
.stake-card {
width: 309px;

background: var(--header-button-bg);
border: var(--midnight-purple-border);
border-radius: 900px;
border-radius: 999px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.stake-card .img {
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/ui/Button/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
border: none;
cursor: pointer;
font-weight: 600;
border-radius: 900px;
border-radius: 8px;
transition: all 0.2s ease-in-out;
display: flex;
justify-content: center;
Expand Down Expand Up @@ -71,7 +71,7 @@
left: 0;
right: 0;
bottom: 0;
border-radius: 50px;
border-radius: 8px;
padding: 2px;
background: linear-gradient(90deg, #74d6fd 0%, #e01dee 100%);
-webkit-mask:
Expand Down Expand Up @@ -101,15 +101,15 @@

@media (max-width: 768px) {
.button {
border-radius: 16px;
border-radius: 8px;
}

.button--primary {
padding: 20px 12px;
}

.button--secondary::before {
border-radius: 16px;
border-radius: 8px;
}

.button--lg {
Expand Down
147 changes: 77 additions & 70 deletions frontend/src/pages/vault/stake/Stake.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { ReactComponent as ETH } from '../../../assets/icons/ethereum.svg';
import { ReactComponent as USDC } from '../../../assets/icons/borrow_usdc.svg';
import { ReactComponent as DAI } from '../../../assets/icons/dai.svg';
import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg'
import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg';
import MetricCard from 'components/StakeCard/MetricCard';
import STRK from '../../../assets/icons/strk.svg';
import USDCc from '../../../assets/icons/apy_icon.svg';
Expand All @@ -15,7 +15,7 @@ import BalanceCards from 'components/BalanceCards';
function Stake() {
const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
const [amount, setAmount] = useState('0');
const [showDrop, setShowDrop] = useState(false)
const [showDrop, setShowDrop] = useState(false);

const [balances, setBalances] = useState([
{ icon: <STTRK />, title: 'STRK', balance: '0.046731' },
Expand All @@ -26,7 +26,6 @@ function Stake() {
const networks = [{ name: 'Starknet', image: STRK }];
const handleChange = (network) => {
setSelectedNetwork(network.name);

};

const handleAmountChange = (e) => {
Expand All @@ -37,95 +36,103 @@ function Stake() {
}
};
return (
<VaultLayout >
<VaultLayout>
<div className="stake-wrapper">
<div className="stake-container">
<div className="balance-display-container">
<div className="large-screen-balance">
<div className='main-container'>
<div className='top-cards'>
<div className="main-container">
<div className="top-cards">
<MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
<MetricCard title="APY Balance" value="0.046731" icon={USDCc} />
</div>
</div>
</div>
<div className="mobile-screen-balance">
<BalanceCards
balances={balances}
setBalances={setBalances}
walletId={null}
/>
<BalanceCards balances={balances} setBalances={setBalances} walletId={null} />
</div>
</div>
<div className=''>
<h1 className="stake-title">Please submit your leverage details</h1>
<div className="main-card">
<div onClick={() => setShowDrop(!showDrop)} className={showDrop ? "clicked-network-selector-container" : "network-selector-container"}>
<div className="network-selector">
<div className="selected-network">
<img
src={networks.find((network) => network.name === selectedNetwork)?.image}
alt={selectedNetwork}
className="network-icon"
/>
<span>{selectedNetwork}</span>
<div className="form">
<h1 className="stake-title">Please submit your leverage details</h1>
<div className="main-stake-card">
<div
onClick={() => setShowDrop(!showDrop)}
className={showDrop ? 'clicked-network-selector-container' : 'network-selector-container'}
>
<div className="network-selector">
<div className="selected-network">
<img
src={networks.find((network) => network.name === selectedNetwork)?.image}
alt={selectedNetwork}
className="network-icon"
/>
<span>{selectedNetwork}</span>
</div>
<svg
className="chevron"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 9L12 15L18 9"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>

<div className="network-dropdown">
{networks.map((network) => (
<div key={network.name} className="network-option" onClick={() => handleChange(network)}>
<img src={network.image} alt={network.name} className="network-icon" />
<span>{network.name}</span>
</div>
))}
</div>
<svg
className="chevron"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 9L12 15L18 9"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>

<div className="network-dropdown">
{networks.map((network) => (
<div key={network.name} className="network-option" onClick={() => handleChange(network)}>
<img src={network.image} alt={network.name} className="network-icon" />
<span>{network.name}</span>
</div>
))}
<div className="amount-input" aria-labelledby="amount-input-label">
<input
type="text"
id="amount-field"
value={amount}
onChange={handleAmountChange}
pattern="^\d*\.?\d*$"
className="amount-field"
aria-describedby="currency-symbol"
placeholder="0.00"
/>
<span id="currency-symbol" className="currency">
STRK
</span>
</div>
</div>

<div className="amount-input" aria-labelledby="amount-input-label">
<input
type="text"
id="amount-field"
value={amount}
onChange={handleAmountChange}
pattern="^\d*\.?\d*$"
className="amount-field"
aria-describedby="currency-symbol"
placeholder="0.00"
/>
<span id="currency-symbol" className="currency">STRK</span>
</div>
<div className="apy-rate">$0.00 APY / year</div>
<div className="parent-divider1">
<div className="divider1"></div>
</div>

<div className="apy-rate">$0.00 APY / year</div>
<GasFee />
<GasFee />
</div>
</div>
<div className="can-stk">
<Button variant="secondary" size="lg" className="cancel">
{' '}
Cancel
</Button>
<Button variant="secondary" size="lg" className="stake-button1">
Stake
</Button>
</div>

</div>
<Button variant="secondary" size="lg" className="stake-button">
Stake
</Button>
</div>
</div>
</VaultLayout>
);
}



export default Stake;
export default Stake;
Loading
Loading