diff --git a/client/src/Assets/circle-check-animation.json b/client/src/Assets/circle-check-animation.json new file mode 100644 index 0000000..c0e1231 --- /dev/null +++ b/client/src/Assets/circle-check-animation.json @@ -0,0 +1,353 @@ +{ + "v": "5.1.16", + "fr": 25, + "ip": 0, + "op": 50, + "w": 400, + "h": 400, + "nm": "check", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Shape Layer 3", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 0, + "k": [198.6666666666667, 196.66666666666674, 0], + "ix": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, + "s": { + "a": 0, + "k": [32.366666666666674, 32.366666666666674, 100], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [465.703, 465.703], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0, 0.6392156862745098, 0.5764705882352941, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 43, "ix": 5 }, + "lc": 2, + "lj": 2, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-7, 11], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [99.105, 99.105], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "tm", + "s": { "a": 0, "k": 0, "ix": 1 }, + "e": { + "a": 1, + "k": [ + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "n": ["0p667_1_0p333_0"], + "t": 26, + "s": [0], + "e": [83] + }, + { "t": 36 } + ], + "ix": 2 + }, + "o": { "a": 0, "k": 85, "ix": 3 }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + } + ], + "ip": 0, + "op": 50, + "st": 13, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 0, + "k": [198.6666666666667, 196.33333333333337, 0], + "ix": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "n": ["0p667_1_0p333_0", "0p667_1_0p333_0", "0p667_1_0p333_0"], + "t": 14, + "s": [32.366666666666674, 32.366666666666674, 100], + "e": [30.00000000000001, 30.00000000000001, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "n": ["0p667_1_0p333_0", "0p667_1_0p333_0", "0p667_1_0p333_0"], + "t": 17, + "s": [30.00000000000001, 30.00000000000001, 100], + "e": [32.366666666666674, 32.366666666666674, 100] + }, + { "t": 20 } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [465.703, 465.703], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.925490196078, 0.925490196078, 0.925490196078, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 43, "ix": 5 }, + "lc": 2, + "lj": 2, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-7, 11], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [99.105, 99.105], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "tm", + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "n": ["0p667_1_0p333_0"], + "t": 17, + "s": [0], + "e": [100] + }, + { "t": 27 } + ], + "ix": 1 + }, + "e": { "a": 0, "k": 100, "ix": 2 }, + "o": { "a": 0, "k": 85, "ix": 3 }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + } + ], + "ip": 0, + "op": 50, + "st": 13, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "Shape Layer 4", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 0, + "k": [200.00000000000006, 200.00000000000006, 0], + "ix": 2 + }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, + "s": { + "a": 0, + "k": [33.33333333333334, 33.33333333333334, 100], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-93.5, -37], + [-11.5, 45], + [250.5, -216.5] + ], + "c": false + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0, 0.6392156862745098, 0.5764705882352941, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 43, "ix": 5 }, + "lc": 2, + "lj": 2, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Shape 1", + "np": 3, + "cix": 2, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + }, + { + "ty": "tm", + "s": { "a": 0, "k": 0, "ix": 1 }, + "e": { + "a": 1, + "k": [ + { + "i": { "x": [0.667], "y": [1] }, + "o": { "x": [0.333], "y": [0] }, + "n": ["0p667_1_0p333_0"], + "t": 29, + "s": [0], + "e": [100] + }, + { "t": 36 } + ], + "ix": 2 + }, + "o": { "a": 0, "k": 0, "ix": 3 }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim", + "hd": false + } + ], + "ip": 0, + "op": 50, + "st": 0, + "bm": 0 + } + ], + "markers": [] +} diff --git a/client/src/Assets/circle-cross.svg b/client/src/Assets/circle-cross.svg new file mode 100644 index 0000000..0e8ed15 --- /dev/null +++ b/client/src/Assets/circle-cross.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/client/src/Assets/circle-empty.svg b/client/src/Assets/circle-empty.svg new file mode 100644 index 0000000..f580a1e --- /dev/null +++ b/client/src/Assets/circle-empty.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/client/src/Assets/solo-check.svg b/client/src/Assets/solo-check.svg new file mode 100644 index 0000000..f4303ca --- /dev/null +++ b/client/src/Assets/solo-check.svg @@ -0,0 +1,12 @@ + + + + + + + diff --git a/client/src/Assets/solo-cross.svg b/client/src/Assets/solo-cross.svg new file mode 100644 index 0000000..0e6d672 --- /dev/null +++ b/client/src/Assets/solo-cross.svg @@ -0,0 +1,12 @@ + + + + + + + diff --git a/client/src/Components/ClassView/CheckboxListSession.tsx b/client/src/Components/ClassView/CheckboxListSession.tsx index 40aeebc..2a404f4 100644 --- a/client/src/Components/ClassView/CheckboxListSession.tsx +++ b/client/src/Components/ClassView/CheckboxListSession.tsx @@ -1,9 +1,10 @@ import React, { useEffect } from 'react'; -import { ReactComponent as CheckBoxEmpty } from '../../Assets/chekcbox-empty.svg'; -import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg'; +import { ReactComponent as CircleEmpty } from '../../Assets/circle-empty.svg'; import { useSessionAttendanceQuery } from '../../generated/graphql'; import socketIOClient from 'socket.io-client'; import User from '../../Types/user'; +import Lottie from 'react-lottie'; +import checkAnimation from '../../Assets/circle-check-animation.json'; const ENDPOINT = 'http://localhost:4000'; interface Props { @@ -11,6 +12,13 @@ interface Props { sessionId: number; } +const checkAnimOptions = { + loop: false, + autoplay: true, + animationData: checkAnimation, + rendererSettings: {}, +}; + const CheckboxListSession: React.FC = ({ studentList, sessionId }) => { const [{ fetching, data, error }, refetchAttendance] = useSessionAttendanceQuery({ @@ -36,9 +44,29 @@ const CheckboxListSession: React.FC = ({ studentList, sessionId }) => { (attendee) => attendee?.email === student.email ) ) { - return ; + return ( +
+ +
+ ); } - return ; + return ( +
+ +
+ ); })} ); diff --git a/client/src/Components/ClassView/ClassView.tsx b/client/src/Components/ClassView/ClassView.tsx index 6fd1763..d70e858 100644 --- a/client/src/Components/ClassView/ClassView.tsx +++ b/client/src/Components/ClassView/ClassView.tsx @@ -11,7 +11,8 @@ const headerStyle = 'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl'; const attendanceStyle = 'flex justify-center bg-black py-4 rounded-sm text-lg w-1/3 text-white mb-4 h-16'; -const listHeader = 'w-1/2 bg-green p-2 text-white text-lg rounded-t-sm h-16'; +const listHeader = + 'flex items-center w-1/2 bg-green p-2 px-6 text-white text-lg rounded-t-sm h-16'; const ClassView: React.FC = () => { const dispatch = useDispatch(); @@ -31,31 +32,31 @@ const ClassView: React.FC = () => { if (course && courseId) { return ( -
+
-

{course.name.toUpperCase()}

- +

{course.name.toUpperCase()}

+
-
-
+
+
-

+

Students{' '} {history && `assigned to this course: ${students.length}`}

dispatch(setHistory(history))} > {history ? 'Back to dashboard' : 'Attendance history'}

-

History

+

History

{history ? : } diff --git a/client/src/Components/ClassView/SessionBtn.tsx b/client/src/Components/ClassView/SessionBtn.tsx index 5d70331..74a3feb 100644 --- a/client/src/Components/ClassView/SessionBtn.tsx +++ b/client/src/Components/ClassView/SessionBtn.tsx @@ -64,9 +64,15 @@ const SessionBtn: React.FC<{ courseId: number }> = ({ courseId }) => { return (
-
); diff --git a/client/src/Components/ClassView/StudentElement.tsx b/client/src/Components/ClassView/StudentElement.tsx index af63053..beffe72 100644 --- a/client/src/Components/ClassView/StudentElement.tsx +++ b/client/src/Components/ClassView/StudentElement.tsx @@ -7,8 +7,10 @@ interface Props { const StudentElement: React.FC = ({ name, lastname }) => { return ( -
-

{lastname} {name}

+
+

+ {lastname} {name} +

); }; diff --git a/client/src/Components/ClassView/StudentsList.tsx b/client/src/Components/ClassView/StudentsList.tsx index 6c1f3e4..b782a30 100644 --- a/client/src/Components/ClassView/StudentsList.tsx +++ b/client/src/Components/ClassView/StudentsList.tsx @@ -10,7 +10,7 @@ import CheckboxListHistory from '../Calendar/CheckboxListHistory'; import StudentElementHistory from './StudentElementHistory'; const ENDPOINT = 'http://localhost:4000'; -const listStyle = 'flex flex-col justify-start items-start shadow-bottom'; +const listStyle = 'flex flex-col justify-start items-start px-8 shadow-bottom'; const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => { const studentsState = useSelector( @@ -39,15 +39,16 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => { socket.on('ASSIGNMENT_CHANGE', () => refetchAssigned()); }, []); - if (fetching) { }; + if (fetching) { + } if (error) return

Oops something went wrong try again

; return (
{students?.length ? ( -
-
+
+
{students.map((student) => { return (
diff --git a/client/src/Components/Startpage/Welcome/Login.tsx b/client/src/Components/Startpage/Welcome/Login.tsx index b872c32..7c9aeff 100644 --- a/client/src/Components/Startpage/Welcome/Login.tsx +++ b/client/src/Components/Startpage/Welcome/Login.tsx @@ -10,119 +10,121 @@ import { useLoginMutation } from '../../../generated/graphql'; import { setUser } from '../../../store/actions'; const initUser = { - email: '', - password: '', + email: '', + password: '', }; const outerBox = - 'bg-white flex flex-row rounded-sm w-1/2 md:w-10/12 md:h-4/6 lg:w-9/12 h-80 items-center shadow-lg m-auto'; + 'bg-white flex flex-row rounded-sm w-full h-1/2 md:w-10/12 md:h-4/6 lg:w-9/12 items-center shadow-lg m-auto'; const loginStyle = - 'bg-green flex rounded-sm w-full h-full md:w-1/2 flex-col justify-center items-center p-2'; + 'bg-green flex rounded-sm w-full h-full md:w-1/2 flex-col justify-center items-center p-2'; const inputStyle = - 'text-white w-full border-b-2 border-b-white bg-green my-4 placeholder-green-light lg:text-xl'; + 'text-white w-full border-b-2 border-b-white bg-green my-4 placeholder-green-light lg:text-xl'; const signupLink = 'text-white bg-green p-2'; const loginBtn = - 'text-green my-4 bg-white py-1 flex justify-center w-full lg:text-xl hover:bg-green-xlight'; + 'text-green my-4 bg-white py-1 flex justify-center w-full lg:text-xl hover:bg-green-xlight'; const linkStyle = 'flex text-white justify-center hover:underline'; const lottieStyle = 'md:w-1/2 w-0 invisible md:visible'; const errorStyle = 'w-1/2 xl:w-4/12 flex bg-white h-14 m-auto my-8 text-red'; -const logoStyle = 'm-auto h-1/6 w-1/4 lg:h-1/6 lg:w-1/5 xl:h-1/6 xl:w-1/6 mt-8'; +const logoStyle = 'm-auto w-1/2 lg:h-1/6 lg:w-1/5 xl:h-1/6 xl:w-1/6 mt-8'; const Login: React.FC = () => { - const [userInfo, setUserInfo] = useState(initUser); - const [errorMsg, setErrorMsg] = useState(''); - const [, login] = useLoginMutation(); - const dispatch = useDispatch(); - const navigate = useNavigate(); + const [userInfo, setUserInfo] = useState(initUser); + const [errorMsg, setErrorMsg] = useState(''); + const [, login] = useLoginMutation(); + const dispatch = useDispatch(); + const navigate = useNavigate(); - const defaultOptions = { - loop: true, - autoplay: true, - animationData: animationData, - rendererSettings: {}, - }; + const defaultOptions = { + loop: true, + autoplay: true, + animationData: animationData, + rendererSettings: {}, + }; - const userChange = (e: React.ChangeEvent): void => { - const { name, value } = e.target; - setUserInfo((prevState) => ({ - ...prevState, - [name]: value, - })); - }; + const userChange = (e: React.ChangeEvent): void => { + const { name, value } = e.target; + setUserInfo((prevState) => ({ + ...prevState, + [name]: value, + })); + }; - const handleSubmit = async (e: React.SyntheticEvent) => { - e.preventDefault(); - const response = await login({ credentials: userInfo }); - const queryResult = response.data?.loginUser; - if (queryResult?.data) { - dispatch(setUser(queryResult.data)); - if (queryResult?.data?.role === 'TEACHER') navigate('/homepage'); - else if (queryResult?.data?.role === 'STUDENT') navigate('/student'); - setUserInfo(initUser); - } else if (queryResult?.error) { - setErrorMsg('Please enter valid inputs.'); - navigate('/login'); - } - }; + const handleSubmit = async (e: React.SyntheticEvent) => { + e.preventDefault(); + const response = await login({ credentials: userInfo }); + const queryResult = response.data?.loginUser; + if (queryResult?.data) { + dispatch(setUser(queryResult.data)); + if (queryResult?.data?.role === 'TEACHER') navigate('/homepage'); + else if (queryResult?.data?.role === 'STUDENT') navigate('/student'); + setUserInfo(initUser); + } else if (queryResult?.error) { + setErrorMsg('Please enter valid inputs.'); + navigate('/login'); + } + }; - const validateForm = () => { - return !userInfo.email || !userInfo.password; - }; + const validateForm = () => { + return !userInfo.email || !userInfo.password; + }; - return ( -
- -
- -
-
- -
-
-
-

- Welcome back. -

-
- -
-
- -
- -
-
-

Don't have an account?

- - {' '} - Sign up here. - -
-
+ return ( +
+ +
+ +
+ +
+
+ +
+
+
+

+ Welcome back. +

+
+
-
-
{errorMsg}
-
+
+ +
+ +
+
+

Don't have an account?

+ + {' '} + Sign up here. + +
- ); +
+
+
{errorMsg}
+
+
+ ); }; export default Login; diff --git a/client/src/Components/Startpage/Welcome/Register.tsx b/client/src/Components/Startpage/Welcome/Register.tsx index 1e7b341..c393a38 100644 --- a/client/src/Components/Startpage/Welcome/Register.tsx +++ b/client/src/Components/Startpage/Welcome/Register.tsx @@ -7,7 +7,6 @@ import { useNavigate } from 'react-router'; import Lottie from 'react-lottie'; import animationData from '../Assets/welcome.json'; - const initUser = { name: '', lastname: '', @@ -16,12 +15,17 @@ const initUser = { role: '', }; -const registerStyle = "bg-green flex rounded-sm xl:w-4/12 w-1/2 m-auto flex-col justify-center items-center shadow-lg"; -const inputStyle = "text-white w-full border-b-2 border-b-white bg-green my-2 py-2 placeholder-green-light"; -const continueBtn = "text-green my-2 bg-white p-2 flex justify-center my-4 hover:bg-green-xlight"; -const selector = "text-green w-full bg-white p-2.5 my-4 flex hover:bg-green-xlight"; -const lottieStyle = "invisible md:visible h-24 md:h-full"; -const errorStyle = "w-1/2 xl:w-4/12 flex bg-white h-14 m-auto my-4 sm:my-8 text-red"; +const registerStyle = + 'bg-green flex flex-col justify-around items-center rounded-sm w-full h-70vh xl:w-4/12 shadow-lg'; +const inputStyle = + 'text-white w-full border-b-2 border-b-white bg-green my-2 py-2 placeholder-green-light'; +const continueBtn = + 'text-green my-2 bg-white p-2 flex justify-center my-4 hover:bg-green-xlight'; +const selector = + 'text-green w-full bg-white p-2.5 my-4 flex hover:bg-green-xlight'; +const lottieStyle = 'invisible md:visible h-24 md:h-full'; +const errorStyle = + 'w-1/2 xl:w-4/12 flex bg-white h-14 m-auto my-4 sm:my-8 text-red'; const Register: React.FC = () => { const [userInfo, setUserInfo] = useState(initUser); @@ -34,13 +38,11 @@ const Register: React.FC = () => { loop: true, autoplay: true, animationData: animationData, - rendererSettings: {} + rendererSettings: {}, }; const validateForm = () => { - return ( - !userInfo.role - ) + return !userInfo.role; }; const userChange = ( @@ -62,23 +64,19 @@ const Register: React.FC = () => { if (queryResult?.data?.role === 'TEACHER') navigate('/homepage'); else if (queryResult?.data?.role === 'STUDENT') navigate('/student'); setUserInfo(initUser); - } - else if (!queryResult?.error) { + } else if (!queryResult?.error) { setErrorMsg('Please enter valid inputs.'); - navigate('/register') + navigate('/register'); } }; return ( -
+
- +
-

Register

+

Register

{
-
{errorMsg}
+
{errorMsg}
); diff --git a/client/src/Components/TeacherDashboard/Course.tsx b/client/src/Components/TeacherDashboard/Course.tsx index 6c11efd..df809f3 100644 --- a/client/src/Components/TeacherDashboard/Course.tsx +++ b/client/src/Components/TeacherDashboard/Course.tsx @@ -20,7 +20,7 @@ const Course: React.FC<{ course: CourseType }> = ({ course }) => { return (

{course.name}

-
+
); }; diff --git a/client/src/Components/TeacherDashboard/Sidemenu.tsx b/client/src/Components/TeacherDashboard/Sidemenu.tsx index 0bfd584..5a14c87 100644 --- a/client/src/Components/TeacherDashboard/Sidemenu.tsx +++ b/client/src/Components/TeacherDashboard/Sidemenu.tsx @@ -5,7 +5,7 @@ import { setSelected } from '../../store/actions'; import CourseList from './CourseList'; const sidemenuStyle = - 'bg-green flex flex-col justify-start items-center w-1/4 h-screen shadow-2xl overflow-hidden overflow-scroll'; + 'bg-green flex flex-col justify-start items-center w-1/4 shadow-2xl overflow-scroll overflow-x-hidden'; const btnStyle = 'bg-white hover:bg-green-xlight p-3 rounded-sm my-4 w-3/5 text-center'; const btnTextStyle = 'text-green font-bold text-sm'; @@ -23,10 +23,10 @@ const Sidemenu: React.FC = () => {