Skip to content
This repository has been archived by the owner on Jan 15, 2021. It is now read-only.

Commit

Permalink
1029/styling take 2 (#1096)
Browse files Browse the repository at this point in the history 
* Adding breathing room to trades table

* 1029/styling take 3 mobile opt (#1098)

* extrapolate common CardWidget into new component

* add correct data labels to TradeRow

* Added CardWidgetWrapper to TradesWidget

* address der uebernit, ja wohl

* Extracting InnerTradesWidget component for reusability

* Fitting `Fills` tab into TradeWidget

* Combine limit price and fill price columns

* Combine amount and received columns

* Adding some space when using double headers on same column

* Added some padding to the left of Fills table

* Renamed columns Amount=>Sold and Received=>Bought

* Move Fills tab to second position

* 1029.2/david style take (#1112)

* CardTable CSS

1. fix issue with left - right alignment
2. pass left alignment as default, right as custom to Balances
3. min-height and no padding for forced equal header height
4. css cleanup (formatting, lint)
5. less padding trades header

* Card default css

1. format css for readability
2. better padding

* add isTab prop to set smaller columns dimensions

* fixed lowBalance format

* 1102/filter fills trades (#1116)

* moved common fns to utils

1. filter fns to utils/filter
2. computeMarketProp to utils/display

* move DetailedPendingOrder into ExchangeAPI

1. create Market interface which is extended by DetailedAuctionElement, DetailedPendingOrder + Trades

* moved types and imported, moved fns out of OrdersWidget into utils

* derive market prop in useTrades for later filtering

1. use in TradesWidget

* fixed moved type

* Filter /Orders by market (#1119)

* conputeMarketProp: always return string

* filter orders by market

* remove Market type

* make filterTradesAndOrderFnFactory and new filter fns

1. filterTradesFn
2. filterOrdersFn
3. pass to useDataFilter
4. Orders: make work for both different filters

* remove computeMarketProp

* computeMarketProp accepts args to create inverse market

1. allow inverse markets to be searched on demand

* empty string separator

* reverse market computation (#1127)

* reverse market computation

* Trades: invert price (#1128)

* CardRowDrawer classname

1. dont use styled component as class
2. fix padding

* Update src/components/Layout/Card/Card.tsx

Co-authored-by: Velenir <Velenir@users.noreply.github.com>

* make CardTable/Widget fit better

1. Balances page: less cluttering, better wrapping format
2. make wrap/unwrap buttons thinner

* Orders: better responsive design

Co-authored-by: Velenir <Velenir@users.noreply.github.com>

Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>
Co-authored-by: David <david.sato64@gmail.com>
Co-authored-by: Velenir <Velenir@users.noreply.github.com>
  • Loading branch information
@alfetopito @W3stside @Velenir
4 people authored Jun 24, 2020
1 parent 9c59ef7 commit 10a3be7
Show file tree
Hide file tree
Showing 14 changed files with 484 additions and 286 deletions.
4 changes: 4 additions & 0 deletions src/api/exchange/ExchangeApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,10 @@ export interface ExchangeApi extends DepositApi {
cancelOrders(params: CancelOrdersParams): Promise<Receipt>
}

export interface DetailedPendingOrder extends DetailedAuctionElement {
txHash?: string
}

export interface DetailedAuctionElement extends AuctionElement {
buyToken: TokenDetails | null
sellToken: TokenDetails | null
Expand Down
2 changes: 1 addition & 1 deletion src/components/DepositWidget/Styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const TokenRow = styled.tr`
border-radius: 2.4rem;
height: 2.4rem;
width: 2.4rem;
margin: 0 0 0 1rem;
margin-left: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
Expand Down
172 changes: 29 additions & 143 deletions src/components/DepositWidget/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,10 @@ import BN from 'bn.js'
import { logDebug, getToken } from 'utils'
import { ZERO, MEDIA } from 'const'
import { TokenBalanceDetails } from 'types'
import { LocalTokensState } from 'reducers-actions/localTokens'
import { TokenLocalState } from 'reducers-actions'

// Components
import { CardTable } from 'components/Layout/Card'
import { CardTable, CardWidgetWrapper } from 'components/Layout/Card'
import ErrorMsg from 'components/ErrorMsg'
import Widget from 'components/Layout/Widget'
import FilterTools from 'components/FilterTools'

// DepositWidget: subcomponents
Expand All @@ -30,154 +27,43 @@ import useGlobalState from 'hooks/useGlobalState'
import { useEthBalances } from 'hooks/useEthBalance'
import useDataFilter from 'hooks/useDataFilter'

// Reducer/Actions
import { LocalTokensState } from 'reducers-actions/localTokens'
import { TokenLocalState } from 'reducers-actions'

interface WithdrawState {
amount: BN
tokenAddress: string
}

const BalancesWidget = styled(Widget)`
display: flex;
flex-flow: column nowrap;
width: auto;
padding: 0 0 2.4rem;
min-width: 85rem;
max-width: 140rem;
background: var(--color-background-pageWrapper);
box-shadow: 0 -1rem 4rem 0 rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02) 0 0.276726rem 0.221381rem 0,
rgba(0, 0, 0, 0.027) 0 0.666501rem 0.532008rem 0, rgba(0, 0, 0, 0.035) 0 1.25216rem 1.0172rem 0,
rgba(0, 0, 0, 0.043) 0 2.23363rem 1.7869rem 0, rgba(0, 0, 0, 0.05) 0 4.17776rem 3.34221rem 0,
rgba(0, 0, 0, 0.07) 0 10rem 8rem 0;
border-radius: 0.6rem;
margin: 0 auto;
min-height: 54rem;
font-size: 1.6rem;
line-height: 1;
justify-content: flex-start;
@media ${MEDIA.tablet} {
min-width: 100vw;
min-width: calc(100vw - 4.8rem);
width: 100%;
max-width: 100%;
}
@media ${MEDIA.mobile} {
max-width: 100%;
min-width: initial;
width: 100%;
> div {
flex-flow: row wrap;
const BalancesWidget = styled(CardWidgetWrapper)`
${CardTable} {
> thead,
> tbody {
> tr:not(.cardRowDrawer) {
> td,
> th {
justify-content: flex-end;
text-align: right;
}
}
}
${CardTable}.balancesOverview {
display: flex;
flex-flow: column nowrap;
width: auto;
order: 2;
}
${CardTable}.balancesOverview > tbody {
font-size: 1.3rem;
line-height: 1;
@media ${MEDIA.mobile} {
display: flex;
flex-flow: column wrap;
width: 100%;
}
}
${CardTable}.balancesOverview > thead {
background: var(--color-background);
border-radius: 0.6rem;
@media ${MEDIA.mobile} {
display: none;
}
}
${CardTable}.balancesOverview > thead > tr:not([class^="Card__CardRowDrawer"]),
${CardTable}.balancesOverview > tbody > tr:not([class^="Card__CardRowDrawer"]) {
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
text-align: right;
padding: 0.8rem;
margin: 0;
justify-content: flex-start;
@media ${MEDIA.mobile} {
padding: 1.6rem 0.8rem;
display: table;
flex-flow: column wrap;
width: 100%;
border-bottom: 0.2rem solid rgba(159, 180, 201, 0.5);
}
}
${CardTable}.balancesOverview > thead > tr:not([class^="Card__CardRowDrawer"]) > th {
font-size: 1.1rem;
color: var(--color-text-primary);
letter-spacing: 0;
text-align: right;
padding: 0.8rem;
text-transform: uppercase;
&:first-of-type {
text-align: left;
}
}
${CardTable}.balancesOverview > tbody > tr:not([class^="Card__CardRowDrawer"]) > td {
display: flex;
flex-flow: row wrap;
align-items: center;
padding: 0 0.5rem;
text-align: right;
justify-content: flex-end;
word-break: break-all;
white-space: normal;
@media ${MEDIA.mobile} {
width: 100%;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.14);
padding: 1rem 0.5rem;
flex-flow: row nowrap;
&:last-of-type {
border: 0;
> tbody > tr:not(.cardRowDrawer) > td {
&[data-label='Token'] {
font-family: var(--font-default);
letter-spacing: 0;
line-height: 1.2;
flex-flow: row nowrap;
}
}
&:first-of-type {
text-align: left;
justify-content: flex-start;
}
&[data-label='Token'] {
font-family: var(--font-default);
letter-spacing: 0;
line-height: 1.2;
flex-flow: row nowrap;
}
&[data-label='Token'] > div > b {
display: block;
color: var(--color-text-primary);
}
&[data-label='Token'] > div {
word-break: break-word;
&::before {
@media ${MEDIA.mobile} {
content: attr(data-label);
margin-right: auto;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
font-size: 1rem;
font-family: var(--font-default);
letter-spacing: 0;
white-space: nowrap;
padding: 0 0.5rem 0 0;
color: var(--color-text-primary);
> b {
display: block;
color: var(--color-text-primary);
}
}
}
}
Expand Down Expand Up @@ -342,7 +228,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
const { modalProps, toggleModal } = useManageTokens()

return (
<BalancesWidget>
<BalancesWidget $columns="minmax(13.2rem,0.8fr) repeat(2,minmax(10rem,1fr)) minmax(14.5rem, 1fr) minmax(13.8rem, 0.8fr)">
<FilterTools
resultName="tokens"
searchValue={search}
Expand All @@ -361,7 +247,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
{error ? (
<ErrorMsg title="oops..." message="Something happened while loading the balances" />
) : (
<CardTable className="balancesOverview">
<CardTable className="balancesOverview" $gap="0 1rem">
<thead>
<tr>
<th>Token</th>
Expand Down
Loading

0 comments on commit 10a3be7

Please sign in to comment.