From 5583032ae45a5b8d3e024dc826f71106d239c067 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Thu, 19 Dec 2024 03:48:15 -0600
Subject: [PATCH] fix(client): show icons on coming soon chapters (#57612)

---
 .../components/super-block-accordion.tsx         | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/templates/Introduction/components/super-block-accordion.tsx b/client/src/templates/Introduction/components/super-block-accordion.tsx
index 4c7a2552143..5a1299ed688 100644
--- a/client/src/templates/Introduction/components/super-block-accordion.tsx
+++ b/client/src/templates/Introduction/components/super-block-accordion.tsx
@@ -130,7 +130,7 @@ const ComingSoon = ({ children }: { children: ReactNode }) => {
   const { t } = useTranslation();
   return (
     <li className='coming-soon'>
-      <span className='badge'>{t('misc.coming-soon')}</span> {children}
+      {children} <span className='badge'>{t('misc.coming-soon')}</span>
     </li>
   );
 };
@@ -196,9 +196,17 @@ export const SuperBlockAccordion = ({
         // show coming soon on production, and all the challenges in dev
         if (chapter.comingSoon && !showUpcomingChanges) {
           return (
-            <ComingSoon key={chapter.name}>
-              {t(`intro:full-stack-developer.chapters.${chapter.name}`)}
-            </ComingSoon>
+            <>
+              <ComingSoon key={chapter.name}>
+                {Object.values(FsdChapters).includes(chapter.name) && (
+                  <ChapterIcon
+                    className='map-icon'
+                    chapter={chapter.name as FsdChapters}
+                  />
+                )}
+                {t(`intro:full-stack-developer.chapters.${chapter.name}`)}
+              </ComingSoon>
+            </>
           );
         }