feat(client): modify breadcrumb design (#40835)

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

@@ -16,15 +16,22 @@ const propTypes = {
 function ChallengeTitle({ block, children, isCompleted, superBlock }) {
   return (
     <div className='challenge-title-wrap'>
-      <Link to={`/learn/${dasherize(superBlock)}`}>{superBlock}</Link>
+      <div className='challenge-title-breadcrumbs'>
-      {' >> '}
         <Link
+          className='breadcrumb-left'
+          to={`/learn/${dasherize(superBlock)}`}
+        >
+          <span className='ellipsis'>{superBlock}</span>
+        </Link>
+        <div className='breadcrumb-center' />
+        <Link
+          className='breadcrumb-right'
           state={{ breadcrumbBlockClick: block }}
           to={`/learn/${dasherize(superBlock)}`}
         >
           {block}
         </Link>
-      {' >> '}
+      </div>
       <b>{children}</b>
       {isCompleted ? (
         <GreenPass

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

@@ -4,11 +4,22 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
 <div
   className="challenge-title-wrap"
 >
+  <div
+    className="challenge-title-breadcrumbs"
+  >
     <a
+      className="breadcrumb-left"
       href="/learn/undefined"
+    >
+      <span
+        className="ellipsis"
+      />
+    </a>
+    <div
+      className="breadcrumb-center"
     />
-   &gt;&gt; 
     <a
+      className="breadcrumb-right"
       href="/learn/undefined"
       state={
         Object {
@@ -16,7 +27,7 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
         }
       }
     />
-   &gt;&gt; 
+  </div>
   <b>
     title text
   </b>

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

@@ -1,4 +1,68 @@
 .challenge-title-wrap {
-  padding: 10px 15px;
   text-align: center;
 }
+
+.challenge-title-breadcrumbs {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  font-size: 16px;
+  margin-left: -10px;
+  margin-right: -10px;
+  border-bottom: 2px solid var(--secondary-color);
+  height: 25px;
+}
+
+.breadcrumb-left {
+  text-decoration: none;
+  min-width: 25px;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 25px;
+  word-wrap: none;
+  white-space: nowrap;
+  flex-grow: 1;
+  flex-shrink: 2;
+  background-color: var(--quaternary-background);
+}
+
+.breadcrumb-center {
+  width: 0;
+  height: 0;
+  border-top: calc(23px / 2) solid transparent;
+  border-bottom: calc(23px / 2) solid transparent;
+  border-left: calc(23px / 2) solid var(--quaternary-background);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.breadcrumb-right {
+  text-decoration: none;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  max-height: 25px;
+  min-width: 50px;
+  flex-grow: 2;
+  flex-shrink: 1;
+  word-wrap: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 20px;
+  white-space: nowrap;
+}
+
+.breadcrumb-rule {
+  margin: 5px -10px;
+}
+
+.breadcrumb-left:hover {
+  background-color: var(--quaternary-background);
+}
+
+.breadcrumb-right:hover {
+  background-color: rgba(0, 0, 0, 0);
+}