Commit 5e91b68b authored by Pon Kattera's avatar Pon Kattera
Browse files

Styled the login form

parent 079cc838
......@@ -199,10 +199,10 @@ class LoginForm extends Component {
</div>}
<div>
<label className="LoginForm__save-login" htmlFor="saveLogin">
{tt('loginform_jsx.keep_me_logged_in')} &nbsp;
<input id="saveLogin" type="checkbox" ref="pw" {...saveLogin.props} onChange={this.saveLoginToggle} disabled={submitting} /></label>
<input id="saveLogin" type="checkbox" ref="pw" {...saveLogin.props} onChange={this.saveLoginToggle} disabled={submitting} />&nbsp;{tt('loginform_jsx.keep_me_logged_in')}</label>
</div>
<div>
<div className="login-modal-buttons">
<br />
<button type="submit" disabled={submitting || disabled} className="button" onClick={this.SignIn}>
{submitLabel}
......@@ -214,7 +214,7 @@ class LoginForm extends Component {
<div className="sign-up">
<hr />
<p>{tt('loginform_jsx.join_our')} <em>{tt('loginform_jsx.amazing_community')}</em>{tt('loginform_jsx.to_comment_and_reward_others')}</p>
<button type="button" className="button" onClick={this.SignUp}>{tt('loginform_jsx.signup_button')}<em>{tt('loginform_jsx.signup_button_emphasis')}</em></button>
<button type="button" className="button hollow" onClick={this.SignUp}>{tt('loginform_jsx.sign_up_get_steem')}</button>
</div>
</form>
);
......
......@@ -7,24 +7,81 @@
form {
margin-top: 1.5rem;
}
.login-modal-buttons {
.button {
text-decoration: none;
font-weight: bold;
transition: 0.2s all ease-in-out;
text-transform: capitalize;
border-radius: 0;
@include font-size(18px);
background-color: $color-blue-black;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,0), 5px 5px 0 0 $color-teal;
color: $color-white;
&:hover, &:focus {
background-color: $color-teal;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1), 7px 7px 0 0 $color-black;
color: $color-white;
text-shadow: 0 1px 0 rgba(0,0,0,0.20);
}
&:visited, &:active {
color: $color-white;
}
}
.button.disabled, .button[disabled] {
opacity: 0.25;
cursor: not-allowed;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,0);
&:hover, &:focus {
background-color: $color-blue-black;
}
}
}
.button.hollow {
background-color: transparent;
color: $color-text-gray;
font-weight: normal;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0);
border: none;
text-shadow: 0px 0px 0px rgba(0,0,0,0);
&:hover, &:focus {
background-color: transparent;
color: $color-text-dark;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0);
border: none;
text-shadow: 0 0px 0 rgba(0,0,0,0);
}
}
}
.sign-up {
.button {
background-color: #4078C0 !important;
background-color: transparent;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 1.2rem;
text-transform: none;
text-transform: none;
}
.button.hollow {
border: 1px solid #ddd;
color: $color-blue-black;
transition: 0.2s all ease-in-out;
@include font-size(16px);
&:hover {
border: 1px solid $color-teal-dark;
color: $color-teal-dark;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
}
}
em {
font-weight: bold;
font-style: normal;
}
}
hr {
margin: 1.75rem auto 2rem auto;
}
p {
margin-bottom: 2rem;
margin-bottom: 1rem;
}
}
......
......@@ -558,6 +558,7 @@
"to_comment_and_reward_others": " to comment and reward others.",
"signup_button": "Sign up now to earn ",
"signup_button_emphasis": "FREE STEEM!",
"sign_up_get_steem": "Sign up. Get STEEM",
"returning_users": "Returning Users: ",
"join_our": "Join our"
},
......
......@@ -551,6 +551,7 @@
"to_comment_and_reward_others": "para comentar y recompensar a otros",
"sign_up_now_to_earn": "Regístrate ahora para ganar",
"free_money": "¡DINERO GRATIS!",
"sign_up_get_steem": "Sign up. Get STEEM",
"returning_users": "Usuarios que vuelven",
"join_our": "Únete a nuestro"
},
......
......@@ -543,6 +543,7 @@
"to_comment_and_reward_others": " pour commenter et récompenser les autres.",
"sign_up_now_to_earn": "Inscrivez-vous maintenant pour gagner ",
"free_money": "ARGENT GRATUIT!",
"sign_up_get_steem": "Sign up. Get STEEM",
"returning_users": "Utilisateurs de retour :",
"join_our": "Rejoignez notre"
},
......
......@@ -543,6 +543,7 @@
"to_comment_and_reward_others": "per commentare e premiare gli altri. ",
"sign_up_now_to_earn": "Registrati ora per guadagnare",
"free_money": "SOLDI GRATIS!",
"sign_up_get_steem": "Sign up. Get STEEM",
"returning_users": "Utenti di ritorno:",
"join_our": "Unisciti al nostro"
},
......
......@@ -553,6 +553,7 @@
"to_comment_and_reward_others": " комментировать и вознаграждать других.",
"sign_up_now_to_earn": "Зарегистрируйтесь сейчас, чтобы заработать ",
"free_money": "ЛЕГКИЕ ДЕНЬГИ!",
"sign_up_get_steem": "Sign up. Get STEEM",
"returning_users": "Вернувшиеся пользователи: ",
"join_our": "Присоединяйтесь к нашему"
},
......
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