Add button logics and main dialog

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import { Route, Routes } from "react-router-dom";
 import Home from "./pages/Home/Home";
 import QuestionList from "./pages/QuestionList/QuestionList";
 import { createTheme, ThemeProvider } from "@mui/material";
+import MainDialog from "./components/MainDialog/MainDialog";
+import { MainDialogContextProvider } from "./contexts/MainDialogContext";
 
 const theme = createTheme({
   typography: {
@@ -40,16 +42,28 @@ const theme = createTheme({
         },
       },
     },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: "10px",
+          background: "#1c1c1c",
+          padding: "20px 20px",
+        },
+      },
+    },
   },
 });
 
 const App = (): ReactElement => {
   return (
     <ThemeProvider theme={theme}>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/questions" element={<QuestionList />} />
-      </Routes>
+      <MainDialogContextProvider>
+        <MainDialog />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/questions" element={<QuestionList />} />
+        </Routes>
+      </MainDialogContextProvider>
     </ThemeProvider>
   );
 };

frontend/src/components/Footer/Footer.scss

@@ -22,10 +22,9 @@
         border-radius: 100px;
         border: 1px solid var(--Grey-15, #262626);
         background: var(--Grey-10, #1A1A1A);
-        display: flex;
-        flex-direction: row;
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
         align-items: center;
-        justify-content: space-between;
     }
 
     &-github {
@@ -37,8 +36,12 @@
         font-size: 0.8rem !important;
         font-weight: 200 !important;
         color: var(--Grey-Shades-70, var(--Text-Disabled-On-Disabled, #B3B3B3)) !important;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
+        grid-column: 2;
+        justify-self: center;
+    }
+
+    &-terms {
+        grid-column: 3;
+        justify-self: end;
     }
 }

frontend/src/components/Footer/Footer.tsx

@@ -3,20 +3,34 @@ import { ReactElement } from "react";
 import "./Footer.scss";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import ApiIcon from "@mui/icons-material/Api";
+import { gitHubUrl } from "../../constants/urls";
+import { useMainDialog } from "../../contexts/MainDialogContext";
 
 const Footer = (): ReactElement => {
+  const { openDialog, setTitle, setContent } = useMainDialog();
+
+  const openTermsOfService = () => {
+    setTitle("Work in Progress");
+    setContent("Terms of service is under construction. Check back in a future milestone!");
+    openDialog();
+  };
+
   return (
     <footer className="Footer">
       <Container className="Footer-logo">
         <ApiIcon color="primary" />
         <Typography>LuckyJinx</Typography>
       </Container>
       <Box className="Footer-bottom">
-        <IconButton className="Footer-github">
-          <GitHubIcon />
-        </IconButton>
+        <a href={gitHubUrl} target="_blank" rel="noreferrer noopener">
+          <IconButton className="Footer-github">
+            <GitHubIcon />
+          </IconButton>
+        </a>
         <Typography className="Footer-trademark">Lucky Jinx 2024 All Rights Reserved</Typography>
-        <Button>Terms of Service</Button>
+        <Button className="Footer-terms" onClick={openTermsOfService}>
+          Terms of Service
+        </Button>
       </Box>
     </footer>
   );

frontend/src/components/MainDialog/MainDialog.scss

@@ -0,0 +1,13 @@
+.MainDialog {
+
+    &-title {
+        word-wrap: break-word;
+        font-size: 1.5rem !important;
+        font-weight: 700 !important;
+    }
+
+    &-content {
+        word-wrap: break-word;
+    }
+
+}

frontend/src/components/MainDialog/MainDialog.tsx

@@ -0,0 +1,35 @@
+import { Button, Typography } from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import { ReactElement } from "react";
+import { useMainDialog } from "../../contexts/MainDialogContext";
+import "./MainDialog.scss";
+
+const MainDialog = (): ReactElement => {
+  const { isOpen, title, content, closeDialog } = useMainDialog();
+
+  return (
+    <Dialog className="MainDialog" open={isOpen} onClose={closeDialog}>
+      <DialogTitle>
+        <Typography className="MainDialog-title">{title}</Typography>
+      </DialogTitle>
+
+      <DialogContent>
+        <DialogContentText>
+          <Typography className="MainDialog-content">{content}</Typography>
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button color="primary" variant="contained" onClick={closeDialog}>
+          OK
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default MainDialog;

frontend/src/components/Navbar/Navbar.tsx

@@ -2,19 +2,28 @@ import { Box, Button, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import "./Navbar.scss";
 import ApiIcon from "@mui/icons-material/Api";
+import { useMainDialog } from "../../contexts/MainDialogContext";
 
 const Navbar = (): ReactElement => {
+  const { openDialog, setTitle, setContent } = useMainDialog();
+
+  const login = () => {
+    setTitle("Work in Progress");
+    setContent("User service is under construction. Check back in a future milestone!");
+    openDialog();
+  };
+
   return (
     <nav className="Navbar">
       <Box className="Navbar-logo">
         <ApiIcon color="primary" />
         <Typography className="Navbar-title">LuckyJinx</Typography>
       </Box>
       <Box className="Navbar-buttons">
-        <Button color="secondary" variant="contained">
+        <Button color="secondary" variant="contained" onClick={login}>
           Sign Up
         </Button>
-        <Button color="primary" variant="contained">
+        <Button color="primary" variant="contained" onClick={login}>
           Login
         </Button>
       </Box>

frontend/src/constants/urls.ts

@@ -0,0 +1 @@
+export const gitHubUrl = "https://github.com/CS3219-AY2425S1/cs3219-ay2425s1-project-g06";

frontend/src/contexts/MainDialogContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+interface MainDialogContextType {
+  isOpen: boolean;
+  title: string;
+  content: string;
+  openDialog: () => void;
+  closeDialog: () => void;
+  setTitle: (title: string) => void;
+  setContent: (content: string) => void;
+}
+
+const MainDialogContext = createContext<MainDialogContextType>({
+  isOpen: false,
+  title: "",
+  content: "",
+  openDialog: () => {},
+  closeDialog: () => {},
+  setTitle: () => {},
+  setContent: () => {},
+});
+
+export const MainDialogContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [title, setTitle] = useState<string>("");
+  const [content, setContent] = useState<string>("");
+
+  const openDialog = () => {
+    setIsOpen(true);
+  };
+
+  const closeDialog = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <MainDialogContext.Provider value={{ isOpen, title, content, openDialog, closeDialog, setTitle, setContent }}>
+      {children}
+    </MainDialogContext.Provider>
+  );
+};
+
+export const useMainDialog = () => useContext(MainDialogContext);

frontend/src/pages/Home/Home.tsx

@@ -32,17 +32,19 @@ const Home = (): ReactElement => {
             start on developing a solution to the problem.
           </Typography>
 
-          <Button color="primary" variant="contained">
-            Get Started
-          </Button>
+          <a href="#questions">
+            <Button color="primary" variant="contained">
+              Get Started
+            </Button>
+          </a>
         </Box>
 
         <Box className="Home-welcome-image">
           <img src={CodeEditorImage} alt="Code Editor" />
         </Box>
       </Box>
 
-      <button onClick={goToQuestionList} className="Home-button">
+      <button id="questions" onClick={goToQuestionList} className="Home-button">
         Go to Question List
       </button>