package.json

@@ -8,11 +8,15 @@
     "@material-ui/lab": "^4.0.0-alpha.40",
     "@material-ui/styles": "^4.9.0",
     "axios": "^0.19.2",
+    "base64-img": "^1.0.4",
     "binary-extensions": "^2.0.0",
     "build": "^0.1.4",
+    "image-to-base64": "^2.0.1",
     "material-design-icons": "^3.0.1",
+    "moment": "^2.24.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-easy-crop": "^2.1.0",
     "react-google-login": "^5.0.7",
     "react-grid-system": "^4.4.11",
     "react-icons": "^3.8.0",
@@ -20,7 +24,7 @@
     "react-recaptcha": "^2.3.10",
     "react-responsive-carousel": "^3.1.51",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.3.0",
+    "react-scripts": "^2.1.8",
     "react-star-ratings": "^2.3.0",
     "styled-components": "^4.4.1",
     "typescript": "^3.7.5"
@@ -32,8 +36,16 @@
     "eslint-plugin-react-hooks": "^1.6.1",
     "prettier": "1.18.2"
   },
+  "watch": {
+    "build": {
+      "patterns": [
+        "src"
+      ],
+      "extensions": "js,jsx"
+    }
+  },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=4000 react-scripts start watch",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.js

@@ -40,8 +40,8 @@ import { Store } from './Store'
 import TermsPage from './Pages/TermsPage.js'
 import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
 import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
-
 import EditProfilePage from './Pages/EditProfilePage.js'
+import PublicUserPage from './Pages/PublicUserPage.js'
 
 export default function App(){
   // eslint-disable-next-line
@@ -99,6 +99,7 @@ export default function App(){
         <Route path="/plataforma-mec" component={TabPlataformaMEC}/>
         <Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
         <Route path='/professor' component={PageProfessor}/>
+        <Route path="/usuario-publico/:userId" component={PublicUserPage}/>
       </Switch>
       <EcFooter/>
       <GNUAGPLfooter/>

src/Components/Activities/Definitions.js

+import React from 'react'
+export const ObjectColor = {
+    'Recurso' : 'recurso-color',
+    'Coleção' : 'colecao-color',
+    'Curadoria' : 'curadoria-color'
+}
+
+export const Tag = {
+    'Collection' : 'Coleção',
+    'LearningObject' : 'Recurso',
+    'User' : 'Usuário',
+    'CuratorAssignment' : 'Curadoria'
+}
+
+export const GetActivityProperties = (activity) => {
+    const properties = Possible_Activities[activity]
+    return properties
+}
+
+export const Possible_Activities = {
+    'collection_item.destroy': {
+        icon: 'create',
+        text: ' apagou uma coleção '
+    },
+    'collection_item.create': {
+        icon: 'create',
+        text: ' guardou o recurso ',
+        text2: 'na coleção'
+    },
+    'collection_item.update': {
+        icon: 'speaker_notes',
+        text: ' editou um recurso a sua coleção '
+    },
+    'collection.update': {
+        icon: 'speaker_notes',
+        text: ' editou a coleção '
+    },
+    'collection.create': {
+        icon: 'create',
+        text: ' criou a coleção '
+    },
+    'complaint.create': {
+        icon: 'report',
+        text: ` criou uma denúncia sobre ` //text: ` criou uma denúncia sobre ${DINAMYC_SUBJECT[myActivity.recipient_type]} `
+    },
+    'collection.destroy': {
+        icon: 'delete',
+        text: ' excluiu '
+    },
+    'learning_object.destroy': {
+        icon: 'delete',
+        text: ' apagou o recurso '
+    },
+    'learning_object.publish': {
+        icon: 'speaker_notes',
+        text: ' publicou o recurso educacional '
+    },
+    'like.destroy': {
+        icon: 'create',
+        text: ' favoritou'
+    },
+    'like.create': {
+        icon: 'favorite',
+        text: ' curtiu '
+    },
+    'review.create':{
+        icon: 'star',
+        text: ' avaliou '
+    },
+    'download.create': {
+        icon: 'get_app',
+        text: 'baixou'
+    },
+    'curator_assignment.create': {
+        icon: 'create',
+        text: 'você foi atribuido para avaliar o recurso'
+    },
+    'submission.accepted':{
+        icon: 'cloud_upload',
+        text: 'o seu recurso',
+        text2: 'foi revisado e já está disponivel na Plataforma'
+    },
+    'submission.rejected':{
+        icon: 'thumb_down',
+        text: 'o seu recurso',
+        text2: 'foi revisado e removido da Plataforma por não está de acordo com os termos'
+    }
+};

src/Components/ActivityListItem.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, useEffect} from 'react'
+import styled from 'styled-components'
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+import noAvatar from "../img/default_profile.png";
+import {GetActivityProperties, Tag, Possible_Activities, ObjectColor} from './Activities/Definitions.js'
+//icons
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import CreateIcon from '@material-ui/icons/Create';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import StarIcon from '@material-ui/icons/Star';
+import SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';
+import ReportIcon from '@material-ui/icons/Report';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import ThumbDownIcon from '@material-ui/icons/ThumbDown';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+const GetObjectColor = (tag) => {
+    return ObjectColor[tag]
+}
+
+const getNotificationIcon = (iconType) => {
+    switch(iconType) {
+        case 'create':
+            return <CreateIcon className="icon"/>;
+        case 'favorite':
+            return <FavoriteIcon className="icon"/>;
+        case 'get_app':
+            return <GetAppIcon className="icon"/>;
+        case 'star':
+            return <StarIcon className="icon"/>;
+        case 'report':
+            return <ReportIcon className="icon"/>;
+        case 'cloud_upload':
+            return <CloudUploadIcon className="icon"/>;
+        case 'delete':
+            return <DeleteIcon className="icon"/>;
+        case 'thumb_down':
+            return <ThumbDownIcon className="icon"/>;
+        default :
+            return <SpeakerNotesIcon className="icon"/>;
+    }
+}
+
+const getTimeDifference = (timestamp) => {
+    //returns time difference between now and the moment the notification was created
+    var moment = require('moment')
+
+    const now = moment()
+    const then = moment(timestamp, moment.ISO_8601)
+
+    let duration = moment.duration(now.diff(then))
+    {/*console.log('duration: ', duration)*/}
+    let timeDiff;
+    if (duration._data.years > 0)  {
+        timeDiff = duration._data.years + (duration._data.years > 1 ? ' anos' : ' ano')
+    }
+    else if (duration._data.months > 0) {
+        timeDiff = duration._data.months + (duration._data.months > 1? ' meses' : ' mês')
+    }
+    else if(duration._data.days > 0) {
+        timeDiff = duration._data.days + (duration._data.days > 1 ? ' dias' : ' dia')
+    }
+    else if(duration._data.hours > 0) {
+        timeDiff = duration._data.hours + (duration._data.hours > 1 ? ' horas' : ' hora')
+    }
+    else if(duration._data.minutes > 0) {
+        timeDiff = duration._data.minutes + (duration._data.minutes > 1 ? ' minutos' : ' minuto')
+    }
+
+    return timeDiff;
+}
+
+export default function ActivityListItem (props) {
+    const [activity, setActivity] = React.useState({
+        tag : '',
+        icon : '',
+        text : '',
+        text2 : '',
+    })
+
+    useEffect( () => {
+        const newTag = Tag[(props.actionType === 'CuratorAssignment' ? props.actionType : props.objectType)]
+        const {icon, text, text2 } = GetActivityProperties(props.activity)
+        {/*console.log('icon, text, text2: ', icon, text, text2)*/}
+
+        setActivity({...activity,
+            tag : newTag,
+            icon : icon,
+            text : text,
+            text2 : text2
+        })
+    }, [] )
+
+    return (
+        <StyledListItem>
+            <ListItemAvatar>
+                <Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
+            </ListItemAvatar>
+            {getNotificationIcon(activity.icon)}
+            <ListItemText
+                primary = {
+        			<div>
+        				<span className = {'tag-object' + ' ' +  GetObjectColor(activity.tag)}>
+                            {activity.tag}
+                        </span>
+        				<span className="time-ago-span">&#32;· há {getTimeDifference(props.createdAt)}</span>
+        			</div>
+        		}
+                secondary = {
+                    <div>
+                        <span>
+                            <a href={props.ownerHref} className="owner-name-a" >{props.ownerName}</a> {activity.text} <a href={props.recipientHref} className="recipient-name-a">{props.recipientName}</a> {activity.text2}
+                        </span>
+                    </div>
+                }
+                />
+        </StyledListItem>
+    )
+
+}
+
+const StyledListItem = styled(ListItem)`
+    padding : 20px 60px !important ;
+    border-bottom : 1px solid #eee;
+    display : flex;
+    justify-content : flex-start;
+    align-items : center;
+    min-heigth : 40px;
+
+    a {
+        text-decoration : none !important;
+    }
+
+    .time-ago-span {
+    	font-size : 12px;
+	font-family : 'Lato', medium;
+	color : #787380;
+    }
+
+    .owner-name-a {
+    	color : #00bcd4;
+    }
+
+    .recipient-name-a {
+    	cursor : pointer;
+	    color : #337ab7;
+    }
+
+    .icon {
+        padding-right : 10px;
+        color : #666;
+    }
+
+    .tag-object {
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 12px;
+        line-height: normal;
+        text-align: center;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        color: #fff;
+        height: -webkit-fit-content;
+        height: -moz-fit-content;
+        height: fit-content;
+        width: -webkit-fit-content;
+        width: -moz-fit-content;
+        width: fit-content;
+        border-radius: 10px;
+        padding: 2px 4px;
+    }
+
+    .recurso-color {
+        background-color : orange;
+    }
+
+    .colecao-color {
+        background-color : blue;
+    }
+
+    .curadoria-color {
+        background-color : red;
+    }
+
+
+`

src/Components/AreasSubPages.js

@@ -16,20 +16,22 @@ 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, {Component} from 'react';
-import axios from 'axios';
-import {apiUrl} from '../env';
-import './carousel.css';
-import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';
-import ResourceCard from './ResourceCard';
-import MaterialCard from './MaterialCard';
-import CollectionCard from './CollectionCard';
+import React, { Component } from "react";
+import axios from "axios";
+import { apiUrl } from "../env";
+import "./carousel.css";
+import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
+import ResourceCard from "./ResourceCard";
+import MaterialCard from "./MaterialCard";
+import CollectionCard from "./CollectionCard";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Carousel } from 'react-responsive-carousel';
+import { Carousel } from "react-responsive-carousel";
 import recursos from "../img/ilustra_recursos_digitais.png";
 import materiais from "../img/ilustra_materiais.png";
 import colecoes from "../img/ilustra_colecoes.png";
 import Grid from '@material-ui/core/Grid';
