refactor(client): space between passed icons and their sibling (#48327)

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

@@ -17,9 +17,9 @@ function GreenNotCompleted(props: GreenNotCompletedProps): JSX.Element {
       )}
       <svg
         aria-hidden='true'
-        height='50'
+        height='15'
         viewBox='0 0 200 200'
-        width='50'
+        width='15'
         xmlns='http://www.w3.org/2000/svg'
         {...rest}
       >

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

@@ -14,9 +14,9 @@ function GreenPass(props: GreenPassProps): JSX.Element {
       <svg
         {...(hushScreenReaderText && { 'aria-hidden': true })}
         {...(!hushScreenReaderText && { 'aria-label': t('icons.passed') })}
-        height='50'
+        height='15'
         viewBox='0 0 200 200'
-        width='50'
+        width='15'
         xmlns='http://www.w3.org/2000/svg'
         {...rest}
       >

client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap

@@ -15,16 +15,9 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
       </h1>
       <svg
         aria-label="icons.passed"
-        height="50"
-        style={
-          Object {
-            "height": "15px",
-            "marginLeft": "7px",
-            "width": "15px",
-          }
-        }
+        height="15"
         viewBox="0 0 200 200"
-        width="50"
+        width="15"
         xmlns="http://www.w3.org/2000/svg"
       >
         <g

client/src/templates/Challenges/components/__snapshots__/completion-modal-body.test.tsx.snap

@@ -9,9 +9,9 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
       aria-label="icons.passed"
       class="completion-success-icon"
       data-testid="fcc-completion-success-icon"
-      height="50"
+      height="15"
       viewBox="0 0 200 200"
-      width="50"
+      width="15"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g

client/src/templates/Challenges/components/challenge-title.css

@@ -98,7 +98,8 @@
 .title-text {
   text-decoration: none;
   min-width: 25px;
-  display: inline-block;
+  display: flex;
+  gap: 7px;
   align-items: center;
   justify-content: center;
   overflow: hidden;

client/src/templates/Challenges/components/challenge-title.tsx

@@ -22,7 +22,6 @@ function ChallengeTitle({
         <>
           <Link
             className='title-translation-cta'
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             to={i18next.t('links:help-translate-link-url')}
           >
             {i18next.t('misc.translation-pending')}
@@ -32,11 +31,7 @@ function ChallengeTitle({
       <div className='challenge-title'>
         <div className='title-text'>
           <h1>{children}</h1>
-          {isCompleted ? (
-            <GreenPass
-              style={{ height: '15px', width: '15px', marginLeft: '7px' }}
-            />
-          ) : null}
+          {isCompleted && <GreenPass />}
         </div>
       </div>
     </div>

client/src/templates/Introduction/components/block.tsx

@@ -58,8 +58,6 @@ interface BlockProps {
   toggleBlock: typeof toggleBlock;
 }
 
-const mapIconStyle = { height: '15px', marginRight: '10px', width: '15px' };
-
 export class Block extends Component<BlockProps> {
   static displayName: string;
   constructor(props: BlockProps) {
@@ -83,9 +81,9 @@ export class Block extends Component<BlockProps> {
 
   renderCheckMark(isCompleted: boolean): JSX.Element {
     return isCompleted ? (
-      <GreenPass hushScreenReaderText style={mapIconStyle} />
+      <GreenPass hushScreenReaderText />
     ) : (
-      <GreenNotCompleted hushScreenReaderText style={mapIconStyle} />
+      <GreenNotCompleted hushScreenReaderText />
     );
   }
 

client/src/templates/Introduction/components/challenges.tsx

@@ -24,8 +24,6 @@ interface Challenges {
   blockTitle?: string | null;
 }
 
-const mapIconStyle = { height: '15px', marginRight: '10px', width: '15px' };
-
 function Challenges({
   challengesWithCompleted,
   executeGA,
@@ -44,11 +42,7 @@ function Challenges({
     });
 
   const renderCheckMark = (isCompleted: boolean) =>
-    isCompleted ? (
-      <GreenPass style={mapIconStyle} />
-    ) : (
-      <GreenNotCompleted style={mapIconStyle} />
-    );
+    isCompleted ? <GreenPass /> : <GreenNotCompleted />;
 
   const isGridMap = isNewRespCert(superBlock) || isNewJsCert(superBlock);
 

client/src/templates/Introduction/intro.css

@@ -89,6 +89,8 @@ a.cert-tag:active {
 }
 
 .course-title {
+  display: flex;
+  align-items: center;
   font-size: 1.13rem;
   overflow-wrap: break-word;
 }
@@ -137,6 +139,7 @@ button.map-title {
 .map-challenge-wrap > a,
 .map-project-wrap > a {
   display: flex;
+  gap: 7px;
 }
 
 .map-project-wrap > a {
@@ -144,7 +147,6 @@ button.map-title {
 }
 
 .map-project-checkmark {
-  margin-right: 7px;
   padding-left: 15px;
 }
 
@@ -212,7 +214,6 @@ button.map-title {
 
 .map-title svg {
   width: 14px;
-  margin-right: 10px;
   flex-shrink: 0;
   fill: var(--color-quaternary) !important;
   stroke: var(--color-quaternary);
@@ -426,8 +427,10 @@ button.map-title {
   padding: 25px;
 }
 
+/* this margin is used to center the element. 
+ToDo: find out why, and remove the need for it */
 .block-grid .map-title > svg {
-  margin: 10px;
+  margin-bottom: 4px;
 }
 
 .title-wrapper {
@@ -436,6 +439,12 @@ button.map-title {
   align-items: center;
   width: 100%;
 }
+.course-title,
+.map-title,
+.block-header-button-text,
+.title-wrapper {
+  gap: 10px;
+}
 
 .block-grid .progress-wrapper {
   width: 100%;