Merge pull request #322 from bettersg/feat/improved-back-button-aesth…

…etic Moved back button to header
bettersg · Jun 2, 2024 · bfbb6e7 · bfbb6e7
2 parents f489a8c + 042ca25
commit bfbb6e7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 22 deletions.
diff --git a/checkers-app/src/components/common/BackButton.tsx b/checkers-app/src/components/common/BackButton.tsx
@@ -1,21 +1,22 @@
-import { Button } from "@material-tailwind/react";
 import { ArrowLeftIcon } from "@heroicons/react/24/solid";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 export function BackButton() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const regex = /^\/messages\/[^/]+\/voteRequests\/[^/]+\/?$/;
+  function onClick() {
+    if (regex.test(location.pathname)) {
+      navigate("/votes");
+    } else {
+      navigate(-1);
+    }
+  }
+
   return (
-    <div className="fixed top-16 left-4 z-50 bg-gray-800 bg-opacity-75 p-2 rounded-full">
-      <Button
-        variant="text"
-        className="rounded-full"
-        style={{ color: "#ff8932" }}
-        onClick={() => {
-          navigate(`/votes`);
-        }}
-      >
-        <ArrowLeftIcon className="h-5 w-5" />
-      </Button>
-    </div>
+    <ArrowLeftIcon
+      className="h-6 w-6 text-[#ff8932] cursor-pointer"
+      onClick={onClick}
+    />
   );
 }
diff --git a/checkers-app/src/components/common/Header.tsx b/checkers-app/src/components/common/Header.tsx
@@ -1,6 +1,7 @@
 import { Typography } from "@material-tailwind/react";
 import MenuComponent from "./Menu";
 import { useUser } from "../../providers/UserContext";
+import { BackButton } from "./BackButton";
 
 interface HeaderProps {
   pageName: string;
@@ -10,11 +11,18 @@ interface HeaderProps {
 export default function Header({ pageName, showMenu = false }: HeaderProps) {
   const { checkerDetails } = useUser();
   return (
-    <div className="flex justify-between items-center fixed top-0 left-0 right-0 z-30 px-[5vw] pt-[3vh] bg-white dark:bg-dark-background-color">
-      <Typography variant="h3" className="text-primary-color2">
-        {pageName}
-      </Typography>
-      <div className="flex items-center gap-4">
+    <div className="relative flex items-center fixed top-0 left-0 right-0 z-30 bg-white dark:bg-dark-background-color">
+      <div className="flex justify-start items-center flex-grow-0">
+        <BackButton />
+      </div>
+
+      <div className="absolute left-1/2 transform -translate-x-1/2">
+        <Typography variant="h3" className="text-primary-color2">
+          {pageName}
+        </Typography>
+      </div>
+
+      <div className="flex justify-end items-center flex-grow gap-4">
         {showMenu && <MenuComponent isActive={checkerDetails.isActive} />}
         <img
           className="rounded-full h-[12vw] w-[12vw] orange-glow"

diff --git a/checkers-app/src/components/common/Layout.tsx b/checkers-app/src/components/common/Layout.tsx
@@ -26,7 +26,7 @@ export default function Layout({
       <Header pageName={pageName} showMenu={showMenu} />
       {/* <PageHeader>{pageHeader}</PageHeader>
     </div> */}
-      <div className="pb-16 mt-16">{children}</div>
+      <div className="pb-1 mt-1">{children}</div>
       <NavbarDefault />
     </div>
   );

diff --git a/checkers-app/src/components/vote/index.tsx b/checkers-app/src/components/vote/index.tsx
@@ -1,7 +1,6 @@
 import VoteCategories from "./VoteCategories";
 import MessageCard from "./MessageCard";
 import { Typography, Alert } from "@material-tailwind/react";
-import { BackButton } from "../common/BackButton";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useUser } from "../../providers/UserContext";
@@ -52,7 +51,6 @@ export default function VotePage() {
             }
           `}
         </style>
-        <BackButton />
         <MessageCard
           type={vote.type}
           text={vote.text}