From d8dcdcc09b1aad93c1dd87fbf0a46eb142044c44 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sun, 28 Jan 2024 01:18:45 +0100
Subject: [PATCH 1/3] Swap onboarding cards

---
 src/pages/onboarding/Onboarding.tsx | 30 ++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index 38d465c2..e0c896e7 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -59,21 +59,6 @@ export function OnboardingPage() {
         </Paragraph>
 
         <div className="w-full flex flex-col-reverse md:flex-row gap-3">
-          <Card onClick={() => navigate("/onboarding/proxy")}>
-            <CardContent
-              colorClass="!text-onboarding-good"
-              title={t("onboarding.start.options.proxy.title")}
-              subtitle={t("onboarding.start.options.proxy.quality")}
-              description={t("onboarding.start.options.proxy.description")}
-            >
-              <Link>{t("onboarding.start.options.proxy.action")}</Link>
-            </CardContent>
-          </Card>
-          <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
-            <VerticalLine className="items-end" />
-            <span className="text-xs uppercase font-bold">or</span>
-            <VerticalLine />
-          </div>
           <Card onClick={() => navigate("/onboarding/extension")}>
             <CardContent
               colorClass="!text-onboarding-best"
@@ -84,6 +69,21 @@ export function OnboardingPage() {
               <Link>{t("onboarding.start.options.extension.action")}</Link>
             </CardContent>
           </Card>
+          <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
+            <VerticalLine className="items-end" />
+            <span className="text-xs uppercase font-bold">or</span>
+            <VerticalLine />
+          </div>
+          <Card onClick={() => navigate("/onboarding/proxy")}>
+            <CardContent
+              colorClass="!text-onboarding-good"
+              title={t("onboarding.start.options.proxy.title")}
+              subtitle={t("onboarding.start.options.proxy.quality")}
+              description={t("onboarding.start.options.proxy.description")}
+            >
+              <Link>{t("onboarding.start.options.proxy.action")}</Link>
+            </CardContent>
+          </Card>
         </div>
 
         <p className="text-center hidden md:block mt-12">

From c33176ff8b16694c660c8d83cc9c7f6034537f31 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sun, 28 Jan 2024 01:20:11 +0100
Subject: [PATCH 2/3] Un-reverse onboarding cards

---
 src/pages/onboarding/Onboarding.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index e0c896e7..8ba0ba19 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -58,7 +58,7 @@ export function OnboardingPage() {
           {t("onboarding.start.explainer")}
         </Paragraph>
 
-        <div className="w-full flex flex-col-reverse md:flex-row gap-3">
+        <div className="w-full flex flex-col md:flex-row gap-3">
           <Card onClick={() => navigate("/onboarding/extension")}>
             <CardContent
               colorClass="!text-onboarding-best"

From 058a3c41c8cc1eae48ee04ccaee792648929dbcf Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sun, 28 Jan 2024 14:07:52 +0100
Subject: [PATCH 3/3] Mobile view for SetupPart

---
 src/pages/parts/settings/SetupPart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/parts/settings/SetupPart.tsx b/src/pages/parts/settings/SetupPart.tsx
index 16100ca7..963cefeb 100644
--- a/src/pages/parts/settings/SetupPart.tsx
+++ b/src/pages/parts/settings/SetupPart.tsx
@@ -155,7 +155,7 @@ export function SetupPart() {
 
   return (
     <SettingsCard>
-      <div className="flex items-start gap-4">
+      <div className="flex flex-col md:flex-row items-start gap-4">
         <div>
           <div
             className={classNames({
@@ -193,7 +193,7 @@ export function SetupPart() {
             {t("settings.connections.setup.items.default")}
           </SetupCheckList>
         </div>
-        <div className="mt-5">
+        <div className="md:mt-5">
           <Button theme="purple" onClick={() => navigate("/onboarding")}>
             {t(textLookupMap[globalState].button)}
           </Button>