feat(client): migrate icons to TS (#42453)

* migrate files and update tests

fix: use more memory for gatsby develop (#42433)

feat(client): remove whitespace from calculated values (#42400)

* feat(client?): remove whitespace for calculated values

* feat(client): remove whitespace from styledeclaration

* do not automatically strip

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: include all properties of CSSStyleDeclaration

* fix test for getPropVal

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

fix: get showUpcomingChange from env.json (#42440)

fix(client): display legacy certs like current ones (#42038)

* fix: display legacy certs like the current ones

* fix: link projects in legacy certs to project pages

* fix: update tests to changed legacy cert display

* fix: update tests for removed legacy certs forms

* fix: display legacy certs like the current ones

* fix: submit projects for cert on projects pages

* fix: remove legacy certs form submitting handling

* fix: move claiming cert setup before both tests

* fix: remove legacy cert update props and actions

* fix: remove legacy cert updates from api

* fix: correct merge conflict

fix(curriculum): rework Project Euler 98 (#42423)

* fix: rework challenge to use argument in function

* fix: add solution

* fix: use MathJax to improve math notation

fix(curriculum): rework Project Euler 56 (#42364)

* fix: rework challenge to use argument in function

* fix: add solution

* fix: use MathJax to improve look of math notation

fix(curriculum): correct small english typo (#42447)

chore: group together monaco-editor and plugin (#42443)

This should get renovate to create PRs where both are modified.

fix(deps): update dependency algoliasearch to v4.9.2 (#42432)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

migrate files and update tests

Algorithm moved to TSX

first ten files renamed to tsx

first 10 migration complete

first 20 files renamed

migrate some files. rename all

test

index.tsx forced to ignore ts issues

rename and migrate all files

update tests

* remove missed propType declarations

* kebab-caseify

* fi xlinting

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/assets/icons/API-icon.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function APIIcon(props) {
+function APIIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/D3-icon.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function D3Icon(props) {
+function D3Icon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/FreeCodeCamp-logo.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function FreeCodeCampLogo() {
+function FreeCodeCampLogo(): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/JavaScript-icon.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function JavaScriptIcon(props) {
+function JavaScriptIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/React-icon.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ReactIcon(props) {
+function ReactIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/Tensorflow-icon.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function TensorflowIcon(props) {
+function TensorflowIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/algorithm.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Algorithm(props) {
+function Algorithm(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/analytics.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Analytics(props) {
+function Analytics(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/caret.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function Caret() {
+function Caret(): JSX.Element {
   return (
     <svg viewBox='0 0 100 100' width='25px'>
       <polygon

client/src/assets/icons/certification-icon.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 
-function CertificationIcon() {
+function CertificationIcon(): JSX.Element {
   return (
     <svg
       height='248.21'

client/src/assets/icons/clipboard.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Clipboard(props) {
+function Clipboard(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/cup.tsx

@@ -1,10 +1,9 @@
-/* eslint-disable max-len */
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function Cup(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function Cup(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -57,6 +56,5 @@ function Cup(props) {
 }
 
 Cup.displayName = 'Cup';
-Cup.propTypes = propTypes;
 
 export default Cup;

client/src/assets/icons/default-avatar.tsx

@@ -1,8 +1,9 @@
-/* eslint-disable max-len */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function DefaultAvatar(props) {
+function DefaultAvatar(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/donate-with-PayPal.tsx

@@ -2,9 +2,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function DonateWithPayPal(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function DonateWithPayPal(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -56,6 +56,5 @@ function DonateWithPayPal(props) {
 }
 
 DonateWithPayPal.displayName = 'DonateWithPayPal';
-DonateWithPayPal.propTypes = propTypes;
 
 export default DonateWithPayPal;

client/src/assets/icons/fail.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function RedFail() {
+function RedFail(): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -20,16 +20,12 @@ function RedFail() {
           r='95'
           stroke='(var--primary-color)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
         />
         <rect
           fill='var(--primary-background)'
           height='30'
           stroke='var(--primary-background)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
           transform='rotate(-45, 100, 103.321)'
           width='128.85878'
           x='35'
@@ -40,8 +36,6 @@ function RedFail() {
           height='30'
           stroke='var(--primary-background)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
           transform='rotate(45, 99.5, 104)'
           width='128.85878'
           x='35'

client/src/assets/icons/green-not-completed.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function GreenNotCompleted(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function GreenNotCompleted(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -25,8 +25,6 @@ function GreenNotCompleted(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
         </g>
@@ -36,6 +34,5 @@ function GreenNotCompleted(props) {
 }
 
 GreenNotCompleted.displayName = 'GreenNotCompleted';
-GreenNotCompleted.propTypes = propTypes;
 
 export default GreenNotCompleted;

client/src/assets/icons/green-pass.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function GreenPass(props) {
+function GreenPass(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -23,16 +25,12 @@ function GreenPass(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
           />
           <rect
             fill='var(--primary-background)'
             height='30'
             stroke='var(--primary-background)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 120, 106.321)'
             width='128.85878'
             x='55.57059'
@@ -43,8 +41,6 @@ function GreenPass(props) {
             height='30'
             stroke='var(--primary-background)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(45, 66.75, 123.75)'
             width='80.66548'
             x='26.41726'

client/src/assets/icons/heart.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function Heart(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function Heart(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -36,6 +36,5 @@ function Heart(props) {
 }
 
 Heart.displayName = 'Heart';
-Heart.propTypes = propTypes;
 
 export default Heart;

client/src/assets/icons/index.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import ResponsiveDesign from './ResponsiveDesign';
-import JavaScriptIcon from './JavaScriptIcon';
-import ReactIcon from './ReactIcon';
-import D3Icon from './D3Icon';
-import APIIcon from './APIIcon';
-import Clipboard from './Clipboard';
-import PythonIcon from './PythonIcon';
-import Analytics from './Analytics';
-import Shield from './Shield';
-import TensorflowIcon from './TensorflowIcon';
-import Algorithm from './Algorithm';
-
-const generateIconComponent = (superBlock, className) => {
-  const iconMap = {
-    'responsive-web-design': ResponsiveDesign,
-    'javascript-algorithms-and-data-structures': JavaScriptIcon,
-    'front-end-libraries': ReactIcon,
-    'data-visualization': D3Icon,
-    'apis-and-microservices': APIIcon,
-    'quality-assurance': Clipboard,
-    'scientific-computing-with-python': PythonIcon,
-    'data-analysis-with-python': Analytics,
-    'information-security': Shield,
-    'machine-learning-with-python': TensorflowIcon,
-    'coding-interview-prep': Algorithm
-  };
-  // fallback in case super block doesn't exist and for tests
-  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
-
-  return <Icon className={className} />;
-};
-
-export { generateIconComponent };

client/src/assets/icons/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import ResponsiveDesign from './responsive-design';
+import JavaScriptIcon from './JavaScript-icon';
+import ReactIcon from './React-icon';
+import D3Icon from './D3-icon';
+import APIIcon from './API-icon';
+import Clipboard from './clipboard';
+import PythonIcon from './python-icon';
+import Analytics from './analytics';
+import Shield from './shield';
+import TensorflowIcon from './Tensorflow-icon';
+import Algorithm from './algorithm';
+
+const iconMap = {
+  'responsive-web-design': ResponsiveDesign,
+  'javascript-algorithms-and-data-structures': JavaScriptIcon,
+  'front-end-libraries': ReactIcon,
+  'data-visualization': D3Icon,
+  'apis-and-microservices': APIIcon,
+  'quality-assurance': Clipboard,
+  'scientific-computing-with-python': PythonIcon,
+  'data-analysis-with-python': Analytics,
+  'information-security': Shield,
+  'machine-learning-with-python': TensorflowIcon,
+  'coding-interview-prep': Algorithm
+};
+
+type SuperBlock = keyof typeof iconMap;
+
+const generateIconComponent = (
+  superBlock: SuperBlock,
+  className: string
+): JSX.Element => {
+  // fallback in case super block doesn't exist and for tests
+  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
+
+  return <Icon className={className} />;
+};
+
+export { generateIconComponent };

client/src/assets/icons/initial.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Initial(props) {
+function Initial(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -21,8 +23,6 @@ function Initial(props) {
           r='95'
           stroke='var(--primary-color)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
         />
         <svg
           height='200'

client/src/assets/icons/intro-information.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function IntroInformation(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function IntroInformation(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -25,8 +25,6 @@ function IntroInformation(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
           <circle
@@ -36,8 +34,6 @@ function IntroInformation(props) {
             r='45'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
         </g>
@@ -47,6 +43,5 @@ function IntroInformation(props) {
 }
 
 IntroInformation.displayName = 'IntroInformation';
-IntroInformation.propTypes = propTypes;
 
 export default IntroInformation;

client/src/assets/icons/link-button.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-export default function LinkButton(props) {
+export default function LinkButton(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   return (
     <svg
       aria-hidden='true'

client/src/assets/icons/python-icon.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function PythonIcon(props) {
+function PythonIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/responsive-design.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ResponsiveDesign(props) {
+function ResponsiveDesign(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/shield.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Shield(props) {
+function Shield(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/spacer.tsx

@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Spacer(props) {
+// eslint-disable-next-line
+function Spacer(props: any): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -10,6 +11,7 @@ function Spacer(props) {
       <svg
         className='tick'
         height='50'
+        paddingTop='5'
         viewBox='-10 -45 200 200'
         width='50'
         xmlns='http://www.w3.org/2000/svg'
@@ -17,7 +19,7 @@ function Spacer(props) {
       >
         <g>
           <title>{t('icons.spacer')}</title>
-          <rect fillOpacity='0' height='200' paddingtop='5' width='200' />
+          <rect fillOpacity='0' height='200' width='200' />
         </g>
       </svg>
     </Fragment>

client/src/assets/icons/toggle-check.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ToggleCheck(props) {
+function ToggleCheck(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -21,8 +23,6 @@ function ToggleCheck(props) {
             fill='white'
             height='60'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 66.75, 123.75)'
             width='148.85878'
             x='65.57059'
@@ -32,8 +32,6 @@ function ToggleCheck(props) {
             fill='white'
             height='60'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(45, 66.75, 123.75)'
             width='120.66548'
             x='-42.41726'
@@ -43,8 +41,6 @@ function ToggleCheck(props) {
             fill='black'
             height='30'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 66.75, 123.75)'
             width='128.85878'
             x='65.57059'
@@ -54,8 +50,6 @@ function ToggleCheck(props) {
             fill='black'
             height='30'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-135, 66.75, 123.75)'
             width='88.85878'
             x='68.57059'

client/src/client-only-routes/ShowCertification.js

@@ -7,7 +7,7 @@ import { createSelector } from 'reselect';
 import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
 
 import ShowProjectLinks from './ShowProjectLinks';
-import FreeCodeCampLogo from '../assets/icons/FreeCodeCampLogo';
+import FreeCodeCampLogo from '../assets/icons/FreeCodeCamp-logo';
 // eslint-disable-next-line max-len
 import DonateForm from '../components/Donation/DonateForm';
 import { Trans, useTranslation } from 'react-i18next';

client/src/components/Donation/DonationModal.js

@@ -6,8 +6,8 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Modal, Button, Col, Row } from '@freecodecamp/react-bootstrap';
 import { Spacer } from '../helpers';
-import Heart from '../../assets/icons/Heart';
+import Heart from '../../assets/icons/heart';
-import Cup from '../../assets/icons/Cup';
+import Cup from '../../assets/icons/cup';
 import DonateForm from './DonateForm';
 import { modalDefaultDonation } from '../../../../config/donation-settings';
 import { useTranslation } from 'react-i18next';

client/src/components/Header/components/NavLogo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import FreeCodeCampLogo from '../../../assets/icons/FreeCodeCampLogo';
+import FreeCodeCampLogo from '../../../assets/icons/FreeCodeCamp-logo';
 
 function NavLogo() {
   return <FreeCodeCampLogo />;

client/src/components/Map/index.js

@@ -5,7 +5,7 @@ import i18next from 'i18next';
 import { generateIconComponent } from '../../assets/icons';
 
 import { Link, Spacer } from '../helpers';
-import LinkButton from '../../assets/icons/LinkButton';
+import LinkButton from '../../assets/icons/link-button';
 import './map.css';
 import { isAuditedCert } from '../../../../utils/is-audited';
 import envData from '../../../../config/env.json';

client/src/components/helpers/avatar-renderer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image } from '@freecodecamp/react-bootstrap';
-import DefaultAvatar from '../../assets/icons/DefaultAvatar';
+import DefaultAvatar from '../../assets/icons/default-avatar';
 import { defaultUserImage } from '../../../../config/misc';
 import { borderColorPicker } from '.';
 import { useTranslation } from 'react-i18next';

client/src/components/helpers/toggle-button.tsx

@@ -5,8 +5,8 @@ import {
 } from '@freecodecamp/react-bootstrap';
 
 import './toggle-button.css';
-import ToggleCheck from '../../assets/icons/ToggleCheck';
+import ToggleCheck from '../../assets/icons/toggle-check';
-import Spacer from '../../assets/icons/Spacer';
+import Spacer from '../../assets/icons/spacer';
 
 interface ButtonProps {
   name: string;

client/src/components/profile/components/TimeLine.js

@@ -23,7 +23,7 @@ import {
 } from '../../../../../utils';
 
 import { maybeUrlRE } from '../../../utils';
-import CertificationIcon from '../../../assets/icons/CertificationIcon';
+import CertificationIcon from '../../../assets/icons/certification-icon';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
 import envData from '../../../../../config/env.json';

client/src/templates/Challenges/components/Challenge-Title.js

@@ -4,7 +4,7 @@ import { Link } from '../../../components/helpers/index';
 import i18next from 'i18next';
 
 import './challenge-title.css';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
 import BreadCrumb from './BreadCrumb';
 
 const propTypes = {

client/src/templates/Challenges/components/CompletionModalBody.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import BezierEasing from 'bezier-easing';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
 import { withTranslation } from 'react-i18next';
 
 const propTypes = {

client/src/templates/Challenges/components/Test-Suite.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
-import Fail from '../../../assets/icons/Fail';
+import Fail from '../../../assets/icons/fail';
-import Initial from '../../../assets/icons/Initial';
+import Initial from '../../../assets/icons/initial';
 
 import './test-suite.css';
 

client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap

@@ -71,16 +71,12 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
             r="95"
             stroke="var(--primary-color)"
             strokeDasharray="null"
-            strokeLinecap="null"
-            strokeLinejoin="null"
           />
           <rect
             fill="var(--primary-background)"
             height="30"
             stroke="var(--primary-background)"
             strokeDasharray="null"
-            strokeLinecap="null"
-            strokeLinejoin="null"
             transform="rotate(-45, 120, 106.321)"
             width="128.85878"
             x="55.57059"
@@ -91,8 +87,6 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
             height="30"
             stroke="var(--primary-background)"
             strokeDasharray="null"
-            strokeLinecap="null"
-            strokeLinejoin="null"
             transform="rotate(45, 66.75, 123.75)"
             width="80.66548"
             x="26.41726"

client/src/templates/Challenges/components/__snapshots__/CompletionModalBody.test.js.snap

@@ -28,16 +28,12 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
           r="95"
           stroke="var(--primary-color)"
           stroke-dasharray="null"
-          stroke-linecap="null"
-          stroke-linejoin="null"
         />
         <rect
           fill="var(--primary-background)"
           height="30"
           stroke="var(--primary-background)"
           stroke-dasharray="null"
-          stroke-linecap="null"
-          stroke-linejoin="null"
           transform="rotate(-45, 120, 106.321)"
           width="128.85878"
           x="55.57059"
@@ -48,8 +44,6 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
           height="30"
           stroke="var(--primary-background)"
           stroke-dasharray="null"
-          stroke-linecap="null"
-          stroke-linejoin="null"
           transform="rotate(45, 66.75, 123.75)"
           width="80.66548"
           x="26.41726"

client/src/templates/Introduction/components/Block.js

@@ -9,9 +9,9 @@ import ScrollableAnchor from 'react-scrollable-anchor';
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import { completedChallengesSelector, executeGA } from '../../../redux';
 import Challenges from './Challenges';
-import Caret from '../../../assets/icons/Caret';
+import Caret from '../../../assets/icons/caret';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import { isAuditedCert } from '../../../../../utils/is-audited';
 import envData from '../../../../../config/env.json';
 import { Link } from '../../../components/helpers/';

client/src/templates/Introduction/components/CertChallenge.js

@@ -5,9 +5,9 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { withTranslation } from 'react-i18next';
 
-import CertificationIcon from '../../../assets/icons/CertificationIcon';
+import CertificationIcon from '../../../assets/icons/certification-icon';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import { certificatesByNameSelector } from '../../../redux';
 import { CurrentCertsType, User } from '../../../redux/prop-types';
 import { certMap } from '../../../resources/certAndProjectMap';

client/src/templates/Introduction/components/CertificationCard.js

@@ -4,7 +4,7 @@ import ScrollableAnchor from 'react-scrollable-anchor';
 import { useTranslation } from 'react-i18next';
 
 import ClaimCertSteps from './ClaimCertSteps';
-import Caret from '../../../assets/icons/Caret';
+import Caret from '../../../assets/icons/caret';
 
 const propTypes = {
   certSlug: PropTypes.string,

client/src/templates/Introduction/components/Challenges.js

@@ -7,8 +7,8 @@ import { Link } from 'gatsby';
 import { withTranslation } from 'react-i18next';
 
 import { completedChallengesSelector, executeGA } from '../../../redux';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 
 const mapStateToProps = state => {
   return createSelector(completedChallengesSelector, completedChallenges => ({

client/src/templates/Introduction/components/ClaimCertSteps.js

@@ -5,9 +5,9 @@ import { withTranslation, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
-import IntroInformation from '../../../assets/icons/IntroInformation';
+import IntroInformation from '../../../assets/icons/intro-information';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import { userSelector } from '../../../redux';
 import { User } from '../../../redux/prop-types';