diff options
| -rw-r--r-- | vnext/src/components/Settings.js | 32 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 19 |
2 files changed, 27 insertions, 24 deletions
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js index 06550194..bf42180a 100644 --- a/vnext/src/components/Settings.js +++ b/vnext/src/components/Settings.js @@ -7,6 +7,7 @@ import { me } from '../api'; import { UserType } from './Types'; import Button from './Button'; +import Icon from './Icon'; export default class Settings extends React.Component { constructor(props) { @@ -69,9 +70,8 @@ export default class Settings extends React.Component { const { me } = this.state; return ( <div className="msg-cont"> - <h1>Settings</h1> <fieldset> - <legend>Changing your avatar</legend> + <legend><Icon name="ei-user" size="m" />Changing your avatar</legend> <form> <p>Avatar: <input type="file" name="avatar" /><br /> <small>Recommendations: PNG, 96x96, <50Kb. Also, JPG and GIF supported.</small></p> @@ -81,7 +81,7 @@ export default class Settings extends React.Component { </form> </fieldset> <fieldset> - <legend>Changing your password</legend> + <legend><Icon name="ei-unlock" size="m" />Changing your password</legend> <form> <p>Change password: <input type="password" name="password" size="8" onChange={this.passwordChanged} /> <Button onClick={this.onSubmitPassword}>Update</Button><br /> @@ -89,7 +89,7 @@ export default class Settings extends React.Component { </form> </fieldset> <fieldset> - <legend>Telegram</legend> + <legend><Icon name="ei-sc-telegram" size="m" />Telegram</legend> {me.telegramName ? ( <form> <div>Telegram: <b> {me.telegramName} </b>— @@ -104,10 +104,7 @@ export default class Settings extends React.Component { {me.jids && ( <form> <fieldset> - <legend style={{ - background: 'url(//static.juick.com/settings/xmpp.png) no-repeat', - paddingLeft: '58px', lineHeight: '48px' - }}>XMPP accounts + <legend>XMPP accounts </legend> <p>Your accounts:</p> <p> @@ -129,11 +126,7 @@ export default class Settings extends React.Component { </form> )} <fieldset> - <legend style={{ - background: 'url(//static.juick.com/settings/email.png) no-repeat', - paddingLeft: '58px', - lineHeight: '48px' - }}>E-mail</legend> + <legend><Icon name="ei-envelope" size="m" />E-mail</legend> <form> <p>Add account:<br /> <input type="text" name="account" /> @@ -183,12 +176,7 @@ export default class Settings extends React.Component { } </fieldset> <fieldset> - <legend style={{ - background: 'url(//static.juick.com/settings/facebook.png) no-repeat', - paddingLeft: '58px', lineHeight: '48px' - }}> - Facebook - </legend> + <legend><Icon name="ei-sc-facebook" size="m" />Facebook</legend> {me.facebookStatus && me.facebookStatus.connected ? ( me.facebookStatus.crosspostEnabled ? <form> @@ -213,11 +201,7 @@ export default class Settings extends React.Component { )} </fieldset> <fieldset> - <legend style={{ - background: 'url(//static.juick.com/settings/twitter.png) no-repeat', - paddingLeft: '58px', lineHeight: '48px' - }}> - Twitter</legend> + <legend><Icon name="ei-sc-twitter" size="m" />Twitter</legend> {me.twitterName ? <form action="/settings" method="post"> <div>Twitter: <b>{me.twitterName}</b> — diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 957ad048..e5b4d5c6 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -25,12 +25,31 @@ html, input, textarea, button, span { h1, h2 { font-weight: normal; + padding: 24px; } ul { list-style-type: none; } +legend { + color: #88958d; + margin: 0; + padding: 12px; + width: 100%; +} + +fieldset { + border: 0; + padding: 12px; + margin: 0; + min-width: 0; +} + +body:not(:-moz-handler-blocked) fieldset { + display: table-cell; +} + a { color: #069; text-decoration: none; |