Skip to content

style: implement new design for Place Order part in Trade path #34

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style: implement new design for Place Order part in Trade path #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 7 additions & 18 deletions src/common/components/data-display/text/SectionTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import {
createStyles,
Grid,
makeStyles,
Tooltip,
Typography,
} from "@material-ui/core";
import { createStyles, Grid, makeStyles, Tooltip } from "@material-ui/core";
import InfoIcon from "@material-ui/icons/InfoOutlined";
import React, { ReactElement } from "react";

Expand All @@ -19,25 +13,20 @@ const useStyles = makeStyles(() => {
display: "flex",
alignItems: "center",
},
sectionTitle: {
color: "#f2f2f2",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe would make sense to define the text colors in theme? Would be great not to define it in every component that uses this text color, and there seem to be many.

fontSize: "18px",
},
});
});

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

return (
<Grid
item
container
justify="center"
alignItems="center"
wrap="nowrap"
spacing={1}
>
<Grid item>
<Grid item>
<Typography component="h2" variant="overline" align="center">
{props.title}
</Typography>
<h1 className={classes.sectionTitle}>{props.title}</h1>
</Grid>

{!!props.info && (
Expand Down
44 changes: 29 additions & 15 deletions src/common/components/input/buttons/ButtonWithLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {
CircularProgress,
createStyles,
FormControl,
FormHelperText,
makeStyles,
Theme,
} from "@material-ui/core";
import React, { ReactElement } from "react";
import Button from "./Button";
Expand All @@ -21,23 +21,36 @@ type ButtonWithLoadingProps = {
helperText?: string;
};

const useStyles = makeStyles(() =>
createStyles({
buttonWrapper: {
position: "relative",
},
buttonProgress: {
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
const useStyles = makeStyles((theme: Theme) => ({
button: (props: ButtonWithLoadingProps) => ({
borderRadius: "initial",
padding: "12px",
fontSize: "16px",
color: "#0c0c0c",

"&.Mui-disabled": {
color: "#0c0c0c",
backgroundColor:
props.color === "primary"
? theme.palette.primary.main
: theme.palette.secondary.main,
Comment on lines +33 to +36
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two concerns here:

  1. the value of color is not either primary or secondary, it can also be another valid option of Material Ui's button color. So let's keep it same as props.color (with primary default). Also, the color value should match with other possible button colors;
  2. do we want this style only for ButtonWithLoading or also for other buttons?

opacity: 0.5,
},
})
);
}),
buttonWrapper: {
position: "relative",
},
buttonProgress: {
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
},
}));

const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
const classes = useStyles();
const classes = useStyles(props);
const {
onClick,
text,
Expand All @@ -55,6 +68,7 @@ const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
<FormControl fullWidth={fullWidth}>
<div className={classes.buttonWrapper}>
<Button
className={classes.button}
text={text}
type={submitButton ? "submit" : "button"}
color={color || "primary"}
Expand Down
1 change: 0 additions & 1 deletion src/common/components/input/text/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const TextField = (props: TextFieldProps): ReactElement => {

return (
<MaterialTextField
variant="outlined"
InputProps={{
endAdornment: endAdornment,
startAdornment: startAdornment,
Expand Down
86 changes: 79 additions & 7 deletions src/dashboard/trade/placeOrder/AmountDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {
createStyles,
withStyles,
Grid,
makeStyles,
Slider,
Tooltip,
Typography,
} from "@material-ui/core";
import InfoIcon from "@material-ui/icons/InfoOutlined";
import { inject, observer } from "mobx-react";
Expand All @@ -21,12 +21,72 @@ type AmountDetailsProps = {
const useStyles = makeStyles(() => {
return createStyles({
iconContainer: {
color: "#979797",
display: "flex",
alignItems: "center",
fontSize: "16px",
},
text: {
color: "#979797",
fontSize: "16px",
Comment on lines +30 to +31
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems we could make use of text components that have sizes, colors, etc. Would eliminate duplicate code and make possible restyling and maintaining lot easier.

padding: "2px 0",
},
textHighlighted: {
color: "#f2f2f2",
},
toolTip: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose all the tooltips should look alike, so why not create a component that has those styles and can be used anywhere?

color: "#f2f2f2",
backgroundColor: "#0c0c0c",
fontSize: "13px",
},
});
});

const CustomSlider = withStyles({
root: {
padding: "8px 0",
},
thumb: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The thumb looks a bit off (it's downwards from the line + the white border is not continuous).

height: "19px",
width: "19px",
border: "2px solid #f2f2f2",
},
track: {
height: 4,
zIndex: 9999,
},
rail: {
height: 2,
color: "#636363",
opacity: "1",
},
mark: {
height: "10px",
width: "1px",
color: "#636363",
"&[data-index='0']": {
display: "none",
},
"&[data-index='4']": {
display: "none",
},
},
markLabel: {
color: "#636363",
fontSize: "12px",
paddingTop: "4px",
"&[data-index='0']": {
paddingLeft: "8px",
},
"&[data-index='4']": {
paddingRight: "30px",
},
},
markLabelActive: {
color: "#f2f2f2",
},
})(Slider);

const AmountDetails = inject(TRADE_STORE)(
observer(
(props: AmountDetailsProps): ReactElement => {
Expand All @@ -46,15 +106,24 @@ const AmountDetails = inject(TRADE_STORE)(
return (
<Grid item container wrap="nowrap" spacing={2} className={className}>
<Grid item container direction="column" xs={4}>
<Typography>Tradable {tradeStore!.baseAsset}</Typography>
<span className={classes.text}>
Tradable {tradeStore!.baseAsset}
</span>
<Grid item container wrap="nowrap" spacing={1}>
<Grid item>
<Typography>
Max: {Number(tradeStore!.currentMaxAmount.toFixed(8))}
</Typography>
<span className={classes.text}>
Max:{" "}
<span className={classes.textHighlighted}>
{Number(tradeStore!.currentMaxAmount.toFixed(8))}{" "}
{tradeStore!.baseAsset}
</span>
</span>
</Grid>
<Grid item className={classes.iconContainer}>
<Tooltip
classes={{
tooltip: classes.toolTip,
}}
title={
<>
<div>
Expand All @@ -79,11 +148,14 @@ const AmountDetails = inject(TRADE_STORE)(
</Grid>
</Grid>
<Grid item xs={8}>
<Slider
<CustomSlider
value={tradeStore!.sliderValue}
getAriaValueText={(value) => `${value}%`}
marks={amountMarks.map((mark) => {
return { value: mark, label: `${mark}%` };
return {
value: mark,
label: mark !== 25 && mark !== 75 ? `${mark}%` : "",
};
})}
valueLabelDisplay="auto"
valueLabelFormat={(value) => `${value}%`}
Expand Down
22 changes: 15 additions & 7 deletions src/dashboard/trade/placeOrder/AmountInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,19 @@ import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore";
type AmountInputProps = {
onAmountChange: () => void;
className?: string;
InputAdornmentClass?: string;
tradeStore?: TradeStore;
};

const AmountInput = inject(TRADE_STORE)(
observer(
(props: AmountInputProps): ReactElement => {
const { tradeStore, onAmountChange, className } = props;
const {
tradeStore,
onAmountChange,
className,
InputAdornmentClass,
} = props;
const showError = !tradeStore!.isAmountValid;

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

return (
<NumberField
className={className}
fullWidth
id="amount"
label="Amount"
Expand All @@ -32,13 +39,14 @@ const AmountInput = inject(TRADE_STORE)(
}}
error={showError}
helperText={showError && errorMessage()}
endAdornment={
<InputAdornment position="end">
{tradeStore!.baseAsset}
</InputAdornment>
}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<p className={InputAdornmentClass}>{tradeStore!.baseAsset}</p>
</InputAdornment>
),
}}
decimalScale={8}
className={className}
/>
);
}
Expand Down
42 changes: 37 additions & 5 deletions src/dashboard/trade/placeOrder/OrderSideButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ButtonGroup } from "@material-ui/core";
import { ButtonGroup, makeStyles } from "@material-ui/core";
import { inject, observer } from "mobx-react";
import React, { ReactElement } from "react";
import Button from "../../../common/components/input/buttons/Button";
Expand All @@ -10,9 +10,43 @@ type OrderSideButtonsProps = {
tradeStore?: TradeStore;
};

const useStyles = makeStyles((theme) => ({
buyButton: (props: OrderSideButtonsProps) => ({
fontSize: "16px",
color: props.tradeStore!.isBuyActive
? theme.palette.primary.main
: "#636363",
border: "none",
borderBottom: props.tradeStore!.isBuyActive
? `2px solid ${theme.palette.primary.main}`
: "2px solid #232322",

borderRadius: "initial",
"&:hover": {
backgroundColor: "transparent",
},
}),
sellButton: (props: OrderSideButtonsProps) => ({
fontSize: "16px",
color: props.tradeStore!.isBuyActive
? "#636363"
: theme.palette.secondary.main,
border: "none",
borderBottom: props.tradeStore!.isBuyActive
? "2px solid #232322"
: `2px solid ${theme.palette.secondary.main}`,

borderRadius: "initial",
"&:hover": {
backgroundColor: "transparent",
},
}),
}));

const OrderSideButtons = inject(TRADE_STORE)(
observer(
(props: OrderSideButtonsProps): ReactElement => {
const classes = useStyles(props);
const { tradeStore, onClick, className } = props;

return (
Expand All @@ -23,17 +57,15 @@ const OrderSideButtons = inject(TRADE_STORE)(
tradeStore!.setIsBuyActive(true);
onClick();
}}
color="primary"
variant={tradeStore!.isBuyActive ? "contained" : "outlined"}
className={classes.buyButton}
/>
<Button
text="Sell"
onClick={() => {
tradeStore!.setIsBuyActive(false);
onClick();
}}
color="secondary"
variant={tradeStore!.isBuyActive ? "outlined" : "contained"}
className={classes.sellButton}
/>
</ButtonGroup>
);
Expand Down
Loading