Design

src/app/components/Chat/Chat.style.ts

@@ -1,12 +1,12 @@
 export const styles = {
     container: {
-        height: "88vh",
+        height: "86vh",
         display: "flex",
         flexDirection: "column",
         bgcolor: "grey.200",
     },
     secondContainer: {
-        width: "500px",
+        // width: "500px",
         alignSelf: "center",
         flexGrow: 1,
         overflow: "auto",

src/app/components/ChatBox/ChatBox.style.ts

@@ -1,9 +1,15 @@
+import { Height } from "@mui/icons-material";
+
 export const styles = {
     box: {
         p: 2,
-        backgroundColor: "background.default",
-        width: "500px",
+        // backgroundColor: "background.default",
+        // width: "500px",
+        height: "15vh",
         alignSelf: "center",
-        marginBottom: 3,
+        marginBottom: 4,
+    },
+    sendIcon: {
+        color: "primary.main",
     },
 };

src/app/components/ChatBox/ChatBox.tsx

@@ -12,7 +12,6 @@ import useInput from "@/app/hooks/useInput";
 import useChat from "@/app/hooks/useChat";
 import useUpdateMsg from "@/app/hooks/useUpdateMsg";
 import useEndChat from "@/app/hooks/useEndChat";
-
 export default function ChatBox({ bot }: ChatBoxProps) {
     const [_, setIsQuerySubmit] = useRecoilState(isQuerySubmitAtom);
     const [__, setQueryParams] = useRecoilState(queryParamsAtom);
@@ -81,13 +80,11 @@ export default function ChatBox({ bot }: ChatBoxProps) {
     }, [currentMsg.state, isSubmit, endSection.state]);
 
     return (
-        <Box sx={styles.box}>
-            <Box component="form" onSubmit={handleSubmit}>
-                <Grid container spacing={2}>
-                    <ChatInput />
-                    <ChatButton />
-                </Grid>
-            </Box>
+        <Box component="form" onSubmit={handleSubmit} sx={styles.box}>
+            <Grid container spacing={1}>
+                <ChatInput />
+                <ChatButton />
+            </Grid>
         </Box>
     );
 }

src/app/components/ChatButton/ChatButton.style.ts

@@ -1,3 +1,3 @@
 export const styles = {
-    button: { width: "120%" },
+    button: { color: "primary.main" },
 };

src/app/components/ChatButton/ChatButton.test.tsx

@@ -4,38 +4,16 @@ import { render, screen } from "@testing-library/react";
 import ChatButton from "@/app/components/ChatButton/ChatButton";
 
 describe("ChatButton Component", () => {
-    it("renders the send button correctly", () => {
+    it("renders the submit IconButton", () => {
         render(<ChatButton />);
-
-        // Check if the button with "Send" text is rendered
-        const button = screen.getByRole("button", { name: /Send/i });
+        const button = screen.getByRole("button");
         expect(button).toBeInTheDocument();
-    });
-
-    it("applies the correct styles to the button", () => {
-        render(<ChatButton />);
-
-        // Check if the button has the correct inline styles
-        const button = screen.getByRole("button", { name: /Send/i });
-        expect(button).toHaveStyle("width: 120%");
+        expect(button).toHaveAttribute("type", "submit");
     });
 
     it("renders the Send icon", () => {
         render(<ChatButton />);
-
-        // Check if the button contains the SendIcon
         const icon = screen.getByTestId("SendIcon");
         expect(icon).toBeInTheDocument();
     });
-
-    it("is wrapped inside a Grid component with correct sizing", () => {
-        render(<ChatButton />);
-
-        // Check if the Grid component is rendered with the correct xs prop
-        const gridItem = screen
-            .getByRole("button", { name: /Send/i })
-            .closest(".MuiGrid-item");
-        expect(gridItem).toBeInTheDocument();
-        expect(gridItem).toHaveClass("MuiGrid-grid-xs-2");
-    });
 });

src/app/components/ChatButton/ChatButton.tsx

@@ -1,19 +1,14 @@
 "use client";
-import { Grid } from "@mui/material";
-import CustomButton from "@/app/components/CustomButton";
+import { Grid, IconButton } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 import { styles } from "./ChatButton.style";
-import { GENERAL_BUTTONS_TEXTS } from "@/app/general/constants";
 
 export default function ChatButton() {
     return (
         <Grid item xs={2}>
-            <CustomButton
-                sx={styles.button}
-                endIcon={<SendIcon />}
-                type="submit"
-                text={GENERAL_BUTTONS_TEXTS.send}
-            />
+            <IconButton type="submit" sx={styles.button}>
+                <SendIcon />
+            </IconButton>
         </Grid>
-    );
+    )
 }

src/app/components/ChatInput/ChatInput.test.tsx

@@ -22,13 +22,4 @@ describe("ChatInput Component", () => {
         expect(input).toHaveAttribute("type", "text");
         expect(input).toHaveAttribute("placeholder", "Type a message");
     });
-
-    it("is wrapped inside a Grid component with correct sizing", () => {
-        render(<ChatInput />);
-
-        // Check if the Grid component is rendered with the correct xs prop
-        const gridItem = screen.getByRole("textbox").closest(".MuiGrid-item");
-        expect(gridItem).toBeInTheDocument();
-        expect(gridItem).toHaveClass("MuiGrid-grid-xs-10");
-    });
 });

