diff options
| author |  Vitaly Takmazov | 2018-12-12 11:02:56 +0300 |
|---|---|---|
| committer | Vitaly Takmazov | 2023-01-13 10:37:54 +0300 |
| commit | f3fa9c39c7dd5fd2b8b1ae19256cc13a580f6361 (patch) | |
| tree | 24c36a1a81d80519ec69cc4438e2881bd442ab01 /vnext/src/components/Settings.js | |
| parent | 32ceca1bb27bc6258f87521e6b28cb0b9c328ebc (diff) | |
Settings styling
Diffstat (limited to 'vnext/src/components/Settings.js')
| -rw-r--r-- | vnext/src/components/Settings.js | 32 |
1 files changed, 8 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> — |