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

feat:improved user's experience #561

Merged
merged 2 commits into from
Feb 16, 2025
Merged

feat:improved user's experience #561

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a42a500
feat:improved user's experience
kingjosmel Feb 12, 2025
82d690a
improved the ui
kingjosmel Feb 12, 2025
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
17 changes: 7 additions & 10 deletions frontend/src/assets/icons/form-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions frontend/src/components/layout/navigation-links/NavigationLinks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const NavigationLinks = ({ onNavClick }) => (

<div className="bg-light-purple h-4 w-[1.5px] rounded-md" />

<NavLink
{/* <NavLink
to="/form"
className={({ isActive }) =>
isActive
Expand All @@ -42,10 +42,10 @@ const NavigationLinks = ({ onNavClick }) => (
onClick={onNavClick}
>
Form
</NavLink>
</NavLink> */}

{/* <div className="h-4 w-[1.5px] rounded-md bg-light-purple" /> */}
{/*
{/*
<NavLink
to="/vault"
className={({ isActive }) =>
Expand Down
16 changes: 9 additions & 7 deletions frontend/src/components/ui/token-selector/TokenSelector.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import React from 'react';
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 KSTRK from '@/assets/icons/Kstrk.svg?react';

const Tokens = [
{ id: 'ethOption', component: <ETH />, label: 'ETH' },
{ id: 'usdcOption', component: <USDC />, label: 'USDC' },
{ id: 'strkOption', component: <STRK />, label: 'STRK' },
{ id: 'KstrkOption', component: <KSTRK />, label: 'KSTRK' },
];

const TokenSelector = ({ selectedToken, setSelectedToken, className }) => {
Expand All @@ -15,9 +17,9 @@ const TokenSelector = ({ selectedToken, setSelectedToken, className }) => {
};

return (
<div className="flex w-full flex-col gap-2">
<span className="text-stormy-gray block w-full text-start">Select Token</span>
<div className="flex w-full items-center justify-center gap-2">
<div className="flex flex-col w-full gap-2">
<span className="block w-full text-stormy-gray text-start">Select Token</span>
<div className="flex items-center justify-center w-full gap-2">
{Tokens.map((token) => (
<div
className={`border-border-color relative grid h-16 w-full place-content-center rounded-xl border text-center ${selectedToken === token.label ? "after:content[''] after:from-nav-button-hover after:to-pink after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-r after:p-0.5 after:[mask:conic-gradient(#000_0_0)_content-box_exclude,conic-gradient(#000_0_0)]" : ''}`}
Expand All @@ -33,11 +35,11 @@ const TokenSelector = ({ selectedToken, setSelectedToken, className }) => {
onChange={() => handleTokenChange(token)}
className="hidden w-full rounded-xs p-0.5 outline-none"
/>
<div className="flex w-full items-center gap-1 py-4">
<div className="bg-border-color grid h-8 w-8 place-content-center rounded-full">
<span className="flex h-5 w-5 items-center justify-center rounded-full">{token.component}</span>
<div className="flex items-center w-full gap-1 py-4">
<div className="grid w-8 h-8 rounded-full bg-border-color place-content-center">
<span className="flex items-center justify-center w-5 h-5 rounded-full">{token.component}</span>
</div>
<label htmlFor={token.id} className="text-primary text-base leading-6 font-semibold">
<label htmlFor={token.id} className="text-base font-semibold leading-6 text-primary">
{token.label}
</label>
</div>
Expand Down
16 changes: 12 additions & 4 deletions frontend/src/pages/DashboardLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import clockIcon from '@/assets/icons/clock.svg';
import computerIcon from '@/assets/icons/computer-icon.svg';
import depositIcon from '@/assets/icons/deposit.svg';
import withdrawIcon from '@/assets/icons/withdraw.svg';
import formIcon from '@/assets/icons/form-icon.svg';
import { useCheckMobile } from '@/hooks/useCheckMobile';

const dashboardItems = [
Expand All @@ -22,7 +23,7 @@ const dashboardItems = [
},
{
id: 'deposit',
name: 'Add Deposit',
name: 'Add Extra Deposit',
link: '/dashboard/deposit',
icon: depositIcon,
},
Expand All @@ -32,17 +33,24 @@ const dashboardItems = [
link: '/dashboard/withdraw',
icon: withdrawIcon,
},
{
id: 'Postion',
name: 'Open Position',
link: '/form',
icon: formIcon,
},
];

export default function DashboardLayout({ children, title = 'zkLend Position' }) {
const isMobile = useCheckMobile();
console.log(formIcon)
return (
<div className="flex min-h-screen w-screen md:justify-center lg:ml-[372px] lg:w-[calc(100vw-372px)]">
<Sidebar items={dashboardItems} />
<div className="relative flex h-full w-full items-center justify-around">
<div className="relative flex items-center justify-around w-full h-full">
<div className="mt-24 mb-12 flex h-full w-full flex-col justify-center gap-2.5 p-6 pt-5 md:w-auto md:max-w-none">
<h1 className="text-second-primary mt-4 text-center text-2xl font-semibold">{title}</h1>
<div className="text-second-primary flex w-full flex-col justify-center gap-6 rounded-2xl text-center">
<h1 className="mt-4 text-2xl font-semibold text-center text-second-primary">{title}</h1>
<div className="flex flex-col justify-center w-full gap-6 text-center text-second-primary rounded-2xl">
{children}
</div>
</div>
Expand Down