style: Se agregan estilos para cards totales

taller2fiuba · Jul 25, 2020 · 4df9e46 · 4df9e46
1 parent b43363d
commit 4df9e46
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 25 deletions.
diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/src/assets/comentarios.png b/src/assets/comentarios.png
diff --git a/src/assets/reacciones.png b/src/assets/reacciones.png
diff --git a/src/assets/usuarios.webp b/src/assets/usuarios.webp
diff --git a/src/assets/videos.png b/src/assets/videos.png
diff --git a/src/components/MediaCard.jsx b/src/components/MediaCard.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import CardMedia from "@material-ui/core/CardMedia";
+import Icon from "@material-ui/core/Icon";
 import PropTypes from "prop-types";
 import Typography from "@material-ui/core/Typography";
 
@@ -19,12 +19,31 @@ const useStyles = makeStyles(() => ({
   content: {
     flex: "1 0 auto",
   },
+  icon: {
+    flex: "1 0 auto",
+    marginTop: "10%",
+  },
   cover: {
-    width: 151,
+    width: 120,
+    height: 80,
   },
 }));
 
-const MediaCard = ({ titulo, obtenerTotal, imagen, colorFondo }) => {
+const WhiteTextTypography = withStyles({
+  root: {
+    color: "#FFFFFF",
+  },
+})(Typography);
+
+const SubtitleTypography = withStyles({
+  root: {
+    color: "#000000",
+    border: "solid",
+    backgroundColor: "#faec91",
+  },
+})(Typography);
+
+const MediaCard = ({ titulo, obtenerTotal, icono, colorFondo, colorIcono }) => {
   const classes = useStyles();
   const [subtitulo, setSubtitulo] = useState(null);
 
@@ -46,28 +65,34 @@ const MediaCard = ({ titulo, obtenerTotal, imagen, colorFondo }) => {
     <Card className={classes.root} style={{ backgroundColor: colorFondo }}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
-          <Typography component="h6" variant="h6">
+          <WhiteTextTypography component="h6" variant="h6">
             {titulo}
-          </Typography>
-          <Typography variant="subtitle1" color="textSecondary">
+          </WhiteTextTypography>
+          <SubtitleTypography variant="subtitle1">
             {subtitulo == null ? (
-              <BeatLoader size={10} margin={2} color="#298FDA" loading />
+              <BeatLoader size={10} margin={2} color={colorIcono} loading />
             ) : (
               subtitulo
             )}
-          </Typography>
+          </SubtitleTypography>
         </CardContent>
       </div>
-      <CardMedia className={classes.cover} image={imagen} />
+      <Icon
+        className={classes.icon}
+        style={{ color: colorIcono, fontSize: 50 }}
+      >
+        {icono}
+      </Icon>
     </Card>
   );
 };
 
 MediaCard.propTypes = {
   titulo: PropTypes.string.isRequired,
   obtenerTotal: PropTypes.func.isRequired,
-  imagen: PropTypes.node.isRequired,
+  icono: PropTypes.string.isRequired,
   colorFondo: PropTypes.string.isRequired,
+  colorIcono: PropTypes.string.isRequired,
 };
 
 export default MediaCard;
diff --git a/src/components/ResponsiveLineChart.jsx b/src/components/ResponsiveLineChart.jsx
@@ -51,7 +51,6 @@ const ResponsiveLineChart = ({ data }) => (
       format: "%b %d",
       tickValues: "every 2 days",
     }}
-    enablePointLabel
     pointSymbol={CustomSymbol}
     pointSize={16}
     pointBorderWidth={1}

diff --git a/src/estadisticas/PantallaEstadisticas.jsx b/src/estadisticas/PantallaEstadisticas.jsx
@@ -9,11 +9,6 @@ import FormControl from "@material-ui/core/FormControl";
 import Select from "@material-ui/core/Select";
 import BeatLoader from "react-spinners/BeatLoader";
 
-import VideoImagen from "../assets/videos.png";
-import UsuarioImagen from "../assets/usuarios.webp";
-import ReaccionImagen from "../assets/reacciones.png";
-import ComentarioImagen from "../assets/comentarios.png";
-
 import MediaCard from "../components/MediaCard";
 import ResponsiveLineChart from "../components/ResponsiveLineChart";
 
@@ -126,8 +121,9 @@ const PantallaEstadisticas = () => {
             <MediaCard
               titulo="Videos"
               subtitulo="5000"
-              imagen={VideoImagen}
-              colorFondo="#ffe699"
+              colorFondo="#003f5c"
+              icono="video_library"
+              colorIcono="#789fba"
               obtenerTotal={() => historicoVideos()}
             />
           </Paper>
@@ -137,8 +133,9 @@ const PantallaEstadisticas = () => {
             <MediaCard
               titulo="Usuarios"
               subtitulo="465"
-              imagen={UsuarioImagen}
-              colorFondo="#ccff99	"
+              colorFondo="#463c6b"
+              icono="group"
+              colorIcono="#a498c1"
               obtenerTotal={() => historicoUsuarios()}
             />
           </Paper>
@@ -148,8 +145,9 @@ const PantallaEstadisticas = () => {
             <MediaCard
               titulo="Reacciones"
               subtitulo="3800"
-              imagen={ReaccionImagen}
-              colorFondo="#cc99ff"
+              colorFondo="#7d2f58"
+              icono="thumb_up_alt"
+              colorIcono="#ca91ad"
               obtenerTotal={() => historicoReacciones()}
             />
           </Paper>
@@ -159,8 +157,9 @@ const PantallaEstadisticas = () => {
             <MediaCard
               titulo="Comentarios"
               subtitulo="2000"
-              imagen={ComentarioImagen}
-              colorFondo="#ff9999"
+              colorFondo="#91362a"
+              icono="chat"
+              colorIcono="#d59587"
               obtenerTotal={() => historicoComentarios()}
             />
           </Paper>