Skip to content

Commit 5195dc6

Browse files
scorebreakerscorebreaker
committed
style: implement new design for Place Order part in Trade path
1 parent 089cd53 commit 5195dc6

File tree

14 files changed

+589
-241
lines changed

14 files changed

+589
-241
lines changed

‎src/common/components/data-display/text/SectionTitle.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import {
2-
createStyles,
3-
Grid,
4-
makeStyles,
5-
Tooltip,
6-
Typography,
7-
} from "@material-ui/core";
1+
import { createStyles, Grid, makeStyles, Tooltip } from "@material-ui/core";
82
import InfoIcon from "@material-ui/icons/InfoOutlined";
93
import React, { ReactElement } from "react";
104

@@ -19,25 +13,20 @@ const useStyles = makeStyles(() => {
1913
display: "flex",
2014
alignItems: "center",
2115
},
16+
sectionTitle: {
17+
color: "#f2f2f2",
18+
fontSize: "18px",
19+
},
2220
});
2321
});
2422

2523
const SectionTitle = (props: SectionTitleProps): ReactElement => {
2624
const classes = useStyles();
2725

2826
return (
29-
<Grid
30-
item
31-
container
32-
justify="center"
33-
alignItems="center"
34-
wrap="nowrap"
35-
spacing={1}
36-
>
27+
<Grid item>
3728
<Grid item>
38-
<Typography component="h2" variant="overline" align="center">
39-
{props.title}
40-
</Typography>
29+
<h1 className={classes.sectionTitle}>{props.title}</h1>
4130
</Grid>
4231

4332
{!!props.info && (

‎src/common/components/input/buttons/ButtonWithLoading.tsx‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {
22
CircularProgress,
3-
createStyles,
43
FormControl,
54
FormHelperText,
65
makeStyles,
6+
Theme,
77
} from "@material-ui/core";
88
import React, { ReactElement } from "react";
99
import Button from "./Button";
@@ -21,23 +21,36 @@ type ButtonWithLoadingProps = {
2121
helperText?: string;
2222
};
2323

24-
const useStyles = makeStyles(() =>
25-
createStyles({
26-
buttonWrapper: {
27-
position: "relative",
28-
},
29-
buttonProgress: {
30-
position: "absolute",
31-
top: "50%",
32-
left: "50%",
33-
marginTop: -12,
34-
marginLeft: -12,
24+
const useStyles = makeStyles((theme: Theme) => ({
25+
button: (props: ButtonWithLoadingProps) => ({
26+
borderRadius: "initial",
27+
padding: "12px",
28+
fontSize: "16px",
29+
color: "#0c0c0c",
30+
31+
"&.Mui-disabled": {
32+
color: "#0c0c0c",
33+
backgroundColor:
34+
props.color === "primary"
35+
? theme.palette.primary.main
36+
: theme.palette.secondary.main,
37+
opacity: 0.5,
3538
},
36-
})
37-
);
39+
}),
40+
buttonWrapper: {
41+
position: "relative",
42+
},
43+
buttonProgress: {
44+
position: "absolute",
45+
top: "50%",
46+
left: "50%",
47+
marginTop: -12,
48+
marginLeft: -12,
49+
},
50+
}));
3851

3952
const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
40-
const classes = useStyles();
53+
const classes = useStyles(props);
4154
const {
4255
onClick,
4356
text,
@@ -55,6 +68,7 @@ const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
5568
<FormControl fullWidth={fullWidth}>
5669
<div className={classes.buttonWrapper}>
5770
<Button
71+
className={classes.button}
5872
text={text}
5973
type={submitButton ? "submit" : "button"}
6074
color={color || "primary"}

‎src/common/components/input/text/TextField.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const TextField = (props: TextFieldProps): ReactElement => {
1515

1616
return (
1717
<MaterialTextField
18-
variant="outlined"
1918
InputProps={{
2019
endAdornment: endAdornment,
2120
startAdornment: startAdornment,

‎src/dashboard/trade/placeOrder/AmountDetails.tsx‎

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {
22
createStyles,
3+
withStyles,
34
Grid,
45
makeStyles,
56
Slider,
67
Tooltip,
7-
Typography,
88
} from "@material-ui/core";
99
import InfoIcon from "@material-ui/icons/InfoOutlined";
1010
import { inject, observer } from "mobx-react";
@@ -21,12 +21,72 @@ type AmountDetailsProps = {
2121
const useStyles = makeStyles(() => {
2222
return createStyles({
2323
iconContainer: {
24+
color: "#979797",
2425
display: "flex",
2526
alignItems: "center",
27+
fontSize: "16px",
28+
},
29+
text: {
30+
color: "#979797",
31+
fontSize: "16px",
32+
padding: "2px 0",
33+
},
34+
textHighlighted: {
35+
color: "#f2f2f2",
36+
},
37+
toolTip: {
38+
color: "#f2f2f2",
39+
backgroundColor: "#0c0c0c",
40+
fontSize: "13px",
2641
},
2742
});
2843
});
2944

45+
const CustomSlider = withStyles({
46+
root: {
47+
padding: "8px 0",
48+
},
49+
thumb: {
50+
height: "19px",
51+
width: "19px",
52+
border: "2px solid #f2f2f2",
53+
},
54+
track: {
55+
height: 4,
56+
zIndex: 9999,
57+
},
58+
rail: {
59+
height: 2,
60+
color: "#636363",
61+
opacity: "1",
62+
},
63+
mark: {
64+
height: "10px",
65+
width: "1px",
66+
color: "#636363",
67+
"&[data-index='0']": {
68+
display: "none",
69+
},
70+
"&[data-index='4']": {
71+
display: "none",
72+
},
73+
},
74+
markLabel: {
75+
color: "#636363",
76+
fontSize: "12px",
77+
paddingTop: "4px",
78+
"&[data-index='0']": {
79+
paddingLeft: "8px",
80+
},
81+
"&[data-index='4']": {
82+
paddingRight: "30px",
83+
},
84+
},
85+
markLabelActive: {
86+
color: "#f2f2f2",
87+
},
88+
})(Slider);
89+
3090
const AmountDetails = inject(TRADE_STORE)(
3191
observer(
3292
(props: AmountDetailsProps): ReactElement => {
@@ -46,15 +106,24 @@ const AmountDetails = inject(TRADE_STORE)(
46106
return (
47107
<Grid item container wrap="nowrap" spacing={2} className={className}>
48108
<Grid item container direction="column" xs={4}>
49-
<Typography>Tradable {tradeStore!.baseAsset}</Typography>
109+
<span className={classes.text}>
110+
Tradable {tradeStore!.baseAsset}
111+
</span>
50112
<Grid item container wrap="nowrap" spacing={1}>
51113
<Grid item>
52-
<Typography>
53-
Max: {Number(tradeStore!.currentMaxAmount.toFixed(8))}
54-
</Typography>
114+
<span className={classes.text}>
115+
Max:{" "}
116+
<span className={classes.textHighlighted}>
117+
{Number(tradeStore!.currentMaxAmount.toFixed(8))}{" "}
118+
{tradeStore!.baseAsset}
119+
</span>
120+
</span>
55121
</Grid>
56122
<Grid item className={classes.iconContainer}>
57123
<Tooltip
124+
classes={{
125+
tooltip: classes.toolTip,
126+
}}
58127
title={
59128
<>
60129
<div>
@@ -79,11 +148,14 @@ const AmountDetails = inject(TRADE_STORE)(
79148
</Grid>
80149
</Grid>
81150
<Grid item xs={8}>
82-
<Slider
151+
<CustomSlider
83152
value={tradeStore!.sliderValue}
84153
getAriaValueText={(value) => `${value}%`}
85154
marks={amountMarks.map((mark) => {
86-
return { value: mark, label: `${mark}%` };
155+
return {
156+
value: mark,
157+
label: mark !== 25 && mark !== 75 ? `${mark}%` : "",
158+
};
87159
})}
88160
valueLabelDisplay="auto"
89161
valueLabelFormat={(value) => `${value}%`}

‎src/dashboard/trade/placeOrder/AmountInput.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,19 @@ import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore";
77
type AmountInputProps = {
88
onAmountChange: () => void;
99
className?: string;
10+
InputAdornmentClass?: string;
1011
tradeStore?: TradeStore;
1112
};
1213

1314
const AmountInput = inject(TRADE_STORE)(
1415
observer(
1516
(props: AmountInputProps): ReactElement => {
16-
const { tradeStore, onAmountChange, className } = props;
17+
const {
18+
tradeStore,
19+
onAmountChange,
20+
className,
21+
InputAdornmentClass,
22+
} = props;
1723
const showError = !tradeStore!.isAmountValid;
1824

1925
const errorMessage = (): string => {
@@ -22,6 +28,7 @@ const AmountInput = inject(TRADE_STORE)(
2228

2329
return (
2430
<NumberField
31+
className={className}
2532
fullWidth
2633
id="amount"
2734
label="Amount"
@@ -32,13 +39,14 @@ const AmountInput = inject(TRADE_STORE)(
3239
}}
3340
error={showError}
3441
helperText={showError && errorMessage()}
35-
endAdornment={
36-
<InputAdornment position="end">
37-
{tradeStore!.baseAsset}
38-
</InputAdornment>
39-
}
42+
InputProps={{
43+
endAdornment: (
44+
<InputAdornment position="end">
45+
<p className={InputAdornmentClass}>{tradeStore!.baseAsset}</p>
46+
</InputAdornment>
47+
),
48+
}}
4049
decimalScale={8}
41-
className={className}
4250
/>
4351
);
4452
}

‎src/dashboard/trade/placeOrder/OrderSideButtons.tsx‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ButtonGroup } from "@material-ui/core";
1+
import { ButtonGroup, makeStyles } from "@material-ui/core";
22
import { inject, observer } from "mobx-react";
33
import React, { ReactElement } from "react";
44
import Button from "../../../common/components/input/buttons/Button";
@@ -10,9 +10,43 @@ type OrderSideButtonsProps = {
1010
tradeStore?: TradeStore;
1111
};
1212

13+
const useStyles = makeStyles((theme) => ({
14+
buyButton: (props: OrderSideButtonsProps) => ({
15+
fontSize: "16px",
16+
color: props.tradeStore!.isBuyActive
17+
? theme.palette.primary.main
18+
: "#636363",
19+
border: "none",
20+
borderBottom: props.tradeStore!.isBuyActive
21+
? `2px solid ${theme.palette.primary.main}`
22+
: "2px solid #232322",
23+
24+
borderRadius: "initial",
25+
"&:hover": {
26+
backgroundColor: "transparent",
27+
},
28+
}),
29+
sellButton: (props: OrderSideButtonsProps) => ({
30+
fontSize: "16px",
31+
color: props.tradeStore!.isBuyActive
32+
? "#636363"
33+
: theme.palette.secondary.main,
34+
border: "none",
35+
borderBottom: props.tradeStore!.isBuyActive
36+
? "2px solid #232322"
37+
: `2px solid ${theme.palette.secondary.main}`,
38+
39+
borderRadius: "initial",
40+
"&:hover": {
41+
backgroundColor: "transparent",
42+
},
43+
}),
44+
}));
45+
1346
const OrderSideButtons = inject(TRADE_STORE)(
1447
observer(
1548
(props: OrderSideButtonsProps): ReactElement => {
49+
const classes = useStyles(props);
1650
const { tradeStore, onClick, className } = props;
1751

1852
return (
@@ -23,17 +57,15 @@ const OrderSideButtons = inject(TRADE_STORE)(
2357
tradeStore!.setIsBuyActive(true);
2458
onClick();
2559
}}
26-
color="primary"
27-
variant={tradeStore!.isBuyActive ? "contained" : "outlined"}
60+
className={classes.buyButton}
2861
/>
2962
<Button
3063
text="Sell"
3164
onClick={() => {
3265
tradeStore!.setIsBuyActive(false);
3366
onClick();
3467
}}
35-
color="secondary"
36-
variant={tradeStore!.isBuyActive ? "outlined" : "contained"}
68+
className={classes.sellButton}
3769
/>
3870
</ButtonGroup>
3971
);

0 commit comments

Comments
 (0)