src/app/components/ChatInput/ChatInput.tsx

@@ -2,13 +2,14 @@ import { Grid, TextField } from "@mui/material";
 
 export default function ChatInput() {
     return (
-        <Grid item xs={10}>
+        <Grid item>
             <TextField
                 size="small"
                 fullWidth
                 placeholder="Type a message"
                 variant="outlined"
                 name="input"
+                color="primary"
             />
         </Grid>
     );

src/app/components/Footer/Footer.style.ts

@@ -1,11 +1,17 @@
 export const styles = {
     box: {
+        height: "2rem",
         backgroundColor: "#f8f9fa",
-        padding: 1,
         textAlign: "center",
         position: "fixed",
         width: "100%",
         bottom: 0,
         color: "black",
     },
+    typography: {
+        textAlign: "center",
+        color: "black",
+        fontSize: "1rem",
+        fontWeight: "bold",
+    },
 };

src/app/components/Footer/Footer.test.tsx

@@ -11,28 +11,12 @@ describe("Footer Component", () => {
         expect(screen.getByText("Powered by dbBot")).toBeInTheDocument();
     });
 
-    it("applies the correct styles to the footer container", () => {
-        render(<Footer />);
-
-        // Check if the Box component has the correct styles
-        const footerBox = screen.getByRole("contentinfo");
-        expect(footerBox).toHaveStyle(`
-            background-color: #f8f9fa;
-            padding: 8px;
-            text-align: center;
-            position: fixed;
-            width: 100%;
-            bottom: 0;
-            color: black;
-        `);
-    });
-
     it("renders the correct typography variant", () => {
         render(<Footer />);
 
         // Check if Typography is rendered with the correct variant
         const typography = screen.getByText("Powered by dbBot");
         expect(typography).toBeInTheDocument();
-        expect(typography).toHaveStyle(`font-size: 0.75rem`);
+        expect(typography).toHaveStyle(`font-size: 1rem`);
     });
 });

src/app/components/Footer/Footer.tsx

@@ -5,7 +5,7 @@ import { Box, Typography } from "@mui/material";
 export default function Footer() {
     return (
         <Box component="footer" sx={styles.box}>
-            <Typography variant="caption">Powered by dbBot</Typography>
+            <Typography sx={styles.typography} variant="caption">Powered by dbBot</Typography>
         </Box>
     );
 }

src/app/components/Header/Header.style.ts

@@ -1,9 +1,14 @@
 export const styles = {
+    title: { flexGrow: 1 },
+    mobileMode: { display: { xs: 'flex', md: 'none' } },
+    desktopMode: { display: { xs: 'none', md: 'flex' } },
+    mobileMenuIcon: { display: { xs: 'block', md: 'none' } },
+    menuButton: { mr: 2 },
     box: {
-        display: "flex",
-        backgroundColor: "#f8f9fa",
-        padding: 2,
-        color: "black",
+        // display: "flex",
+        // backgroundColor: "#f8f9fa",
+        // padding: 2,
+        // color: "black",
     },
     typContainer: {
         width: "34%",

src/app/components/Header/Header.test.tsx

@@ -17,10 +17,9 @@ describe("Header Component", () => {
 
     it("renders the correct typography element", () => {
         render(<Header bot={botMock} />);
-
-        // Check if Typography is rendered as an h1
-        const typography = screen.getByRole("heading", { level: 1 });
+        // Check if Typography is rendered as an h6
+        const typography = screen.getByRole("heading", { level: 6 });
         expect(typography).toBeInTheDocument();
-        expect(typography.tagName).toBe("H1");
+        expect(typography.tagName).toBe("H6");
     });
 });