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

Refine dapp styling and spacing #53

Merged
merged 5 commits into from
Jul 24, 2020
Merged

Refine dapp styling and spacing #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33932ee
Updated styling
chrismaree Jul 23, 2020
d2dca1f
nits
chrismaree Jul 24, 2020
8d16b86
Updated favicon
chrismaree Jul 24, 2020
d9eed82
Fixed nits
chrismaree Jul 24, 2020
ba4ae9f
Merge branch 'develop' into chrismaree/refine-styling-and-spacing
chrismaree Jul 24, 2020
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
40 changes: 21 additions & 19 deletions features/all-positions/AllPositions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,11 @@ const AllPositions = () => {

if (tokenSymbol === null || emp === null) {
return (
<Container>
<Box py={2}>
<Typography>
<i>Please first select an EMP from the dropdown above.</i>
</Typography>
</Box>
</Container>
<Box>
<Typography>
<i>Please first connect and select an EMP from the dropdown above.</i>
</Typography>
</Box>
);
}

Expand All @@ -69,31 +67,35 @@ const AllPositions = () => {
};

return (
<Container>
<Box>
<Box>
<Typography>
<i>
Estimated price of{" "}
{latestPrice ? Number(latestPrice).toFixed(4) : "N/A"} for{" "}
{priceId ? utils.parseBytes32String(priceId) : "N/A"} sourced from{" "}
</i>
Estimated price of{" "}
{latestPrice ? Number(latestPrice).toFixed(4) : "N/A"} for{" "}
{priceId ? utils.parseBytes32String(priceId) : "N/A"} sourced from{" "}
<Link href={sourceUrl} target="_blank" rel="noopener noreferrer">
Coinbase Pro.
</Link>
</Typography>
</Box>
<Box py={4}>
<Box pt={4}>
{activeSponsors && (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Sponsor</TableCell>
<TableCell align="right">Collateral ({collSymbol})</TableCell>
<TableCell>
<strong>Sponsor</strong>
</TableCell>
<TableCell align="right">
<strong>Collateral ({collSymbol})</strong>
</TableCell>
<TableCell align="right">
<strong>Synthetics ({tokenSymbol})</strong>
</TableCell>
<TableCell align="right">
Synthetics ({tokenSymbol})
<strong>Collateral Ratio</strong>
</TableCell>
<TableCell align="right">Collateral Ratio</TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand Down Expand Up @@ -131,7 +133,7 @@ const AllPositions = () => {
</TableContainer>
)}
</Box>
</Container>
</Box>
);
};

Expand Down
17 changes: 6 additions & 11 deletions features/contract-state/Totals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,7 @@ const Totals = () => {
<strong>
{loading ? "N/A" : Number(totalCollateral).toLocaleString()}
</strong>
<Tooltip title="Etherscan Link">
<Small> {collSymbol}</Small>
</Tooltip>
<Small> {collSymbol}</Small>
</Typography>
<Label>
of <White>collateral</White> supplied
Expand Down Expand Up @@ -98,15 +96,12 @@ const Totals = () => {
<strong>
{loading ? "N/A" : Number(totalTokens).toLocaleString()}
</strong>
<Tooltip title="Etherscan Link">
<Small> {tokenSymbol}</Small>
</Tooltip>

<Small> {tokenSymbol}</Small>
</Typography>
<Tooltip title="This is the total number of tokens minted minus the total number of tokens redeemed.">
<Label>
of <White>synthetic tokens</White> outstanding
</Label>
</Tooltip>
<Label>
of <White>synthetic tokens</White> outstanding
</Label>
<LinksContainer>
{tokenAddress && (
<SmallLink
Expand Down
4 changes: 1 addition & 3 deletions features/core/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,7 @@ const Header = () => {
return (
<Box display="flex" justifyContent="space-between" alignItems="center">
<Box>
<Typography variant="h4">
<i>EMP Tools</i>
</Typography>
<Typography variant="h4">⚒️⚡️EMP Tools</Typography>
Copy link
Member

Choose a reason for hiding this comment

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

+9999

Copy link
Member

Choose a reason for hiding this comment

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

@mrice32 @kendricktan @adrianmcli @daywiss Please suggest other emoji's here or forever hold your peace! (until the next PR).

Copy link
Member Author

Choose a reason for hiding this comment

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

so you guys can see it more easily it looks like this now:
image

</Box>
<Box display="flex" alignItems="center">
{address && (
Expand Down
169 changes: 84 additions & 85 deletions features/manage-position/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ethers } from "ethers";
import styled from "styled-components";
import { Box, Button, TextField, Typography } from "@material-ui/core";
import { Box, Button, TextField, Typography, Grid } from "@material-ui/core";

import EmpContract from "../../containers/EmpContract";
import { useState } from "react";
Expand All @@ -12,10 +12,6 @@ import Position from "../../containers/Position";
import PriceFeed from "../../containers/PriceFeed";
import Etherscan from "../../containers/Etherscan";

const Container = styled(Box)`
max-width: 720px;
`;

const Important = styled(Typography)`
color: red;
background: black;
Expand Down Expand Up @@ -136,34 +132,30 @@ const Create = () => {
// User has not selected an EMP yet. We can detect this by checking if any properties in `empState` are `null`.
if (collReq === null) {
return (
<Container>
<Box py={2}>
<Typography>
<i>Please first select an EMP from the dropdown above.</i>
</Typography>
</Box>
</Container>
<Box py={2}>
<Typography>
<i>Please first select an EMP from the dropdown above.</i>
</Typography>
</Box>
);
}

if (pendingWithdraw === null || pendingWithdraw === "Yes") {
return (
<Container>
<Box py={2}>
<Typography>
<i>
You need to cancel or execute your pending withdrawal request
before creating additional tokens.
</i>
</Typography>
</Box>
</Container>
<Box py={2}>
<Typography>
<i>
You need to cancel or execute your pending withdrawal request before
creating additional tokens.
</i>
</Typography>
</Box>
);
}

// User has no pending withdrawal requests so they can create tokens.
return (
<Container>
<Box>
<Box py={2}>
<Typography>
<i>
Expand All @@ -172,11 +164,10 @@ const Create = () => {
</Typography>
</Box>
<Box pb={2}>
<Box py={2}>
<Important>
IMPORTANT! Please read this carefully or you may lose money.
</Important>
</Box>
<Important>
IMPORTANT! Please read this carefully or you may lose money.
</Important>

<Box pt={2}>
<Typography>
When minting, your resulting collateralization ratio (collateral /
Expand All @@ -194,68 +185,76 @@ const Create = () => {
them if you want to short the underlying.
</Typography>
</Box>
<Box py={2}>
<Box pb={2}>
nicholaspai marked this conversation as resolved.
Show resolved Hide resolved
<Typography>
When you're ready, fill in the desired amount of collateral and
tokens below and click the "Create" button.
When you're ready, fill in the amount of collateral and tokens below
and click Create.
</Typography>
</Box>
</Box>

<Box py={2}>
<TextField
type="number"
label={`Collateral (${collSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={collateral}
error={balanceTooLow}
helperText={balanceTooLow ? "Balance too low" : null}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setCollateral(e.target.value)
}
/>
</Box>
<Box py={2}>
<TextField
type="number"
label={`Tokens (${tokenSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={tokens}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setTokens(e.target.value)
}
/>
</Box>
<Box py={2}>
{needAllowance() && (
<Button
variant="contained"
onClick={setMaxAllowance}
style={{ marginRight: `12px` }}
>
Approve
</Button>
)}
{tokens &&
collateral &&
gcr &&
!needAllowance() &&
computedCR > gcr &&
!balanceTooLow ? (
<Button
variant="contained"
onClick={handleCreateClick}
>{`Create ${tokens} ${tokenSymbol} with ${collateral} ${collSymbol}`}</Button>
) : (
<Button variant="contained" disabled>
Create
</Button>
)}
</Box>
<Grid container spacing={3}>
nicholaspai marked this conversation as resolved.
Show resolved Hide resolved
<Grid item xs={4}>
<TextField
fullWidth
type="number"
variant="outlined"
label={`Collateral (${collSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={collateral}
error={balanceTooLow}
helperText={balanceTooLow ? "Balance too low" : null}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setCollateral(e.target.value)
}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
type="number"
variant="outlined"
label={`Tokens (${tokenSymbol})`}
placeholder="1234"
inputProps={{ min: "0" }}
value={tokens}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setTokens(e.target.value)
}
/>
</Grid>
<Grid item xs={4}>
<Box py={1}>
{needAllowance() && (
<Button
variant="contained"
onClick={setMaxAllowance}
style={{ marginRight: `12px` }}
>
Approve
</Button>
)}
{tokens &&
collateral &&
gcr &&
!needAllowance() &&
computedCR > gcr &&
!balanceTooLow ? (
<Button
variant="contained"
onClick={handleCreateClick}
>{`Create ${tokens} ${tokenSymbol} with ${collateral} ${collSymbol}`}</Button>
) : (
<Button variant="contained" disabled>
Create
</Button>
)}
</Box>
</Grid>
</Grid>

<Box py={2}>
<Box py={4}>
{tokens && collateral && gcr ? (
<Typography>
Resulting CR:{" "}
Expand Down Expand Up @@ -301,7 +300,7 @@ const Create = () => {
</Typography>
</Box>
)}
</Container>
</Box>
);
};

Expand Down
Loading