Add color to classes

src/components/ClassCard.js

@@ -8,18 +8,19 @@ import {
   Stack,
 } from '@mui/material';
 
-function ClassCard({ abbreviation, title, teachers }) {
+function ClassCard({ abbreviation, title, color, teachers }) {
   return (
     <Card sx={{ width: 420 }}>
       <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
         <Container
           sx={{
-            backgroundColor: 'tomato',
+            backgroundColor: color,
             width: '140px',
             height: '145px',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            color: 'white',
           }}
         >
           <h1>{abbreviation}</h1>

src/context/user.js

@@ -11,6 +11,7 @@ const getClassrooms = userId =>
         {
           name: 'Introdução à Ciência de Dados',
           abbreviation: 'ICD',
+          color: '#006FF2',
           teachers: [
             {
               name: 'Carlos Alexandre Silva',
@@ -22,6 +23,7 @@ const getClassrooms = userId =>
         {
           name: 'Gestão de Projetos',
           abbreviation: 'GP',
+          color: '#7900F2',
           teachers: [
             {
               name: 'Míriam Lúcia Barbosa',
@@ -32,6 +34,7 @@ const getClassrooms = userId =>
         {
           name: 'Banco de Dados II',
           abbreviation: 'BDII',
+          color: '#FF7A00',
           teachers: [
             {
               name: 'Cristiane Norbiato Targa',
@@ -43,6 +46,7 @@ const getClassrooms = userId =>
         {
           name: 'Contabilidade Básica',
           abbreviation: 'CB',
+          color: '#BB0000',
           teachers: [
             {
               name: 'Alexandre Couto Cardoso',
@@ -53,6 +57,7 @@ const getClassrooms = userId =>
         {
           name: 'Linguagens de Programação',
           abbreviation: 'LP',
+          color: '#039200',
           teachers: [
             {
               name: 'Gabriel Felipe Cândido Novy',

src/screens/Home/index.js

@@ -38,6 +38,7 @@ function Home() {
                 key={classroom.name}
                 abbreviation={classroom.abbreviation}
                 title={classroom.name}
+                color={classroom.color}
                 teachers={classroom.teachers}
               />
             ))
@@ -67,6 +68,7 @@ function Home() {
                 key={classroom.name}
                 abbreviation={classroom.abbreviation}
                 title={classroom.name}
+                color={classroom.color}
                 teachers={classroom.teachers}
               />
             ))