Skip to content

Commit 201372f

Browse files
kostyshkostysh
committed
mobile styles for organization page
1 parent f333ac2 commit 201372f

17 files changed

+525
-255
lines changed

‎src/components/CopyTextComponent.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { makeStyles, withStyles } from '@material-ui/core/styles';
44

55
import { copyStrToClipboard } from '../utils/helpers';
66
import colors from '../styles/colors';
7+
import CopyIcon from '../assets/SvgComponents/copy-icon.svg';
78

89
const styles = makeStyles({
910
text: {
@@ -45,7 +46,7 @@ export default props => {
4546
fontSize,
4647
color,
4748
textDecoration,
48-
icon
49+
icon = 'default'
4950
} = props;
5051

5152
const [open, setOpen] = useState(false);
@@ -96,14 +97,22 @@ export default props => {
9697
}}
9798
>
9899
{label}
99-
{icon &&
100+
{icon !== 'default' &&
100101
<img
101102
src={icon}
102103
width='16px' height='16px'
103104
alt='Copy'
104105
className={classes.iconCopy}
105106
/>
106107
}
108+
{icon === 'default' &&
109+
<img
110+
src={CopyIcon}
111+
width='16px' height='16px'
112+
alt='Copy'
113+
className={classes.iconCopy}
114+
/>
115+
}
107116
</Typography>
108117
</Typography>
109118
</LightTooltip>

‎src/components/LifDepositValue.js

+42-38
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ const useStyles = makeStyles({
2525
alignRow: {
2626
display: 'flex',
2727
flexDirection: 'row',
28-
alignItems: 'row'
28+
alignItems: 'row',
29+
marginBottom: '10px',
2930
},
3031
label: {
3132
fontFamily: 'Inter',
@@ -47,10 +48,10 @@ const useStyles = makeStyles({
4748
fontSize: '16px',
4849
fontWeight: 500,
4950
lineHeight: '20px',
50-
color: 'black',
5151
textDecoration: 'none',
5252
cursor: 'pointer',
53-
marginLeft: 0
53+
marginLeft: '52px',
54+
color: 'rgb(94, 102, 106)'
5455
},
5556
labelPub: {
5657
fontFamily: 'Inter',
@@ -113,18 +114,23 @@ const useStyles = makeStyles({
113114
}
114115
},
115116
progress: {
116-
marginLeft: '12px',
117-
marginBottom: '-4px',
118117
color: '#5E666A'
119118
},
120119
withdrawalLabel: {
121120
color: '#F8997A'
121+
},
122+
actionBlock: {
123+
display: 'flex',
124+
['@media (max-width:767px)']: { // eslint-disable-line no-useless-computed-key
125+
justifyContent: 'flex-start',
126+
paddingLeft: '48px'
127+
}
122128
}
123129
});
124130

125-
const LifDepostValue = props => {
131+
const LifDepositValue = props => {
126132
const {
127-
orgid: id,
133+
orgid,
128134
canManage,
129135
isFetching,
130136
deposit,
@@ -134,62 +140,60 @@ const LifDepostValue = props => {
134140
enrichLifData
135141
} = props;
136142
const classes = useStyles();
137-
const orgid = id || (history.location.state ? history.location.state.id : history.location.pathname.split('/')[2]);
138143

139144
useEffect(() => {
140145
enrichLifData({ orgid });
141146
}, [orgid, enrichLifData]);
142147

143148
return (
144149
<Grid className={classes.item} container justify='space-between' alignItems='center'>
145-
<Grid item xs={4} className={classes.alignRow}>
150+
<Grid item xs={12} sm={6} className={classes.alignRow}>
146151
<IconLif />
147152
<Typography className={classes.labelProof}>
148153
{canManage &&
149-
<span onClick={() => history.push({
150-
pathname: '/trust/lif-stake',
151-
state: {
152-
orgid
153-
}
154-
})}
154+
<span onClick={() => {
155+
history.push(`/my-organizations/${orgid}/lif-stake`, { id: orgid })
156+
}}
155157
>
156-
Líf tokens deposit
158+
Líf stake
157159
</span>
158160
}
159161
{!canManage &&
160-
<>Líf tokens deposit</>
162+
<>Líf stake</>
161163
}
162164
</Typography>
163165
</Grid>
164-
<Grid item xs={4}>
166+
<Grid item xs={12} sm={5} className={classes.alignRow}>
165167
{isFetching &&
166-
<CircularProgress
167-
className={classes.progress}
168-
variant='indeterminate'
169-
size={18}
170-
thickness={4}
171-
/>
168+
<Typography className={classes.lifLabel}>
169+
<CircularProgress
170+
className={classes.progress}
171+
variant='indeterminate'
172+
size={18}
173+
/>
174+
</Typography>
172175
}
173176
{!isFetching &&
174177
<Typography className={classes.lifLabel}>
175-
{deposit} Líf
178+
{deposit} deposited
176179
</Typography>
177180
}
178181
{withdrawalExist &&
179182
<Typography className={[classes.lifLabel, classes.withdrawalLabel].join(' ')}>
180-
(withdrawal requested: {withdrawalValue} Líf at {(new Date(withdrawalTime)).toISOString().split('T')[0]})
183+
(withdrawal requested: {withdrawalValue} Líf at {(new Date(withdrawalTime)).toISOString().split('T')[0]})
181184
</Typography>
182185
}
183186
</Grid>
184-
<Grid item xs={1}>
185-
<div onClick={!isFetching
186-
? () => enrichLifData({ orgid })
187-
: () => {}
188-
}>
189-
<IconRestart style={{marginLeft: '4px'}} stroke='#F79A8B' />
190-
</div>
191-
192-
</Grid>
187+
<Grid item xs={12} sm={1} justify='flex-end' className={classes.actionBlock}>
188+
{canManage &&
189+
<div onClick={!isFetching
190+
? () => enrichLifData({ orgid })
191+
: () => {}
192+
}>
193+
<IconRestart style={{marginLeft: '4px'}} stroke='#F79A8B' />
194+
</div>
195+
}
196+
</Grid>
193197
</Grid>
194198
);
195199
};
@@ -203,9 +207,9 @@ const mapStateToProps = state => {
203207
withdrawalTime: selectOrgIdLifWithdrawalTime(state)
204208
}
205209
};
206-
210+
207211
const mapDispatchToProps = {
208212
enrichLifData
209213
};
210-
211-
export default connect(mapStateToProps, mapDispatchToProps)(LifDepostValue);
214+
215+
export default connect(mapStateToProps, mapDispatchToProps)(LifDepositValue);

‎src/components/ProofItem.js

+33-7
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,35 @@ import IconLinkedin from './icons/IconLinkedin';
1111
import {
1212
selectPendingState
1313
} from '../ducks/wizard';
14+
import { strCenterEllipsis } from '../utils/helpers';
1415

1516
const useStyles = makeStyles({
1617
item: {
17-
marginBottom: '24px',
18+
marginBottom: '8px',
1819
'&:last-child': {
1920
marginBottom: 0
2021
}
2122
},
2223
alignRow: {
2324
display: 'flex',
2425
flexDirection: 'row',
25-
alignItems: 'row'
26+
alignItems: 'center',
27+
},
28+
adaptive: {
29+
'&> .long': {
30+
display: 'inherit'
31+
},
32+
'&> .short': {
33+
display: 'none'
34+
},
35+
['@media (max-width:767px)']: { // eslint-disable-line no-useless-computed-key
36+
'&> .long': {
37+
display: 'none'
38+
},
39+
'&> .short': {
40+
display: 'inherit'
41+
}
42+
}
2643
},
2744
label: {
2845
fontFamily: 'Inter',
@@ -85,6 +102,7 @@ const useStyles = makeStyles({
85102
fontWeight: 500,
86103
fontSize: 16,
87104
lineHeight: '28px',
105+
marginLeft: '52px',
88106
color: 'black',
89107
'&.verified': {
90108
color: '#4E9D96'
@@ -103,6 +121,13 @@ const useStyles = makeStyles({
103121
marginLeft: '12px',
104122
marginBottom: '-4px',
105123
color: '#5E666A'
124+
},
125+
actionBlock: {
126+
display: 'flex',
127+
['@media (max-width:767px)']: { // eslint-disable-line no-useless-computed-key
128+
justifyContent: 'flex-start',
129+
paddingLeft: '48px'
130+
}
106131
}
107132
});
108133

@@ -141,7 +166,6 @@ const ProofItem = props => {
141166
canManage,
142167
title,
143168
verified,
144-
sslVerified,
145169
deployed,
146170
assertion,
147171
removed,
@@ -155,7 +179,7 @@ const ProofItem = props => {
155179

156180
return (
157181
<Grid className={classes.item} container justify='space-between' alignItems='center'>
158-
<Grid item xs={6} className={classes.alignRow}>
182+
<Grid item xs={12} sm={6} className={classes.alignRow}>
159183
<ProofIcon icon={icon} />
160184
{!assertion.proof &&
161185
<Typography
@@ -174,14 +198,16 @@ const ProofItem = props => {
174198
href={assertion.proof}
175199
target='_blank'
176200
rel='noopener noreferrer'
201+
className={classes.adaptive}
177202
>
178-
{title}
203+
<span className={'long'}>{title}</span>
204+
<span className={'short'}>{strCenterEllipsis(title, 10)}</span>
179205
</a>
180206
</Typography>
181207

182208
}
183209
</Grid>
184-
<Grid item xs={5}>
210+
<Grid item xs={12} sm={5}>
185211
{(deployed && !verified) &&
186212
<State classes={{ state: 'not-verified' }}>Not verified</State>
187213
}
@@ -215,7 +241,7 @@ const ProofItem = props => {
215241
</State>
216242
}
217243
</Grid>
218-
<Grid item xs={1} style={{ display: 'flex' }} justify='flex-end'>
244+
<Grid item xs={12} sm={1} justify='flex-end' className={classes.actionBlock}>
219245
{((deployed || removed) && canManage) &&
220246
<IconDelete
221247
className={

0 commit comments

Comments
 (0)