should be done

src/Components/Comment.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, useContext, useEffect} from 'react'
+import {Store} from '../Store.js'
+import styled from 'styled-components'
+import Grid from '@material-ui/core/Grid';
+import { Button } from '@material-ui/core';
+import {Link} from 'react-router-dom'
+import {apiDomain} from '../env';
+import noAvatar from "../img/default_profile.png";
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+
+export default function Comment (props) {
+    /*
+    Required props:
+        authorID = author id; links to public user page
+        authorAvatar = either a string denoting the author's avatar file location or null
+        rating = star rating
+        name = title (?)
+        authorName = author username
+        description = the  user comment itself
+        createdAt
+        recurso : boolean; determines whether to display orange or purple font
+    */
+
+    const [editando, setEditando] = useState(false)
+    const {state} = useContext(Store)
+
+    var moment = require('moment')
+
+    return (
+        <Grid container style={{paddingLeft : "20px"}}>
+            <Grid item xs={1}>
+                {
+                    props.authorID &&
+                    <AvatarDiv>
+                        <Link to={'/usuario-publico/' + props.authorID}>
+                            <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar"/>
+                        </Link>
+                    </AvatarDiv>
+                }
+            </Grid>
+
+            <Grid item xs={10}>
+                <Comentario>
+                    <div className="star-rating-container">
+                        <Rating
+                          name="read-only"
+                          value={props.rating}
+                          readOnly
+                          size="small"
+                          style={{color:"#666"}}
+                          emptyIcon={<StarBorderIcon fontSize="inherit" style={{color : "#a5a5a5"}} />}
+                        />
+                    </div>
+
+                    {
+                            props.name &&
+                            <strong>{props.name}</strong>
+                    }
+
+
+                    <div>
+                        {
+                            editando ?
+                            (
+                                [
+                                    <span>edita ai irmao</span>
+                                ]
+                            )
+                            :
+                            (
+                                [
+                                    <p>
+                                        {
+                                            props.authorID &&
+                                            <Link
+                                                to={'/usuario-publico/' + props.authorID}
+                                                style={{
+                                                    fontWeight : "bolder",
+                                                    color : props.recurso ? "#ff7f00" : "#673ab7"
+                                                }}
+                                                >
+                                                {props.authorName}
+                                            </Link>
+                                        }
+                                        : {props.description}
+                                    </p>
+                                ]
+                            )
+                        }
+                    </div>
+
+                    {
+                        props.authorID !== state.currentUser.userId &&
+                        <span className="date">
+                            {moment(props.createdAt).format("DD/MM/YYYY")}
+                        </span>
+                    }
+                </Comentario>
+            </Grid>
+        </Grid>
+    )
+}
+
+const Comentario = styled.div`
+    @media screen and (max-width: 990px) {
+        padding-left : 55px !important;
+    }
+    font-size : 14px;
+
+    .star-rating-container {
+        width : 100px;
+    }
+
+    p {
+        margin : 0 0 10px;
+        padding-left : 2px
+    }
+
+    a {
+        text-decoration : none !important;
+    }
+
+    .date {
+        color : #ababab;
+        font-size : 12px;
+        font-weight : lighter;
+        padding-left : 3px;
+    }
+`
+
+const AvatarDiv = styled.div`
+    text-align : center;
+    float : left;
+    position : relative;
+    width : 65px;
+    height : 65px;
+    a {
+        text-decoration : none !important;
+    }
+
+    img {
+        width : 100% !important;
+        height : 100% !important;
+        border-radius : 100%
+        vertical-align : middle;
+    }
+`