From e136b23d9a248f11f5b89b568b863695f7b10068 Mon Sep 17 00:00:00 2001
From: Adithya Vardhan <imadithyavardhan@gmail.com>
Date: Thu, 25 Jul 2024 19:57:29 +0530
Subject: [PATCH] feat: add back button in setup screen (#337)

* feat: add back button in setup screen

* fix: whitelist setup pages for back button

* fix: use standard conditional react rather than css hidden

---------

Co-authored-by: Roland Bewick <roland.bewick@gmail.com>
---
 .../layouts/TwoColumnFullScreenLayout.tsx     | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layouts/TwoColumnFullScreenLayout.tsx b/frontend/src/components/layouts/TwoColumnFullScreenLayout.tsx
index 3162c8b8..8b9a77ad 100644
--- a/frontend/src/components/layouts/TwoColumnFullScreenLayout.tsx
+++ b/frontend/src/components/layouts/TwoColumnFullScreenLayout.tsx
@@ -1,5 +1,7 @@
+import { ChevronLeft } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Button } from "src/components/ui/button.tsx";
 import { useInfo } from "src/hooks/useInfo";
 
 const quotes = [
@@ -51,6 +53,7 @@ const quotes = [
 
 export default function TwoColumnFullScreenLayout() {
   const { data: info } = useInfo();
+  const navigate = useNavigate();
   const { pathname } = useLocation();
   const [quote, setQuote] = useState(
     quotes[Math.floor(Math.random() * quotes.length)]
@@ -84,7 +87,22 @@ export default function TwoColumnFullScreenLayout() {
           </div>
         </div>
       </div>
-      <div className="flex items-center justify-center py-12 text-foreground">
+      <div className="flex items-center justify-center py-12 text-foreground relative">
+        {pathname.startsWith("/setup") &&
+          !pathname.startsWith("/setup/finish") && (
+            // show the back button on setup pages, except the setup finish page
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                navigate(-1);
+              }}
+              className="top-4 left-4 md:top-10 md:left-10 absolute mr-4"
+            >
+              <ChevronLeft className="w-4 h-4 mr-2" />
+              Back
+            </Button>
+          )}
         <Outlet />
       </div>
     </div>