aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-12-12 11:02:56 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commitf3fa9c39c7dd5fd2b8b1ae19256cc13a580f6361 (patch)
tree24c36a1a81d80519ec69cc4438e2881bd442ab01 /vnext/src/components
parent32ceca1bb27bc6258f87521e6b28cb0b9c328ebc (diff)
Settings styling
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Settings.js32
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, &lt;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>&mdash;
@@ -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> &mdash;