refactor: Update tutorial cards layout and tooltips on course page st…

…age steps
codecrafters-io · Jan 7, 2025 · 9a37bf2 · 9a37bf2
1 parent 1f7c6d7
commit 9a37bf2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git a/app/components/course-page/course-stage-step/first-stage-tutorial-card.hbs b/app/components/course-page/course-stage-step/first-stage-tutorial-card.hbs
@@ -11,20 +11,15 @@
             <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
             <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
           </div>
-          <div class="flex items-center gap-2 pt-0 p-5">
-            <div class="font-mono relative">
-              <span class="my-0 text-slate-100 dark:text-slate-800 cursor-pointer w-fit">$</span>
-              <div class="absolute top-0 bottom-0 -right-8 flex items-center">
-                <span class="relative flex h-6 w-6 cursor-pointer">
-                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
-                  {{svg-jar "question-mark-circle" class="w-6 h-6 text-blue-500"}}
-                  <EmberTooltip @side="right" @text="Print '$ ' to pass this stage." @popperContainer="body" />
-                </span>
-              </div>
+          <div class="pt-0 p-5 cursor-pointer">
+            <div class="flex items-center gap-2 w-fit">
+              <span class="font-mono text-slate-100 dark:text-slate-800">$</span>
+              <span class="relative flex size-6">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+                {{svg-jar "question-mark-circle" class="size-6 text-blue-500"}}
+              </span>
+              <EmberTooltip @side="right" @text="Print '$ ' to pass this stage." @popperContainer="body" />
             </div>
-            {{!-- <div class="flex items-center justify-center rounded-full relative">
-              {{svg-jar "question-mark-circle" class="w-6 h-6 text-blue-500"}}
-            </div> --}}
           </div>
         </div>
       {{else}}

diff --git a/app/components/course-page/course-stage-step/second-stage-tutorial-card.hbs b/app/components/course-page/course-stage-step/second-stage-tutorial-card.hbs
@@ -13,14 +13,18 @@
               <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
             </div>
             <div class="pt-0 p-5 font-mono">
-              <p class="mt-0 mb-2 cursor-pointer w-fit text-slate-300 dark:text-slate-600">$
+              <div class="flex items-center gap-2 mb-2 text-slate-300 dark:text-slate-600 cursor-pointer w-fit">$
                 <span class="text-red-400">invalid_command</span>
-                <EmberTooltip @side="right" @text="Treat every command as invalid for now." />
-              </p>
-              <p class="my-0 animate-pulse text-slate-100 dark:text-slate-800 cursor-pointer w-fit">
+                <EmberTooltip @side="right" @text="Treat every command as invalid for now." @popperContainer="body" />
+              </div>
+              <div class="flex items-center gap-2 text-slate-100 dark:text-slate-800 cursor-pointer w-fit">
                 invalid_command: command not found
-                <EmberTooltip @side="bottom" @text="Read the command and print the error message." />
-              </p>
+                <span class="relative flex size-6 cursor-pointer">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+                  {{svg-jar "question-mark-circle" class="size-6 text-blue-500"}}
+                </span>
+                <EmberTooltip @side="right" @text="Read the command and print the error message." @popperContainer="body" />
+              </div>
             </div>
           </div>
         {{else}}

diff --git a/types/glint.d.ts b/types/glint.d.ts
@@ -19,7 +19,7 @@ declare module '@glint/environment-ember-loose/registry' {
     capitalize: HelperLike<{ Return: string; Args: { Positional: [string] } }>;
     'did-resize': ModifierLike<{ Args: { Positional: [(entry: ResizeObserverEntry) => void] } }>;
     EmberTooltip: ComponentLike<{
-      Args: { Named: { text?: string; side?: 'top' | 'bottom' | 'left' | 'right'; delay?: number; duration?: number } };
+      Args: { Named: { text?: string; side?: 'top' | 'bottom' | 'left' | 'right'; delay?: number; duration?: number; popperContainer?: string } };
       Blocks: { default?: [] };
     }>;
     EmberPopover: ComponentLike<{