Fix connect dialog formatting

microbit-foundation · Dec 8, 2023 · 0dc3f34 · 0dc3f34
1 parent a681cc4
commit 0dc3f34
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 64 deletions.
diff --git a/src/components/connection-prompt/ConnectDialogContainer.svelte b/src/components/connection-prompt/ConnectDialogContainer.svelte
@@ -12,7 +12,6 @@
   import SelectMicrobitDialogUsb from './usb/SelectMicrobitDialogUsb.svelte';
   import ConnectBatteryDialog from './bluetooth/ConnectBatteryDialog.svelte';
   import BluetoothConnectDialog from './bluetooth/BluetoothConnectDialog.svelte';
-  import SelectMicrobitDialogSerial from './radio/SelectMicrobitDialogSerial.svelte';
   import DoneDownloadingDialog from './usb/DoneDownloadingDialog.svelte';
   import DownloadingDialog from './usb/DownloadingDialog.svelte';
   import FindUsbDialog from './usb/FindUsbDialog.svelte';

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
@@ -25,19 +25,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="/imgs/select-microbit.png"
-      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="/imgs/select-microbit.png"
+        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
  -->
 
@@ -68,7 +68,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
@@ -186,6 +186,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,
 
@@ -449,6 +450,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'",