Faff with spacing

microbit-foundation · Dec 21, 2023 · b3efe56 · b3efe56
1 parent 898540d
commit b3efe56
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/components/connection-prompt/MicrobitWearingInstructionDialog.svelte b/src/components/connection-prompt/MicrobitWearingInstructionDialog.svelte
@@ -18,29 +18,35 @@
 </script>
 
 <main>
-  <div class="w-200 leading-10">
-    <p class="font-bold text-2xl text-left pb-5">
+  <div class="w-200">
+    <p class="font-bold text-2xl text-left leading-10">
       {#if currentStage === 'usb'}
         {$t('connectMB.wearingSetup.bluetooth.heading')}
       {:else if currentStage === 'usb1'}
         {$t('connectMB.wearingSetup.radioConnection.heading')}
       {/if}
     </p>
-    <p class="leading-normal">
-      <a class="text-link" href={instructionsVideoLink} target="_blank" rel="noopener"
-        >{$t('connectMB.wearingSetup.subtitle1')}</a>
-      {$t('connectMB.wearingSetup.subtitle2')}
-    </p>
-    <div class="flex flex-col font-semibold text-center py-10">
-      <img src={microbitHolderImage} class="w-50 self-center pt-10" />
-      <p>{$t('connectMB.wearingSetup.requirements1')}</p>
-      <img src={microbitStrapImage} class="w-150 self-center pt-10" />
-      <p>{$t('connectMB.wearingSetup.requirements2')}</p>
+    <div class="space-y-10 mt-5">
+      <p class="leading-normal">
+        <a class="text-link" href={instructionsVideoLink} target="_blank" rel="noopener"
+          >{$t('connectMB.wearingSetup.subtitle1')}</a>
+        {$t('connectMB.wearingSetup.subtitle2')}
+      </p>
+      <div class="flex flex-col font-semibold items-center gap-8">
+        <div class="flex flex-col items-center gap-y-2">
+          <img src={microbitHolderImage} class="w-50" />
+          <p>{$t('connectMB.wearingSetup.requirements1')}</p>
+        </div>
+        <div class="flex flex-col items-center gap-y-2">
+          <img src={microbitStrapImage} class="w-150" />
+          <p>{$t('connectMB.wearingSetup.requirements2')}</p>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-end gap-x-5 mt-8">
+      <StandardButton onClick={onBackClick}>{$t('connectMB.backButton')}</StandardButton>
+      <StandardButton type="primary" onClick={onNextClick}
+        >{$t('connectMB.nextButton')}</StandardButton>
     </div>
-  </div>
-  <div class="flex justify-end gap-x-5">
-    <StandardButton onClick={onBackClick}>{$t('connectMB.backButton')}</StandardButton>
-    <StandardButton type="primary" onClick={onNextClick}
-      >{$t('connectMB.nextButton')}</StandardButton>
   </div>
 </main>