From 042ca252c859ebb4a987a2b9ca5abddf8c25f915 Mon Sep 17 00:00:00 2001
From: Bing Wen Tan <bingwen.cpf@gmail.com>
Date: Sun, 2 Jun 2024 10:23:31 +0800
Subject: [PATCH 1/2] moved back button to header

---
 .../src/components/common/BackButton.tsx      | 29 ++++++++++---------
 checkers-app/src/components/common/Header.tsx | 18 ++++++++----
 checkers-app/src/components/common/Layout.tsx |  2 +-
 checkers-app/src/components/vote/index.tsx    |  2 --
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/checkers-app/src/components/common/BackButton.tsx b/checkers-app/src/components/common/BackButton.tsx
index 09ca3f4d..cac81b07 100644
--- 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
index 64ff8786..d71fa9e0 100644
--- 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
index e1895a26..038a24c9 100644
--- 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
index 622615a2..8825c7f8 100644
--- 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}

From e0ca096d665ebb8f1a19c7b0c977bd38b925b8ef Mon Sep 17 00:00:00 2001
From: Bing Wen Tan <bingwen.cpf@gmail.com>
Date: Sun, 2 Jun 2024 10:46:16 +0800
Subject: [PATCH 2/2] added padding to header

---
 checkers-app/src/components/common/Header.tsx               | 4 ++--
 checkers-app/src/components/dashboard/CelebrationDialog.tsx | 5 +++--
 checkers-app/src/components/dashboard/index.tsx             | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/checkers-app/src/components/common/Header.tsx b/checkers-app/src/components/common/Header.tsx
index d71fa9e0..7679f439 100644
--- a/checkers-app/src/components/common/Header.tsx
+++ b/checkers-app/src/components/common/Header.tsx
@@ -11,13 +11,13 @@ interface HeaderProps {
 export default function Header({ pageName, showMenu = false }: HeaderProps) {
   const { checkerDetails } = useUser();
   return (
-    <div className="relative flex items-center fixed top-0 left-0 right-0 z-30 bg-white dark:bg-dark-background-color">
+    <div className="relative flex items-center fixed top-0 left-0 right-0 z-30 px-[3vw] pt-[3vh] 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">
+        <Typography variant="h4" className="text-primary-color2">
           {pageName}
         </Typography>
       </div>
diff --git a/checkers-app/src/components/dashboard/CelebrationDialog.tsx b/checkers-app/src/components/dashboard/CelebrationDialog.tsx
index 03babd82..42e1d1b5 100644
--- a/checkers-app/src/components/dashboard/CelebrationDialog.tsx
+++ b/checkers-app/src/components/dashboard/CelebrationDialog.tsx
@@ -50,8 +50,9 @@ export function CelebrationDialog(props: PropType) {
             Congratulations!!!
           </Typography>
           <Typography className="text-center font-normal">
-            Hooray! You've completed the CheckMate program!! Would you like to
-            continue with us as a checker?
+            Hooray! You've completed the CheckMate program!! We'd love for you
+            to stay on as a checker and help us in our fight against
+            misinformation and scams. Would you like to stay on?
           </Typography>
         </DialogBody>
         <DialogFooter className="space-x-2">
diff --git a/checkers-app/src/components/dashboard/index.tsx b/checkers-app/src/components/dashboard/index.tsx
index bd29f4b7..fcc3909b 100644
--- a/checkers-app/src/components/dashboard/index.tsx
+++ b/checkers-app/src/components/dashboard/index.tsx
@@ -75,7 +75,7 @@ export default function Dashboard() {
       )} */}
       {isOnProgram && programStats ? (
         <div>
-          <Typography variant="h4" className="text-primary-color">
+          <Typography variant="h5" className="text-primary-color">
             CheckMate Program Progress
           </Typography>
           <div className="my-6 flex flex-col gap-y-4 mx-2">
@@ -139,7 +139,7 @@ export default function Dashboard() {
         </div>
       ) : (
         <div>
-          <Typography variant="h4" className="text-primary-color">
+          <Typography variant="h5" className="text-primary-color">
             In the past 30 days
           </Typography>
           <div className="my-6 flex flex-col gap-y-4 mx-2">