chore(ui): Minor UI/Copy fixes (#17237)

client/less/main.less

@@ -1059,3 +1059,4 @@ and (max-width : 400px)  {
 &{ @import "./code-mirror.less"; }
 &{ @import "./toastr.less"; }
 &{ @import "../../common/index.less"; }
+&{ @import "./userHome.less"; }

client/less/userHome.less

@@ -0,0 +1,7 @@
+.quote-partial {
+
+  blockquote {
+    font-size: 3.5rem;
+    border: none;
+  }
+}

common/app/routes/Profile/components/Certificates.jsx

@@ -42,59 +42,59 @@ const mapStateToProps = createSelector(
     currentCerts: [
       {
         show: is2018FullStackCert,
-        title: 'Full Stack Certification:',
+        title: 'Full Stack Certification',
         showURL: '2018-full-stack'
       },
       {
         show: isRespWebDesignCert,
-        title: 'Responsive Web Design Certification:',
+        title: 'Responsive Web Design Certification',
         showURL: 'responsive-web-design'
       },
       {
         show: isJsAlgoDataStructCert,
-        title: 'JavaScript Algorithms and Data Structures Certification:',
+        title: 'JavaScript Algorithms and Data Structures Certification',
         showURL: 'javascript-algorithms-and-data-structures'
       },
       {
         show: isFrontEndLibsCert,
-        title: 'Front End Libraries Certification:',
+        title: 'Front End Libraries Certification',
         showURL: 'front-end-libraries'
       },
       {
         show: is2018DataVisCert,
-        title: 'Data Visualization Certification:',
+        title: 'Data Visualization Certification',
         showURL: 'data-visualization'
       },
       {
         show: isApisMicroservicesCert,
-        title: 'APIs and Microservices Certification:',
+        title: 'APIs and Microservices Certification',
         showURL: 'apis-and-microservices'
       },
       {
         show: isInfosecQaCert,
-        title: 'Information Security and Quality Assurance Certification:',
+        title: 'Information Security and Quality Assurance Certification',
         showURL: 'information-security-and-quality-assurance'
       }
     ],
     legacyCerts: [
       {
         show: isFullStackCert,
-        title: 'Full Stack Certification:',
+        title: 'Full Stack Certification',
         showURL: 'legacy-full-stack'
       },
       {
         show: isFrontEndCert,
-        title: 'Front End Certification:',
+        title: 'Front End Certification',
         showURL: 'legacy-front-end'
       },
       {
         show: isBackEndCert,
-        title: 'Back End Certification:',
+        title: 'Back End Certification',
         showURL: 'legacy-back-end'
       },
       {
         show: isDataVisCert,
-        title: 'Data Visualization Certification:',
+        title: 'Data Visualization Certification',
         showURL: 'legacy-data-visualization'
       }
     ]
@@ -124,21 +124,14 @@ const propTypes = {
 function renderCertShow(username, cert) {
   return cert.show ? (
     <Row key={ cert.showURL }>
-      <Col sm={ 8 }>
+      <Col sm={ 10 } smPush={ 1 }>
-        <p className='bigger-text'>
-          <strong>
-            { cert.title }
-          </strong>
-        </p>
-      </Col>
-      <Col sm={ 2 } smPush={ 2 }>
         <Button
           block={ true }
           bsSize='lg'
           bsStyle='primary'
           href={ `/certification/${username}/${cert.showURL}`}
           >
-          Show
+          View {cert.title}
         </Button>
       </Col>
     </Row>

common/app/routes/Settings/Toggle-Button/Toggle-Button.jsx

@@ -6,14 +6,18 @@ import ns from './ns.json';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
+  offLabel: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  onLabel: PropTypes.string,
   value: PropTypes.bool.isRequired
 };
 
 export default function ToggleButton({
   name,
   onChange,
-  value
+  value,
+  onLabel = 'On',
+  offLabel = 'Off'
 }) {
   return (
     <div className={ `${ns}-container` }>
@@ -30,7 +34,7 @@ export default function ToggleButton({
           type='radio'
           value={ 1 }
           >
-          On
+          { onLabel }
         </TB>
         <TB
           bsSize='lg'
@@ -40,7 +44,7 @@ export default function ToggleButton({
           type='radio'
           value={ 2 }
           >
-          Off
+          { offLabel }
         </TB>
       </BSBG>
     </div>

common/app/routes/Settings/components/Honesty.jsx

@@ -45,7 +45,7 @@ class Honesty extends PureComponent {
     const isHonestAgreed = (
       <Panel bsStyle='info'>
         <p>
-          You have accepted our Academic Honesty Policy
+          You have accepted our Academic Honesty Policy.
         </p>
       </Panel>
     );

common/app/routes/Settings/components/Privacy-Settings.jsx

@@ -57,43 +57,58 @@ function PrivacySettings(props) {
       <FullWidthRow>
       <p>
         The settings in this section enable you to control what is show on{' '}
-        your freeCodeCamp public profile.
+        your freeCodeCamp public portfolio.
       </p>
       <ToggleSetting
         action='Make my profile completely private'
-        explain='Your certifications will be disabled'
+        explain={
+          'While your profile is completely private, no one will be able to ' +
+          'see your certifications'
+        }
         flag={ isLocked }
         flagName='isLocked'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('isLocked') }
       />
       <ToggleSetting
         action='Make my name completely private'
         flag={ !showName }
         flagName='name'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showName') }
       />
       <ToggleSetting
         action='Make my location completely private'
         flag={ !showLocation }
         flagName='showLocation'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showLocation') }
       />
       <ToggleSetting
         action='Make my "about me" completely private'
         flag={ !showAbout }
         flagName='showAbout'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showAbout') }
       />
       <ToggleSetting
         action='Make my points completely private'
         flag={ !showPoints }
         flagName='showPoints'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showPoints') }
       />
       <ToggleSetting
         action='Make my heat map completely private'
         flag={ !showHeatMap }
         flagName='showHeatMap'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showHeatMap') }
       />
       <ToggleSetting
@@ -101,18 +116,24 @@ function PrivacySettings(props) {
         explain='Your certifications will be disabled'
         flag={ !showCerts }
         flagName='showCerts'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showCerts') }
       />
       <ToggleSetting
         action='Make my portfolio completely private'
         flag={ !showPortfolio }
         flagName='showPortfolio'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showPortfolio') }
       />
       <ToggleSetting
         action='Make my time line completely private'
         flag={ !showTimeLine }
         flagName='showTimeLine'
+        offLabel='Public'
+        onLabel='Private'
         toggleFlag={ toggleFlag('showTimeLine') }
       />
       </FullWidthRow>

common/app/routes/Settings/components/ToggleSetting.jsx

@@ -21,12 +21,13 @@ export default function ToggleSetting({
   explain,
   flag,
   flagName,
-  toggleFlag
+  toggleFlag,
+  ...restProps
 }) {
   return (
     <Row className='inline-form'>
       <Col sm={ 8 } xs={ 12 }>
-        <ControlLabel htmlFor={ flagName }>
+        <ControlLabel className='toggle-label' htmlFor={ flagName }>
           <p>
             <strong>
               { action }
@@ -43,6 +44,7 @@ export default function ToggleSetting({
           name={ flagName }
           onChange={ toggleFlag }
           value={ flag }
+          {...restProps}
         />
       </Col>
     </Row>

common/app/routes/Settings/settings.less

@@ -65,6 +65,16 @@
 
 .privacy-settings {
 
+  .toggle-label {
+    margin: 0;
+
+    p {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+    }
+  }
+
   .inline-form {
     display: flex;
     align-items: center;

server/views/homePartials/quote.jade

@@ -1,4 +1,4 @@
-.row
+.row.quote-partial
   .col-xs-12.col-sm-8.col-sm-offset-2
     blockquote.blockquote
       span=quote

server/views/homePartials/stats.jade

@@ -7,7 +7,7 @@
       |  of 
       strong
         span.green-text=challengeCount
-      |  lessons.
+      |  coding challenges.
     p.stats
       | You have built 
       strong
@@ -15,7 +15,7 @@
       |  out of 
       strong
         span.green-text 30
-      |  projects
+      |  projects.
     if !!completedLegacyCertCount
       p.stats
         | You have earned 
@@ -24,7 +24,7 @@
         |  out of 
         strong
           span.green-text 3
-        |  legacy certifications
+        |  legacy certifications.
     p.stats
       | You have earned 
       strong
@@ -32,4 +32,4 @@
       |  out of 
       strong
         span.green-text 6
-      |  certifications
+      |  certifications.

server/views/noUserHome.jade

@@ -84,8 +84,6 @@ block content
                 a.btn.btn-cta.signup-btn.btn-block(href="/signin") Start coding (it's free)
         .big-break
         .big-break
-        include homePartials/quote
-        .big-break
         hr
         .big-break
         .big-break