Remove confusion with dongles in the Connect page

gui/public/i18n/en/translation.ftl

@@ -921,11 +921,13 @@ onboarding-setup_warning-cancel = Continue setup
 
 ## Wi-Fi setup
 onboarding-wifi_creds-back = Go back to introduction
-onboarding-wifi_creds = Input Wi-Fi credentials
+onboarding-wifi_creds-v2 = Trackers using Wi-Fi
 # This cares about multilines
-onboarding-wifi_creds-description =
-    The Trackers will use these credentials to connect wirelessly.
-    Please use the credentials that you are currently connected to.
+onboarding-wifi_creds-description-v2 =
+    Trackers such as Official Slimes 1.0 and 1.2 use Wi-Fi to operate.
+    Please use the credentials that you are currently connected to with your computer.
+
+    Make sure to use a 2.4Ghz Wi-Fi connection for your trackers!
 onboarding-wifi_creds-skip = Skip Wi-Fi settings
 onboarding-wifi_creds-submit = Submit!
 onboarding-wifi_creds-ssid =
@@ -936,6 +938,13 @@ onboarding-wifi_creds-password =
     .label = Password
     .placeholder = Enter password
 
+onboarding-wifi_creds-dongle-title = Trackers using a dongle
+onboarding-wifi_creds-dongle-description =
+    If your trackers came with a dongle.
+    Plug it into your computer and you should be good to go!
+onboarding-wifi_creds-dongle-wip = This section is a work in progress. A dedicated page will be made to manage the trackers that connect via dongle
+onboarding-wifi_creds-dongle-continue = Continue with a dongle
+
 ## Mounting setup
 onboarding-reset_tutorial-back = Go back to Mounting calibration
 onboarding-reset_tutorial = Reset tutorial
