Skip to content

Commit

Permalink
fix form ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yunusabdul38
Yunusabdul38 committed Feb 1, 2025
1 parent db67422 commit 7cadfea
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 43 deletions.
28 changes: 16 additions & 12 deletions frontend/src/components/ui/balance-cards/BalanceCards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { useMatchMedia } from '@/hooks/useMatchMedia';
import { getBalances } from '@/services/wallet';
import { useWalletStore } from '@/stores/useWalletStore';

import ETH from '@/assets/icons/ethereum.svg?react';
import USDC from '@/assets/icons/borrow_usdc.svg?react';
import STRK from '@/assets/icons/strk.svg?react';
import ETH from '@/assets/icons/ethereum.svg';
import USDC from '@/assets/icons/borrow_usdc.svg';
import STRK from '@/assets/icons/strk.svg';

const BalanceCards = ({ className }) => {
const { walletId } = useWalletStore();
Expand All @@ -17,22 +17,24 @@ const BalanceCards = ({ className }) => {
}, [walletId]);

const [balances, setBalances] = useState([
{ icon: <ETH />, title: 'ETH', balance: '0.00' },
{ icon: <USDC />, title: 'USDC', balance: '0.00' },
{ icon: <STRK />, title: 'STRK', balance: '0.00' },
{ icon: ETH, title: 'ETH', balance: '0.00' },
{ icon: USDC, title: 'USDC', balance: '0.00' },
{ icon: STRK, title: 'STRK', balance: '0.00' },
]);

