fix(style): remove underlines on button text (#36662)

* fix/remove-link-underlines

* fix(style): remove-underlines-from-buttons

* fix: change class to className

* style/change-class-to-btn-cta
This commit is contained in:
Tom
2019-08-27 12:30:35 -05:00
committed by mrugesh
parent 920209cb23
commit f03a731c36
5 changed files with 21 additions and 43 deletions

View File

@ -25,7 +25,11 @@ const createClickHandler = hardGoTo => e => {
function CurrentChallengeLink({ children, hardGoTo }) { function CurrentChallengeLink({ children, hardGoTo }) {
return ( return (
<a href={currentChallengeApi} onClick={createClickHandler(hardGoTo)}> <a
className='btn-cta-big btn btn-primary btn-block'
href={currentChallengeApi}
onClick={createClickHandler(hardGoTo)}
>
{children} {children}
</a> </a>
); );

View File

@ -1,6 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Alert, Button, Grid, Row, Col } from '@freecodecamp/react-bootstrap'; import { Alert, Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { Link } from 'gatsby'; import { Link } from 'gatsby';
@ -51,13 +51,7 @@ const propTypes = {
}; };
function TakeMeToTheChallenges() { function TakeMeToTheChallenges() {
return ( return <CurrentChallengeLink>Take me to the Challenges</CurrentChallengeLink>;
<CurrentChallengeLink>
<Button block={true} bsSize='lg' bsStyle='primary' className='btn-invert'>
Take me to the Challenges
</Button>
</CurrentChallengeLink>
);
} }
function renderIsLocked(username) { function renderIsLocked(username) {
@ -95,15 +89,8 @@ function renderSettingsButton() {
<Fragment> <Fragment>
<Row> <Row>
<Col sm={4} smOffset={4}> <Col sm={4} smOffset={4}>
<Link to='/settings'> <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
<Button Update my settings
block={true}
bsSize='lg'
bsStyle='primary'
className='btn-invert'
>
Update my settings
</Button>
</Link> </Link>
</Col> </Col>
</Row> </Row>

View File

@ -4,7 +4,7 @@ import { Link } from 'gatsby';
import { curry } from 'lodash'; import { curry } from 'lodash';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button, Row, Col } from '@freecodecamp/react-bootstrap'; import { Row, Col } from '@freecodecamp/react-bootstrap';
import { userByNameSelector } from '../../../redux'; import { userByNameSelector } from '../../../redux';
import FullWidthRow from '../../helpers/FullWidthRow'; import FullWidthRow from '../../helpers/FullWidthRow';
@ -113,15 +113,11 @@ function renderCertShow(username, cert) {
<Fragment key={cert.title}> <Fragment key={cert.title}>
<Row> <Row>
<Col className='certifications' sm={10} smPush={1}> <Col className='certifications' sm={10} smPush={1}>
<Link to={`/certification/${username}/${cert.showURL}`}> <Link
<Button className='btn btn-lg btn-primary btn-block'
block={true} to={`/certification/${username}/${cert.showURL}`}
bsSize='lg' >
bsStyle='primary' View {cert.title}
className='btn-invert'
>
View {cert.title}
</Button>
</Link> </Link>
</Col> </Col>
</Row> </Row>

View File

@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { Grid, Row, Col, Button } from '@freecodecamp/react-bootstrap'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { Loader, Spacer } from '../components/helpers'; import { CurrentChallengeLink, Loader, Spacer } from '../components/helpers';
import CurrentChallengeLink from '../components/helpers/CurrentChallengeLink';
import Supporters from '../components/Supporters'; import Supporters from '../components/Supporters';
import { import {
userSelector, userSelector,
@ -144,9 +143,7 @@ function Welcome({
<Row> <Row>
<Col sm={6} smOffset={3} xs={12}> <Col sm={6} smOffset={3} xs={12}>
<CurrentChallengeLink> <CurrentChallengeLink>
<Button block={true} bsStyle='primary' className='btn-cta-big'> Go to my next challenge
Go to my next challenge
</Button>
</CurrentChallengeLink> </CurrentChallengeLink>
</Col> </Col>
</Row> </Row>

View File

@ -2,11 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link, graphql } from 'gatsby'; import { Link, graphql } from 'gatsby';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { import { ListGroup, ListGroupItem } from '@freecodecamp/react-bootstrap';
Button,
ListGroup,
ListGroupItem
} from '@freecodecamp/react-bootstrap';
import LearnLayout from '../../components/layouts/Learn'; import LearnLayout from '../../components/layouts/Learn';
import FullWidthRow from '../../components/helpers/FullWidthRow'; import FullWidthRow from '../../components/helpers/FullWidthRow';
@ -61,10 +57,8 @@ function IntroductionPage({ data: { markdownRemark, allChallengeNode } }) {
Go to the first lesson Go to the first lesson
</Link> </Link>
<ButtonSpacer /> <ButtonSpacer />
<Link to='/learn'> <Link class='btn btn-lg btn-primary btn-block' to='/learn'>
<Button block={true} bsSize='lg' className='btn-invert'> View the curriculum
View the curriculum
</Button>
</Link> </Link>
<ButtonSpacer /> <ButtonSpacer />
<hr /> <hr />