Update font sizes, make control row in settings absolutely positioned

This commit is contained in:
Mikhail Mikheev 2019-09-05 17:10:45 +04:00
parent 3660174530
commit d7c056eade
5 changed files with 21 additions and 16 deletions

View File

@ -11,16 +11,10 @@ import TextField from '~/components/forms/TextField'
import GnoForm from '~/components/forms/GnoForm'
import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline'
import Button from '~/components/layout/Button'
import { sm } from '~/theme/variables'
import { lg } from '~/theme/variables'
import { styles } from './style'
const controlsStyle = {
backgroundColor: 'white',
padding: sm,
}
export const SAFE_NAME_INPUT_TEST_ID = 'safe-name-input'
export const SAFE_NAME_SUBMIT_BTN_TEST_ID = 'change-safe-name-btn'
@ -48,7 +42,7 @@ const ChangeSafeName = (props: Props) => {
{() => (
<>
<Block className={classes.formContainer}>
<Heading tag="h3">Modify Safe name</Heading>
<Heading tag="h2">Modify Safe name</Heading>
<Paragraph>
You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or
any third parties.
@ -66,8 +60,7 @@ const ChangeSafeName = (props: Props) => {
/>
</Block>
</Block>
<Hairline />
<Row style={controlsStyle} align="end" grow>
<Row className={classes.controlsRow} align="end" grow>
<Col end="xs">
<Button
type="submit"

View File

@ -1,10 +1,9 @@
// @flow
import { lg, sm, boldFont } from '~/theme/variables'
import { lg, sm, boldFont, border } from '~/theme/variables'
export const styles = () => ({
formContainer: {
padding: lg,
minHeight: '369px',
},
root: {
display: 'flex',
@ -13,5 +12,14 @@ export const styles = () => ({
saveBtn: {
marginRight: sm,
fontWeight: boldFont,
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
},
controlsRow: {
padding: lg,
position: 'absolute',
bottom: 0,
boxSizing: 'border-box',
width: '100%',
borderTop: `2px solid ${border}`,
},
})

View File

@ -98,7 +98,7 @@ class Settings extends React.Component<Props, State> {
</Paragraph>
</Col>
<Col xs={6} end="sm">
<Paragraph noMargin size="md" color="error" onClick={this.onShow('RemoveSafe')}>
<Paragraph noMargin size="lg" color="error" onClick={this.onShow('RemoveSafe')}>
<Span className={cn(classes.links, classes.removeSafeText)}>Remove Safe</Span>
<Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
</Paragraph>

View File

@ -1,6 +1,6 @@
// @flow
import {
sm, lg, border, secondary, bolderFont, background,
sm, md, lg, border, secondary, bolderFont, background, largeFontSize,
} from '~/theme/variables'
export const styles = () => ({
@ -15,11 +15,12 @@ export const styles = () => ({
letterSpacing: '-0.5px',
},
menu: {
borderRight: `solid 1px ${border}`,
borderRight: `solid 2px ${border}`,
height: '100%',
},
menuOption: {
padding: lg,
fontSize: largeFontSize,
padding: `${md} 0 ${md} ${lg}`,
alignItems: 'center',
cursor: 'pointer',
},
@ -30,6 +31,7 @@ export const styles = () => ({
},
container: {
height: '100%',
position: 'relative',
},
message: {
margin: `${sm} 0`,

View File

@ -15,6 +15,7 @@ import {
regularFont,
boldFont,
buttonLargeFontSize,
largeFontSize,
border,
xs,
secondaryText,
@ -49,6 +50,7 @@ export default createMuiTheme({
MuiButton: {
label: {
lineHeight: 1,
fontSize: largeFontSize,
fontWeight: regularFont,
},
root: {