Issue38: fix style

src/app/components/ButtonGroup/ButtonGroup.style.ts

@@ -0,0 +1,13 @@
+export const styles = {
+    button: {
+        width: "22%",
+        height: "90%",
+        fontSize: "11px",
+        borderRadius: "15px",
+        margin: "3px",
+    },
+    buttonsContainer: {
+        width: "30%",
+        height: "90%",
+    },
+};

src/app/components/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,53 @@
+import "@testing-library/jest-dom/jest-globals";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ButtonGroup from "@/app/components/ButtonGroup";
+import { ButtonGroupProps } from "@/app/general/interfaces";
+
+describe("ButtonGroup Component", () => {
+    const mockButtons = [
+        { text: "Button 1", onClick: jest.fn() },
+        { text: "Button 2", onClick: jest.fn() },
+        { text: "Button 3", onClick: jest.fn() },
+    ];
+
+    const defaultProps: ButtonGroupProps = {
+        buttonList: mockButtons,
+        buttonStyle: { color: "red" },
+        containerStyle: { backgroundColor: "blue" },
+    };
+
+    it("renders all buttons correctly", () => {
+        render(<ButtonGroup {...defaultProps} />);
+
+        mockButtons.forEach((button) => {
+            expect(screen.getByText(button.text)).toBeInTheDocument();
+        });
+    });
+
+    it("applies custom container styles", () => {
+        const { container } = render(<ButtonGroup {...defaultProps} />);
+
+        const boxElement = container.querySelector("div");
+        expect(boxElement).toHaveStyle("background-color: blue");
+    });
+
+    it("applies custom button styles", () => {
+        render(<ButtonGroup {...defaultProps} />);
+
+        const buttonElements = screen.getAllByRole("button");
+        buttonElements.forEach((button) => {
+            expect(button).toHaveStyle("color: red");
+        });
+    });
+
+    it("calls the correct onClick handler when a button is clicked", () => {
+        render(<ButtonGroup {...defaultProps} />);
+
+        const buttons = screen.getAllByRole("button");
+        buttons.forEach((button, index) => {
+            fireEvent.click(button);
+            expect(mockButtons[index].onClick).toHaveBeenCalledTimes(1);
+        });
+    });
+});

src/app/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { ButtonGroupProps } from "@/app/general/interfaces";
+import { styles } from "./ButtonGroup.style";
+import { Box } from "@mui/material";
+import CustomButton from "@/app/components/CustomButton";
+
+export default function ButtonGroup({
+    buttonList,
+    buttonStyle,
+    containerStyle,
+}: ButtonGroupProps) {
+    return (
+        <Box
+            component="div"
+            sx={{ ...styles.buttonsContainer, ...containerStyle }}
+        >
+            {buttonList.map((button, index) => (
+                <CustomButton
+                    key={index}
+                    sx={{ ...styles.button, ...buttonStyle }}
+                    {...button}
+                />
+            ))}
+        </Box>
+    );
+}

src/app/components/ButtonGroup/index.ts

@@ -0,0 +1,3 @@
+import ButtonGroup from './ButtonGroup'
+
+export default ButtonGroup;

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

@@ -4,5 +4,6 @@ export const styles = {
         backgroundColor: "background.default",
         width: "500px",
         alignSelf: "center",
+        marginBottom: 3,
     },
 };

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

@@ -12,12 +12,20 @@ export const styles = {
     },
     button: {
         width: "22%",
-        height: "80%",
-        fontSize: "14px",
+        height: "90%",
+        fontSize: "11px",
         borderRadius: "15px",
-        margin: "5px",
+        margin: "3px",
     },
     buttonsContainer: {
         width: "30%",
+        height: "90%",
+    },
+    rightAlign: {
+        textAlign: "right",
+        width: "36%",
+    },
+    rightButton: {
+        width: "18%",
     },
 };

src/app/components/Header/Header.tsx

@@ -4,7 +4,7 @@
 import { Box, Typography, Link } from "@mui/material";
 import Table from "@/app/components/Table";
 import Dialog from "@/app/components/Dialog";
-import CustomButton from "@/app/components/CustomButton";
+import ButtonGroup from "@/app/components/ButtonGroup";
 import {
     HeaderProps,
     NameAndDescription,
@@ -39,19 +39,21 @@
 
     const csv = convertToCSV(rows);
 
-    const buttons = [
+    const dataButtons = [
         {
             onClick: () => setOpenAttribute(true),
             text: HEADER_BUTTONS_TEXTS.attributes,
         },
         { onClick: () => setOpenData(true), text: HEADER_BUTTONS_TEXTS.data },
-        { onClick: () => setOpenHelp(true), text: HEADER_BUTTONS_TEXTS.help },
-        { onClick: () => setOpenMail(true), text: HEADER_BUTTONS_TEXTS.mail },
         {
             onClick: () => downloadCSV(csv, "data.csv"),
             text: HEADER_BUTTONS_TEXTS.download,
         },
     ];
+    const helpButtons = [
+        { onClick: () => setOpenHelp(true), text: HEADER_BUTTONS_TEXTS.help },
+        { onClick: () => setOpenMail(true), text: HEADER_BUTTONS_TEXTS.mail },
+    ];
 
     const dialogs = [
         {
@@ -96,16 +98,17 @@
 
     return (
         <Box component="header" sx={styles.box}>
-            <Box component="div" sx={styles.buttonsContainer}>
-                {buttons.map((button, index) => (
-                    <CustomButton key={index} sx={styles.button} {...button} />
-                ))}
-            </Box>
+            <ButtonGroup buttonList={dataButtons} />
             <Box component="div" sx={styles.typContainer}>
                 <Typography variant="h4" component="h1">
                     {bot?._details.name as string}
                 </Typography>
             </Box>
+            <ButtonGroup
+                buttonList={helpButtons}
+                containerStyle={styles.rightAlign}
+                buttonStyle={styles.rightButton}
+            />
             {dialogs.map((dialog, index) => (
                 <Dialog
                     key={index}

src/app/general/interfaces.ts

@@ -144,3 +144,13 @@ export interface TableProps<T> {
     rows: T[];
     headers: string[];
 }
+
+export interface ButtonList extends TextProp {
+    onClick: () => void;
+}
+
+export interface ButtonGroupProps {
+    buttonList: ButtonList[];
+    buttonStyle?: generalObject<string>;
+    containerStyle?: generalObject<string>;
+}

src/app/general/types.ts

@@ -22,19 +22,12 @@ export enum TypeOfQuestion {
     INTRO = "intro",
 }
 
-export type currentMsgType = {
-    state: Message[];
-    setState: Dispatch<SetStateAction<Message[]>>;
-};
-
-export type currentQIndexType = {
-    state: number;
-    setState: Dispatch<SetStateAction<number>>;
-};
-
-export type strParamType = {
-    state: boolean;
-    setState: Dispatch<SetStateAction<boolean>>;
+type State<T> = {
+    state: T;
+    setState: Dispatch<SetStateAction<T>>;
 };
 
+export type currentMsgType = State<Message[]>;
+export type currentQIndexType = State<number>;
+export type strParamType = State<boolean>;
 export type strOrNum = string | number;