Upgrade font-awesome to 5+ (cypress-io#5822)

* Upgrade font-awesome to 5+ - replace all ‘fa’ uses with ‘fas’ or ‘far’ respectively - rename icons that required renaming - remove scss font-awesome 4 references and replace with font-awesome 5 - update npm package that is installed * fix failing spec * include all the necssary scss * fix/improve tests * fix icon references * fix some icons Co-authored-by: Chris Breiding <[email protected]>
santoshyadavdev · Dec 4, 2019 · f15886f · f15886f
1 parent dbde3bd
commit f15886f
Show file tree

Hide file tree

Showing 51 changed files with 181 additions and 173 deletions.
diff --git a/packages/desktop-gui/cypress/integration/project_nav_spec.js b/packages/desktop-gui/cypress/integration/project_nav_spec.js
@@ -167,7 +167,7 @@ describe('Project Nav', function () {
 
         it('displays browser icon as spinner', () => {
           cy.get('.browsers-list>a').first().find('i')
-          .should('have.class', 'fa fa-refresh fa-spin')
+          .should('have.class', 'fas fa-sync fa-spin')
         })
 
         it('disables browser dropdown', () => {
@@ -185,7 +185,7 @@ describe('Project Nav', function () {
 
         it('displays browser icon as opened', () => {
           cy.get('.browsers-list>a').first().find('i')
-          .should('have.class', 'fa fa-check-circle-o')
+          .should('have.class', 'fas fa-check-circle')
         })
 
         it('disables browser dropdown', () => {

diff --git a/packages/desktop-gui/cypress/integration/specs_list_spec.js b/packages/desktop-gui/cypress/integration/specs_list_spec.js
@@ -186,7 +186,7 @@ describe('Specs List', function () {
           })
 
           it('updates spec icon', function () {
-            cy.get('@allSpecs').find('i').should('have.class', 'fa-dot-circle-o')
+            cy.get('@allSpecs').find('i').should('have.class', 'fa-dot-circle')
 
             cy.get('@allSpecs').find('i').should('not.have.class', 'fa-play')
           })
@@ -424,8 +424,8 @@ describe('Specs List', function () {
         })
 
         it('updates spec icon', function () {
-          cy.get('@firstSpec').find('i').should('have.class', 'fa-dot-circle-o')
-          cy.get('@firstSpec').find('i').should('not.have.class', 'fa-file-code-o')
+          cy.get('@firstSpec').find('i').should('have.class', 'fa-dot-circle')
+          cy.get('@firstSpec').find('i').should('not.have.class', 'fa-file-code')
         })
 
         it('sets spec as active', () => {
@@ -439,7 +439,7 @@ describe('Specs List', function () {
         })
 
         it('updates spec icon', () => {
-          cy.get('@deepSpec').find('i').should('have.class', 'fa-dot-circle-o')
+          cy.get('@deepSpec').find('i').should('have.class', 'fa-dot-circle')
         })
 
         it('sets spec as active', () => {
@@ -461,8 +461,8 @@ describe('Specs List', function () {
       })
 
       it('updates spec icon', function () {
-        cy.get('@firstSpec').find('i').should('not.have.class', 'fa-dot-circle-o')
-        cy.get('@secondSpec').find('i').should('have.class', 'fa-dot-circle-o')
+        cy.get('@firstSpec').find('i').should('not.have.class', 'fa-dot-circle')
+        cy.get('@secondSpec').find('i').should('have.class', 'fa-dot-circle')
       })
 
       it('updates active spec', function () {

diff --git a/packages/desktop-gui/package.json b/packages/desktop-gui/package.json
@@ -21,13 +21,13 @@
     "@cypress/icons": "0.7.0",
     "@cypress/json-schemas": "5.33.0",
     "@cypress/react-tooltip": "0.5.3",
+    "@fortawesome/fontawesome-free": "5.11.2",
     "bin-up": "1.2.2",
     "bluebird": "3.5.3",
     "bootstrap-sass": "3.4.1",
     "classnames": "2.2.6",
     "cross-env": "5.2.1",
     "fira": "cypress-io/fira#fb63362742eea8cdce0d90825ab9264d77719e3d",
-    "font-awesome": "4.7.0",
     "gravatar": "1.8.0",
     "human-interval": "0.1.6",
     "lodash": "4.17.15",

diff --git a/packages/desktop-gui/src/app/global-error.jsx b/packages/desktop-gui/src/app/global-error.jsx
@@ -13,14 +13,14 @@ const GlobalError = observer(() => {
   return (
     <div className='global-error alert alert-danger'>
       <p>
-        <i className='fa fa-warning'></i>{' '}
+        <i className="fas fa-exclamation-triangle"></i>{' '}
         <strong>{appStore.error.name || 'Unexpected Error'}</strong>
       </p>
       <p dangerouslySetInnerHTML={{
         __html: appStore.error.message.split('\n').join('<br />'),
       }} />
       <button className='btn btn-link close' onClick={remove}>
-        <i className='fa fa-remove' />
+        <i className='fas fa-times' />
       </button>
     </div>
   )

diff --git a/packages/desktop-gui/src/app/intro.jsx b/packages/desktop-gui/src/app/intro.jsx
@@ -34,8 +34,8 @@ class Default extends Component {
             onDrop={this._drop}
           >
             <span className="fa-stack fa-lg">
-              <i className="fa fa-folder fa-stack-2x"></i>
-              <i className="fa fa-plus fa-stack-1x"></i>
+              <i className="fas fa-folder fa-stack-2x"></i>
+              <i className="fas fa-plus fa-stack-1x"></i>
             </span>
             <p>Drag your project here or <a href="#" onClick={this._selectProject}>select manually</a>.</p>
           </div>
@@ -51,7 +51,7 @@ class Default extends Component {
     return (
       <div className='local-install-notice alert alert-info alert-dismissible'>
         <p className='text-center'>
-          <i className='fa fa-info-circle'></i>{' '}
+          <i className='fas fa-info-circle'></i>{' '}
           We recommend versioning Cypress per project and{' '}
           <a onClick={this._openHelp} className='helper-docs-link'>
             installing it via <span className='mono'>npm</span>

diff --git a/packages/desktop-gui/src/app/intro.scss b/packages/desktop-gui/src/app/intro.scss
@@ -75,8 +75,7 @@
   line-height: 3em;
   }
 
-  .fa {
-    // font-size: 50px;
+  .fas {
     color: #d3d6d8;
 
     &.fa-stack-2x {

diff --git a/packages/desktop-gui/src/app/nav.jsx b/packages/desktop-gui/src/app/nav.jsx
@@ -25,12 +25,12 @@ export default class Nav extends Component {
         <ul className='nav'>
           <li>
             <a onClick={this._openSupport} href='#'>
-              <i className='fa fa-question-circle'></i> Support
+              <i className='fas fa-question-circle'></i> Support
             </a>
           </li>
           <li>
             <a onClick={this._openDocs} href='#'>
-              <i className='fa fa-graduation-cap'></i> Docs
+              <i className='fas fa-graduation-cap'></i> Docs
             </a>
           </li>
           {this._userStateButton()}
@@ -51,7 +51,7 @@ export default class Nav extends Component {
     if (appStore.isGlobalMode && project) {
       return (
         <Link to={routes.intro()}>
-          <i className='fa fa-chevron-left'></i> Back
+          <i className='fas fa-chevron-left'></i> Back
         </Link>
       )
     }
@@ -69,7 +69,7 @@ export default class Nav extends Component {
       return (
         <li>
           <div>
-            <i className='fa fa-user' /> <i className='fa fa-spinner fa-spin' />
+            <i className='fas fa-user' /> <i className='fas fa-spinner fa-spin' />
           </div>
         </li>
       )
@@ -79,7 +79,7 @@ export default class Nav extends Component {
       return (
         <li>
           <a onClick={this._showLogin}>
-            <i className='fa fa-user' /> Log In
+            <i className='fas fa-user' /> Log In
           </a>
         </li>
       )
@@ -114,7 +114,7 @@ export default class Nav extends Component {
 
     return (
       <span>
-        <i className='fa fa-sign-out'></i>{' '}
+        <i className='fas fa-sign-out-alt'></i>{' '}
         Log Out
       </span>
     )

diff --git a/packages/desktop-gui/src/auth/login-form.jsx b/packages/desktop-gui/src/auth/login-form.jsx
@@ -61,15 +61,15 @@ class LoginForm extends Component {
       if (message && message.name === 'AUTH_COULD_NOT_LAUNCH_BROWSER') {
         return (
           <span>
-            <i className='fa fa-exclamation-triangle'></i>{' '}
+            <i className='fas fa-exclamation-triangle'></i>{' '}
             Could not open browser.
           </span>
         )
       }
 
       return (
         <span>
-          <i className='fa fa-spinner fa-spin'></i>{' '}
+          <i className='fas fa-spinner fa-spin'></i>{' '}
           {message && message.browserOpened ? 'Waiting for browser login...' : 'Opening browser...'}
         </span>
       )
@@ -90,7 +90,7 @@ class LoginForm extends Component {
     return (
       <div className='alert alert-danger'>
         <p>
-          <i className='fa fa-warning'></i>{' '}
+          <i className='fas fa-exclamation-triangle'></i>{' '}
           <strong>Can't Log In</strong>
         </p>
         <p>{this._errorMessage(error.message)}</p>

diff --git a/packages/desktop-gui/src/auth/login-modal.jsx b/packages/desktop-gui/src/auth/login-modal.jsx
@@ -68,7 +68,7 @@ class LoginContent extends Component {
     return (
       <div className='modal-body login'>
         <BootstrapModal.Dismiss className='btn btn-link close'>x</BootstrapModal.Dismiss>
-        <h1><i className='fa fa-lock'></i> Log In</h1>
+        <h1><i className='fas fa-lock'></i> Log In</h1>
         <p>Logging in gives you access to the <a onClick={this._openDashboard}>Cypress Dashboard Service</a>. You can set up projects to be recorded and see test data from your project.</p>
         <LoginForm onSuccess={() => this.setState({ succeeded: true })} />
       </div>
@@ -79,7 +79,7 @@ class LoginContent extends Component {
     return (
       <div className='modal-body login'>
         <BootstrapModal.Dismiss className='btn btn-link close'>x</BootstrapModal.Dismiss>
-        <h1><i className='fa fa-check'></i> Login Successful</h1>
+        <h1><i className='fas fa-check'></i> Login Successful</h1>
         <p>You are now logged in as {authStore.user.name}.</p>
         <div className='login-content'>
           <button
@@ -97,14 +97,14 @@ class LoginContent extends Component {
     return (
       <div className='modal-body login login-no-api-server'>
         <BootstrapModal.Dismiss className='btn btn-link close'>x</BootstrapModal.Dismiss>
-        <h4><i className='fa fa-wifi'></i> Cannot connect to API server</h4>
+        <h4><i className='fas fa-wifi'></i> Cannot connect to API server</h4>
         <p>Logging in requires connecting to an external API server. We tried but failed to connect to the API server at <em>{this.state.apiUrl}</em></p>
         <p>
           <button
             className='btn btn-default btn-sm'
             onClick={this._pingApiServer}
           >
-            <i className='fa fa-refresh'></i>{' '}
+            <i className='fas fa-sync'></i>{' '}
             Try again
           </button>
         </p>

diff --git a/packages/desktop-gui/src/duration-timer/TimerDisplay.jsx b/packages/desktop-gui/src/duration-timer/TimerDisplay.jsx
@@ -21,7 +21,7 @@ export default class TimerDisplay extends Component {
   render () {
     return (
       <span className='env-duration'>
-        <i className='fa fa-hourglass-half'></i>
+        <i className='fas fa-hourglass-half'></i>
         {this.timerStore.mainDisplay}
       </span>
     )

diff --git a/packages/desktop-gui/src/lib/utils.js b/packages/desktop-gui/src/lib/utils.js
@@ -65,7 +65,7 @@ export const getStatusIcon = (status) => {
     case 'passed':
       return 'check-circle'
     case 'running':
-      return 'refresh fa-spin'
+      return 'sync fa-spin'
     case 'overLimit':
       return 'exclamation-triangle'
     case 'timedOut':

diff --git a/packages/desktop-gui/src/project-nav/browsers.jsx b/packages/desktop-gui/src/project-nav/browsers.jsx
@@ -35,7 +35,7 @@ export default class Browsers extends Component {
       return (
         <li className='close-browser'>
           <button className='btn btn-xs btn-danger' onClick={this._closeBrowser.bind(this)}>
-            <i className='fa fa-fw fa-times'></i>
+            <i className='fas fa-fw fa-times'></i>
             Stop
           </button>
         </li>
@@ -58,19 +58,19 @@ export default class Browsers extends Component {
     let prefixText
 
     if (project.browserState === 'opening') {
-      icon = 'refresh fa-spin'
+      icon = 'fas fa-sync fa-spin'
       prefixText = 'Opening'
     } else if (project.browserState === 'opened') {
-      icon = 'check-circle-o green'
+      icon = 'fas fa-check-circle green far'
       prefixText = 'Running'
     } else {
-      icon = browser.icon
+      icon = `fab fa-${browser.icon}`
       prefixText = ''
     }
 
     return (
       <span className={browser.name}>
-        <i className={`fa fa-${icon}`}></i>{' '}
+        <i className={icon}></i>{' '}
         {prefixText}{' '}
         {browser.displayName}{' '}
         {browser.majorVersion}
@@ -90,7 +90,7 @@ export default class Browsers extends Component {
           placement='bottom'
           className='browser-info-tooltip cy-tooltip'
         >
-          <i className='fa fa-exclamation-triangle' />
+          <i className='fas fa-exclamation-triangle' />
         </Tooltip>
       </span>
     )
@@ -106,7 +106,7 @@ export default class Browsers extends Component {
           placement='bottom'
           className='browser-info-tooltip cy-tooltip'
         >
-          <i className='fa fa-info-circle' />
+          <i className='fas fa-info-circle' />
         </Tooltip>
       </span>
     )

diff --git a/packages/desktop-gui/src/project-nav/project-nav.jsx b/packages/desktop-gui/src/project-nav/project-nav.jsx
@@ -12,19 +12,19 @@ export default class ProjectNav extends Component {
         <ul className='nav'>
           <li>
             <Link to={routes.specs(project)}>
-              <i className='fa fa-code'></i>{' '}
+              <i className='fas fa-code'></i>{' '}
               Tests
             </Link>
           </li>
           <li>
             <Link to={routes.runs(project)}>
-              <i className='fa fa-database'></i>{' '}
+              <i className='fas fa-database'></i>{' '}
               Runs
             </Link>
           </li>
           <li>
             <Link to={routes.settings(project)}>
-              <i className='fa fa-cog'></i>{' '}
+              <i className='fas fa-cog'></i>{' '}
               Settings
             </Link>
           </li>

diff --git a/packages/desktop-gui/src/project/error-message.jsx b/packages/desktop-gui/src/project/error-message.jsx
@@ -60,7 +60,7 @@ class ErrorMessage extends Component {
       <div className='full-alert-container'>
         <div className='full-alert alert alert-danger error'>
           <p className='header'>
-            <i className='fa fa-warning'></i>{' '}
+            <i className='fas fa-exclamation-triangle'></i>{' '}
             <strong>{err.title || 'Can\'t start server'}</strong>
           </p>
           <span className='alert-content'>
@@ -81,7 +81,7 @@ class ErrorMessage extends Component {
             className='btn btn-default btn-sm'
             onClick={this.props.onTryAgain}
           >
-            <i className='fa fa-refresh'></i>{' '}
+            <i className='fas fa-sync'></i>{' '}
             Try Again
           </button>
         </div>

diff --git a/packages/desktop-gui/src/project/onboarding.jsx b/packages/desktop-gui/src/project/onboarding.jsx
@@ -43,26 +43,26 @@ class OnBoarding extends Component {
             <p>
               We've added some folders and example tests to your project. Try running the tests in the
               <strong onClick={this._openExampleSpec}>
-                <i className='fa fa-folder-o'></i>{' '}
+                <i className='far fa-folder'></i>{' '}
                 {project.integrationExampleName}{' '}
               </strong>
               folder or add your own test files to
               <strong onClick={this._openIntegrationFolder}>
-                <i className='fa fa-folder-o'></i>{' '}
+                <i className='far fa-folder'></i>{' '}
                 cypress/integration
               </strong>.
             </p>
             <div className='folder-preview-onboarding'>
               <ul>
                 <li>
                   <span>
-                    <i className='fa fa-folder-open-o'></i>{' '}
+                    <i className='far fa-folder-open'></i>{' '}
                     {project.name}
                   </span>
                   <ul>
                     <li className='app-code'>
                       <span >
-                        <i className='fa fa-folder-o'></i>{' '}
+                        <i className='far fa-folder'></i>{' '}
                         ...
                       </span>
                     </li>
@@ -98,7 +98,7 @@ class OnBoarding extends Component {
         return (
           <li className={cs(className, 'new-item')} key={file.name}>
             <span>
-              <i className='fa fa-folder-open-o'></i>{' '}
+              <i className='far fa-folder-open'></i>{' '}
               {file.name}
             </span>
             <ul>
@@ -111,7 +111,7 @@ class OnBoarding extends Component {
       return (
         <li className={cs(className, 'new-item', { 'is-more': file.more })} key={file.name}>
           <span>
-            <i className='fa fa-file-code-o'></i>{' '}
+            <i className='far fa-file-code'></i>{' '}
             {file.name}
           </span>
         </li>