Settings styling

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, &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;
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;