Merge pull request #50 from microbit-foundation/fix-connect-dialog-fo…

…rmatting Fix connect dialog formatting
microbit-foundation · Dec 11, 2023 · 829dd1e · 829dd1e
2 parents bff6c37 + 1d85e49
commit 829dd1e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 63 deletions.
diff --git a/src/components/connection-prompt/bluetooth/SelectMicrobitDialogBluetooth.svelte b/src/components/connection-prompt/bluetooth/SelectMicrobitDialogBluetooth.svelte
@@ -14,19 +14,23 @@
 
 <main>
   <div class="w-180 leading-10 pb-5">
-    <p class="font-bold text-2xl text-left">
+    <h2 class="font-bold text-2xl">
       {$t('connectMB.webPopup')}
-    </p>
-    <img
-      src=""
-      alt="Instructions on how to choose microbit from web popup via bluetooth"
-      class="left-0 pt-5" />
-    <p class="absolute left-3/4 transform -translate-x-1/2 top-1/2 -translate-y-28">
-      {$t('connectMB.webPopup.instruction1')}
-    </p>
-    <p class="absolute left-3/4 transform -translate-x-1/2 -translate-y-13">
-      {$t('connectMB.webPopup.instruction2')}
-    </p>
+    </h2>
+    <div class="flex mt-5">
+      <img
+        src=""
+        alt="Screenshot of the browser window that will appear next.  Your connected micro:bit will be listed. Choose your micro:bit then select the Connect button." />
+      <div class="flex flex-col w-full px-5">
+        <h3 class="font-bold text-lg mb-5">
+          {$t('connectMB.webPopup.instruction.heading')}:
+        </h3>
+        <ol class="list-decimal list-inside">
+          <li>{$t('connectMB.webPopup.instruction1')}</li>
+          <li>{$t('connectMB.webPopup.instruction2')}</li>
+        </ol>
+      </div>
+    </div>
   </div>
   <div class="justify-end flex flex-space-10 gap-x-5">
     <StandardButton position="right" onClick={onBackClick}

diff --git a/src/components/connection-prompt/radio/SelectMicrobitDialogSerial.svelte b/src/components/connection-prompt/radio/SelectMicrobitDialogSerial.svelte
diff --git a/src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte b/src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte
@@ -26,19 +26,23 @@
 
 <main>
   <div class="w-180 leading-10 pb-5">
-    <p class="font-bold text-2xl text-left">
+    <h2 class="font-bold text-2xl">
       {$t('connectMB.webPopup')}
-    </p>
-    <img
-      src={selectMicrobitImage}
-      alt="Screenshot of the browser window that will appear next.  Your connected micro:bit will be listed. Choose your micro:bit then select the Connect button."
-      class="left-0 pt-5" />
-    <p class="absolute left-3/4 transform -translate-x-1/2 top-1/2 -translate-y-28">
-      {$t('connectMB.webPopup.instruction1')}
-    </p>
-    <p class="absolute left-3/4 transform -translate-x-1/2 -translate-y-13">
-      {$t('connectMB.webPopup.instruction2')}
-    </p>
+    </h2>
+    <div class="flex mt-5">
+      <img
+        src={selectMicrobitImage}
+        alt="Screenshot of the browser window that will appear next.  Your connected micro:bit will be listed. Choose your micro:bit then select the Connect button." />
+      <div class="flex flex-col w-full px-5">
+        <h3 class="font-bold text-lg mb-5">
+          {$t('connectMB.webPopup.instruction.heading')}:
+        </h3>
+        <ol class="list-decimal list-inside">
+          <li>{$t('connectMB.webPopup.instruction1')}</li>
+          <li>{$t('connectMB.webPopup.instruction2')}</li>
+        </ol>
+      </div>
+    </div>
   </div>
   <div class="justify-end flex flex-space-10 gap-x-5">
     <StandardButton position="right" onClick={onBackClick}

diff --git a/src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte b/src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte
@@ -1,6 +1,6 @@
 <!--
   (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
- 
+
   SPDX-License-Identifier: MIT
  -->
 
@@ -71,7 +71,7 @@
     </div>
   </div>
   <div class="grid grid-cols-1 place-items-center w-full">
-    <StandardButton onClick={onConnectBluetoothClick}
+    <StandardButton type="primary" onClick={onConnectBluetoothClick}
       >{$t('connectMB.usb.manual.done')}</StandardButton>
   </div>
 </main>
diff --git a/src/translations.ts b/src/translations.ts
@@ -188,6 +188,7 @@ export const translations: TranslationMap = {
 
 		// SELECT MICROBIT FROM WEB POPUP
 		"connectMB.webPopup": TRANSLATION_NEEDED,
+		"connectMB.webPopup.instruction.heading": TRANSLATION_NEEDED,
 		"connectMB.webPopup.instruction1": TRANSLATION_NEEDED,
 		"connectMB.webPopup.instruction2": TRANSLATION_NEEDED,
 
@@ -453,6 +454,7 @@ export const translations: TranslationMap = {
 
 		// SELECT MICROBIT FROM WEB POPUP
 		"connectMB.webPopup":"Select micro:bit",
+		"connectMB.webPopup.instruction.heading": "In the next popup",
 		"connectMB.webPopup.instruction1": "Choose your micro:bit",
 		"connectMB.webPopup.instruction2": "Select 'Connect'",