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

client/src/components/helpers/CurrentChallengeLink.js

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

client/src/components/profile/Profile.js

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

client/src/components/profile/components/Certifications.js

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

client/src/pages/welcome.js

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

client/src/templates/Introduction/Intro.js

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