modified so it can be used in collection page

src/Components/ResourcePageComponents/CommentForm.js

@@ -7,6 +7,8 @@ import TextField from "@material-ui/core/TextField";
 import { Button } from '@material-ui/core';
 import axios from 'axios'
 import {apiUrl} from '../../env';
+import EditIcon from '@material-ui/icons/Edit';
+import Grid from '@material-ui/core/Grid';
 
 export default function CommentForm (props) {
     const [rating, setRating] = useState({
@@ -53,8 +55,9 @@ export default function CommentForm (props) {
                     ]
                 }
             }
+            let type = props.recurso ? 'learning_objects/' : 'collections/'
             console.log(payload)
-            axios.post( (`${apiUrl}/learning_objects/` + props.recursoId + '/reviews'), payload, config
+            axios.post( (`${apiUrl}/` + type + props.recursoId + '/reviews'), payload, config
         ).then((response) => {
             if ( response.headers['access-token'] ) {
                 sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
@@ -72,7 +75,7 @@ export default function CommentForm (props) {
     return (
         <StyledForm onSubmit={handleSubmit}>
             <label htmlFor="avaliacao-estrelas" className="start-label">
-                Este recurso foi útil?*
+                {props.recurso ? "Este recurso foi útil?*" : "Esta coleção foi útil?*"}
             </label>
             <div className="stars-container">
                 <Rating
@@ -85,26 +88,64 @@ export default function CommentForm (props) {
                   getLabelText={(value) => {return(value + ' Estrela' + (value !== 1 ? 's' : ''))}}
                 />
             </div>
-            <div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>Avalie se o recurso foi útil.</div>
+            <div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
 
-            <span>
+            <Grid container>
+                <Grid item xs={10}>
                 <StyledTextField
+                    colecao={!props.recurso}
                     value={comment.value}
                     multiline
                     rows="5"
                     error={comment.error}
-                    label={"Escreva aqui a sua experiência com este Recurso"}
+                    label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
                     onChange={e => handleChange(e)}
                     required={true}
-                    help = {comment.error ? 'Escreva aqui seu comentário sobre o Recurso.' : ''}
+                    help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
                 />
+                </Grid>
+                <Grid item xs={2}>
+                    <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
+            {
+                props.recurso ?
+                (
                     <OrangeButton type="submit">Publicar</OrangeButton>
+                )
+                :
+                (
+                    <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                )
+            }
+        </div>
+        </Grid>
+
         <div className="campos-obrigatorios">* Campos obrigatórios.</div>
-            </span>
+            </Grid >
         </StyledForm>
     )
 }
 
+const PurpleButton = styled(Button)`
+    background-color : #673ab7 !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    font-weight : 600 !important;
+    color : #fff !important;
+    .icon {
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        font-size : 24px !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+    }
+`
+
 const OrangeButton = styled(Button)`
     color : rgba(255,255,255,0.87) !important;
     box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -114,24 +155,22 @@ const OrangeButton = styled(Button)`
 
 const StyledTextField = styled(TextField)`
     .MuiInputBase-root {
-        margin-bottom : 42px;
+        margin-bottom : 5px;
     }
 
     label.Mui-focused {
-        color : rgb(255,127,0);
+        color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"}
     }
 
     .MuiInput-underline::after {
-        border-bottom: 2px solid rgb(255,127,0);
+        border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)" };
     }
 
     label.Mui-focused.Mui-error {
         color : red;
     }
 
-    max-width: 80%;
-    width : 80% !important;
-    full-width : 80% !important;
+    width: 95%;
 `
 
 const StyledForm = styled.form`
@@ -164,6 +203,7 @@ const StyledForm = styled.form`
     }
 
     .campos-obrigatorios {
+        padding-top : 18px;
         font-weight : 400;
         font-size : 12px;
         color :#a5a5a5;