Merge pull request #56 from allanalves23/develop

Fixed design bugs and enhanced some misspelings
coder-mind-project · Jul 13, 2020 · a7ccfd2 · a7ccfd2
2 parents d0c2ac0 + df486d8
commit a7ccfd2
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 65 deletions.
diff --git a/src/components/Tickets/SendTickets/AccountProblem.jsx b/src/components/Tickets/SendTickets/AccountProblem.jsx
@@ -16,11 +16,10 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 
-
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { MuiPickersUtilsProvider, KeyboardDateTimePicker } from '@material-ui/pickers';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
 
 import axios from 'axios';
@@ -31,6 +30,8 @@ import { error as toastError } from '../../../config/toasts';
 
 import CustomButton from '../../Buttons/Button';
 
+import { CustomTextField, CustomKeyboardDateTimePicker } from './styles';
+
 function AccountProblem(props) {
   const {
     user,
@@ -94,7 +95,7 @@ function AccountProblem(props) {
         <Box display="flex" flexDirection="column" justifyContent="center" margin="25px">
           <Box width="100%" display="flex" alignItems="center">
             <Box display="flex" alignItems="center" mr={1}>
-              <Icon>security</Icon>
+              <Icon color="action">security</Icon>
             </Box>
             <Box display="flex" alignItems="center">
               <Typography component="h4" variant="h6">Alteraram os dados da minha conta</Typography>
@@ -113,19 +114,16 @@ function AccountProblem(props) {
         </Box>
         {!success
             && (
-            <Box padding="25px">
-              <Box display="flex" flexWrap="wrap" alignItems="flex-start">
-                <Grid item xs={12} md={5} className="formInput">
-                  <TextField
+              <Box padding="25px" paddingTop={0}>
+                <Box display="flex" flexWrap="wrap" alignItems="flex-start">
+                  <CustomTextField
                     fullWidth
                     label="Código *"
                     value={ticket.code}
                     onChange={(evt) => handleChangeTicket(evt, 'code')}
                   />
-                </Grid>
-                <Grid item xs={12} md={5} className="formInput">
                   <MuiPickersUtilsProvider utils={MomentUtils}>
-                    <KeyboardDateTimePicker
+                    <CustomKeyboardDateTimePicker
                       label="Data de alteração *"
                       ampm={false}
                       clearable
@@ -143,21 +141,25 @@ function AccountProblem(props) {
                       fullWidth
                     />
                   </MuiPickersUtilsProvider>
-                </Grid>
-              </Box>
-              <TextField
-                className="formInput"
-                fullWidth
-                multiline
-                rows="10"
-                label="Descreva seu problema *"
-                value={ticket.msg}
-                onChange={(evt) => handleChangeTicket(evt, 'msg')}
-              />
-              <Box width="100%" marginTop="15px">
-                <CustomButton onClick={() => sendTicket()} fullWidth color="primary" variant="contained" disabled={isSending} icon="save" loading={isSending} text={isSending ? 'Enviando ticket...' : 'Enviar'} />
+                </Box>
+                <Box margin="10px">
+                  <TextField
+                    className="formInput"
+                    fullWidth
+                    multiline
+                    rows="10"
+                    label="Descreva seu problema *"
+                    value={ticket.msg}
+                    onChange={(evt) => handleChangeTicket(evt, 'msg')}
+                  />
+                </Box>
+                <Box padding={0.5}>
+                  <Typography variant="body2" component="p">* Informações obrigatórias</Typography>
+                </Box>
+                <Box width="100%" marginTop={4}>
+                  <CustomButton onClick={() => sendTicket()} fullWidth color="primary" variant="contained" disabledIcon disabled={isSending} loading={isSending} text={isSending ? 'Enviando ticket...' : 'Enviar'} />
+                </Box>
               </Box>
-            </Box>
             )
         }
         { success

diff --git a/src/components/Tickets/SendTickets/AccountRecuperation.jsx b/src/components/Tickets/SendTickets/AccountRecuperation.jsx
@@ -19,7 +19,6 @@ import axios from 'axios';
 import { error } from '../../../config/toasts';
 import { callToast as toastEmitter } from '../../../redux/toast/toastActions';
 
-
 import { defineErrorMsg } from '../../../config/backend';
 
 import { CODER_MIND_URL } from '../../../config/dataProperties';
@@ -28,7 +27,6 @@ import CustomButton from '../../Buttons/Button';
 
 import { CustomTextField, CustomBox, IconBox } from './styles';
 
-
 function AccountRecuperation(props) {
   const { params, callToast } = props;
 

diff --git a/src/components/Tickets/SendTickets/BugReport.jsx b/src/components/Tickets/SendTickets/BugReport.jsx
@@ -19,7 +19,6 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 
-
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import axios from 'axios';
@@ -95,7 +94,6 @@ function BugReport(props) {
     return data;
   }
 
-
   async function sendTicket() {
     setIsSending(true);
     const data = formatData();
@@ -134,18 +132,18 @@ function BugReport(props) {
             </Box>
           </Box>
           <Box width="100%">
-            <Typography component="span" variant="body2">Este tipo de ticket deve ser enviado caso tenha encontrado algum comportamento da plataforma que julgue ser um bug/erros. </Typography>
+            <Typography component="span" variant="body2">Este tipo de ticket deve ser enviado caso tenha encontrado algum comportamento da plataforma que julgue ser um bug/erro. </Typography>
           </Box>
           <Box width="100%" marginTop="20px">
             <Divider />
           </Box>
         </Box>
         {!success
             && (
-            <Box padding="25px">
+            <Box padding="25px" paddingTop={0}>
               <Box display="flex" flexWrap="wrap" alignItems="flex-start">
                 <CustomFormControl>
-                  <InputLabel>Onde ocorreu o bug?</InputLabel>
+                  <InputLabel>Onde ocorreu o bug? *</InputLabel>
                   <Select
                     value={ticket.software}
                     onChange={(evt) => handleChangeTicket(evt, 'software')}
@@ -172,7 +170,7 @@ function BugReport(props) {
                   />
                 </MuiPickersUtilsProvider>
                 <CustomFormControl>
-                  <InputLabel>Qual dispositivo você estava utilizando?</InputLabel>
+                  <InputLabel>Qual dispositivo você estava utilizando? *</InputLabel>
                   <Select
                     value={ticket.device}
                     onChange={(evt) => handleChangeTicket(evt, 'device')}
@@ -185,7 +183,7 @@ function BugReport(props) {
                         && (
                           <CustomFormControl>
                             <InputLabel>
-                              Qual o navegador utilizado?
+                              Qual o navegador utilizado? *
                             </InputLabel>
                             <Select
                               value={ticket.browser}
@@ -205,25 +203,30 @@ function BugReport(props) {
                         && (
                         <Grid item xs={12} md={5}>
                           <CustomTextField
-                            label="Especifique o browser"
+                            label="Especifique o browser *"
                             value={ticket.anotherBrowser}
                             onChange={(evt) => handleChangeTicket(evt, 'anotherBrowser')}
                           />
                         </Grid>
                         )
                     }
               </Box>
-              <TextField
+              <Box margin="10px">
+                <TextField
 
-                fullWidth
-                multiline
-                rows="10"
-                label="Se possível detalhe o acontecimento"
-                value={ticket.msg}
-                onChange={(evt) => handleChangeTicket(evt, 'msg')}
-              />
-              <Box width="100%" marginTop="15px">
-                <CustomButton onClick={sendTicket} fullWidth color="primary" variant="contained" disabled={isSending} icon="save" loading={isSending} text={isSending ? 'Enviando ticket...' : 'Enviar'} />
+                  fullWidth
+                  multiline
+                  rows="10"
+                  label="Se possível detalhe o acontecimento *"
+                  value={ticket.msg}
+                  onChange={(evt) => handleChangeTicket(evt, 'msg')}
+                />
+              </Box>
+              <Box padding={0.5}>
+                <Typography variant="body2" component="p">* Informações obrigatórias</Typography>
+              </Box>
+              <Box width="100%" marginTop={4}>
+                <CustomButton onClick={sendTicket} fullWidth color="primary" variant="contained" disabled={isSending} icon="save" disabledIcon loading={isSending} text={isSending ? 'Enviando ticket...' : 'Enviar'} />
               </Box>
             </Box>
             )

diff --git a/src/components/Tickets/SendTickets/ImprovementSuggestion.jsx b/src/components/Tickets/SendTickets/ImprovementSuggestion.jsx
@@ -106,7 +106,7 @@ function ImprovementSuggestion(props) {
               Caso a melhoria envolva a correção de algum erro por favor envie um ticket de
               {' '}
               <Button
-                color="primary"
+                color={theme === 'dark' ? 'default' : 'primary'}
                 variant="text"
                 onClick={() => changeType('bug-report')}
                 size="small"
@@ -136,17 +136,22 @@ function ImprovementSuggestion(props) {
                   </FormControl>
                 </Grid>
               </Box>
-              <TextField
-                className="formInput"
-                fullWidth
-                multiline
-                rows="10"
-                label="O que gostaria que melhorasse? *"
-                value={ticket.msg}
-                onChange={(evt) => handleChangeTicket(evt, 'msg')}
-              />
-              <Box width="100%" marginTop="15px">
-                <CustomButton onClick={sendTicket} fullWidth color="primary" variant="contained" disabled={isSending} icon="save" loading={isSending} text={isSending ? 'Enviando ticket...' : 'Enviar'} />
+              <Box marginTop="10px" marginBottom={1}>
+                <TextField
+                  className="formInput"
+                  fullWidth
+                  multiline
+                  rows="10"
+                  label="O que gostaria que melhorasse? *"
+                  value={ticket.msg}
+                  onChange={(evt) => handleChangeTicket(evt, 'msg')}
+                />
+              </Box>
+              <Box padding={0.5}>
+                <Typography variant="body2" component="p">* Informações obrigatórias</Typography>
+              </Box>
+              <Box width="100%" marginTop={4}>
+                <CustomButton onClick={sendTicket} fullWidth color="primary" variant="contained" disabled={isSending} disabledIcon loading={isSending} text={isSending ? 'Enviando ticket...' : 'Enviar'} />
               </Box>
             </Box>
             )

diff --git a/src/components/Tickets/SendTickets/Ticket.jsx b/src/components/Tickets/SendTickets/Ticket.jsx
@@ -22,14 +22,12 @@ import Header from '@/components/Header.jsx';
 import { devices } from '@/config/devices';
 import { scrollToTop } from '@/shared/index';
 
-
 import WhatIsTicketDialog from './WhatIsTicketDialog';
 import AccountProblem from './AccountProblem';
 import BugReport from './BugReport';
 import ImprovementSuggestion from './ImprovementSuggestion';
 import AccountRecuperation from './AccountRecuperation';
 
-
 import { CustomCard, CustomCardActions, CustomPaper } from './styles';
 
 function Ticket(props) {

diff --git a/src/components/Tickets/SendTickets/WhatIsTicketDialog.jsx b/src/components/Tickets/SendTickets/WhatIsTicketDialog.jsx
@@ -30,7 +30,12 @@ function WhatIsTicketDialog(props) {
         <Grid item xs={12}>
           <Box width="100%" display="flex" alignItems="center" flexDirection="column">
             <Typography component="p" variant="body1">Ticket é a via de comunicação entre administradores e autores sobre quaisquer assuntos técnicos da plataforma.</Typography>
-            <Typography component="p" variant="body1">Todo problema relacionado a plataforma, sugestão de melhorias, reporte de bugs devem ser comunicados aqui.</Typography>
+            <Typography component="p" variant="body1">
+              Todo problema relacionado a
+              {' '}
+              <i>&copy; Coder Mind</i>
+              , sugestão de melhorias, reporte de bugs devem ser comunicados aqui.
+            </Typography>
             <Typography component="p" variant="body1">Informe o tipo de ticket e em seguida envie sua mensagem, você será respondido em breve!</Typography>
           </Box>
         </Grid>

diff --git a/src/components/Tickets/SendTickets/styles.js b/src/components/Tickets/SendTickets/styles.js
@@ -11,10 +11,9 @@ import {
 import { devices } from '@/config/devices';
 import { KeyboardDateTimePicker } from '@material-ui/pickers';
 
-
 export const CustomCard = styled(Card)({
   width: '30%',
-  minHeight: '250px',
+  minHeight: '300px',
   margin: '10px',
   display: 'flex',
   flexDirection: 'column',
@@ -24,6 +23,7 @@ export const CustomCard = styled(Card)({
     width: '40%',
   },
   [devices.tablet]: {
+    minHeight: '250px',
     width: '100%',
   },
 });
@@ -43,23 +43,23 @@ export const CustomCardActions = styled(CardActions)({
 export const CustomTextField = styled(TextField)({
   margin: '10px',
   width: '320px',
-  [devices.mobileLarge]: {
+  [devices.tablet]: {
     width: '100%',
   },
 });
 
 export const CustomFormControl = styled(FormControl)({
   margin: '10px',
   width: '320px',
-  [devices.mobileLarge]: {
+  [devices.tablet]: {
     width: '100%',
   },
 });
 
 export const CustomKeyboardDateTimePicker = styled(KeyboardDateTimePicker)({
   margin: '10px',
   width: '320px',
-  [devices.mobileLarge]: {
+  [devices.tablet]: {
     width: '100%',
   },
 });

diff --git a/src/config/backend.js b/src/config/backend.js
@@ -12,7 +12,11 @@ const defineErrorMsg = (error) => {
     errorMsg = 'Ops, não conseguimos conectar ao servidor, tente novamente mais tarde!';
   }
   if (error.response && error.response.data) {
-    errorMsg = typeof error.response.data === 'string' ? error.response.data : error.response.data.msg;
+    if (typeof error.response.data === 'string') {
+      errorMsg = error.response.data;
+    } else {
+      errorMsg = error.response.data.message || error.response.data.msg;
+    }
   }
 
   return errorMsg;