Skip to content

Commit

Permalink
fix: updated stylings
Browse files Browse the repository at this point in the history
  • Loading branch information
@aizad-deriv
aizad-deriv committed Dec 14, 2023
1 parent 175eeff commit 62bab3d
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 67 deletions.
6 changes: 5 additions & 1 deletion packages/tradershub/src/AppContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from 'react';
import { Router } from './routes';

const AppContent = () => <Router />;
const AppContent = () => (
<div className='font-sans max-w-[1232px] mx-auto pt-400 px-400 lg:pt-2500 lg:px-50'>
<Router />
</div>
);

export default AppContent;
130 changes: 64 additions & 66 deletions packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,78 +2,76 @@ import React from 'react';
import { Button, Heading, Text } from '@deriv/quill-design';

const TradersHubRoute: React.FC = () => (
<div className='max-w-[1200px] mx-auto pt-2000 px-400'>
<div className='flex flex-col gap-1200'>
{/* Header */}
<div className='flex align-start items-center justify-between gap-100'>
<Heading.H3>Trader&apos;s Hub</Heading.H3>
<div className='flex flex-col items-end justify-end'>
<Text size='sm'>Total Assets</Text>
<Heading.H3 className='text-status-light-information'>10,000.00 USD</Heading.H3>
</div>
<div className='flex flex-col gap-1200'>
{/* Header */}
<div className='flex align-start items-center justify-between gap-100'>
<Heading.H3>Trader&apos;s Hub</Heading.H3>
<div className='flex flex-col items-end justify-end'>
<Text size='sm'>Total assets</Text>
<Heading.H3 className='text-status-light-information'>10,000.00 USD</Heading.H3>
</div>
{/* Deriv Apps */}
<div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
<div className='pb-1200 lg:w-4/6'>
<Heading.H4>Options & multipliers</Heading.H4>
<Text size='sm'>
Earn a range of payouts by correctly predicting market price movements with{' '}
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>options</a> or
get the upside of CFDs without risking more than your initial stake with{' '}
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>multipliers</a>.
</Text>
</div>
<div className='grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-x-1200 lg:gap-y-200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
{/* Deriv Apps */}
<div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
<div className='pb-1200 lg:w-4/6'>
<Heading.H4>Options & multipliers</Heading.H4>
<Text size='sm'>
Earn a range of payouts by correctly predicting market price movements with{' '}
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>options</a> or get
the upside of CFDs without risking more than your initial stake with{' '}
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>multipliers</a>.
</Text>
</div>
<div className='grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-x-1200 lg:gap-y-200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
</div>
{/* CFD Apps */}
<div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
<div className='pb-1200'>
<div className='flex items-center gap-200'>
<Heading.H4>CFDs</Heading.H4>
<Button className='no-underline' colorStyle='coral' size='sm' variant='tertiary'>
Compare Accounts
</Button>
</div>
<Text size='sm'>
Trade with leverage and tight spreads for better returns on trades.{' '}
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>Learn more</a>
</Text>
</div>
{/* CFD Apps */}
<div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
<div className='pb-1200'>
<div className='flex items-center gap-200'>
<Heading.H4>CFDs</Heading.H4>
<Button className='no-underline' colorStyle='coral' size='sm' variant='tertiary'>
Compare Accounts
</Button>
</div>
<Text size='sm'>
Trade with leverage and tight spreads for better returns on trades.{' '}
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>Learn more</a>
<div className='flex flex-col gap-y-1200'>
<div>
<Text bold className='pb-800' size='md'>
Deriv MT5
</Text>
</div>
<div className='flex flex-col gap-y-1200'>
<div>
<Text bold className='pb-800' size='md'>
Deriv MT5
</Text>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
<div>
<Text bold className='pb-800' size='md'>
Deriv cTrader
</Text>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
</div>
<div>
<Text bold className='pb-800' size='md'>
Deriv cTrader
</Text>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
<div>
<Text bold className='pb-800' size='md'>
Other CFDs
</Text>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
</div>
<div>
<Text bold className='pb-800' size='md'>
Other CFDs
</Text>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
<div className='h-4000 rounded-300 bg-solid-slate-100' />
</div>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions packages/tradershub/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ module.exports = {
},
},
},
fontFamily: {
sans: ['IBM Plex Sans', 'sans-serif'],
},
},
},
};

0 comments on commit 62bab3d

Please sign in to comment.