+import ResourceCardFunction from './ResourceCardFunction.js'
+import CollectionCardFunction from './CollectionCardFunction.js'
 
 const areaStyle = {
   paddingTop: "5px",
@@ -40,17 +42,18 @@ const areaStyle={
   margin: "auto",
   padding: "20px",
   minHeight: "190px"
-}
+};
 
 class ReqResources extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      resources: [],
+      resources: []
     };
   }
   componentDidMount() {
-    axios.get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
+    axios
+      .get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
       .then(res => {
         this.setState({ resources: res.data });
         console.log(res.data);
@@ -64,35 +67,47 @@ class ReqResources extends Component{
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
       <Row style={{paddingBottom: "5px"}}>
       {row1.map(card => <Col md={3} sm={6} key={card.id}>
-        <ResourceCard name={card.name}
-                      rating={card.score}
-                      type={card.object_type}
-                      description={card.description}
+        <ResourceCardFunction
+            avatar = {card.publisher.avatar}
             thumbnail = {card.thumbnail}
+            type = {card.object_type ? card.object_type : "Outros"}
+            title={card.name}
+            published={card.state === "published" ? true : false}
+            likeCount={card.likes_count}
+            liked={card.liked}
+            rating={card.score}
             author={card.author}
-                      avatar={card.publisher.avatar}
+            tags={card.educational_stages}
+
                       /></Col>)}
       </Row>
       <Row>
       {row2.map(card => <Col md={3} sm={6} key={card.id}>
-        <ResourceCard name={card.name}
-                      rating={card.score}
-                      type={card.object_type}
-                      description={card.description}
+        <ResourceCardFunction
+            avatar = {card.publisher.avatar}
             thumbnail = {card.thumbnail}
+            type = {card.object_type ? card.object_type : "Outros"}
+            title={card.name}
+            published={card.state === "published" ? true : false}
+            likeCount={card.likes_count}
+            liked={card.liked}
+            rating={card.score}
             author={card.author}
-                      avatar={card.publisher.avatar}
-                      /></Col>)}
+            tags={card.educational_stages} /></Col>)}
       </Row>
       <Row>
       {row3.map(card => <Col md={3} sm={6} key={card.id}>
-        <ResourceCard name={card.name}
-                      rating={card.score}
-                      type={card.object_type}
-                      description={card.description}
+        <ResourceCardFunction
+            avatar = {card.publisher.avatar}
             thumbnail = {card.thumbnail}
+            type = {card.object_type ? card.object_type : "Outros"}
+            title={card.name}
+            published={card.state === "published" ? true : false}
+            likeCount={card.likes_count}
+            liked={card.liked}
+            rating={card.score}
             author={card.author}
-                      avatar={card.publisher.avatar}
+            tags={card.educational_stages}
                       /></Col>)}
       </Row>
     </Carousel>
@@ -104,12 +119,14 @@ class ReqCollections extends Component{
   constructor(props) {
     super(props);
     this.state = {
-      collections: [],
+      collections: []
     };
   }
   componentDidMount() {
-    axios.get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
-    .then(res=>{this.setState({collections: res.data});
+    axios
+      .get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
+      .then(res => {
+        this.setState({ collections: res.data });
         console.log(res.data);
       });
   }
@@ -121,29 +138,29 @@ class ReqCollections extends Component{
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
       <Row style={{paddingBottom: "5px"}}>
       {row1.map(card => <Col md={3} sm={6} key={card.id}>
-        <CollectionCard name={card.name}
+        <CollectionCardFunction name={card.name}
                         rating={card.score}
                         author={card.owner.name}
                         description={card.description}
-                        thumbnail={card.items_thumbnails}
+                        thumbnails={card.items_thumbnails}
                         avatar={card.owner.avatar}/></Col>)}
       </Row>
       <Row>
       {row2.map(card => <Col md={3} sm={6} key={card.id}>
-        <CollectionCard name={card.name}
+        <CollectionCardFunction name={card.name}
                         rating={card.score}
                         author={card.owner.name}
                         description={card.description}
-                        thumbnail={card.items_thumbnails}
+                        thumbnails={card.items_thumbnails}
                         avatar={card.owner.avatar}/></Col>)}
       </Row>
       <Row>
       {row3.map(card => <Col md={3} sm={6} key={card.id}>
-        <CollectionCard name={card.name}
+        <CollectionCardFunction name={card.name}
                         rating={card.score}
                         author={card.owner.name}
                         description={card.description}
-                        thumbnail={card.items_thumbnails}
+                        thumbnails={card.items_thumbnails}
                         avatar={card.owner.avatar}/></Col>)}
       </Row>
     </Carousel>
@@ -161,22 +178,35 @@ class SubPages extends Component{
               <Container style={areaStyle}>
                 <Grid container style={{ display: "flex" }} spacing={5}>
                   <Grid item xs={3}>
-                    <img src={recursos}  alt="aba recursos" height="155" style={{float: "right"}}/>
+                    <img
+                      src={recursos}
+                      alt="aba recursos"
+                      height="155"
+                      style={{ float: "right" }}
+                    />
                   </Grid>
                   <Grid item xs={9}>
                     <p style={{ textAlign: "justify", color: "#fff" }}>
-                      Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é,
-                      a vídeos, animações e a outros recursos destinados à educação. São Recursos
-                      de portais parceiros do MEC e de professores que, como você, atuam na
-                      Educação Básica!
+                      Nesta área, você tem acesso a Recursos Educacionais
+                      Digitais, isto é, a vídeos, animações e a outros recursos
+                      destinados à educação. São Recursos de portais parceiros
+                      do MEC e de professores que, como você, atuam na Educação
+                      Básica!
                     </p>
                   </Grid>
                 </Grid>
               </Container>
             </div>
             <Container style={{ padding: "20px" }}>
-              <p style={{paddingBottom:"5px", borderBottom: "1px solid #ff7f00", color: "#ff7f00"}}>
-                Recursos mais recentes </p>
+              <p
+                style={{
+                  paddingBottom: "5px",
+                  borderBottom: "1px solid #ff7f00",
+                  color: "#ff7f00"
+                }}
+              >
+                Recursos mais recentes{" "}
+              </p>
               <Hidden sm xs>
                 <ReqResources />
               </Hidden>
@@ -203,7 +233,12 @@ class SubPages extends Component{
                 <p style={{paddingBottom:"5px", borderBottom: "1px solid #e81f4f", color: "#e81f4f"}}>
                   Materiais mais recentes </p>
 
-                <Carousel style={{padding: "20px"}}showThumbs={false} infiniteLoop={true} showStatus={false}>
+              <Carousel
+                style={{ padding: "20px" }}
+                showThumbs={false}
+                infiniteLoop={true}
+                showStatus={false}
+              >
                 <Row>
                   <Col md={3}>
                     <MaterialCard name="oioi" />
@@ -227,30 +262,47 @@ class SubPages extends Component{
           <React.Fragment>
             <div style={{ backgroundColor: "#673ab7" }}>
               <Container style={areaStyle}>
-                <img src={colecoes} alt="aba coleções" height="100" style={{float: "left"}}/>
-                <p>Nesta área, você tem acesso às coleções criadas e organizadas
-                pelos usuários da plataforma. É mais uma possibilidade de buscar
-                recursos educacionais para sua aula!</p>
+                <Grid container spacing={5}>
+                  <Grid item xs={3}>
+                    <img
+                      src={colecoes}
+                      alt="aba coleções"
+                      width="180"
+                      style={{ float: "right" }}
+                    />
+                  </Grid>
+                  <Grid item xs={9}>
+                    <p style={{ textAlign: "justify", color: "#fff" }}>
+                      Nesta área, você tem acesso às coleções criadas e
+                      organizadas pelos usuários da plataforma. É mais uma
+                      possibilidade de buscar recursos educacionais para sua
+                      aula!
+                    </p>
+                  </Grid>
+                </Grid>
               </Container>
             </div>
             <Container style={{ padding: "20px" }}>
-              <p style={{paddingBottom:"5px", borderBottom: "1px solid #673ab7", color: "#673ab7"}}>
-                Coleções mais recentes </p>
+              <p
+                style={{
+                  paddingBottom: "5px",
+                  borderBottom: "1px solid #673ab7",
+                  color: "#673ab7"
+                }}
+              >
+                Coleções mais recentes{" "}
+              </p>
               <ReqCollections />
             </Container>
           </React.Fragment>
         );
       default:
-      return null
+        return null;
     }
   }
 
   render() {
-    return(
-      <div>
-      {this.areaRender()}
-      </div>
-  );
+    return <div>{this.areaRender()}</div>;
   }
 }
 export default SubPages;

src/Components/ButtonGuardarColecao.js

+import React from 'react'
+import Button from '@material-ui/core/Button';
+import styled from 'styled-components'
+import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
+
+export default function ButtonGuardarColecao (props) {
+    {/*add function*/}
+    return (
+        <StyledButton>
+                <CreateNewFolderIcon/> &nbsp; GUARDAR
+        </StyledButton>
+    )
+}
+
+const StyledButton = styled(Button)`
+    color : #666 !important;
+    background-color : transparent !important;
+    font-size : 14px important;
+    font-weight : 500 !important;
+
+    .MuiSvgIcon-root {
+        font-size : 24px;
+        color : inherit;
+    }
+
+    &:hover {
+        color: rgb(107, 35, 142) !important;
+    }
+`

src/Components/CardOptions.js

@@ -40,8 +40,8 @@ export default function SimpleMenu() {
 
   return (
     <div style={{fontSize: "12px"}}>
-      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
-        OPÇÕES <MoreVertIcon/>
+      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+        OPÇÕES <MoreVertIcon style={{color : "inherit"}}/>
       </Button>
       <Menu
         id="simple-menu"

src/Components/CollectionCardFunction.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} from 'react';
+import Card from '@material-ui/core/Card';
+import {apiDomain, apiUrl} from '../env';
+import Options from './CardOptions'
+import noAvatar from "../img/default_profile.png";
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import styled from 'styled-components'
+import Slide from '@material-ui/core/Slide';
+import Grid from '@material-ui/core/Grid';
+import {StyledCard, CardDiv, CardReaDiv, Footer, LikeCounter, ButtonNoWidth, EnviadoPor, TagContainer} from './ResourceCardFunction.js'
+import CardContent from '@material-ui/core/CardContent';
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import FolderIcon from '@material-ui/icons/Folder';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import AddIcon from '@material-ui/icons/Add';
+import CheckIcon from '@material-ui/icons/Check';
+
+
+export default function CollectionCardFunction (props) {
+    const [userAvatar, setUserAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
+
+    const [followingHover, handleFollowingHover] = useState(false)
+    const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+
+    const [slideIn, setSlide] = useState(false)
+    const controlSlide = () => {setSlide(!slideIn)}
+
+    const RenderFollowButton = () => {
+        return (
+            <FollowButton onClick={() => {console.log("fazer")}}>
+                <AddIcon/><span>SEGUIR</span>
+            </FollowButton>
+        )
+    }
+
+    const RenderFollowingButton = () => {
+        return (
+            <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
+                onMouseLeave={() => toggleFollowingHover(false)} onClick={() => {console.log('fazer')}}>
+                {
+                    followingHover ?
+                    (
+                        [
+                            <span>DEIXAR DE SEGUIR</span>
+                        ]
+                    )
+                    :
+                    (
+                        [
+                            <React.Fragment>
+                                <CheckIcon/><span>SEGUINDO</span>
+                            </React.Fragment>
+                        ]
+                    )
+                }
+            </FollowingButton>
+        )
+    }
+
+    const SlideAnimationContent = () => {
+        return (
+            <SlideContentDiv>
+                <div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/}
+                    <SlideAvatarDiv>
+                        <img className="img" src={userAvatar} alt="user avatar"/>
+                    </SlideAvatarDiv>
+                    <EnviadoPor>
+                        Enviado por:
+                        <br/>
+                        <p>{props.author}</p>
+                    </EnviadoPor>
+                </div>
+                {
+                props.tags &&
+                <TagContainer>
+                    <Grid container spacing={1} justify='safe' style={{height : "inherit"}}>
+                    {
+                        props.tags.map( (tag) =>
+                            <Grid item key={tag.id}>
+                                <span key={tag.id}>{tag.name}</span>
+                            </Grid>
+                        )
+                    }
+                    </Grid>
+                </TagContainer>
+                }
+            </SlideContentDiv>
+        )
+    }
+
+    return (
+        <StyledCard>
+            <CardDiv>
+                <CardReaDiv>
+                    <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+                        {/*slide animation and content*/}
+                        <Slide direction="right" in={slideIn} timeout={300}>
+                            <a href="" className="text">
+                                {SlideAnimationContent()}
+                            </a>
+                        </Slide>
+                        <Slide direction="left" in={!slideIn} timeout={700}>
+                            <a href=""> {/*add links to collection later*/}
+
+                                        <UserInfo>
+                                            <AvatarDiv>
+                                                <img src={userAvatar} alt="user avatar"/>
+                                            </AvatarDiv>
+                                            <UserAndTitle>
+                                                <span>{props.author}</span>
+                                                <span className={"col-name"}>{props.name}</span>
+                                            </UserAndTitle>
+                                        </UserInfo>
+
+
+                                <StyledGrid container direction="row">
+                                    {
+                                        props.thumbnails.map( (thumb) =>
+                                            <Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12/props.thumbnails.length : 6}>
+                                                <div style={{backgroundImage : `url(${ `${apiDomain}` + thumb})`, height : "100%", width : "100%", backgroundSize : "cover", backgroundPosition : "center"}}/>
+                                            </Grid>
+                                        )
+                                    }
+                                </StyledGrid>
+                            </a>
+                        </Slide>
+                    </Header>
+
+                    <Description> {/*renders rating, number of learning objects and likes count*/}
+                        <Rating
+                          name="customized-empty"
+                          value={props.rating*10}
+                          precision={0.5}
+                          style={{color:"#666"}}
+                          emptyIcon={<StarBorderIcon fontSize="inherit" />}
+                        />
+
+                        <Footer>
+                            <Type>
+                                <FolderIcon />
+                                <span style={{fontWeight:"bold"}}>{props.thumbnails.length} </span>
+                                <span>{props.thumbnails.length != 1 ? "Recursos" : "Recurso"}</span>
+                            </Type>
+                            <LikeCounter>
+                                <span>{props.likeCount}</span>
+                                <ButtonNoWidth>
+                                    <FavoriteIcon style={{color : props.liked ? "red" : "#666" }}/>
+                                </ButtonNoWidth>
+                            </LikeCounter>
+                        </Footer>
+                    </Description>
+
+                </CardReaDiv>
+
+                <CardReaFooter> {/*renders following/unfollow and follow button*/}
+                    {
+                        props.followed ?
+                        (
+                            [
+                                RenderFollowingButton()
+                            ]
+                        )
+                        :
+                        (
+                            [
+                                RenderFollowButton()
+                            ]
+                        )
+                    }
+                </CardReaFooter>
+            </CardDiv>
+        </StyledCard>
+    )
+}
+
+const SlideAvatarDiv = styled.div`
+    vertical-align : middle;
+    border : 0;
+
+    img {
+        height : 40px;
+        width : 40px;
+        border : 0;
+        vertical-align : middle;
+        border-radius : 50%;
+    }
+`
+
+const SlideContentDiv = styled.div`
+    background-color : #7e57c2;
+    padding : 10px;
+    width : 100%;
+    height : 100%;
+    position : absolute;
+    display : flex;
+    flex-direction : column;
+`
+
+const UserAndTitle = styled.div`
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    width: 100%;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 30px 10px 10px 10px;
+    margin-top: -25px;
+    background-color: rgba(0,0,0,.5);
+    color: #fff;
+
+    .col-name {
+        padding-top: 5px;
+        font-size: 17px;
+        font-weight: 500;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: center;
+        width: 100%;
+    }
+`
+
+const AvatarDiv = styled.div`
+    z-index : 5;
+    overflow : hidden;
+
+    img {
+        border-radius : 50%;
+        height : 70px;
+        width : 70px;
+        border : 2px solid #fff;
+        background-color : #fff;
+        box-shadow : 0 1px 3px rgba(0,0,0,.45);
+    }
+`
+
+const UserInfo = styled.div`
+    position : absolute;
+    display : flex;
+    flex-direction : column;
+    width : 100%;
+    height : 100%;
+    justify-content : flex-end;
+    align-items : center;
+
+`
+
+const CardReaFooter = styled.div`
+    height : 60px;
+    display : flex;
+    justify-content : center;
+    align-items : center;
+
+    .MuiSvgIcon-root {
+        font-family: 'Material Icons';
+        color : inherit;
+        font-weight: normal;
+        font-style: normal;
+        font-size: 24px;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+    }
+`
+
+const Type = styled.div`
+    line-height : 1;
+    font-size : .85em;
+
+    .MuiSvgIcon-root {
+        font-size : 21px;
+        color : #673ab7;
+        vertical-align : middle;
+        padding-right : .4em;
+    }
+`
+
+const StyledGrid = styled(Grid)`
+    .MuiGrid-item {
+        height : 136px;
+        width 130px;
+        background : #f9f9f9;
+        border : 1px solid #f4f4f4;
+        border-color : #f4f4f4;
+    }
+`
+
+const Header = styled.div`
+    display : flex;
+    height : 230px;
+    position : relative;
+    overflow : hidden;
+`
+
+const Description = styled.div`
+    display : flex;
+    height : 60px
+    background-color : #fff;
+    flex-direction : column;
+    justify-content: space-between;
+    padding : 15px;
+`
+const FollowButton = styled(Button)`
+    border : 2px solid #503096 !important;
+    border-radius : 5px !important;
+    margin : 10px !important;
+    color :#503096 !important;
+    min-width : 150px !important;
+    min-height : 36px !important;
+    text-align : center !important;
+    vertical-align : middle !important;
+    background : transparent !important;
+    text-transform : uppercase !important;
+    font-family : inherit !important;
+    overflow : hidden !important;
+    font-weight : normal !important;
+    text-decoration : none !important;
+    letter-spacing: .01em !important;
+    white-space : nowrap !important;
+    font-weight: 500;
+
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+
+    }
+
+`
+const FollowingButton = styled(Button)`
+    border : 2px solid #503096 !important;
+    border-radius : 5px !important;
+    margin : 10px !important;
+    color :#fff !important;
+    min-width : 150px !important;
+    min-height : 36px !important;
+    text-align : center !important;
+    vertical-align : middle !important;
+    background-color : #503096 !important;
+    text-transform : uppercase !important;
+    font-family : inherit !important;
+    overflow : hidden !important;
+    font-weight : normal !important;
+    text-decoration : none !important;
+    letter-spacing: .01em !important;
+    white-space : nowrap !important;
+    font-weight: 500;
+
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+        color : #503096 !important;
+        box-shadow : none !important;
+    }
+
+`

src/Components/ComponentAlterarAvatar.js

@@ -16,7 +16,7 @@ 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, {useContext,Component} from 'react';
+import React, {useContext,Component, useState} from 'react';
 import { Button } from '@material-ui/core';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
@@ -24,9 +24,155 @@ import Zoom from '@material-ui/core/Fade';
 import styled from 'styled-components'
 import {Store} from '../Store.js'
 import axios from 'axios'
-import {apiUrl} from '../env';
+import {apiUrl, apiDomain} from '../env';
 import CloseIcon from '@material-ui/icons/Close';
 import Profile from '../img/default_profile0.png'
+import Cropper from './Cropper.js'
+
+
+function ChooseImage (props) {
+    return (
+        <div style={{marginTop:"0"}}>
+            <DivAlterarFoto>
+                <DivFlowHolder>
+                    <AvatarCircleDiv>
+                        <img src={props.avatar}
+                            alt="user avatar" style={{height:"inherit", width:"inherit", objectFit:"cover"}}
+                        />
+                        <input accept="image/*" id="icon-button-file"
+                        type="file"
+                        onChange={(e) => props.handleFile(e.target.files) }
+                        />
+                        <label for="icon-button-file" style={{width:"inherit"}}>
+                            <ChangeAvatarDiv >
+                                <span>Alterar</span>
+                            </ChangeAvatarDiv>
+                        </label>
+                    </AvatarCircleDiv>
+                </DivFlowHolder>
+            </DivAlterarFoto>
+            {
+                props.tempImg &&
+                <img src={props.tempImg}/>
+            }
+            <ButtonsDiv>
+                <ButtonCancelar onClick={props.handleClose}>
+                    <span>Cancelar</span>
+                </ButtonCancelar>
+                <StyledButtonConfirmar>
+                    <span>Salvar Alterações</span>
+                </StyledButtonConfirmar>
+            </ButtonsDiv>
+        </div>
+    )
+}
+
+export default function ComponentAlterarAvatar (props) {
+    const [uploadingImage, setUploading] = useState(false)
+    const [tempImgURL, setTempImg] = useState(null)
+
+    const handleFile = (selectorFiles : FileList) => {
+        console.log(selectorFiles[0])
+        console.log('am i actually changing anything????')
+        {/*setTempImg(URL.createObjectURL(selectorFiles[0]))*/}
+        const objectURL = URL.createObjectURL(selectorFiles[0])
+        console.log(objectURL)
+        setUploading(true)
+
+    }
+
+
+    return (
+            <ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
+            <HeaderDiv>
+                <span style={{width:"32px"}}/>
+                    <StyledH2>Editar Foto</StyledH2>
+                    <StyledCloseModalButton onClick={props.handleClose}>
+                        <CloseIcon style={{color : "#666"}}/>
+                    </StyledCloseModalButton>
+            </HeaderDiv>
+            <DialogDiv>
+            {
+                uploadingImage ?
+                (
+                    [
+                        <>
+                            <EditarDiv>
+                                <TextoEditarDiv>
+                                    Clique nos ícones e arraste para selecionar a parte que você quer da foto
+                                </TextoEditarDiv>
+                                <EditarImagemDiv>
+                                    <Cropper img={tempImgURL} altText={'cropped image'} cropShape={"round"}
+                                    showGrid={false}/>
+                                </EditarImagemDiv>
+                                <FooterButtonsDiv>
+                                    <Button style={{backgroundColor :"#9e9e9e"}}>ESCOLHER OUTRA</Button>
+                                </FooterButtonsDiv>
+                            </EditarDiv>
+                        </>
+                    ]
+                )
+                :
+                (
+                    [
+                        <>
+                        {console.log('am i correctly rendering at least?')}
+                            <ChooseImage
+                                avatar={props.userAvatar === '' || props.userAvatar == null ? Profile : `${apiDomain}` + props.userAvatar}
+                                handleFile={handleFile}
+                                handleClose={props.handleClose}
+                                tempImg={tempImgURL}
+                                />
+                        </>
+                    ]
+                )
+            }
+            </DialogDiv>
+            </ModalDiv>
+        )
+
+}
+
+const FooterButtonsDiv = styled.div`
+    padding : 0 30px 20px;
+    display : flex;
+    flex-direction : row;
+    align-content : center;
+    justify-content : center;
+    Button {
+        margin-top : 20px;
+    }
+`
+
+const EditarImagemDiv = styled.div`
+    width : 500px;
+    border-radius : 0;
+    height : 300px;
+    position : relative;
+    justify-content: center;
+    Cropper {
+        height : 100%;
+        width: 100%;
+        top: 50%;
+        left:50%;
+        margin-top: -150px;
+        margin-left:-150px;
+        cursor:default;
+    }
+`
+
+const TextoEditarDiv = styled.div`
+    margin-bottom : 15px;
+    align-self : center;
+    text-align : center;
+    font-size : 15px;
+`
+
+const EditarDiv = styled.div`
+    position : relative;
+    background-color : #f4f4f4;
+    padding : 20px 30px 40px;
+`
 
 const ChangeAvatarDiv = styled.div`
 color : rgba(255,255,255,.7);
@@ -73,9 +219,6 @@ const StyledButtonConfirmar = styled(Button)`
     border: 0 !important;
     padding: 0 6px !important;
     margin: 6px 8px !important;
-    background: transparent !important;
-    background-color: transparent !important;
-    color: currentColor !important;
     white-space: nowrap !important;
     text-transform: uppercase !important;
     font-weight: 500 !important;
@@ -153,12 +296,12 @@ const HeaderDiv = styled.div`
 flex-direction : row;
 align-items : center;
 align-content : center;
-    justify-content : center;
+justify-content : space-between;
 max-width : 100%;
 `
 const StyledH2 = styled.h2`
 font-size : 26px;
-    font-weight : lighter;
+font-weight : normal;
 margin-top : 20px;
 margin-bottom : 10px;
 font-family: inherit;
@@ -169,7 +312,6 @@ const StyledCloseModalButton = styled(Button)`
 display : inline-block;
 position : relative;
 float : right !important;
-    margin-right : -8px !important;
 background : transparent !important;
 min-width: 0 !important;
 width : 40px;
@@ -178,52 +320,3 @@ const StyledCloseModalButton = styled(Button)`
 height : 40px;
 margin : 0 6px;
 `
-
-export default function ComponentAlterarAvatar (props) {
-        return (
-            <ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
-            <HeaderDiv>
-                <span style={{width:"32px"}}/>
-                    <StyledH2>Editar Foto</StyledH2>
-                    <StyledCloseModalButton onClick={props.handleClose}>
-                        <CloseIcon/>
-                    </StyledCloseModalButton>
-            </HeaderDiv>
-            <DialogDiv>
-                <div style={{marginTop:"0"}}>
-                    <form>
-                        <DivAlterarFoto>
-                            <DivFlowHolder>
-                                <AvatarCircleDiv>
-                                    {
-                                        props.userAvatar == '' || props.userAvatar == null ?
-                                        (
-
-                                            <img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
-                                        ):
-                                        (
-                                            <img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
-                                        )
-                                    }
-                                    <input accept="image/*" id="icon-button-file"
-                                    type="file"
-                                    onChange={(e) => props.handleFile(e.target.files) }
-                                    style={{display:"none"}}/>
-                                    <label for="icon-button-file" style={{width:"inherit"}}>
-                                        <ChangeAvatarDiv >
-                                            <span>Alterar</span>
-                                        </ChangeAvatarDiv>
-                                    </label>
-                                </AvatarCircleDiv>
-                            </DivFlowHolder>
-                        </DivAlterarFoto>
-                        <ButtonsDiv>
-                            <ButtonCancelar onClick={props.handleClose}><span>Cancelar</span></ButtonCancelar><StyledButtonConfirmar><span>Salvar Alterações</span></StyledButtonConfirmar>
-                        </ButtonsDiv>
-                    </form>
-                </div>
-            </DialogDiv>
-            </ModalDiv>
-        )
-
-}

src/Components/ContactButtons/FollowButton.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, {useContext, useState} from 'react'
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
+import styled from 'styled-components'
+import Button from '@material-ui/core/Button';
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import { Store } from '../../Store.js';
+
+export default function FollowButton (props) {
+    const {state} = useContext(Store)
+
+    const handleFollow = (followerID) => {
+        const id = followerID
+        console.log('id: ', id)
+        {/*const header = {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Access-Token': state.currentUser.accessToken,
+            'Client': state.currentUser.clientToken,
+            'Uid': sessionStorage.getItem('@portalmec/uid'),
+            'Host': 'api.portalmec.c3sl.ufpr.br',
+            'Cookie': ''
+        }
+
+        if (id != -1){
+            axios.post( (`${apiUrl}/users/` + id + '/follow'), header
+              ).then( (response) => {
+                    console.log(response)
+                }, (error) => {
+                    console.log(error)
+                })
+        }*/}
+    }
+
+    return (
+        <StyledButon onClick={() => handleFollow(props.followerID)}>
+            <PersonAddIcon style={{fontSize : "24px",
+                display : "inline-block",
+                verticalAlign : "middle",
+                color : "#00bcd4"}}/>
+            SEGUIR
+        </StyledButon>
+    )
+}
+
+
+const StyledButon = styled(Button)`
+    background-color : #fff !important;
+    border : 1px solid #00bcd4 !important;
+    color : #00bcd4 !important;
+    font-size : 14px !important;
+    display : inline-block !important;
+    position : relative !important;
+    cursor : pointer !important;
+    min-height : 36px !important;
+    min-width : 88px !important;
+    line-height : 36px !important;
+    vertical-align : middle !important;
+    -webkit-box-align : center !important;
+    -webkit-align-items : center !important;
+    -ms-grid-row-align : center !important;
+    align-items : center !important;
+    text-align : center !important;
+    border-radius : 3px !important;
+    -webkit-user-select : none !important;
+    -moz-user-select : none !important;
+    -ms-user-select : none !important;
+    user-select : none !important;
+    padding : 0 6px !important;
+    margin : 6px 8px !important;
+    white-space : nowrap !important;
+    text-transform : uppercase !important;
+    font-weight : 500 !important;
+    font-style : inherit !important;
+    font-variant : inherit !important;
+    font-family : inherit !important;
+    text-decoration : none !important;
+    overflow : hidden !important;
+`

src/Components/ContactButtons/FollowersCountButton.js

+import React from 'react'
+import styled from 'styled-components'
+import Button from '@material-ui/core/Button';
+
+export default function FollowersCountButton (props) {
+
+    const FollowerButtonSpan = () => {
+        const followCount = props.followCount
+        let retVal = followCount  + (followCount !== 1 ? " seguidores" : " seguidor")
+        return retVal
+    }
+
+    return (
+        <FollowersButton>
+            {FollowerButtonSpan()}
+        </FollowersButton>
+    )
+}
+
+
+const FollowersButton = styled(Button)`
+    right : 0 !important;
+    text-transform : none !important;
+    color : #666 !important;
+    font-size : 13px !important;
+    font-weight : 400 !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    margin: 6px 8px !important;
+    padding : 0 6px !important;
+    min-width : 88px !important;
+    min-height : 36px !important;
+    vertical-align : middle !important;
+    text-align : center !important;
+    border : 0 !important;
+    border-radius : 3px !important;
+    background-color : rgb(250,250,250) !important;
+`

src/Components/ContactButtons/FollowingButton.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, {useContext, useState} from 'react'
+import styled from 'styled-components'
+import Button from '@material-ui/core/Button';
+import FollowingIcon from '../../img/how_to_reg-24px.png'
+import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import { Store } from '../../Store.js';
+
+export default function FollowingButton (props) {
+    const {state} = useContext(Store)
+
+    const [modalOpen, toggleModal] = useState(false)
+    const [unfollowID, setUnfollowID] = useState(-1)
+
+    const [followingHover, handleFollowingHover] = useState(false)
+    const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+
+    const handleUnfollowPartOne = (followedID) => {
+        setUnfollowID(followedID)
+        toggleModal(true)
+    }
+
+    const handleUnfollowPartTwo = () => {
+        const id = unfollowID
+        console.log('id: ', id)
+
+        const header = {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Access-Token': state.currentUser.accessToken,
+            'Client': state.currentUser.clientToken,
+            'Uid': sessionStorage.getItem('@portalmec/uid'),
+            'Host': 'api.portalmec.c3sl.ufpr.br',
+            'Cookie': ''
+        }
+
+        console.log('header: ', header)
+
+        {/*if (id != -1) {
+              axios.delete((`${apiUrl}/users/` + id + '/follow'), header
+              ).then( (response) => {
+                  console.log(response)
+              }, (error) => {
+                  console.log(error)
+              })
+        }*/}
+    }
+
+    return (
+        <React.Fragment>
+            <ModalConfirmarUnfollow open={modalOpen}
+                handleClose={() => {toggleModal(false)}}
+                handleConfirm = {handleUnfollowPartTwo}
+            />
+            <StyledButton
+                onMouseOver={() => toggleFollowingHover(true)}
+                onMouseLeave={() => toggleFollowingHover(false)}
+                onClick={() => handleUnfollowPartOne(props.followedID)}
+            >
+                {
+                    followingHover?
+                    (
+                        [
+                            <span>DEIXAR DE SEGUIR</span>
+                        ]
+                    )
+                    : (
+                        [
+                            <>
+                            <img src={FollowingIcon} alt='ícone seguindo'/><span>Seguindo</span>
+                            </>
+                    ]
+                )
+            }
+            </StyledButton>
+        </React.Fragment>
+    )
+}
+
+
+export const StyledButton = styled(Button)`
+    background-color : #00bcd4 !important;
+    color : #fff !important;
+    display : inline-block !important;
+    position : relative !important;
+    cursor : pointer !important;
+    min-height : 36px !important;
+    min-width : 88px !important;
+    line-height : 36px !important;
+    vertical-align : middle !important;
+    -webkit-box-align : center !important;
+    -webkit-align-items : center !important;
+    -ms-grid-row-align : center !important;
+    align-items : center !important;
+    text-align : center !important;
+    border-radius : 3px !important;
+    -webkit-user-select : none !important;
+    -moz-user-select : none !important;
+    -ms-user-select : none !important;
+    user-select : none !important;
+    border : 0 !important;
+    padding : 0 6px !important;
+    margin : 6px 8px !important;
+    white-space : nowrap !important;
+    text-transform : uppercase !important;
+    font-weight : 500 !important;
+    font-size : 14px !important;
+    font-style : inherit !important;
+    font-variant : inherit !important;
+    font-family : inherit !important;
+    text-decoration : none !important;
+    overflow : hidden !important;
+    &:hover {
+        background-color : #fff !important;
+        color : #00bcd4 !important;
+        border : 1px solid #00bcd4 !important;
+    }
+    img {
+        height : 24px;
+        display : inline-block;
+        vertical-align : middle;
+        color : #fff !important;
+    }
+`

src/Components/ContactCard.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, useEffect, useContext} from 'react';
+import {Container} from 'react-grid-system';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import {apiDomain} from '../env';
+import { Store } from '../Store.js';
+import noAvatar from "../img/default_profile.png";
+import { makeStyles } from '@material-ui/core/styles';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl} from '../env';
+import Options from './ContactCardOptions.js'
+import FollowButton from './ContactButtons/FollowButton.js'
+import FollowingButton from './ContactButtons/FollowingButton.js'
+import FollowersCountButton from './ContactButtons/FollowersCountButton.js'
+import {Link} from 'react-router-dom';
+
+const useStyles = makeStyles({
+  root: {
+    maxWidth: 345,
+    borderRadius : 0
+  },
+});
+
+export default function ImgMediaCard(props) {
+  const classes = useStyles();
+  const {state} = useContext(Store)
+
+  const [coverStyle, setCoverStyle] = useState({})
+
+  const createRequestHeader = () => {
+      const header = {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'Access-Token': state.currentUser.accessToken,
+          'Client': state.currentUser.clientToken,
+          'Uid': sessionStorage.getItem('@portalmec/uid'),
+          'Host': 'api.portalmec.c3sl.ufpr.br',
+          'Cookie': ''
+      }
+      return header
+  }
+
+  return (
+        <StyledCard>
+            <CardDiv>
+                <CardAreaDiv>
+                    {/*Top part of contat card (background image, number of followers and avatar)*/}
+                    <Header>
+                        <StyledCardMedia image={props.cover}>
+                            <div style = {{display : "flex", backgroundColor : "inherit", float : "right"}}>
+                                <Link to={props.href}>
+                                    <FollowersCountButton followCount={props.follow_count}/>
+                                </Link>
+                                <AvatarDiv>
+                                    <img src={props.avatar ? props.avatar : noAvatar} alt='user avatar'
+                                        style={{height : "100%", width : "100%", borderRadius : "50%"}}/>
+                                </AvatarDiv>
+                            </div>
+                        </StyledCardMedia>
+                    </Header>
+
+                    {/*Rest of the card content. Button to be rendered depends on whether the contact is followed by the user*/}
+                    <CardContent>
+                        <UserInfo>
+                            <Link to={props.href}>
+                                <p className="p1">
+                                    {props.name}
+                                </p>
+                            </Link>
+
+                            <Link to={props.href}>
+                                <span style={{fontSize : "14px", fontWeight : "normal"}}>
+                                    <b>{props.numCollections}</b> {props.numCollections != 1? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects != 1? "Recursos" : "Recurso"}
+                                </span>
+                            </Link>
+
+                            <div style={{display : "flex", justifyContent : "center"}}>
+                                {
+                                    props.followed ?
+                                    (
+                                        [
+                                            <FollowingButton followedID={props.followerID}/>
+                                        ]
+                                    )
+                                    :
+                                    (
+                                        [
+                                            <FollowButton followerID={props.followerID}/>
+                                        ]
+                                    )
+                                }
+                                <Options/> {/*options menu missing functionalities*/}
+                            </div>
+                    </UserInfo>
+                </CardContent>
+            </CardAreaDiv>
+        </CardDiv>
+    </StyledCard>
+  );
+}
+
+/*Controls top part of Card*/
+const Header = styled.div`
+    display : flex;
+    height : 152px;
+    position : relative;
+`
+
+/* Had to create these classes so I could avoid using card action Area -------*/
+export const CardAreaDiv = styled.div`
+    display : flex;
+    flex-direction : column;
+    height : 360px;
+    width : 272.5px;
+    margin : 0 auto;
+`
+export const CardDiv = styled.div`
+    background-color : #fff;
+    text-align : start;
+    font-family : 'Roboto', sans serif;
+    color : #666;
+`
+/*----------------------------------------------------------------------------*/
+
+
+
+/*Override Material UI styling -----------------------------------------------*/
+const StyledCardMedia = styled(CardMedia) `
+    height : 100%;
+    width : 100%;
+    background-size : cover;
+    background-position : center;
+
+`
+const StyledCard = styled(Card)`
+    width : 272.5px;
+    max-height : 380px;
+    margin-top : 10px;
+    margin-bottom : 10px;
+    max-width : 345px;
+    border-radius : 0;
+    box-shadow : 0 0 5px 0 rgba(0,0,0,.25) !important;
+`
+/*----------------------------------------------------------------------------*/
+
+
+const UserInfo = styled.div`
+    text-align : center;
+    margin-top : 50px;
+    color : #666;
+
+    a {
+        text-decoration : none !important;
+        color : #666;
+    }
+
+    .p1 {
+        font-size : 17px;
+        margin : 0 0 10px;
+        overflow : hidden;
+        text-overflow : ellipsis;
+        white-space : nowrap;
+    }
+`
+
+/*Rounded div to be used with avatar pic*/
+const AvatarDiv = styled.div`
+    border-radius : 100%;
+    left : 50%;
+    position : absolute;
+    -webkit-transform : translateX(-50%);
+    transform : translateX(-50%);
+    top : 65px;
+    height : 126px;
+    width : 126px;
+    border : 2px solid #fff;
+`

src/Components/ContactCardOptions.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 from 'react';
+import styled from 'styled-components'
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import OpenIcon from '@material-ui/icons/OpenInNew';
+import ReportIcon from '@material-ui/icons/Error';
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
+
+export default function SimpleMenu() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  return (
+    <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
+      <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+        <MoreVertIcon style={{color : "#666"}}/>
+      </ButtonNoWidth>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleClose}>
+          <ListItemIcon>
+            <OpenIcon />
+          </ListItemIcon>
+          Abrir
+        </MenuItem>
+
+        <MenuItem onClick={handleClose}>
+            <ListItemIcon>
+              <PersonAddIcon />
+            </ListItemIcon>
+            Seguir
+        </MenuItem>
+
+        <MenuItem onClick={handleClose}>
+            <ListItemIcon>
+              <ReportIcon />
+            </ListItemIcon>
+            Reportar
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+}
+
+const ButtonNoWidth = styled(Button)`
+    width : 24px !important;
+    min-width : 24px !important;
+    max-height : 24px !important;
+    padding : 0 !important;
+    background-color : #fff !important;
+    color : #a5a5a5 !important;
+    border : 0 !important;
+
+    .MuiButton-root {
+        width : 24px !important;
+        min-width : 12px !important;
+    }
+
+    .MuiSvgIcon-root {
+        padding-right : 0 !important;
+        vertical-align : middle;
+    }
+
+    .MuiButton-label {
+        padding-left : 4px !important;
+    }
+    `

src/Components/ContactForm.js

@@ -18,8 +18,6 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { Component, useState, useEffect } from 'react';
 import styled from 'styled-components';
-import Banner1 from '../img/banner-sobre.jpg';
-import { TextField } from '@material-ui/core';
 import FormInput from "../Components/FormInput.js"
 import axios from 'axios'
 import {apiUrl} from '../env';

src/Components/Cropper.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, {Component} from 'react';
+import Slider from '@material-ui/core/Slider'
+import Cropper from 'react-easy-crop'
+
+export default class Easy_Cropper extends React.Component {
+  constructor (props) {
+      super(props);
+      this.state = {
+        image: '',
+        crop: { x: 0, y: 0 },
+        zoom: 1,
+        aspect: 4 / 3,
+      }
+  }
+
+  onCropChange = crop => {
+    this.setState({ crop })
+  }
+
+  onCropComplete = (croppedArea, croppedAreaPixels) => {
+    console.log(croppedArea, croppedAreaPixels)
+  }
+
+  onZoomChange = zoom => {
+    this.setState({ zoom })
+  }
+
+  render() {
+    return (
+    <>
+      <Cropper
+        image={this.props.img}
+        crop={this.state.crop}
+        zoom={this.state.zoom}
+        aspect={this.state.aspect}
+        cropShape={this.props.cropShape}
+        showGrid={this.props.showGrid}
+        onCropChange={this.onCropChange}
+        onCropComplete={this.onCropComplete}
+        onZoomChange={this.onZoomChange}
+      />
+      <div className="controls">
+         <Slider
+           value={this.state.zoom}
+           min={1}
+           max={3}
+           step={0.1}
+           aria-labelledby="Zoom"
+           onChange={(e, zoom) => this.onZoomChange(zoom)}
+           classes={{ container: 'slider' }}
+         />
+       </div>
+    </>
+    )
+  }
+}
+
+/*License for this component:
+MIT License
+
+Copyright (c) 2020 ricardo.ch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.*/

src/Components/FormInput.js

@@ -16,11 +16,10 @@ 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 from 'react';
-import {makeStyles} from '@material-ui/styles';
-import styled from 'styled-components'
-import TextField from '@material-ui/core/TextField';
-
+import React from "react";
+import { makeStyles } from "@material-ui/styles";
+import styled from "styled-components";
+import TextField from "@material-ui/core/TextField";
 
 const StyledTextField = styled(TextField)`
     max-width: 100%;
@@ -29,22 +28,33 @@ const StyledTextField = styled(TextField)`
     color : inherit;
     width : 100% !important;
     full-width : 100% !important;
+
+    label.Mui-focused {
+        color : #00bcd4;
+    }
+
+    label.Mui-focused.Mui-error {
+        color : red;
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: 2px solid #00bcd4;
+    }
 `
 
 const useStyles = makeStyles(theme => ({
   container: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    padding: '2px',
+    display: "flex",
+    flexWrap: "wrap",
+    padding: "2px"
   },
   textField: {
-
-    maxWidth: '100%',
-    fontSize : '15px',
-    fontWeight : 'lighter',
-    color : '#00bcd4',
-    width : '100%',
-  },
+    maxWidth: "100%",
+    fontSize: "15px",
+    fontWeight: "lighter",
+    color: "inherit",
+    width: "100%"
+  }
 }));
 
 export default function FormInput(props) {
@@ -67,7 +77,6 @@ export default function FormInput(props) {
           rowsMax = {props.rowsMax}
           InputProps={{className: classes.input}}
           required = {props.required}
-          error = {props.error}
           helperText ={props.help}
           style={{width:"100%"}}
           mask={props.mask}

src/Components/Header.js

@@ -22,7 +22,7 @@ import AcessibilityBar from './AcessibilityBar'
 import MenuBar from './MenuBar'
 import SearchBar from './SearchBar'
 import SignUpModal from './SignUpModal'
-import LoginModal from './LoginModal'
+import LoginModal from './LoginModal.js'
 import { Store } from '../Store';
 import ColaborarModal from './ColaborarModal.js'
 import Snackbar from '@material-ui/core/Snackbar';
@@ -31,7 +31,6 @@ import MuiAlert from '@material-ui/lab/Alert';
 //    background : #ffa54c !important;
 //    boxShadow :none;
 //`
-
 function Alert(props) {
   return <MuiAlert elevation={6} variant="filled" {...props} />;
 }
@@ -80,7 +79,8 @@ export default function Header(props){
               <SearchBar/>
           }
           <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/>
-          <LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp} openSnackbar = {() => {handleSuccessfulLogin(true)}}/>
+          <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+              openSnackbar={() => {handleSuccessfulLogin(true)}}/>
           <ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} />
 
       </>

