fix: Add skip button to onboarding and improve tutorial skip visibility (#1240)

Co-authored-by: littlekirkycode <littlekirky@googlemail.com>

Author: littlekirkycode

apps/code/src/renderer/features/onboarding/components/OnboardingFlow.tsx

@@ -152,22 +152,36 @@ export function OnboardingFlow() {
                   currentStep={currentStep}
                   activeSteps={activeSteps}
                 />
-                <Button
-                  size="1"
-                  variant="ghost"
-                  color="gray"
-                  onClick={logout}
+                <Flex
+                  justify="between"
                   style={{
                     position: "absolute",
                     bottom: 20,
                     left: 32,
-                    opacity: 0.5,
+                    right: 32,
                     zIndex: 2,
                   }}
                 >
-                  <SignOut size={14} />
-                  Log out
-                </Button>
+                  <Button
+                    size="1"
+                    variant="ghost"
+                    color="gray"
+                    onClick={logout}
+                    style={{ opacity: 0.5 }}
+                  >
+                    <SignOut size={14} />
+                    Log out
+                  </Button>
+                  <Button
+                    size="1"
+                    variant="ghost"
+                    color="gray"
+                    onClick={handleComplete}
+                    style={{ opacity: 0.5 }}
+                  >
+                    Skip setup
+                  </Button>
+                </Flex>
               </Flex>
             </>
           )}

apps/code/src/renderer/features/onboarding/components/TutorialStep.tsx

@@ -21,7 +21,7 @@ import {
   useRepositoryIntegration,
 } from "@hooks/useIntegrations";
 import { ArrowLeft } from "@phosphor-icons/react";
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Button, Flex } from "@radix-ui/themes";
 import { motion } from "framer-motion";
 import {
   useCallback,
@@ -436,14 +436,8 @@ export function TutorialStep({ onComplete, onBack }: TutorialStepProps) {
           <ArrowLeft size={14} />
           Back
         </Button>
-        <Button
-          size="2"
-          variant="ghost"
-          color="gray"
-          onClick={onComplete}
-          style={{ opacity: 0.7 }}
-        >
-          <Text size="1">Skip tutorial</Text>
+        <Button size="2" variant="ghost" color="gray" onClick={onComplete}>
+          Skip tutorial
         </Button>
       </Flex>
     </Flex>