@@ -1557,7 +1566,7 @@ error_collection_modal-description_v2 = { settings-interface-behavior-error_trac
 error_collection_modal-confirm = I agree
 error_collection_modal-cancel = I don't want to
 
-
+## Tracking checklist section
 tracking_checklist = Tracking Checklist
 tracking_checklist-settings = Tracking Checklist Settings
 tracking_checklist-settings-close = Close

gui/src/components/commons/icon/UsbIcon.tsx

@@ -1,6 +1,6 @@
-export function USBIcon() {
+export function USBIcon({ size = 48 }: { size?: number }) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+    <svg xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 0 48 48">
       <path d="M24 44q-1.6 0-2.6-1t-1-2.6q0-1.1.55-2 .55-.9 1.55-1.45V31.4h-7.4q-1.2 0-2.1-.9-.9-.9-.9-2.1v-5.45q-1-.45-1.55-1.325T10 19.6q0-1.6 1-2.6t2.6-1q1.6 0 2.6 1t1 2.6q0 1.15-.55 2.025T15.1 22.95v5.45h7.4v-17h-4L24 3.95l5.5 7.45h-4v17h7.4v-5.2h-2.1V16H38v7.2h-2.1v5.2q0 1.2-.9 2.1-.9.9-2.1.9h-7.4v5.55q1 .55 1.55 1.5t.55 1.95q0 1.6-1 2.6T24 44Z" />
     </svg>
   );

gui/src/components/commons/icon/WifiIcon.tsx

@@ -4,10 +4,12 @@ import { useMemo } from 'react';
 export function WifiIcon({
   variant = 'progress',
   value,
+  size = 16,
   disabled = false,
 }: {
   variant?: 'progress' | 'navbar';
   value: number | null;
+  size?: number;
   disabled?: boolean;
 }) {
   const percent = useMemo(
@@ -41,8 +43,8 @@ export function WifiIcon({
 
   return (
     <svg
-      width="16"
-      height="13"
+      width={size}
+      height={size}
       viewBox="0 0 16 13"
       xmlns="http://www.w3.org/2000/svg"
     >

gui/src/components/onboarding/pages/WifiCreds.tsx

@@ -5,6 +5,9 @@ import { Button } from '@/components/commons/Button';
 import { Input } from '@/components/commons/Input';
 import { Typography } from '@/components/commons/Typography';
 import classNames from 'classnames';
+import { USBIcon } from '@/components/commons/icon/UsbIcon';
+import { WifiIcon } from '@/components/commons/icon/WifiIcon';
+import { WarningBox } from '@/components/commons/TipBox';
 
 export function WifiCredsPage() {
   const { l10n } = useLocalization();
@@ -14,96 +17,114 @@ export function WifiCredsPage() {
   applyProgress(0.2);
 
   return (
-    <form
-      className="flex flex-col w-full h-full"
-      onSubmit={handleSubmit(submitWifiCreds)}
-    >
-      <div className="flex flex-col w-full h-full justify-center items-center relative">
-        <div className="flex mobile:flex-col xs:gap-10 gap-4 px-4">
-          <div className="flex flex-col max-w-sm">
-            <Typography variant="main-title">
-              {l10n.getString('onboarding-wifi_creds')}
-            </Typography>
-            <>
-              {l10n
-                .getString('onboarding-wifi_creds-description')
-                .split('\n')
-                .map((line, i) => (
-                  <Typography key={i}>{line}</Typography>
-                ))}
-            </>
-            {!state.alonePage && (
-              <Button
-                variant="secondary"
-                to="/onboarding/home"
-                className="mt-auto mb-10 self-start"
-              >
-                {l10n.getString('onboarding-previous_step')}
-              </Button>
-            )}
-          </div>
-          <div
-            className={classNames(
-              'flex flex-col gap-3 p-10 rounded-xl max-w-sm sentry-mask',
-              !state.alonePage && 'bg-background-70',
-              state.alonePage && 'bg-background-60'
-            )}
-          >
-            <Localized
-              id="onboarding-wifi_creds-ssid"
-              attrs={{ placeholder: true, label: true }}
-            >
-              <Input
-                control={control}
-                rules={{ required: true }}
-                name="ssid"
-                type="text"
-                label="SSID"
-                placeholder="ssid"
-                variant="secondary"
-              />
-            </Localized>
-            <Localized
-              id="onboarding-wifi_creds-password"
-              attrs={{ placeholder: true, label: true }}
-            >
-              <Input
-                control={control}
-                rules={{
-                  validate: {
-                    validPassword: (v: string | undefined) =>
-                      v === undefined ||
-                      v.length === 0 ||
-                      new Blob([v]).size >= 8,
-                  },
-                }}
-                name="password"
-                type="password"
-                label="Password"
-                placeholder="password"
-                variant="secondary"
-              />
-            </Localized>
-            <div className="flex flex-row gap-3">
-              <Button
-                variant="secondary"
-                className={state.alonePage ? 'opacity-0' : ''}
-                state={{ alonePage: state.alonePage }}
-                to={'/onboarding/trackers-assign'}
-              >
-                {l10n.getString('onboarding-wifi_creds-skip')}
-              </Button>
-              <Button
-                type="submit"
-                variant="primary"
-                disabled={!formState.isValid}
-              >
-                {l10n.getString('onboarding-wifi_creds-submit')}
-              </Button>
+    <div className="flex flex-col w-full h-full xs:justify-center items-center">
+      <div className="grid xs:grid-cols-2 gap-4 max-w-6xl p-4">
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2 items-center">
+            <div className="bg-accent-background-30 rounded-full p-2 fill-background-10">
+              <USBIcon size={24} />
             </div>
+            <Typography
+              variant="main-title"
+              id="onboarding-wifi_creds-dongle-title"
+             />
+          </div>
+          <div className={classNames('flex flex-col gap-2 flex-grow p-2')}>
+            <Typography
+              whitespace="whitespace-pre-wrap"
+              id="onboarding-wifi_creds-dongle-description"
+             />
+            <Localized id="onboarding-wifi_creds-dongle-wip">
+              <WarningBox whitespace>WANING</WarningBox>
+            </Localized>
+          </div>
+          <div className="flex px-2 p-6">
+            <Button
+              variant="primary"
+              to={state.alonePage ? '/' : '/onboarding/trackers-assign'}
+              id="onboarding-wifi_creds-dongle-continue"
+             />
           </div>
         </div>
+        <form
+          className="flex flex-col gap-2"
+          onSubmit={handleSubmit(submitWifiCreds)}
+        >
+          <div className="flex gap-2 items-center">
+            <div className="bg-accent-background-30 rounded-full p-2 fill-background-10">
+              <WifiIcon variant="navbar" value={1} size={24} />
+            </div>
+            <Typography variant="main-title" id="onboarding-wifi_creds-v2"/>
+          </div>
+
+          <div className="flex flex-col gap-2 w-full h-full p-2">
+            <Typography
+              id="onboarding-wifi_creds-description-v2"
+              whitespace="whitespace-pre-wrap"
+            />
+            <div
+              className={classNames(
+                'flex flex-col gap-3 p-5 rounded-xl sentry-mask',
+                !state.alonePage && 'bg-background-70',
+                state.alonePage && 'bg-background-60'
+              )}
+            >
+              <Localized
+                id="onboarding-wifi_creds-ssid"
+                attrs={{ placeholder: true, label: true }}
+              >
+                <Input
+                  control={control}
+                  rules={{ required: true }}
+                  name="ssid"
+                  type="text"
+                  label="SSID"
+                  placeholder="ssid"
+                  variant="secondary"
+                />
+              </Localized>
+              <Localized
+                id="onboarding-wifi_creds-password"
+                attrs={{ placeholder: true, label: true }}
+              >
+                <Input
+                  control={control}
+                  rules={{
+                    validate: {
+                      validPassword: (v: string | undefined) =>
+                        v === undefined ||
+                        v.length === 0 ||
+                        new Blob([v]).size >= 8,
+                    },
+                  }}
+                  name="password"
+                  type="password"
+                  label="Password"
+                  placeholder="password"
+                  variant="secondary"
+                />
+              </Localized>
+              <div className="flex flex-row gap-3 justify-between">
+                <Button
+                  variant="secondary"
+                  className={state.alonePage ? 'opacity-0' : ''}
+                  state={{ alonePage: state.alonePage }}
+                  to={'/onboarding/trackers-assign'}
+                >
+                  {l10n.getString('onboarding-wifi_creds-skip')}
+                </Button>
+                <Button
+                  type="submit"
+                  variant="primary"
+                  disabled={!formState.isValid}
+                >
+                  {l10n.getString('onboarding-wifi_creds-submit')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
       </div>
-    </form>
+    </div>
   );
 }