Skip to content

Commit 52bc34d

Browse files
jimmyleejimmylee
committed
completely restyles project with emotion
1 parent 183191a commit 52bc34d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+809
-346
lines changed

‎common/svg.js‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎components/AuthLoginForm.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from 'react';
1+
import * as React from 'react';
22
import Input from '../components/Input';
33
import Button from '../components/Button';
4+
import Border from '../components/Border';
45
import * as Actions from '../common/actions';
56
import * as Strings from '../common/strings';
67
import { connect } from 'react-redux';
@@ -21,15 +22,15 @@ class AuthLoginForm extends React.Component {
2122

2223
render() {
2324
return (
24-
<div>
25+
<div style={this.props.style}>
2526
<Input
2627
label="Username"
2728
autoFocus
2829
value={this.state.username}
2930
name="username"
3031
onChange={this._handleChange}
3132
/>
32-
<hr />
33+
<Border />
3334
<Input
3435
label="Password"
3536
value={this.state.password}
@@ -38,8 +39,10 @@ class AuthLoginForm extends React.Component {
3839
onChange={this._handleChange}
3940
onSubmit={this._handleSubmit}
4041
/>
41-
<hr />
42-
<Button onClick={this._handleSubmit}>Log in</Button>
42+
<Border />
43+
<Button onClick={this._handleSubmit} style={{ marginTop: 16 }}>
44+
Log in
45+
</Button>
4346
</div>
4447
);
4548
}

‎components/AuthSignupForm.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from 'react';
1+
import * as React from 'react';
22
import Input from '../components/Input';
33
import Button from '../components/Button';
4+
import Border from '../components/Border';
45
import * as Actions from '../common/actions';
56
import { connect } from 'react-redux';
67

@@ -21,22 +22,22 @@ class AuthSignupForm extends React.Component {
2122

2223
render() {
2324
return (
24-
<div>
25+
<div style={this.props.style}>
2526
<Input
2627
label="Username"
2728
value={this.state.username}
2829
name="username"
2930
onChange={this._handleChange}
3031
/>
31-
<hr />
32+
<Border />
3233
<Input
3334
label="Password"
3435
value={this.state.password}
3536
name="password"
3637
type="password"
3738
onChange={this._handleChange}
3839
/>
39-
<hr />
40+
<Border />
4041
<Input
4142
label="Verify your password"
4243
value={this.state.verify}
@@ -45,8 +46,10 @@ class AuthSignupForm extends React.Component {
4546
onChange={this._handleChange}
4647
onSubmit={this._handleSubmit}
4748
/>
48-
<hr />
49-
<Button onClick={this._handleSubmit}>Sign up</Button>
49+
<Border />
50+
<Button onClick={this._handleSubmit} style={{ marginTop: 16 }}>
51+
Sign up
52+
</Button>
5053
</div>
5154
);
5255
}

‎components/Border.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import styled from 'react-emotion';
2+
3+
const DottedLine = styled('hr')`
4+
border: 0;
5+
margin: 0;
6+
height: 1px;
7+
border-bottom: 1px dashed #ececec;
8+
`;
9+
10+
export default () => {
11+
return (
12+
<div>
13+
<DottedLine />
14+
<DottedLine />
15+
<DottedLine />
16+
<DottedLine />
17+
</div>
18+
);
19+
};

‎components/BorderedItem.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import styled from 'react-emotion';
2+
3+
const BorderBox = styled('div')`
4+
display: inline-block;
5+
border-left: 1px dashed #ececec;
6+
padding-left: 1px;
7+
`;
8+
9+
export default props => {
10+
return (
11+
<BorderBox style={{ margin: '0 16px 0 2px' }}>
12+
<BorderBox>
13+
<BorderBox style={{ paddingLeft: 8 }}>{props.children}</BorderBox>
14+
</BorderBox>
15+
</BorderBox>
16+
);
17+
};

‎components/BoxHeaderLayout.js‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
1-
import React from 'react';
1+
import * as React from 'react';
2+
import styled from 'react-emotion';
3+
4+
const Header = styled('header')`
5+
display: flex,
6+
align-items: center;
7+
justify-content: space-between;
8+
margin-bottom: 4px;
9+
`;
10+
11+
const Left = styled('div')`
12+
min-width: 25%;
13+
width: 100%;
14+
`;
15+
16+
const Right = styled('div')`
17+
flex-shrink: 0;
18+
`;
219

320
export default class BoxHeaderLayout extends React.Component {
421
render() {
5-
const { style } = this.props;
6-
722
return (
8-
<header style={style}>
9-
<div>{this.props.children}</div>
10-
<div>{this.props.right}</div>
11-
</header>
23+
<Header style={this.props.style}>
24+
<Left>{this.props.children}</Left>
25+
<Right>{this.props.right}</Right>
26+
</Header>
1227
);
1328
}
1429
}

‎components/Button.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
1+
import { css } from 'react-emotion';
32

4-
export default class Button extends React.Component {
5-
static propTypes = {
6-
onClick: PropTypes.func,
7-
};
3+
const buttonStyle = css`
4+
font-size: 12px;
5+
font-weight: 600;
6+
font-family: Courier, monospace;
7+
outline: 0;
8+
margin: 0;
9+
padding: 0;
10+
border: 0;
11+
cursor: pointer;
812
9-
static defaultProps = {
10-
onClick: () => {},
11-
};
13+
&:hover {
14+
color: #0000ff;
15+
text-decoration: underline;
16+
}
1217
13-
render() {
14-
return (
15-
<button style={this.props.style} onClick={this.props.onClick}>
16-
{this.props.children}
17-
</button>
18-
);
18+
&:focus {
19+
outline: 0;
20+
border: 0;
1921
}
20-
}
22+
`;
23+
24+
export default props => (
25+
<button {...props} className={buttonStyle}>
26+
» {props.children}
27+
</button>
28+
);

‎components/ButtonText.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎components/ColumnLayout.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react';
1+
import styled from 'react-emotion';
22

3-
export default class ColumnLayout extends React.Component {
4-
render() {
5-
return <div>{this.props.children}</div>;
6-
}
7-
}
3+
export default styled('div')`
4+
max-width: 672px;
5+
width: 100%;
6+
margin: 0 auto 0 auto;
7+
padding: 48px 16px 228px 16px;
8+
`;

‎components/CommentForm.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React from 'react';
1+
import * as React from 'react';
22
import PropTypes from 'prop-types';
3+
import Border from '../components/Border';
34
import Textarea from '../components/Textarea';
4-
import ButtonText from '../components/ButtonText';
5+
import Button from '../components/Button';
56
import * as Actions from '../common/actions';
7+
import * as Text from '../components/Text';
68
import { connect } from 'react-redux';
7-
import { DeleteIcon } from '../common/svg';
89

9-
class CommentList extends React.Component {
10+
class CommentForm extends React.Component {
1011
static defaultProps = {
1112
postId: PropTypes.string,
1213
commentId: PropTypes.string,
@@ -38,11 +39,11 @@ class CommentList extends React.Component {
3839
render() {
3940
return (
4041
<div>
41-
<header>
42-
<div>{this.props.title}</div>
42+
<header style={{ margin: '16px 0 16px 0' }}>
43+
<Text.PageTitle>{this.props.title}</Text.PageTitle>
4344
<div>
4445
{this.props.isReplying ? (
45-
<DeleteIcon interactionStyle onClick={this.props.onCancel} />
46+
<Button onClick={this.props.onCancel}>Cancel</Button>
4647
) : (
4748
undefined
4849
)}
@@ -54,15 +55,16 @@ class CommentList extends React.Component {
5455
label="comment"
5556
placeholder={this.props.placeholder}
5657
value={this.state.content}
58+
fontSize="16px"
5759
onChange={this._handleContentChange}
5860
/>
5961
<div>
60-
<ButtonText onClick={this._handleSend}>Submit</ButtonText>
62+
<Button onClick={this._handleSend}>Submit</Button>
6163
</div>
6264
</div>
6365
</div>
6466
);
6567
}
6668
}
6769

68-
export default connect(state => state)(CommentList);
70+
export default connect(state => state)(CommentForm);

0 commit comments

Comments
 (0)