src/Components/HelpCenter/Cards/CardEncontrando.js

@@ -16,12 +16,11 @@ 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, { Component, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import EncontrandoRecurso from '../../../img/ajuda/Encontrando_recursos.png';
-
-import  { Link } from 'react-router-dom';
+import React from "react";
+import styled from "styled-components";
+import EncontrandoRecurso from "../../../img/ajuda/Encontrando_recursos.png";
 
+import { Link } from "react-router-dom";
 
 export default function CardEncontrando(props) {
   return (
@@ -30,28 +29,44 @@ export default function CardEncontrando(props) {
         <img src={EncontrandoRecurso} alt="" />
         <h3>Encontrando Recursos</h3>
         <hr />
-        <Link to={{
-          pathname : 'encontrando-recurso',
-          state : {value : '0'}
-        }}>Como fazer uma busca?</Link>
+        <Link
+          to={{
+            pathname: "encontrando-recurso",
+            state: { value: "0" }
+          }}
+        >
+          Como fazer uma busca?
+        </Link>
         <br />
-        <Link to={{
-          pathname : 'encontrando-recurso',
-          state : {value : '1'}
-        }}>Como filtrar os resultados?</Link>
+        <Link
+          to={{
+            pathname: "encontrando-recurso",
+            state: { value: "1" }
+          }}
+        >
+          Como filtrar os resultados?
+        </Link>
         <a></a>
         <br />
-        <Link to={{
-          pathname : 'encontrando-recurso',
-          state : {value : '2'}
-        }}>Como os recursos são ranqueados?</Link>
+        <Link
+          to={{
+            pathname: "encontrando-recurso",
+            state: { value: "2" }
+          }}
+        >
+          Como os recursos são ranqueados?
+        </Link>
         <br />
       </div>
       <div className="card-rodape">
-      <Link to={{
-          pathname : 'encontrando-recurso',
-          state : {value : '0'}
-        }}>VER MAIS</Link>
+        <Link
+          to={{
+            pathname: "encontrando-recurso",
+            state: { value: "0" }
+          }}
+        >
+          VER MAIS
+        </Link>
       </div>
     </CardAjuda>
   );
@@ -60,7 +75,7 @@ export default function CardEncontrando(props) {
 const CardAjuda = styled.div`
 
   height: 360px;
-  margin-bottom: 20px
+  margin-bottom: 20px;
 
 
   .card {
@@ -72,7 +87,7 @@ const CardAjuda = styled.div`
     box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
 
     h3 {
-      font-size: 24px;
+      font-size: 23px;
       font-weight: 400;
       color: #666;
       margin-top: 20px;
@@ -138,4 +153,4 @@ const CardAjuda = styled.div`
 
 }
 
-`
\ No newline at end of file
+`;