aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
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
parent32ceca1bb27bc6258f87521e6b28cb0b9c328ebc (diff)
Settings styling
Diffstat (limited to 'vnext/src')
-rw-r--r--vnext/src/components/Settings.js32
-rw-r--r--vnext/src/style/main.css19
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;