Skip to content

Commit 9dc3fb7

Browse files
aizad-derivaizad-deriv
authored
[TRAH] Aizad/Traders Hub package tailwind (deriv-com#12317)
* chore: remove tailwind, quill and autoprefixer inside of core * chore: remove scss files within tradershub package - added values inside of tailwind config - remove fonts and devices scss - added styles for AppContent * fix: added stylings inside of tradershubroute component * umno * fix: retrigger ci
1 parent e26aea7 commit 9dc3fb7

13 files changed

+130
-137
lines changed

‎package.json

-3
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
"@types/react-dom": "^18.0.0",
3636
"@types/react-router-dom": "^5.1.6",
3737
"@types/react-virtualized": "^9.21.21",
38-
"autoprefixer": "^10.4.16",
3938
"babel-polyfill": "^6.26.0",
4039
"dotenv-webpack": "^8.0.1",
4140
"husky": "^7.0.0",
@@ -53,7 +52,6 @@
5352
"stylelint-no-unsupported-browser-features": "^4.0.0",
5453
"stylelint-selector-bem-pattern": "^2.1.0",
5554
"stylelint-webpack-plugin": "^2.1.1",
56-
"tailwindcss": "^3.3.6",
5755
"ts-jest": "^26.4.2"
5856
},
5957
"scripts": {
@@ -96,7 +94,6 @@
9694
"dependencies": {
9795
"@babel/preset-typescript": "^7.16.5",
9896
"@deriv/analytics": "^1.4.5",
99-
"@deriv/quill-design": "^1.2.10",
10097
"@sendbird/chat": "^4.9.7",
10198
"@types/react-transition-group": "^4.4.4",
10299
"babel-jest": "^27.3.1",

‎packages/tradershub/postcss.config.ts ‎packages/tradershub/postcss.config.js

File renamed without changes.

‎packages/tradershub/src/AppContent.scss

-5
This file was deleted.

‎packages/tradershub/src/AppContent.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import React from 'react';
22
import { Router } from './routes';
3-
import './AppContent.scss';
43

5-
const AppContent = () => {
6-
return (
7-
<div className='traders-hub-app'>
8-
<Router />
9-
</div>
10-
);
11-
};
4+
const AppContent = () => (
5+
<div className='font-sans max-w-[1232px] mx-auto pt-400 px-400 lg:pt-2500 lg:px-50'>
6+
<Router />
7+
</div>
8+
);
129

1310
export default AppContent;

‎packages/tradershub/src/index.scss

-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
@import '@deriv/quill-design/quill-tailwind/styles.css';
77
@import '@deriv/quill-design/quill-tailwind/fonts.css';
88

9-
@import './styles/devices.scss';
10-
@import './styles/fonts.scss';
11-
129
svg {
1310
display: inline; /* 1 */
1411
vertical-align: middle; /* 2 */

‎packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx

+72-26
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,80 @@
11
import React from 'react';
2-
import { Chip, Heading, Text } from '@deriv/quill-design';
2+
import { Button, Heading, Text } from '@deriv/quill-design';
33

4-
const TradersHubRoute: React.FC = () => {
5-
return (
6-
<div className='container mx-auto'>
7-
<div className='flex align-start items-center justify-between gap-100'>
8-
<div className='flex items-center gap-500'>
9-
<Heading.H3>Traders Hub</Heading.H3>
10-
<Chip.SingleSelectDropdown
11-
defaultOption={{
12-
label: 'Real',
13-
value: '1',
14-
}}
15-
// eslint-disable-next-line
16-
onSelectionChange={() => {}}
17-
options={[
18-
{
19-
label: 'Demo',
20-
value: 2,
21-
},
22-
]}
23-
size='md'
24-
/>
4+
const TradersHubRoute: React.FC = () => (
5+
<div className='flex flex-col gap-1200'>
6+
{/* Header */}
7+
<div className='flex align-start items-center justify-between gap-100'>
8+
<Heading.H3>Trader&apos;s Hub</Heading.H3>
9+
<div className='flex flex-col items-end justify-end'>
10+
<Text size='sm'>Total assets</Text>
11+
<Heading.H3 className='text-status-light-information'>10,000.00 USD</Heading.H3>
12+
</div>
13+
</div>
14+
{/* Deriv Apps */}
15+
<div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
16+
<div className='pb-1200 lg:w-4/6'>
17+
<Heading.H4>Options & multipliers</Heading.H4>
18+
<Text size='sm'>
19+
Earn a range of payouts by correctly predicting market price movements with{' '}
20+
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>options</a> or get
21+
the upside of CFDs without risking more than your initial stake with{' '}
22+
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>multipliers</a>.
23+
</Text>
24+
</div>
25+
<div className='grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-x-1200 lg:gap-y-200'>
26+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
27+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
28+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
29+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
30+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
31+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
32+
</div>
33+
</div>
34+
{/* CFD Apps */}
35+
<div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
36+
<div className='pb-1200'>
37+
<div className='flex items-center gap-200'>
38+
<Heading.H4>CFDs</Heading.H4>
39+
<Button className='no-underline' colorStyle='coral' size='sm' variant='tertiary'>
40+
Compare Accounts
41+
</Button>
42+
</div>
43+
<Text size='sm'>
44+
Trade with leverage and tight spreads for better returns on trades.{' '}
45+
<a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>Learn more</a>
46+
</Text>
47+
</div>
48+
<div className='flex flex-col gap-y-1200'>
49+
<div>
50+
<Text bold className='pb-800' size='md'>
51+
Deriv MT5
52+
</Text>
53+
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
54+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
55+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
56+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
57+
</div>
58+
</div>
59+
<div>
60+
<Text bold className='pb-800' size='md'>
61+
Deriv cTrader
62+
</Text>
63+
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
64+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
65+
</div>
2566
</div>
26-
<div className='flex flex-col justify-end'>
27-
<Text size='sm'>Total Assets</Text>
67+
<div>
68+
<Text bold className='pb-800' size='md'>
69+
Other CFDs
70+
</Text>
71+
<div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
72+
<div className='h-4000 rounded-300 bg-solid-slate-100' />
73+
</div>
2874
</div>
2975
</div>
3076
</div>
31-
);
32-
};
77+
</div>
78+
);
3379

3480
export default TradersHubRoute;

‎packages/tradershub/src/styles/devices.scss

-23
This file was deleted.

‎packages/tradershub/src/styles/fonts.scss

-6
This file was deleted.

‎packages/tradershub/src/styles/index.js

-5
This file was deleted.

‎tailwind.config.ts ‎packages/tradershub/tailwind.config.js

+53-49
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,77 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
3+
content: ['./src/**/*.{js,jsx,ts,tsx}'],
4+
presets: [require('@deriv/quill-design/quill-tailwind/tailwind.config.cjs')],
35
theme: {
46
extend: {
7+
button: {
8+
primary: {
9+
default: '#ff444f',
10+
hover: {
11+
dark: '#ff525c',
12+
light: '#eb3e48',
13+
},
14+
},
15+
'primary-light': {
16+
default: '#ff444f29',
17+
hover: '#ff444f3d',
18+
},
19+
},
520
colors: {
621
brand: {
7-
coral: '#ff444f',
822
blue: '#85acb0',
9-
orange: '#ff6444',
23+
coral: '#ff444f',
1024
night: '#2a3052',
25+
orange: '#ff6444',
1126
},
12-
system: {
13-
light: {
14-
'prominent-text': '#333333',
15-
'general-text': '#333333',
16-
'less-prominent-text': '#999999',
17-
'disabled-text': '#d6d6d6',
18-
'active-background': '#d6dadb',
19-
'hover-background': '#e6e9e9',
20-
'secondary-background': '#f2f3f4',
21-
'primary-background': '#ffffff',
22-
},
23-
dark: {
24-
'prominent-text': '#ffffff',
25-
'general-text': '#c2c2c2',
26-
'less prominent-text': '#6e6e6e',
27-
'disabled-text': '#3e3e3e',
28-
'active-background': '#323738',
29-
'hover-background': '#242828',
30-
'secondary-background': '#151717',
31-
'primary-background': '#0e0e0e',
32-
},
27+
random: {
28+
blue: '#3f6fe5',
29+
green: '#71bd0e',
30+
orange: '#ff8c00',
31+
purple: '#db69e1',
32+
teal: '#00a8af',
3333
},
3434
status: {
35-
light: {
36-
success: '#4bb4b3',
37-
danger: '#ec3f3f',
38-
warning: '#ffad3a',
39-
information: '#377cfc',
40-
},
4135
dark: {
42-
success: '#00a79e',
4336
danger: '#cc2e3d',
37+
general: '#ffffff',
38+
information: '#377cfc',
39+
success: '#00a79e',
4440
warning: '#ffad3a',
41+
},
42+
light: {
43+
danger: '#ec3f3f',
4544
information: '#377cfc',
46-
general: '#ffffff',
45+
success: '#4bb4b3',
46+
warning: '#ffad3a',
4747
},
4848
},
49-
button: {
50-
primary: {
51-
default: '#ff444f',
52-
hover: {
53-
light: '#eb3e48',
54-
dark: '#ff525c',
55-
},
49+
system: {
50+
dark: {
51+
'active-background': '#323738',
52+
'disabled-text': '#3e3e3e',
53+
'general-text': '#c2c2c2',
54+
'hover-background': '#242828',
55+
'less prominent-text': '#6e6e6e',
56+
'primary-background': '#0e0e0e',
57+
'prominent-text': '#ffffff',
58+
'secondary-background': '#151717',
5659
},
57-
'primary-light': {
58-
default: '#ff444f29',
59-
hover: '#ff444f3d',
60+
light: {
61+
'active-background': '#d6dadb',
62+
'disabled-text': '#d6d6d6',
63+
'general-text': '#333333',
64+
'hover-background': '#e6e9e9',
65+
'less-prominent-text': '#999999',
66+
'primary-background': '#ffffff',
67+
'prominent-text': '#333333',
68+
'secondary-background': '#f2f3f4',
6069
},
6170
},
62-
random: {
63-
orange: '#ff8c00',
64-
green: '#71bd0e',
65-
teal: '#00a8af',
66-
blue: '#3f6fe5',
67-
purple: '#db69e1',
68-
},
71+
},
72+
fontFamily: {
73+
sans: ['IBM Plex Sans', 'sans-serif'],
6974
},
7075
},
7176
},
72-
presets: [require('@deriv/quill-design/quill-tailwind/tailwind.config.cjs')],
7377
};

‎packages/tradershub/tailwind.config.ts

-5
This file was deleted.

‎packages/tradershub/webpack.config.js

-2
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,6 @@ module.exports = function (env) {
112112
resources: [
113113
// eslint-disable-next-line global-require, import/no-dynamic-require
114114
...require('../shared/src/styles/index.js'),
115-
// eslint-disable-next-line global-require, import/no-dynamic-require
116-
...require('./src/styles/index.js'),
117115
],
118116
},
119117
},

‎postcss.config.js

-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,5 @@ module.exports = {
22
parser: 'postcss-scss',
33
plugins: {
44
'postcss-preset-env': {},
5-
tailwindcss: {},
6-
autoprefixer: {},
75
},
86
};

0 commit comments

Comments
 (0)