design sistem

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 = ({
     <>
       <Container className="card" onClick={() => history(`/turma/${id}`)}>
         <Row id="space-between">
-          <h3>{title}</h3>
+          <Column>
+            <div className={"boxYear"}><Column style={{height: "100%"}} id="center">{year}</Column></div>
+          </Column>
           <div
             className="cursor-pointer"
             onClick={(e) => {
@@ -37,11 +41,15 @@ const CardClassroom = ({
           </div>
         </Row>
         <Padding padding="8px" />
-        <Column>
-          <div className={"boxDescriptionScheduleSubtitle"}>Turma</div>
-          <Padding />
-          <div className={"boxYear"}>{year}</div>
-        </Column>
+        <Row>
+          <div className={`boxQuantity`}>
+            <img src={IconClassroom} alt="" style={{ height: 40 }} />
+          </div>
+          <Padding padding="8px" />
+          <Column id="center">
+            <h3>{title}</h3>
+          </Column>
+        </Row>
       </Container>
       <ConfirmDialog
         visible={visible}

src/Components/Card/CardClassroom/style.tsx

@@ -14,8 +14,9 @@ export const Container = styled.div`
   }
   .boxYear {
     border-radius: 25px;
-    background-color: ${styles.colors.colorsBaseProductLightActive};
+    background-color: ${styles.colors.green};
     width: 64px;
+    height: 24px;
     text-align: center;
     color: white;
     padding: 9px, 16px, 9px, 16px;

src/Components/Card/CardMeeting/index.tsx

@@ -8,7 +8,7 @@ import { Message } from "primereact/message";
 const CardMeeting = ({ title, data, status, idMeeting }: { title: string; data: string, status: string, idMeeting: number }) => {
   const history = useNavigate();
 
-  const {id} = useParams()
+  const { id } = useParams()
 
   return (
     <Container className="card" onClick={() => history(`/turma/${id}/encontros/${idMeeting}`)}>
@@ -21,18 +21,16 @@ const CardMeeting = ({ title, data, status, idMeeting }: { title: string; data:
       <Padding padding="8px" />
       <Row id="space-between">
         <Column>
-          <div className={"boxDescriptionScheduleSubtitle"}>Encontro</div>
-          <Padding />
           <div className={"boxYear"}>
             <Column id="center" style={{ height: "100%" }}>
-              {formatarData(new Date(data))}
+              <Row>
+               <p>Data: </p><Padding /> {formatarData(new Date(data))}
+              </Row>
             </Column>
           </div>
         </Column>
         <Column>
-          <div className={"boxDescriptionScheduleSubtitle"}>Status</div>
-          <Padding />
-          {status === Status.PENDING ? <Message severity="warn" text="Pendente" /> : status === Status.APPROVED ? <Message severity="success" text="Aprovado" /> : status === Status.REPROVED ? <Message severity="error" text="Recusado" /> :null}
+          {status === Status.PENDING ? <Message severity="warn" text="Pendente" /> : status === Status.APPROVED ? <Message severity="success" text="Aprovado" /> : status === Status.REPROVED ? <Message severity="error" text="Recusado" /> : null}
         </Column>
       </Row>
     </Container>

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};
   }
 `;

src/Components/Empty/index.tsx

@@ -0,0 +1,12 @@
+import Icon from "../Icon";
+
+const Empty = ({title}: {title: string}) => {
+    return(
+        <div className="card w- md:w-full">
+            <Icon icon="pi pi-warning" />
+            Sem {title}
+        </div>
+    )
+}
+
+export default Empty;

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) => {
                 <Padding />
                 <Text active={active}>
                     <Column id="center">
-                        <Icon size="1.2rem" icon={icon} />
+                        <div className={`boxQuantity`}>
+                            <img src={icon} alt="" style={{ height: 30 }} />
+                        </div>
                     </Column>
                     <Padding />
                     <Column id="center">

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,26 +13,21 @@ 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()!));
   const [visibleModal, setVisibleModal] = useState(false);
   const props = useContext(AplicationContext) as PropsAplicationContext
   return (
     <Container active={viewdMenu}>
-      <Row>
-        <TopBar style={{ backgroundColor: "#667DF4" }} />
-        <TopBar style={{ backgroundColor: "#F45A5A" }} />
-        <TopBar style={{ backgroundColor: "#66D654" }} />
-        <TopBar style={{ backgroundColor: "#EADA48" }} />
-      </Row>
       <Padding padding="16px">
         <Row id="center">
           <img src={TagLogin} style={{ width: "128px" }} alt=""></img>
@@ -71,7 +68,7 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => {
             }}
             active={active === 1 ? true : false}
             path={"/turma"}
-            icon={"pi pi-sitemap"}
+            icon={turmas}
           />
           {/* <Padding />
           <Item
@@ -93,10 +90,9 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => {
             }}
             active={active === 2 ? true : false}
             path={"/users"}
-            icon={"pi pi-users"}
+            icon={user}
           /> : null}
         </Padding>
-
       ) : null}
       <ModalYear
         visible={visibleModal}