Merge branch 'AreaAluno/screen-AreaAluno.tsx' into 'dev'

Area aluno/screen area aluno.tsx

See merge request !44

src/App.tsx

@@ -9,6 +9,7 @@ import MenuEspecialista from './screens/MenuEspecialista';
 import MenuProfessor from './screens/MenuProfessor';
 import StudentList from './screens/StudentList';
 import UserList from './screens/UserList';
+import AreaAluno from './screens/AreaAluno';
 
 function App() {
   return (
@@ -28,6 +29,7 @@ function App() {
           <Route path="/cadastrar-aluno" element={<CadastroAluno />} />
           <Route path="/cadastrar-aluno/:id" element={<CadastroAluno />} />
           <Route path="/cadastro-professor" element={<CadastroProfessor />} />
+          <Route path="/area-aluno" element={<AreaAluno />} />
           <Route
             path="/cadastro-especialista"
             element={<CadastroEspecialista />}

src/components/ButtonCard.tsx

@@ -8,6 +8,7 @@ import fontawesome from '../utils/fontawesome';
 const defaultProps = {
   className: 'btn',
   disabled: false,
+  margin: '0em',
   backgroundColor: colors.theme.light_blue,
   text: 'LISTA DE ALUNOS',
   icon: fontawesome.icons.faComments,
@@ -19,6 +20,7 @@ const defaultProps = {
   disableIcon: false,
   iconWidth: 'undefined',
   fontWeight: '900',
+  display: 'flex',
   boxShadow: '0 0 0 0',
   onClick: () => {
     console.log('clicou');
@@ -30,6 +32,7 @@ const defaultProps = {
 
 type ButtonProps = {
   className?: string;
+  margin?: string;
   disabled?: boolean;
   backgroundColor?: string;
   text?: string;
@@ -44,11 +47,13 @@ type ButtonProps = {
   onClick?: () => void;
   disableIcon?: boolean;
   iconWidth?: string;
+  display?: string;
   onChange?: () => void;
 } & typeof defaultProps;
 
 function ButtonCard(props: ButtonProps) {
   const {
+    display,
     className,
     text,
     disabled,
@@ -62,6 +67,7 @@ function ButtonCard(props: ButtonProps) {
     onClick,
     iconWidth,
     disableIcon,
+    margin,
     fontWeight,
     boxShadow,
     onChange,
@@ -69,7 +75,7 @@ function ButtonCard(props: ButtonProps) {
 
   const styles = {
     button: {
-      margin: '0rem',
+      margin,
       backgroundColor,
       color,
       fontSize: textSize,
@@ -80,7 +86,7 @@ function ButtonCard(props: ButtonProps) {
       boxShadow,
       justifyContent: 'center',
       alignItems: 'center',
-      display: 'flex',
+      display,
     },
     icon: {
       marginRight: '1rem',
@@ -100,7 +106,9 @@ function ButtonCard(props: ButtonProps) {
       disabled={disabled}
       onClick={onClick}
     >
-      {!disableIcon && <FontAwesomeIcon icon={icon} style={styles.icon} />}
+      {!disableIcon && (
+        <FontAwesomeIcon icon={icon} style={styles.icon} flip="vertical" />
+      )}
       <span style={styles.text}>{text}</span>
     </button>
   );

src/components/TitleComponent.tsx

@@ -19,7 +19,7 @@ type TitleProps = {
   fontStyle?: string;
   color?: string;
   textSize?: string;
-  textAlign?: 'center';
+  textAlign?: any;
 } & typeof defaultProps;
 
 function TitleComponent(props: TitleProps) {
@@ -38,6 +38,7 @@ function TitleComponent(props: TitleProps) {
       fontWeight: '400',
       textSize: '1em',
       textAlign,
+      color: colors.theme.placeholder,
     },
   };
   return (

src/screens/AreaAluno.tsx

+import { ButtonCard } from '../components';
+import TitleComponent from '../components/TitleComponent';
+import { CardLista, Header } from '../containers';
+
+import fontawesome from '../utils/fontawesome';
+
+function AreaAluno() {
+  return (
+    <div className="container">
+      <Header text="Área do Aluno" disableArrow={false} />
+      <div className="row" style={{ padding: '1em' }}>
+        <div className="col-12" style={{ marginTop: '0.8em' }}>
+          <TitleComponent
+            text="Olá, Ana Julia"
+            textAlign="left"
+            subtitle="Turma 3B"
+          />
+        </div>
+        <div className="col-6">
+          <ButtonCard
+            iconWidth="100%"
+            text="Relatorio"
+            icon={fontawesome.icons.faFilePen}
+            width="8em"
+            height="8em"
+            sizeIcon="4em"
+            display="block"
+          />
+        </div>
+        <div className="col-6">
+          <ButtonCard
+            iconWidth="100%"
+            text="Anotações"
+            icon={fontawesome.icons.faNoteSticky}
+            width="8em"
+            height="8em"
+            sizeIcon="4em"
+            display="block"
+          />
+        </div>
+        <div className="col-12" style={{ marginTop: '0.8em' }}>
+          <TitleComponent text="Dados do aluno" textAlign="left" />
+        </div>
+        <div className="col-12" style={{ marginTop: '0.8em' }}>
+          <ButtonCard
+            icon={fontawesome.icons.faSquarePlus}
+            text="Adicionar Característica"
+            width="100%"
+            sizeIcon="3em"
+          />
+        </div>
+        <div className="col-12" style={{ marginTop: '1.5em' }}>
+          <CardLista />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AreaAluno;