From f3fa9c39c7dd5fd2b8b1ae19256cc13a580f6361 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Wed, 12 Dec 2018 11:02:56 +0300
Subject: Settings styling

---
 vnext/src/components/Settings.js | 32 ++++++++------------------------
 1 file changed, 8 insertions(+), 24 deletions(-)

(limited to 'vnext/src/components/Settings.js')

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;
-- 
cgit v1.2.3