From 0583c0a2e8163756fba7910c9fe799d52f2b9dbc Mon Sep 17 00:00:00 2001 From: TI JONNY Date: Wed, 27 Mar 2024 17:07:12 -0300 Subject: [PATCH] design sistem --- src/Assets/images/personUser.svg | 8 +++++++ src/Assets/images/pessoasgray.svg | 5 ++++ src/Assets/images/school_teacher.svg | 6 +++++ src/Assets/images/turma.svg | 4 ++++ src/Assets/images/turmasPessoas.svg | 5 ++++ src/Components/Card/CardClassroom/index.tsx | 20 +++++++++++----- src/Components/Card/CardClassroom/style.tsx | 3 ++- src/Components/Card/CardMeeting/index.tsx | 12 ++++------ src/Components/Card/CardMeeting/style.tsx | 8 +++---- src/Components/Empty/index.tsx | 12 ++++++++++ src/Components/Menu/Item/index.tsx | 9 +++---- src/Components/Menu/index.tsx | 22 +++++++---------- .../ClassroomOne/CardItensClassroom/index.tsx | 24 ++++++++++--------- .../ClassroomOne/MeetingList/index.tsx | 5 ++-- src/Pages/Classroom/ClassroomOne/index.tsx | 11 +++++---- src/Pages/Classroom/ListClassroom/index.tsx | 7 +++--- src/Pages/Login/Login.tsx | 6 ----- src/Styles/colors.js | 2 +- 18 files changed, 106 insertions(+), 63 deletions(-) create mode 100644 src/Assets/images/personUser.svg create mode 100644 src/Assets/images/pessoasgray.svg create mode 100644 src/Assets/images/school_teacher.svg create mode 100644 src/Assets/images/turma.svg create mode 100644 src/Assets/images/turmasPessoas.svg create mode 100644 src/Components/Empty/index.tsx diff --git a/src/Assets/images/personUser.svg b/src/Assets/images/personUser.svg new file mode 100644 index 0000000..8279031 --- /dev/null +++ b/src/Assets/images/personUser.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/Assets/images/pessoasgray.svg b/src/Assets/images/pessoasgray.svg new file mode 100644 index 0000000..eb1128a --- /dev/null +++ b/src/Assets/images/pessoasgray.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Assets/images/school_teacher.svg b/src/Assets/images/school_teacher.svg new file mode 100644 index 0000000..7ff1349 --- /dev/null +++ b/src/Assets/images/school_teacher.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/Assets/images/turma.svg b/src/Assets/images/turma.svg new file mode 100644 index 0000000..ad34031 --- /dev/null +++ b/src/Assets/images/turma.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/Assets/images/turmasPessoas.svg b/src/Assets/images/turmasPessoas.svg new file mode 100644 index 0000000..d4bafcd --- /dev/null +++ b/src/Assets/images/turmasPessoas.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Components/Card/CardClassroom/index.tsx b/src/Components/Card/CardClassroom/index.tsx index f4eee3e..a9466da 100644 --- a/src/Components/Card/CardClassroom/index.tsx +++ b/src/Components/Card/CardClassroom/index.tsx @@ -6,6 +6,8 @@ import { ConfirmDialog } from "primereact/confirmdialog"; import { useContext, useState } from "react"; import { ClassroomContext } from "../../../Context/Classroom/context"; import { ClassroomTypes } from "../../../Context/Classroom/type"; +import IconClassroom from "./../../../Assets/images/turma.svg"; + const CardClassroom = ({ title, @@ -25,7 +27,9 @@ const CardClassroom = ({ <> history(`/turma/${id}`)}> -

{title}

+ +
{year}
+
{ @@ -37,11 +41,15 @@ const CardClassroom = ({
- -
Turma
- -
{year}
- + +
+ +
+ + +

{title}

+ + { const history = useNavigate(); - const {id} = useParams() + const { id } = useParams() return ( history(`/turma/${id}/encontros/${idMeeting}`)}> @@ -21,18 +21,16 @@ const CardMeeting = ({ title, data, status, idMeeting }: { title: string; data: -
Encontro
-
- {formatarData(new Date(data))} + +

Data:

{formatarData(new Date(data))} +
-
Status
- - {status === Status.PENDING ? : status === Status.APPROVED ? : status === Status.REPROVED ? :null} + {status === Status.PENDING ? : status === Status.APPROVED ? : status === Status.REPROVED ? : null} diff --git a/src/Components/Card/CardMeeting/style.tsx b/src/Components/Card/CardMeeting/style.tsx index d7ca4f1..3150534 100644 --- a/src/Components/Card/CardMeeting/style.tsx +++ b/src/Components/Card/CardMeeting/style.tsx @@ -14,13 +14,11 @@ export const Container = styled.div` } .boxYear { border-radius: 25px; - background-color: ${styles.colors.colorsBaseProductNormal}; - width: 102px; - height: 32px; + height: 100%; justify-content: center; align-items: center; text-align: center; - color: white; - padding: 9px, 16px, 9px, 16px; + font-weight: 600; + color: ${styles.colors.colorsBaseInkLighterActive}; } `; diff --git a/src/Components/Empty/index.tsx b/src/Components/Empty/index.tsx new file mode 100644 index 0000000..6672c28 --- /dev/null +++ b/src/Components/Empty/index.tsx @@ -0,0 +1,12 @@ +import Icon from "../Icon"; + +const Empty = ({title}: {title: string}) => { + return( +
+ + Sem {title} +
+ ) +} + +export default Empty; \ No newline at end of file diff --git a/src/Components/Menu/Item/index.tsx b/src/Components/Menu/Item/index.tsx index 44796cd..f54dba0 100644 --- a/src/Components/Menu/Item/index.tsx +++ b/src/Components/Menu/Item/index.tsx @@ -1,7 +1,6 @@ -import { useNavigate, } from "react-router-dom" -import { Container, Text } from "./style"; +import { useNavigate, } from "react-router-dom"; import { Column, Padding, Row } from "../../../Styles/styles"; -import Icon from "../../Icon"; +import { Container, Text } from "./style"; interface Propsitem { icon: string, @@ -26,7 +25,9 @@ const Item = ({ icon, path, text, active, funcActiv }: Propsitem) => { - +
+ +
diff --git a/src/Components/Menu/index.tsx b/src/Components/Menu/index.tsx index 9a7af84..2732c74 100644 --- a/src/Components/Menu/index.tsx +++ b/src/Components/Menu/index.tsx @@ -3,6 +3,8 @@ import { useContext, useEffect, useState } from "react"; import { Button } from "primereact/button"; import { Dialog } from "primereact/dialog"; import TagLogin from "../../Assets/images/logo.svg"; +import { AplicationContext } from "../../Context/Aplication/context"; +import { ROLE } from "../../Controller/controllerGlobal"; import { getMenuItem, getYear, @@ -11,13 +13,14 @@ import { } from "../../Services/localstorage"; import styles from "../../Styles"; import { Column, Padding, Row } from "../../Styles/styles"; +import { PropsAplicationContext } from "../../Types/types"; import DropdownComponent from "../Dropdown"; import Icon from "../Icon"; import Item from "./Item"; -import { Container, TopBar } from "./style"; -import { AplicationContext } from "../../Context/Aplication/context"; -import { PropsAplicationContext } from "../../Types/types"; -import { ROLE } from "../../Controller/controllerGlobal"; +import { Container } from "./style"; +import turmas from "../../Assets/images/turmasPessoas.svg" + +import user from "../../Assets/images/personUser.svg" const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => { const [active, setActive] = useState(parseInt(getMenuItem()!)); @@ -25,12 +28,6 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => { const props = useContext(AplicationContext) as PropsAplicationContext return ( - - - - - - @@ -71,7 +68,7 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => { }} active={active === 1 ? true : false} path={"/turma"} - icon={"pi pi-sitemap"} + icon={turmas} /> {/* { }} active={active === 2 ? true : false} path={"/users"} - icon={"pi pi-users"} + icon={user} /> : null} - ) : null} { +const CardItensClassrooom = ({ icon, title, description, count, }: { icon: string, title: string, description: string, count?: number }) => { return (
- +
+ +
- + - -

{title}

- -

{description}

- - -

{count}

- + +

{title}

+ +

{description}

+ + +

{count}

+
diff --git a/src/Pages/Classroom/ClassroomOne/MeetingList/index.tsx b/src/Pages/Classroom/ClassroomOne/MeetingList/index.tsx index a56af66..6ef2069 100644 --- a/src/Pages/Classroom/ClassroomOne/MeetingList/index.tsx +++ b/src/Pages/Classroom/ClassroomOne/MeetingList/index.tsx @@ -8,6 +8,7 @@ import MeetingListProvider, { import { useContext } from "react"; import { MeetingListTypes } from "../../../../Context/Classroom/Meeting/MeetingList/type"; import { useFetchRequestClassroomOne } from "../../../../Services/Classroom/query"; +import Empty from "../../../../Components/Empty"; const MeetingList = () => { return ( @@ -35,7 +36,7 @@ const MeetingListPage = () => { onClick={() => history(`/turma/${id}/encontros/criar`)} /> -
+ {props.meetings?.length ?
{props.meetings?.map((item, index) => { return (
@@ -48,7 +49,7 @@ const MeetingListPage = () => {
); })} -
+
: } ); }; diff --git a/src/Pages/Classroom/ClassroomOne/index.tsx b/src/Pages/Classroom/ClassroomOne/index.tsx index 0644b52..fb5eae9 100644 --- a/src/Pages/Classroom/ClassroomOne/index.tsx +++ b/src/Pages/Classroom/ClassroomOne/index.tsx @@ -3,6 +3,9 @@ import { Button } from "primereact/button"; import { useContext, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import TextInput from "../../../Components/TextInput"; +import pessoas from "../../../Assets/images/pessoasgray.svg" +import meeting from "../../../Assets/images/school_teacher.svg" + import ClassroomProvider, { ClassroomContext, } from "../../../Context/Classroom/context"; @@ -89,8 +92,8 @@ const ClassroomOnePage = () => { > @@ -100,8 +103,8 @@ const ClassroomOnePage = () => { > diff --git a/src/Pages/Classroom/ListClassroom/index.tsx b/src/Pages/Classroom/ListClassroom/index.tsx index 066f445..529612b 100644 --- a/src/Pages/Classroom/ListClassroom/index.tsx +++ b/src/Pages/Classroom/ListClassroom/index.tsx @@ -10,6 +10,7 @@ import { ClassroomTypes } from "../../../Context/Classroom/type"; import { AplicationContext } from "../../../Context/Aplication/context"; import { PropsAplicationContext } from "../../../Types/types"; import { ROLE } from "../../../Controller/controllerGlobal"; +import Empty from "../../../Components/Empty"; const ListClassroom = () => { return ( @@ -31,7 +32,7 @@ const ListClassroomPage = () => { {(propsAplication.user?.role === ROLE.ADMIN || propsAplication.user?.role === ROLE.COORDINATORS) && ( - +