crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak tabel formating of addres table

Browse Source
This commit is contained in:
Fred Carlsen
2019-02-14 21:28:48 +01:00
committed by Jacob Evans
parent 139b66fa76
commit b2da451e8d
1 changed files with 8 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/website/ts/pages/governance/address_table_row.tsx
View File

@@ -5,6 +5,7 @@ import styled from 'styled-components';
// tslint:disable-next-line: no-duplicate-imports // tslint:disable-next-line: no-duplicate-imports
import { ChangeEvent } from 'react'; import { ChangeEvent } from 'react';
import { CheckMark } from 'ts/components/ui/check_mark';
import { colors } from 'ts/style/colors'; import { colors } from 'ts/style/colors';
interface RadioProps { interface RadioProps {
@@ -26,7 +27,8 @@ interface MarkerProps {
const Radio: React.StatelessComponent<RadioProps> = ({ address, onSelectAddress, isActive, value }) => { const Radio: React.StatelessComponent<RadioProps> = ({ address, onSelectAddress, isActive, value }) => {
return ( return (
<> <>
<Marker isActive={isActive} /> {/* <Marker isActive={isActive} /> */}
<CheckMark isChecked={isActive} color={colors.brandLight} />
<RadioInput value={value} onChange={onSelectAddress} checked={isActive} /> <RadioInput value={value} onChange={onSelectAddress} checked={isActive} />
</> </>
); );
@@ -47,7 +49,7 @@ export const AddressTableRow: React.StatelessComponent<PreferenceSelecterProps>
<LabelText isActive={isActive}>{address}</LabelText> <LabelText isActive={isActive}>{address}</LabelText>
</Label> </Label>
</Cell> </Cell>
<Cell> <Cell isRightAligned={true}>
<LabelText isActive={isActive}>{balance}</LabelText> <LabelText isActive={isActive}>{balance}</LabelText>
</Cell> </Cell>
</Wrapper> </Wrapper>
@@ -64,9 +66,12 @@ const Wrapper = styled.tr<MarkerProps>`
margin-bottom: 10px; margin-bottom: 10px;
`; `;
const Cell = styled.td` const Cell = styled.td<{ isRightAligned?: boolean }>`
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px 0; padding: 10px 0;
font-size: 14px;
vertical-align: middle;
text-align: ${props => props.isRightAligned && 'right'};
`; `;
const Label = styled.label` const Label = styled.label`
@@ -83,23 +88,6 @@ const LabelText = styled.span<MarkerProps>`
font-weight: 400; font-weight: 400;
`; `;
const Marker = styled.span<MarkerProps>`
border: 1px solid #cccccc;
border-color: ${props => props.isActive && colors.brandLight};
display: flex;
width: 16px;
height: 16px;
border-radius: 50%;
position: relative;
flex-shrink: 0;
${props =>
props.isActive &&
`
background-color: ${colors.brandLight};
`}
`;
const RadioInput = styled.input.attrs({ const RadioInput = styled.input.attrs({
type: 'radio', type: 'radio',
name: 'userAddress', name: 'userAddress',