gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(ui): remove double focus from SignIn button

Browse Source
This commit is contained in:
Valeriy S
2019-03-06 11:43:14 +03:00
committed by mrugesh mohapatra
parent d9bf87d57d
commit 053c66cbef
2 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/Header/components/Login.js
View File

@ -34,17 +34,15 @@ const createOnClick = (navigate, isSignedIn) => e => {
function Login(props) { function Login(props) {
const { children, navigate, isSignedIn, ...restProps } = props; const { children, navigate, isSignedIn, ...restProps } = props;
return ( return (
<a href='/signin' onClick={createOnClick(navigate, isSignedIn)}> <Button
<Button href='/signin'
{...restProps} onClick={createOnClick(navigate, isSignedIn)}
bsStyle='default' {...restProps}
className={ bsStyle='default'
(restProps.block ? 'btn-cta-big' : '') + ' signup-btn btn-cta' className={(restProps.block ? 'btn-cta-big' : '') + ' signup-btn btn-cta'}
} >
> {children || 'Sign In'}
{children || 'Sign In'} </Button>
</Button>
</a>
); );
} }

12
client/src/components/Header/components/login.css
View File

@ -1,4 +1,5 @@
.signup-btn.btn { .signup-btn.btn,
#top-right-nav .signup-btn.btn {
background-color: #ffac33; background-color: #ffac33;
background-image: linear-gradient(#ffcc4d, #ffac33); background-image: linear-gradient(#ffcc4d, #ffac33);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#ffac33, GradientType=0)'; -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#ffac33, GradientType=0)';
@ -8,14 +9,19 @@
padding: 4px 12px; padding: 4px 12px;
} }
.signup-btn:hover, .signup-btn:hover,
.signup-btn:focus { .signup-btn:focus,
.signup-btn:active:hover,
#top-right-nav .signup-btn:hover,
#top-right-nav .signup-btn:focus,
#top-right-nav .signup-btn:active:hover {
background-color: #e99110; background-color: #e99110;
background-image: linear-gradient(#ffcc4d, #e99110); background-image: linear-gradient(#ffcc4d, #e99110);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#e99110, GradientType=0)'; -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#e99110, GradientType=0)';
border-color: #ec8b11; border-color: #ec8b11;
color: #292f33 !important; color: #292f33 !important;
} }
.signup-btn:active { .signup-btn:active,
#top-right-nav .signup-btn:active {
background-color: #f2a330; background-color: #f2a330;
background-image: none; background-image: none;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);