Develop copy to implement accessibility

src/Admin/Components/Components/DataCards/ActivityCard.js

@@ -16,23 +16,27 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import moment from 'moment';
 // Maerial ui components
-import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
 import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
 import Grid from "@material-ui/core/Grid";
 //imports from local files
 import { GetAData } from "../../../Filters";
 import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
 import { Link } from 'react-router-dom'
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
 
 const ActivityCard = () => {
+
+    const { state } = useContext(Store);
+
     const classes = useStyles();
 
     const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -102,39 +106,38 @@ const ActivityCard = () => {
         ];
 
         return (
-            <Card>
+            <StyledCard contrast={state.contrast}>
                 <CardContent>
                     <Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
                         <Grid item>
-                            <Typography className={classes.title} color="inherit" gutterBottom>
+                            <Typography className={classes.title} gutterBottom>
                                 {item.id}
                             </Typography>
                         </Grid>
                         <Grid item>
                             <Link style={{ textDecoration: 'none' }} to={`/admin/activities`}>
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Listar
-                                </Button>
+                                    text="Listar"
+                                />
                             </Link>
                         </Grid>
                     </Grid>
                     <div style={{ height: "1em" }} />
                     {DATA.map((info, index) => (
                         <div className={classes.displayColumn} key={index}>
-                            <Typography color="initial" className={classes.subTitle}>
+                            <Typography className={classes.subTitle}>
                                 {info.subTitle}
                             </Typography>
-                            <Typography color="textSecondary">
+                            <Typography>
                                 {info.prop === null ? "Sem dados" : info.prop}
                             </Typography>
                         </div>
                     ))}
                 </CardContent>
-            </Card>
+            </StyledCard>
         );
     }
 };