Commit 24a2d122 authored by Roger Jungemann's avatar Roger Jungemann
Browse files

Style homepage

parent 5a8c7d12
<svg width="46" height="46" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h40v40H0z"/></defs><g transform="translate(0 3)" fill="none" fill-rule="evenodd"><circle fill="#FFF" cx="19.396" cy="19.666" r="18.182"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M20.41 18.97a.84.84 0 0 0 .294-.67c0-.303-.1-.52-.3-.647-.2-.127-.507-.191-.922-.191h-.838v1.76h.826c.431 0 .745-.084.94-.252zm.317 1.779c-.239-.148-.602-.222-1.09-.222h-.993v2.012h.994c.965 0 1.449-.352 1.449-1.054 0-.343-.12-.588-.36-.736zm7.227-3.108c.271.08.503.213.695.4.191.189.341.44.45.755.107.316.16.705.16 1.168 0 .471-.053.866-.16 1.185-.109.32-.259.578-.45.773a1.676 1.676 0 0 1-.695.425 2.943 2.943 0 0 1-.91.132h-.335V17.52h.335c.335 0 .639.04.91.12zm2.838 4.072a3.238 3.238 0 0 1-.778 1.227 3.194 3.194 0 0 1-1.204.724 4.8 4.8 0 0 1-1.562.24h-2.3v-7.808h2.204c.599 0 1.137.076 1.616.228.48.151.89.385 1.234.7.343.316.607.717.79 1.204.184.487.276 1.066.276 1.736 0 .67-.092 1.254-.276 1.749zm-8.215.922a2.01 2.01 0 0 1-.647.712 2.985 2.985 0 0 1-.964.42 4.88 4.88 0 0 1-1.186.137h-2.898v-7.808h2.67c.408 0 .785.03 1.133.09.347.06.65.166.91.317.259.152.463.352.61.599.148.248.222.56.222.934a2.048 2.048 0 0 1-.276 1.018 1.854 1.854 0 0 1-.317.407c-.124.12-.265.208-.425.264v.048c.2.047.383.122.551.221a1.695 1.695 0 0 1 .742.91c.072.203.108.437.108.701 0 .399-.078.742-.233 1.03zm-8.01-.077a2.227 2.227 0 0 1-.575.766c-.25.22-.56.395-.928.527a3.674 3.674 0 0 1-1.245.198c-.511 0-1.02-.094-1.527-.282a3.983 3.983 0 0 1-1.36-.844l1.007-1.21c.28.24.588.436.928.587.34.152.672.228 1 .228.367 0 .64-.068.82-.204.18-.135.27-.319.27-.55a.6.6 0 0 0-.078-.312.748.748 0 0 0-.228-.233 2.13 2.13 0 0 0-.36-.192l-.46-.197-1.018-.432c-.2-.08-.393-.183-.581-.31a2.553 2.553 0 0 1-.503-.45 2.028 2.028 0 0 1-.485-1.371c0-.32.068-.621.204-.904a2.25 2.25 0 0 1 .574-.743c.248-.211.541-.377.88-.497.34-.12.713-.18 1.12-.18.455 0 .905.089 1.348.264a3.41 3.41 0 0 1 1.167.767l-.898 1.113a3.409 3.409 0 0 0-.766-.46 2.168 2.168 0 0 0-.85-.163c-.304 0-.546.062-.725.186a.596.596 0 0 0-.27.521c0 .12.03.221.09.305.06.084.144.16.252.228.107.068.233.132.377.192s.3.125.467.197l1.006.407c.479.192.856.455 1.132.79.275.336.413.779.413 1.33 0 .327-.066.636-.198.928zM20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20S31.046 0 20 0z" fill="#3A29D2" mask="url(#b)"/></g></svg>
\ No newline at end of file
<svg width="46" height="46" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><path d="M29.163 28.688l-.184.185a13.4 13.4 0 0 1-1.205 1.074l-.482.379a.175.175 0 0 1-.204.01.175.175 0 0 1-.078-.188l.192-.855a5.323 5.323 0 0 0-.135-2.814l-.102-.316c-.12-.366-.26-.73-.415-1.082l-2.237-5.272-.24-.718a3.343 3.343 0 0 1-.15-.684l-.041-.36a3.33 3.33 0 0 1 .953-2.735l.184-.185c.378-.38.784-.741 1.205-1.073l.481-.38a.175.175 0 0 1 .204-.01c.065.04.095.114.079.189l-.192.855a5.321 5.321 0 0 0 .134 2.814l.103.315c.12.366.259.73.415 1.082l2.237 5.273.24.718c.073.222.124.452.15.684l.04.36a3.33 3.33 0 0 1-.952 2.734zm-6.445 1.73l-.235.237a16.91 16.91 0 0 1-1.517 1.351l-.63.496a.193.193 0 0 1-.308-.194l.248-1.108a6.725 6.725 0 0 0-.17-3.555l-.13-.4a14.66 14.66 0 0 0-.523-1.367l-2.822-6.65-.302-.905a4.193 4.193 0 0 1-.19-.857l-.05-.46a4.17 4.17 0 0 1 1.193-3.424l.235-.237c.477-.479.987-.933 1.518-1.351l.629-.496a.191.191 0 0 1 .222-.011c.07.044.104.125.086.206l-.248 1.107a6.72 6.72 0 0 0 .17 3.555l.13.4c.15.462.327.922.523 1.367l2.822 6.65.302.905c.093.278.156.567.189.857l.052.46a4.17 4.17 0 0 1-1.194 3.424zm-7.553-1.73l-.184.185c-.378.38-.784.742-1.205 1.074l-.482.379a.175.175 0 0 1-.204.01.175.175 0 0 1-.078-.188l.192-.855a5.32 5.32 0 0 0-.134-2.814l-.103-.316a11.66 11.66 0 0 0-.415-1.082l-2.237-5.272-.24-.718a3.341 3.341 0 0 1-.15-.684l-.04-.36a3.33 3.33 0 0 1 .952-2.735l.184-.185c.379-.38.784-.741 1.205-1.073l.482-.38a.175.175 0 0 1 .204-.01c.064.04.095.114.078.189l-.191.855a5.321 5.321 0 0 0 .133 2.814l.103.315c.12.366.259.73.415 1.082l2.237 5.273.24.718c.074.222.125.452.15.684l.041.36a3.33 3.33 0 0 1-.953 2.734zM20 2C8.954 2 0 10.954 0 22s8.954 20 20 20 20-8.954 20-20S31.046 2 20 2z" fill="#3A29D2"/><ellipse fill="#FFF" cx="37.861" cy="9.478" rx="7.328" ry="7.109"/><path d="M40.121 8.212l-3.34 6.998c-.108.225-.453.115-.407-.13l.798-4.302a.355.355 0 0 0-.353-.417h-1.27a.23.23 0 0 1-.212-.328l3.34-6.999c.108-.224.453-.115.408.13l-.798 4.303c-.04.217.129.416.353.416h1.27a.23.23 0 0 1 .211.329zm4.816-4.303L38.48.238a1.827 1.827 0 0 0-1.806 0l-6.458 3.67a1.773 1.773 0 0 0-.903 1.54v7.342c0 .635.344 1.222.903 1.54L36.673 18a1.825 1.825 0 0 0 1.806 0l6.458-3.67c.559-.318.903-.905.903-1.54V5.45c0-.635-.344-1.223-.903-1.54z" fill="#F76900"/></g></svg>
\ No newline at end of file
<svg width="46" height="46" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 3)" fill="none" fill-rule="evenodd"><circle fill="#FFF" cx="19.396" cy="19.668" r="18.182"/><path d="M20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20S31.046 0 20 0z" fill="#3A29D2"/><path d="M29.163 26.689l-.184.185a13.4 13.4 0 0 1-1.205 1.073l-.482.38a.175.175 0 0 1-.204.01.175.175 0 0 1-.078-.189l.192-.855a5.323 5.323 0 0 0-.135-2.814l-.102-.316c-.12-.365-.26-.729-.415-1.081v-.001l-2.237-5.272-.24-.718a3.346 3.346 0 0 1-.15-.684l-.041-.36a3.33 3.33 0 0 1 .953-2.734l.184-.185c.378-.38.784-.742 1.205-1.074l.481-.379a.175.175 0 0 1 .204-.01c.065.04.095.114.079.188l-.192.855a5.321 5.321 0 0 0 .134 2.814l.103.316c.12.365.259.729.415 1.081l2.237 5.273.24.718c.073.222.124.452.15.684l.04.36a3.33 3.33 0 0 1-.952 2.735zM22.718 28.418l-.236.237c-.476.48-.986.934-1.517 1.352l-.629.495a.193.193 0 0 1-.223.012.192.192 0 0 1-.085-.206l.248-1.107a6.725 6.725 0 0 0-.17-3.556l-.13-.4a14.687 14.687 0 0 0-.523-1.366l-.001-.001-2.821-6.65-.303-.904a4.187 4.187 0 0 1-.188-.858l-.052-.46a4.17 4.17 0 0 1 1.193-3.423l.236-.237a16.88 16.88 0 0 1 1.518-1.352l.628-.495a.191.191 0 0 1 .223-.012c.07.044.104.125.086.206l-.248 1.108a6.72 6.72 0 0 0 .169 3.555l.13.4c.152.462.328.921.524 1.366l2.822 6.651.302.905c.093.278.156.566.189.857l.052.46a4.17 4.17 0 0 1-1.194 3.423zM15.165 26.689l-.184.185c-.379.38-.784.74-1.206 1.073l-.481.38a.175.175 0 0 1-.204.01.175.175 0 0 1-.078-.189l.19-.855a5.32 5.32 0 0 0-.133-2.814l-.103-.316c-.12-.365-.259-.729-.414-1.081v-.001l-2.238-5.272-.24-.718a3.344 3.344 0 0 1-.15-.684l-.04-.36a3.33 3.33 0 0 1 .952-2.734l.184-.185c.38-.38.784-.742 1.205-1.074l.482-.379a.175.175 0 0 1 .204-.01c.064.04.095.114.079.188l-.192.855a5.32 5.32 0 0 0 .134 2.814l.103.316c.12.365.258.729.414 1.081l2.237 5.273.24.718c.074.222.125.452.151.684l.04.36a3.33 3.33 0 0 1-.953 2.735z" fill="#FFF"/></g></svg>
\ No newline at end of file
......@@ -49,3 +49,4 @@
@import "./pages/RecoverAccountStep1";
@import "./pages/Witnesses";
@import "./pages/About";
@import "./pages/WalletIndex";
......@@ -104,7 +104,7 @@ export default class UserProfile extends React.Component {
const username = current_user ? current_user.get('username') : null;
let { section } = this.props.routeParams;
if (!section) section = 'blog';
if (!section) section = 'transfers';
// Loading status
const status = global_status
......@@ -193,8 +193,6 @@ export default class UserProfile extends React.Component {
tab_content = <Settings routeParams={this.props.routeParams} />;
} else if (section === 'comments') {
tab_content = <div />;
} else if (!section || section === 'blog') {
tab_content = <div />;
} else if (section === 'recent-replies') {
tab_content = <div />;
} else if (section === 'permissions' && isMyAccount) {
......@@ -236,9 +234,7 @@ export default class UserProfile extends React.Component {
// Page title
if (isMyAccount) {
if (section === 'blog') {
page_title = tt('g.my_blog');
} else if (section === 'comments') {
if (section === 'comments') {
page_title = tt('g.my_comments');
} else if (section === 'recent-replies') {
page_title = tt('g.my_replies');
......@@ -246,9 +242,7 @@ export default class UserProfile extends React.Component {
page_title = tt('g.settings');
}
} else {
if (section === 'blog') {
page_title = tt('g.blog');
} else if (section === 'comments') {
if (section === 'comments') {
page_title = tt('g.comments');
} else if (section === 'recent-replies') {
page_title = tt('g.replies');
......@@ -259,20 +253,6 @@ export default class UserProfile extends React.Component {
const layoutClass = 'layout-list';
const blog_header = (
<div>
<div className="articles__header">
<div className="articles__header-col">
<h1 className="articles__h1">{page_title}</h1>
</div>
<div className="articles__header-col articles__header-col--right">
<ArticleLayoutSelector />
</div>
</div>
<hr className="articles__hr" />
</div>
);
if (
!(
section === 'transfers' ||
......@@ -290,12 +270,7 @@ export default class UserProfile extends React.Component {
section
)}
>
<article className="articles">
{section === 'blog' || 'comments'
? blog_header
: null}
{tab_content}
</article>
<article className="articles">{tab_content}</article>
</div>
</div>
);
......
......@@ -31,35 +31,103 @@ class WalletIndex extends React.Component {
const { username } = this.state;
const { submitting, valid, handleSubmit } = this.state.login;
return (
<div
className="LoginForm row"
onSubmit={handleSubmit(({ data }) => {
dispatchSubmit(data);
})}
>
<form method="post">
<div className="input-group">
<span className="input-group-label">@</span>
<input
type="text"
className="input-group-field"
required
placeholder={tt(
'loginform_jsx.enter_your_username'
)}
ref="username"
name="username"
autoComplete="on"
{...username.props}
/>
<div className="WalletIndex">
<div className="row">
<div className="column login">
<h3 style={{ fontWeight: 'bold' }}>
{tt('wallet_index.title')}
</h3>
<p>{tt('wallet_index.description')}</p>
<form
method="post"
onSubmit={handleSubmit(({ data }) => {
dispatchSubmit(data);
})}
>
<div className="input-group">
<input
type="text"
className="input-group-field"
required
placeholder={tt(
'loginform_jsx.enter_your_username'
)}
ref="username"
name="username"
autoComplete="on"
{...username.props}
/>
</div>
<div className="modal-buttons">
<button
type="submit"
disabled=""
className="button"
>
{tt('wallet_index.login')}
</button>
</div>
</form>
</div>
<div className="login-modal-buttons">
<br />
<button type="submit" disabled="" className="button">
Login
</button>
<div className="column tokens">
<div className="sheet-container">
<div className="sheet">
<div className="sheet">
<div className="sheet">
<h3>
{tt('wallet_index.steem_tokens')}
</h3>
<div className="token-container">
<div className="token token-steem" />
<span>
<h4>
{tt(
'wallet_index.steem_symbol'
)}
</h4>
<span className="text">
{tt(
'wallet_index.steem_description'
)}
</span>
</span>
</div>
<div className="token-container">
<div className="token token-steem-power" />
<span>
<h4>
{tt(
'wallet_index.steem_power_symbol'
)}
</h4>
<span className="text">
{tt(
'wallet_index.steem_power_description'
)}
</span>
</span>
</div>
<div className="token-container">
<div className="token token-sbd" />
<span>
<h4>
{tt(
'wallet_index.sbd_symbol'
)}
</h4>
<span className="text">
{tt(
'wallet_index.sbd_description'
)}
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
);
}
......
.WalletIndex {
/* TODO: Fix flex by making parent element take 100% of height */
/* display: flex; */
/* vertical-align: middle; */
padding-top: 5em;
h1, h2, h3, h4, h5, h6, p {
font-family: helvetica, sans-serif;
}
h3, h4 {
font-weight: bold;
}
.login, .tokens {
margin-left: 5%;
margin-right: 5%;
}
.tokens {
margin-right: 10%;
h3 {
margin-bottom: 16px;
font-size: 1.5rem;
}
h4 {
font-size: 100%;
height: 1.3em;
padding-top: 6px;
margin-bottom: 0;
}
.text {
color: #777;
font-size: 0.9em;
}
.token-container {
clear: both;
margin-bottom: 20px;
}
.token-container:last-child {
margin-bottom: 10px;
}
.token {
display: inline-block;
float: left;
margin-right: 10px;
}
.sheet-container {
position: relative;
left: -18px;
top: 23px;
width: 100%;
height: 100%;
}
.sheet {
background-color: white;
border: 1px solid #ddd;
width: 100%;
height: 100%;
position: relative;
left: 9px;
top: -11px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.sheet > .sheet > .sheet {
padding-top: 16px;
padding-bottom: 16px;
padding-left: 20px;
padding-right: 20px;
}
.token-steem {
background: url('/images/token-steem.svg');
width: 46px;
height: 46px;
}
.token-steem-power {
display: inline-block;
background: url('/images/token-steem-power.svg');
width: 46px;
height: 46px;
}
.token-sbd {
display: inline-block;
background: url('/images/token-sbd.svg');
width: 46px;
height: 46px;
}
}
button[type=submit] {
background-color: black;
border-radius: 0;
padding-left: 2.0em;
padding-right: 2.0em;
}
@media screen and (max-width: 63.9375em) {
.login, .tokens {
margin-left: initial;
margin-right: initial;
}
}
@media screen and (max-width: 39.9375em) {
.row {
flex-flow: column;
}
.login, .tokens {
margin-bottom: 5em;
}
.tokens {
h3 {
font-size: 1.1875rem;
}
h4 {
height: 1.4em;
padding-top: 8px;
}
.sheet-container {
padding-left: 10px;
padding-right: 10px;
}
}
}
}
......@@ -893,5 +893,18 @@
"sanitizedlink_jsx": {
"phishylink_caution": "Link hidden; phishing attempt",
"phishylink_reveal": "show link"
},
"wallet_index": {
"title": "Steem wallet login",
"description":
"Welcome to Steemit's official Steem blockchain wallet. Use it to transfer Steem tokens, Power up, vote for Steem Witnesses and change your Steem profile details.",
"login": "Login",
"steem_tokens": "Steem tokens",
"steem_symbol": "STEEM",
"steem_description": "Liquid platform token",
"steem_power_symbol": "STEEM Power",
"steem_power_description": "Vesting influence token",
"sbd_symbol": "SBD",
"sbd_description": "Vesting influence token"
}
}
......@@ -105,6 +105,7 @@ function* usernameLogin(action) {
sessionStorage.setItem('username', username);
serverApiRecordEvent('SignIn', 'Login');
yield put(userActions.setUsername({ username }));
browserHistory.push(`/@${action.payload.username}/transfers`);
} else {
const username = sessionStorage.getItem('username');
if (username) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment