From 9f199ca8af908c7f37863e130c44866bd5a8407d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Tue, 22 Aug 2023 16:07:47 +0300
Subject: [PATCH] refactor: clean extra wrapper around challenge header
 (#51275)

---
 .../challenge-title.test.tsx.snap             | 92 +++++++++----------
 .../Challenges/components/challenge-title.css | 35 +++----
 .../Challenges/components/challenge-title.tsx |  6 +-
 3 files changed, 60 insertions(+), 73 deletions(-)

diff --git a/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap b/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
index 49a09d68726..a7a2a016fa0 100644
--- a/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
+++ b/client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
@@ -7,56 +7,52 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
   <div
     className="challenge-title"
   >
-    <div
-      className="title-text"
+    <h1>
+      title text
+    </h1>
+    <svg
+      aria-label="icons.passed"
+      height="15"
+      viewBox="0 0 200 200"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <h1>
-        title text
-      </h1>
-      <svg
-        aria-label="icons.passed"
-        height="15"
-        viewBox="0 0 200 200"
-        width="15"
-        xmlns="http://www.w3.org/2000/svg"
+      <g
+        aria-hidden="true"
       >
-        <g
-          aria-hidden="true"
-        >
-          <title>
-            icons.passed
-          </title>
-          <circle
-            cx="100"
-            cy="99"
-            fill="var(--primary-color)"
-            r="95"
-            stroke="var(--primary-color)"
-            strokeDasharray="null"
-          />
-          <rect
-            fill="var(--primary-background)"
-            height="30"
-            stroke="var(--primary-background)"
-            strokeDasharray="null"
-            transform="rotate(-45, 120, 106.321)"
-            width="128.85878"
-            x="55.57059"
-            y="91.32089"
-          />
-          <rect
-            fill="var(--primary-background)"
-            height="30"
-            stroke="var(--primary-background)"
-            strokeDasharray="null"
-            transform="rotate(45, 66.75, 123.75)"
-            width="80.66548"
-            x="26.41726"
-            y="108.75"
-          />
-        </g>
-      </svg>
-    </div>
+        <title>
+          icons.passed
+        </title>
+        <circle
+          cx="100"
+          cy="99"
+          fill="var(--primary-color)"
+          r="95"
+          stroke="var(--primary-color)"
+          strokeDasharray="null"
+        />
+        <rect
+          fill="var(--primary-background)"
+          height="30"
+          stroke="var(--primary-background)"
+          strokeDasharray="null"
+          transform="rotate(-45, 120, 106.321)"
+          width="128.85878"
+          x="55.57059"
+          y="91.32089"
+        />
+        <rect
+          fill="var(--primary-background)"
+          height="30"
+          stroke="var(--primary-background)"
+          strokeDasharray="null"
+          transform="rotate(45, 66.75, 123.75)"
+          width="80.66548"
+          x="26.41726"
+          y="108.75"
+        />
+      </g>
+    </svg>
   </div>
 </div>
 `;
diff --git a/client/src/templates/Challenges/components/challenge-title.css b/client/src/templates/Challenges/components/challenge-title.css
index 386774120cc..1b9b52f7c4a 100644
--- a/client/src/templates/Challenges/components/challenge-title.css
+++ b/client/src/templates/Challenges/components/challenge-title.css
@@ -3,12 +3,21 @@
 }
 
 .challenge-title {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  font-size: 16px;
   height: fit-content;
+  min-width: 25px;
   margin: 20px 0px 15px;
+  padding: 0px 3px;
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: fit-content;
+  white-space: pre-line;
+  flex-grow: 1;
+  flex-shrink: 1;
+  font-size: 16px;
 }
 
 .challenge-title-breadcrumbs {
@@ -81,23 +90,7 @@
   margin: 5px -10px;
 }
 
-.title-text {
-  text-decoration: none;
-  min-width: 25px;
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: fit-content;
-  white-space: pre-line;
-  flex-grow: 1;
-  flex-shrink: 1;
-  padding: 0px 3px;
-}
-
-.title-text h1 {
+.challenge-title h1 {
   font-size: inherit;
   line-height: 1.42857143;
   margin: 0;
diff --git a/client/src/templates/Challenges/components/challenge-title.tsx b/client/src/templates/Challenges/components/challenge-title.tsx
index 11901fbd3df..918c5e69e37 100644
--- a/client/src/templates/Challenges/components/challenge-title.tsx
+++ b/client/src/templates/Challenges/components/challenge-title.tsx
@@ -29,10 +29,8 @@ function ChallengeTitle({
         </>
       )}
       <div className='challenge-title'>
-        <div className='title-text'>
-          <h1>{children}</h1>
-          {isCompleted && <GreenPass />}
-        </div>
+        <h1>{children}</h1>
+        {isCompleted && <GreenPass />}
       </div>
     </div>
   );