return (
<div className="mt-3 mx-auto max-w-2xl px-3 w-full">
<div className="grid grid-cols-3 w-full rounded-[8px] gap-2.5 sm:gap-5">
<div className="grid grid-cols-3 w-full rounded-[8px] sm:gap-5 min-w-xl">
{balances.map((balance) =>
isMobile ? (
<div
className="border flex flex-col items-center text-center border-[#36294E] py-3 px-2.5 rounded-[8px] max-w-[180px]"
className="border flex flex-col items-center text-center border-nav-divider-bg py-3 px-2.5 rounded-[8px] max-w-[180px]"
key={balance.title}
>
<label htmlFor={balance.title} className={'flex text-[#83919F] gap-1'}>
<span className="token-icon blend">{balance.icon}</span>
<div className="h-6 w-6 rounded-full bg-border-color flex justify-center p-1">
<img src={balance.icon} className="w-full h-full" />
</div>
<span className="balance-text">{balance.title} Balance</span>
</label>
<label htmlFor={balance.title}>
Expand All @@ -41,12 +43,14 @@ const BalanceCards = ({ className }) => {
</div>
) : (
<div
className="border flex flex-col items-center text-center border-[#36294E] py-3 px-6 rounded-[8px]"
className="border flex flex-col items-center text-center border- py-3 px-6 rounded-[8px] border-nav-divider-bg "
key={balance.title}
>
<label htmlFor={balance.title} className={'flex text-[#83919F] gap-1'}>
<span className="token-icon blend">{balance.icon}</span>
<span className="balance-text">{balance.title} Balance</span>
<div className="h-8 w-8 rounded-full bg-border-color flex justify-center p-1">
<img src={balance.icon} className="w-full h-full" />
</div>
<span className="">{balance.title} Balance</span>
</label>
<label htmlFor={balance.title}>
<span className="font-semibold text-2xl text-white">{balance.balance}</span>
Expand Down
17 changes: 6 additions & 11 deletions frontend/src/components/ui/multiplier-selector/MultiplierSelector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
if (isLoading) return <div className="bg-white py-3 px-4 text-black rounded-xs">Loading multiplier data...</div>;

return (
<div className="w-full border-none pt-9 max-h-24 px-2 md:px-0">
<div className="w-full pt-9 max-h-24 px-2 md:px-0">
<div className="relative h-2 w-full cursor-pointer">
<div className="mt-3.5 mr-0 -mb-2.5">
<div className="mt-2.5 w-full">
Expand All @@ -115,29 +115,24 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
>
<div className="absolute h-full w-full rounded-full outline-hidden border border-border-color">
<div className="absolute h-full w-full rounded-full border border-border-color">
<div
className="absolute h-full bg-gradient-to-r from-nav-button-hover to-pink"
className="absolute h-full rounded-full bg-gradient-to-r from-nav-button-hover to-pink"
style={{
width: `${calculateSliderPercentage(actualValue)}%`,
}}
></div>
</div>
<div
className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 transition-colors duration-300"
className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 transition-colors duration-300 w-8 h-8 sm:w-[40px] sm:h-10"
style={{
left: `${calculateSliderPercentage(actualValue)}%`,
}}
>
<div className="absolute h-8 w-12 bottom-8 md:bottom-8 left-4 -translate-x-1/2 bg-pinky-blue- text-primary text-sm py-1.5 px-2 opacity-[0.9] rounded-[7.17px] transition-opacity duration-200 ease-in-out text-center after:content-[''] after:absolute after:-bottom-3.5 after:left-1/2 after:-translate-x-1/2 after:border-8 after:border-solid after:border-transparent after:border-t-[#2c5475] p-1">
<div className="bg-[#2c5475] absolute h-8 w-12 bottom-10 sm:bottom-12 left-5 -translate-x-1/2 text-primary text-sm py-1.5 px-2 rounded-[7.17px] transition-opacity duration-200 ease-in-out text-center after:content-[''] after:absolute after:-bottom-3.5 after:left-1/2 after:-translate-x-1/2 after:border-8 after:border-solid after:border-transparent after:border-t-[#2c5475] p-1">
{actualValue.toFixed(1)}
</div>
<img
src={sliderThumb}
className="h-8 w-8"
alt="slider thumb"
draggable="false"
/>
<img src={sliderThumb} className="h-full w-full" alt="slider thumb" draggable="false" />
</div>
</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/components/ui/token-selector/TokenSelector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const TokenSelector = ({ selectedToken, setSelectedToken, className }) => {
<div className="flex justify-center items-center gap-2 w-full">
{Tokens.map((token) => (
<div
className={`relative w-full text-center rounded-xl border border-border-color h-16 grid place-content-center ${selectedToken === token.label ? 'selected' : ''}`}
className={`relative w-full text-center rounded-xl border border-border-color h-16 grid place-content-center ${selectedToken === token.label ? "after:content[''] after:absolute after:inset-0 after:p-0.5 after:rounded-xl after:bg-gradient-to-r after:from-nav-button-hover after:to-pink after:[mask:conic-gradient(#000_0_0)_content-box_exclude,conic-gradient(#000_0_0)]" : ''}`}
key={token.id}
onClick={() => handleTokenChange(token)}
>
Expand All @@ -35,9 +35,7 @@ const TokenSelector = ({ selectedToken, setSelectedToken, className }) => {
/>
<div className="w-full flex gap-1 items-center py-4">
<div className="bg-border-color rounded-full w-8 h-8 grid place-content-center">
<span className="rounded-full h-5 w-5 flex justify-center items-center">
{token.component}
</span>
<span className="rounded-full h-5 w-5 flex justify-center items-center">{token.component}</span>
</div>
<label htmlFor={token.id} className="text-base font-semibold text-primary leading-6">
{token.label}
Expand Down
12 changes: 0 additions & 12 deletions frontend/src/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,18 +255,6 @@ a.svelte-1mtuslq.svelte-1mtuslq {
}


.selected::after {
content: '';
position: absolute;
inset: 0;
padding: 1px;
background: linear-gradient(90deg, #49abd2 0%, #e01dee 100%);
border-radius: inherit;
mask:
conic-gradient(#000 0 0) content-box exclude,
conic-gradient(#000 0 0);
}

@import 'tailwindcss';

@theme {
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/pages/form/Form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const Form = () => {

return (
<div className="flex flex-col gap-4 items-center py-4 min-h-screen">
<BalanceCards className="balance-card" />
<BalanceCards />

{isClosePositionOpen && (
<ActionModal
Expand All @@ -98,8 +98,8 @@ const Form = () => {
className="flex justify-center flex-col gap-2.5 pb-3 max-w-2xl w-full text-primary px-2"
onSubmit={handleSubmit}
>
<div className=" font-normal text-sm mb-2.5">
<h2 className='text-xl text-center'>Please submit your leverage details</h2>
<div className=" font-normal text-sm md:mb-2.5 my-3.5">
<h2 className="text-xl text-center">Please submit your leverage details</h2>
</div>
<TokenSelector
selectedToken={selectedToken}
Expand All @@ -119,7 +119,7 @@ const Form = () => {
<div className="flex flex-col gap-1.5 mt-16 w-full mb-2">
<label className="text-start w-full text-gray pt-5">Token Amount</label>
<input
className="rounded-xl text-[14px] bg-transparent sm:rounded-full py-4 px-8 border-light-purple border w-full"
className="rounded-xl text-sm bg-transparent py-5 px-8 border-light-purple border w-full focus:outline-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
type="number"
placeholder="Enter Token Amount"
value={tokenAmount}
Expand Down

0 comments on commit 7cadfea

Please sign in to comment.