From 57c7e9406aa935b7939cc69f0e027982e67bda84 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 25 Aug 2021 07:01:30 -0300
Subject: [PATCH] Accessibility
---
src/Components/CriarColecaoForm.js | 9 +-
src/Components/Cropper.js | 167 ++++---
src/Components/EditarColecaoForm.js | 12 +-
src/Components/GreyButton.js | 9 +-
src/Components/GuardarModal.js | 7 +-
src/Components/MenuList.js | 141 +++---
.../ComponentAlterarAvatar.js | 140 +++---
.../ModalAlterarAvatar/ModalAlterarAvatar.js | 6 +-
.../ComponentAlterarCover.js | 107 +++--
.../ModalAlterarCover/ModalAlterarCover.js | 8 +-
src/Components/ModalConfirmarUnfollow.js | 18 +-
src/Components/ModalEditarColecao.js | 1 -
src/Components/ReportColecaoForm.js | 8 +-
src/Components/ReportModal.js | 4 +-
src/Components/ReportUserForm.js | 12 +-
src/Components/ShareModal.js | 19 +-
.../TabPanels/PanelComponents/ButtonsArea.js | 3 -
.../PanelComponents/TemplateRecurso.js | 2 +-
src/Components/TabPanels/StyledComponents.js | 14 +-
.../UserPageTabs/ModalExcluirConta.js | 38 +-
.../TabPanels/UserPageTabs/PanelAtividades.js | 412 +++++++++---------
.../UserPageTabs/PanelEditarPerfil.js | 9 +-
.../UserPageTabs/PanelGerenciarConta.js | 2 +-
src/Components/UserPageComponents/Cover.js | 1 +
.../UserPageComponents/EditProfileButton.js | 61 ++-
src/Pages/UserPage.js | 4 +-
26 files changed, 598 insertions(+), 616 deletions(-)
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index 63795cdb..0bcca5a2 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -130,15 +130,13 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
@@ -160,9 +158,6 @@ export const ButtonEnviar = styled(Button)`
margin : 6px 8px !important;
text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
diff --git a/src/Components/Cropper.js b/src/Components/Cropper.js
index ccccc4c2..277b5c31 100644
--- a/src/Components/Cropper.js
+++ b/src/Components/Cropper.js
@@ -20,97 +20,92 @@ import React, { PureComponent } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
-
export default class Cropper extends PureComponent {
- state = {
- src: this.props.src,
- crop:this.props.crop
- };
-
-
- // If you setState the crop in here you should return false.
- onImageLoaded = image => {
- this.imageRef = image;
- };
-
- onCropComplete = crop => {
- this.makeClientCrop(crop);
- };
-
- onCropChange = (crop, percentCrop) => {
- // You could also use percentCrop:
- // this.setState({ crop: percentCrop });
- this.setState({ crop });
- };
+ state = {
+ src: this.props.src,
+ crop:this.props.crop
+ };
+
+ // If you setState the crop in here you should return false.
+ onImageLoaded = image => {
+ this.imageRef = image;
+ };
+
+ onCropComplete = crop => {
+ this.makeClientCrop(crop);
+ };
+
+ onCropChange = (crop, percentCrop) => {
+ // You could also use percentCrop:
+ // this.setState({ crop: percentCrop });
+ this.setState({ crop });
+ };
+
+ async makeClientCrop(crop) {
+ if (this.imageRef && crop.width && crop.height) {
+ // eslint-disable-next-line
+ const croppedImageUrl = await this.getCroppedImg(
+ this.imageRef,
+ crop,
+ 'newFile.jpeg'
+ );
+ }
+ }
- async makeClientCrop(crop) {
- if (this.imageRef && crop.width && crop.height) {
- // eslint-disable-next-line
- const croppedImageUrl = await this.getCroppedImg(
- this.imageRef,
- crop,
- 'newFile.jpeg'
- );
+ getCroppedImg(image, crop, fileName) {
+ const canvas = document.createElement('canvas');
+ const scaleX = image.naturalWidth / image.width;
+ const scaleY = image.naturalHeight / image.height;
+ canvas.width = crop.width;
+ canvas.height = crop.height;
+ const ctx = canvas.getContext('2d');
+
+ ctx.drawImage(
+ image,
+ crop.x * scaleX,
+ crop.y * scaleY,
+ crop.width * scaleX,
+ crop.height * scaleY,
+ 0,
+ 0,
+ crop.width,
+ crop.height
+ );
+ const reader = new FileReader();
+ canvas.toBlob(blob => {
+ reader.readAsDataURL(blob)
+ reader.onloadend = () => {
+ // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
+ this.props.update(reader.result)
+ }
+ })
+ }
+ render() {
+ // eslint-disable-next-line
+ const { crop, croppedImageUrl, src } = this.state;
+
+ return (
+ <>
+ {src && (
+ <ReactCrop
+ src={src}
+ crop={crop}
+ circularCrop={this.props.circularCrop}
+ onImageLoaded={this.onImageLoaded}
+ onComplete={this.onCropComplete}
+ onChange={this.onCropChange}
+ style={{maxHeight : "100%", maxWidth : "100%"}}
+ imageStyle={{maxHeight : "100%", maxWidth : "100%"}}
+ />
+ )}
+ {/*croppedImageUrl && (
+ <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
+ )*/}
+ </>
+ );
}
- }
-
-
-
- getCroppedImg(image, crop, fileName) {
- const canvas = document.createElement('canvas');
- const scaleX = image.naturalWidth / image.width;
- const scaleY = image.naturalHeight / image.height;
- canvas.width = crop.width;
- canvas.height = crop.height;
- const ctx = canvas.getContext('2d');
-
- ctx.drawImage(
- image,
- crop.x * scaleX,
- crop.y * scaleY,
- crop.width * scaleX,
- crop.height * scaleY,
- 0,
- 0,
- crop.width,
- crop.height
- );
- const reader = new FileReader();
- canvas.toBlob(blob => {
- reader.readAsDataURL(blob)
- reader.onloadend = () => {
- // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
- this.props.update(reader.result)
- }
- })
-
- }
-
- render() {
- // eslint-disable-next-line
- const { crop, croppedImageUrl, src } = this.state;
-
- return (
- <>
- {src && (
- <ReactCrop
- src={src}
- crop={crop}
- circularCrop={this.props.circularCrop}
- onImageLoaded={this.onImageLoaded}
- onComplete={this.onCropComplete}
- onChange={this.onCropChange}
- style={{maxHeight : "300px", maxWidth : "100%"}}
- />
- )}
- {/*croppedImageUrl && (
- <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
- )*/}
- </>
- );
- }
}
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index 37d8b3f3..67b1e4d9 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -154,8 +154,8 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -167,10 +167,10 @@ export const ButtonCancelar = styled(Button)`
`
export const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
diff --git a/src/Components/GreyButton.js b/src/Components/GreyButton.js
index a2d687d5..10123e02 100644
--- a/src/Components/GreyButton.js
+++ b/src/Components/GreyButton.js
@@ -22,21 +22,18 @@ import styled from 'styled-components'
export default function GreyButton (props) {
return (
- <StyledButton onClick={props.callback}>
+ <StyledButton onClick={props.callback} contrast={props.contrast}>
{props.text}
</StyledButton>
)
}
const StyledButton = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 7c45a5a6..2b78de86 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -141,7 +141,7 @@ export default function GuardarModal(props) {
<Content style={{ paddingTop: "0" }}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso" />
- <div className="text">
+ <div>
<h3>{props.title}</h3>
</div>
</ResourceInfo>
@@ -322,12 +322,12 @@ const ResourceInfo = styled.div`
flex-direction : column;
align-items : center;
align-content : center;
- max-wdith : 100%;
+ max-width : 100%;
justify-content : space-between;
.text {
max-height : 100%;
- max-width : 66.66%;
+ max-width : 100%;
display : flex;
flex-direction : column;
text-align : center;
@@ -420,6 +420,5 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index 61f564d4..29812aeb 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -31,86 +31,81 @@ import { deleteRequest } from './HelperFunctions/getAxiosConfig'
//Image Import
import { Profile } from "ImportImages.js";
-
const OverrideButton = styled(Button)`
text-transform : none !important;
`
export default function MenuList(props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const { state, dispatch } = useContext(Store)
-
- const handleClick = event => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- function handleSuccessSignOut(data) {
- dispatch({
- type: 'USER_LOGGED_OUT',
- userLoggedOut: !state.userIsLoggedIn,
- })
- }
- const handleLogout = () => {
- const url = `/auth/sign_out`
- deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
- }
-
- return (
- <div >
-
- <OverrideButton
- aria-controls="customized-menu"
- aria-haspopup="true"
- onMouseOver={handleClick}
- >
- <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}>
- {
- state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
- (
-
- <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
- ) :
- (
- <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
- )
- }
- </div>
- <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Ãrea </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/>
- </OverrideButton>
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const { state, dispatch } = useContext(Store)
+
+ const handleClick = event => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ function handleSuccessSignOut(data) {
+ dispatch({
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ })
+ }
+ const handleLogout = () => {
+ const url = `/auth/sign_out`
+ deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
+ }
- <Menu
- anchorEl={anchorEl}
- open={Boolean(anchorEl)}
- onClose={handleClose}
- elevation={0}
- getContentAnchorEl={null}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}>
- <div className={`${state.contrast}BackColor`}>
- {
- props.items.map((item) =>
- <Link to={{
- pathname: item.href,
- state: item.value
- }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
- )
- }
+ return (
+ <div >
+ <OverrideButton
+ aria-controls="customized-menu"
+ aria-haspopup="true"
+ onClick={handleClick}
+ >
+ <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}>
+ {
+ state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
+ (
+ <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
+ ) :
+ (
+ <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
+ )
+ }
+ </div>
+ <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Ãrea </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/>
+ </OverrideButton>
+ <Menu
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}>
+ <div className={`${state.contrast}BackColor`}>
+ {
+ props.items.map((item) =>
+ <Link to={{
+ pathname: item.href,
+ state: item.value
+ }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
+ )
+ }
+ </div>
+ <StyledButtonSair className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
+ </Menu>
</div>
-
- <StyledButtonSair className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
- </Menu>
- </div>
- );
+ );
}
const StyledButtonSair = styled(Button)`
diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index cfb8ba92..eea67935 100644
--- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -37,13 +37,13 @@ function ChooseImage (props) {
<img src={props.avatar}
alt="user avatar" style={{height:"inherit", width:"inherit", objectFit:"cover"}}
/>
- <input accept="image/*" id="avatar-file"
- type="file"
- onChange={(e) => props.handleFile(e.target.files)}
- style={{display : "none"}}
+ <input accept="image/*" id="avatar-file"
+ type="file"
+ onChange={(e) => props.handleFile(e.target.files)}
+ style={{display : "none"}}
/>
<label for="avatar-file" style={{width:"inherit"}}>
- <ChangeAvatarDiv >
+ <ChangeAvatarDiv contrast={props.contrast}>
<span>Alterar</span>
</ChangeAvatarDiv>
</label>
@@ -55,12 +55,9 @@ function ChooseImage (props) {
<img alt="" src={props.tempImg}/>
}
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>
<span>Cancelar</span>
</ButtonCancelar>
- <ButtonConfirmar>
- <span>Salvar Alterações</span>
- </ButtonConfirmar>
</ButtonsDiv>
</div>
)
@@ -110,7 +107,7 @@ export default function ComponentAlterarAvatar (props) {
}
return (
- <ModalDiv>
+ <ModalDiv contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2>
@@ -124,7 +121,7 @@ export default function ComponentAlterarAvatar (props) {
(
[
<>
- <EditarDiv>
+ <EditarDiv contrast={props.contrast}>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
@@ -133,11 +130,8 @@ export default function ComponentAlterarAvatar (props) {
</div>
</EditarDiv>
<FooterButtonsDiv>
- <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
- <div>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
- </div>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
</FooterButtonsDiv>
</>
]
@@ -147,11 +141,12 @@ export default function ComponentAlterarAvatar (props) {
[
<>
<ChooseImage
+ contrast={props.contrast}
avatar={props.userAvatar === '' || props.userAvatar == null ? Profile : `${apiDomain}` + props.userAvatar}
handleFile={handleFile}
handleClose={props.handleClose}
tempImg={tempImgURL}
- />
+ />
</>
]
)
@@ -167,9 +162,9 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : space-between;
+ justify-content : flex-end;
Button {
- margin-top : 20px;
+ margin-left: 15px;
}
`
@@ -181,13 +176,15 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
padding : 20px 30px 40px;
`
const ChangeAvatarDiv = styled.div`
- color : rgba(255,255,255,.7);
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,.7)" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
background-color:rgba(0,0,0,.5);
position: absolute;
bottom: 0;
@@ -204,91 +201,92 @@ const ChangeAvatarDiv = styled.div`
`
const ModalDiv = styled.div`
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
border-radius : 4px;
- min-width : 560px;
- color : #666;
display: flex;
flex-direction : column;
@media screen and (max-width: 959px) {
- height : 100%;
width : 100%;
}
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
`
const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: transparent;
outline : none !important;
text-align : center !important;
`
const ButtonsDiv = styled.div`
-display : flex;
-justify-content:flex-end;
+ Button {
+ margin-left: 15px;
+ }
+ display : flex;
+ justify-content:flex-end;
`
const AvatarCircleDiv = styled.div`
-margin-bottom : 0;
-border-radius : 50%;
-height : 150px;
-width : 150px;
-position : relative;
-overflow: hidden;
+ margin-bottom : 0;
+ border-radius : 50%;
+ height : 150px;
+ width : 150px;
+ position : relative;
+ overflow: hidden;
`
const DivFlowHolder =styled.div`
-align-self : auto;
+ align-self : auto;
`
const DivAlterarFoto = styled.div`
-display : flex;
-margin-bottom : 30px;
-flex-direction : row;
-align-items : center;
-justify-content :center;
+ display : flex;
+ margin-bottom : 30px;
+ flex-direction : row;
+ align-items : center;
+ justify-content :center;
`
const DialogDiv = styled.div`
-padding : 20px 30px;
-overflow : visible !important;
+ padding : 20px 30px;
+ overflow : visible !important;
`
const HeaderDiv = styled.div`
-display : flex;
-flex-direction : row;
-align-items : center;
-align-content : center;
-justify-content : space-between;
-max-width : 100%;
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ align-content : center;
+ justify-content : space-between;
+ max-width : 100%;
`
const StyledH2 = styled.h2`
-font-size : 26px;
-font-weight : normal;
-margin-top : 20px;
-margin-bottom : 10px;
-font-family: inherit;
-line-height: 1.1;
-color: inherit;
+ font-size : 26px;
+ font-weight : normal;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ font-family: inherit;
+ line-height: 1.1;
+ color: inherit;
`
const StyledCloseModalButton = styled(Button)`
-display : inline-block;
-position : relative;
-float : right !important;
-background : transparent !important;
-min-width: 0 !important;
-width : 40px;
-border-radius : 50%;
-padding : 8px;
-height : 40px;
-margin : 0 6px;
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+ border-radius : 50%;
+ padding : 8px;
+ height : 40px;
+ margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
index 73583204..59fb07c7 100644
--- a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
@@ -31,10 +31,8 @@ const StyledModal = styled(Modal)`
padding : 10px !important;
`
-export default function ModarAlterarAvatar (props){
-
+export default function ModalAlterarAvatar (props){
return (
-
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
@@ -51,12 +49,12 @@ export default function ModarAlterarAvatar (props){
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<ComponentAlterarAvatar
+ contrast={props.contrast}
userAvatar={props.userAvatar}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
-
)
}
diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
index 18df65d3..72ad9886 100644
--- a/src/Components/ModalAlterarCover/ComponentAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
@@ -34,7 +34,7 @@ export default function ComponentAlterarCover (props) {
const [crop] = useState({
unit: "%" ,
width : 100,
- aspect: 16 / 9
+ aspect: 16 / 3.2
});
function handleSuccess (data) {
@@ -58,7 +58,7 @@ export default function ComponentAlterarCover (props) {
}
return (
- <ModalDiv>
+ <ModalDiv contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Capa do Perfil</StyledH2>
@@ -67,40 +67,38 @@ export default function ComponentAlterarCover (props) {
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
- <EditarDiv>
+ <EditarDiv contrast={props.contrast}>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
- <div style={{maxWidth : "500px", maxHeight : "300px"}}>
+ <div style={{maxWidth : "100%", maxHeight : "100%"}}>
<Cropper src={tempImgURL} crop={crop} update={updateCover}/>
</div>
</EditarDiv>
<FooterButtonsDiv>
- <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
<div>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
</div>
</FooterButtonsDiv>
</DialogDiv>
- </ModalDiv>
- )
+ </ModalDiv>
+ )
}
const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: transparent;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
`
@@ -109,13 +107,12 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : space-between;
+ justify-content : flex-end;
Button {
margin-top : 20px;
}
`
-
const TextoEditarDiv = styled.div`
margin-bottom : 15px;
align-self : center;
@@ -124,55 +121,55 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
- padding : 20px 30px 40px;
`
const ModalDiv = styled.div`
-background-color : #fff;
-border-radius : 4px;
-min-width : 560px;
-color : #666;
-display: flex;
-flex-direction : column;
-@media screen and (max-width: 959px) {
- height : 100%;
- width : 100%;
-}
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border-radius : 4px;
+ width : 560px;
+ display: flex;
+ flex-direction : column;
+ @media screen and (max-width: 959px) {
+ width : 100%;
+ }
`
const DialogDiv = styled.div`
-padding : 20px 30px;
-overflow : visible !important;
+ padding : 20px 30px;
+ overflow : visible !important;
`
const HeaderDiv = styled.div`
-display : flex;
-flex-direction : row;
-align-items : center;
-align-content : center;
-justify-content : space-between;
-max-width : 100%;
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ align-content : center;
+ justify-content : space-between;
+ max-width : 100%;
`
const StyledH2 = styled.h2`
-font-size : 26px;
-font-weight : normal;
-margin-top : 20px;
-margin-bottom : 10px;
-font-family: inherit;
-line-height: 1.1;
-color: inherit;
+ font-size : 26px;
+ font-weight : normal;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ font-family: inherit;
+ line-height: 1.1;
+ color: inherit;
`
const StyledCloseModalButton = styled(Button)`
-display : inline-block;
-position : relative;
-float : right !important;
-background : transparent !important;
-min-width: 0 !important;
-width : 40px;
-border-radius : 50%;
-padding : 8px;
-height : 40px;
-margin : 0 6px;
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+ border-radius : 50%;
+ padding : 8px;
+ height : 40px;
+ margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarCover/ModalAlterarCover.js b/src/Components/ModalAlterarCover/ModalAlterarCover.js
index 7e971f58..d572530f 100644
--- a/src/Components/ModalAlterarCover/ModalAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ModalAlterarCover.js
@@ -32,14 +32,11 @@ const StyledModal = styled(Modal)`
`
export default function ModarAlterarCover (props){
-
return (
-
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -47,16 +44,15 @@ export default function ModarAlterarCover (props){
BackdropProps={{
timeout: 500,
}}
- >
+ >
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
-
<ComponentAlterarCover
+ contrast={props.contrast}
cover={props.cover}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
-
)
}
diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js
index e8cd5d1e..a7951b70 100644
--- a/src/Components/ModalConfirmarUnfollow.js
+++ b/src/Components/ModalConfirmarUnfollow.js
@@ -34,9 +34,9 @@ const HeaderDiv = styled.div`
}
`
const ContentContainer = styled.div`
-color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
-background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
-border: ${props => props.contrast === "" ? "1px solid black !important" : "1px solid white !important"};
+color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+border: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"} !important;
box-sizing : border-box;
max-width : none;
@@ -55,8 +55,8 @@ border: ${props => props.contrast === "" ? "1px solid black !important" : "1px s
}
`
const ButtonCancelar = styled(Button)`
-color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
-text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
&:hover {
background-color : rgba(158,158,158,0.2) !important;
@@ -66,10 +66,10 @@ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow
`
const ButtonConfirmar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
border-radius : 3px !important;
`
diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js
index b9fe9bd9..52c7d5c4 100644
--- a/src/Components/ModalEditarColecao.js
+++ b/src/Components/ModalEditarColecao.js
@@ -114,6 +114,5 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index f2ec9fcb..6c5a79a7 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -115,10 +115,10 @@ export default function ReportColecaoForm (props) {
}
const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index ab7a7678..eb3d7395 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -119,10 +119,10 @@ export default function ReportModal (props) {
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
- max-width : 470px;
`
const Header = styled.div`
+ text-align : center;
display : flex;
flex-direction : row;
padding : 10px 26px 0 26px;
@@ -153,7 +153,6 @@ const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
- text-align : center;
padding : 10px !important;
max-width : none;
max-height : none;
@@ -173,6 +172,5 @@ const ReportContainer = styled.div`
@media screen and (max-width : 899px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 1677c489..28321b53 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -137,8 +137,8 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -150,10 +150,10 @@ export const ButtonCancelar = styled(Button)`
`
export const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index 0e4f6791..9e6835e9 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -57,13 +57,13 @@ export default function ShareModal (props) {
<Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{width:"32px"}}/>
- <h2>Compartilhar este recurso</h2>
+ <h2>Compartilhar recurso</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content style={{paddingTop : "0"}}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso"/>
- <div className="text">
+ <div>
<strong>{props.title}</strong>
</div>
</ResourceInfo>
@@ -74,7 +74,7 @@ export default function ShareModal (props) {
<Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
{/*Share to facebook*/}
- <Grid item xs={4}>
+ <Grid item xs={6} md={4}>
<StyledLink
href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
rel="noreferrer"
@@ -87,7 +87,7 @@ export default function ShareModal (props) {
</Grid>
{/*Share to Twitter*/}
- <Grid item xs={4}>
+ <Grid item xs={6} md={4}>
<StyledLink
href={"https://www.twitter.com/intent/tweet?url=" + props.link}
rel="noreferrer"
@@ -100,7 +100,7 @@ export default function ShareModal (props) {
</Grid>
{/*Get shareable link*/}
- <Grid item xs={4}>
+ <Grid item xs={12} md={4}>
{
document.queryCommandSupported('copy') &&
<ShareButton className={`${props.contrast}LinkColor`} onClick={copyToClipboard}>
@@ -148,7 +148,7 @@ const ShareInfo = styled.div`
`
const ResourceInfo = styled.div`
- margin-top : 0;
+ margin-top : 15px;
overflow : hidden;
border-radius : 5px;
display : flex;
@@ -175,7 +175,7 @@ const ResourceInfo = styled.div`
float : left;
padding : 0;
- @media screen and (min-width : 600px) {
+ @media screen and (min-width : 769px) {
margin-right : 20px;
margin-bottom : 0;
}
@@ -184,6 +184,10 @@ const ResourceInfo = styled.div`
}
}
+ @media screen and (max-width : 768px) {
+ flex-direction : column;
+ }
+
`
const Content = styled.div`
@@ -237,7 +241,6 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
const StyledLink = styled.a`
diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
index da75ecab..ac5ad926 100644
--- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js
+++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
@@ -126,7 +126,6 @@ const ButtonMostrarMaisRede = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
export const ButtonMostrarMaisColecao = styled(Button)`
@@ -148,7 +147,6 @@ export const ButtonMostrarMaisColecao = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
export const ButtonMostrarMaisRecurso = styled(Button)`
@@ -170,5 +168,4 @@ export const ButtonMostrarMaisRecurso = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index 74815059..7667fb6f 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -57,7 +57,7 @@ export default function Template(props) {
:
(
<React.Fragment>
- <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "30px" }}>
{
props.slice.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index 9e3ee1c8..88b12113 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -185,11 +185,23 @@ export const UserProfileContainer = styled.div`
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
+ @media screen and (max-width: 600px) {
+ width : 100%;
+ }
`
export const CoverContainer = styled.div`
- height : 230px;
position : relative;
+
+ @media screen and (min-width: 1200px) {
+ height : 234px;
+ }
+ @media screen and (min-width: 992px) and (max-width : 1199px){
+ height : 194px;
+ }
+ @media screen and (min-width: 768px) and (max-width : 991px) {
+ height : 150px;
+ }
@media screen and (max-width: 600px) {
height : 128px
}
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 65f504c1..19f4c6e4 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -46,8 +46,8 @@ export default function ModalExcluirConta (props) {
const [formEmail, setEmail] = useState(
{
- key : false,
- value : "",
+ key : true,
+ value : "",
}
)
const handleChange = (e) => {
@@ -92,19 +92,19 @@ export default function ModalExcluirConta (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>Excluir a Conta Definitivamente</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content>
- <div style={{display : "flex", flexDirection : "column", color : "#666", textAlign : "left"}}>
+ <div style={{display : "flex", flexDirection : "column", textAlign : "left"}}>
<div style={{display : "flex", flexDirection : "row", margin : "0 30px", justifyContent : "center", alignContent : "center"}}>
<div style={{height : "90px", position : "relative"}}>
<img src={ExcluirAvatar} alt="excluir-avatar" style={{height : "inherit", objectFit : "contain", verticalAlign : "middle"}}/>
</div>
- <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato">Entre em contato.</StyledLink></p>
+ <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato" className={`${props.contrast}LinkColor`}>Entre em contato.</StyledLink></p>
</div>
<p style={{marginTop : "20px"}}>
Saiba que a exclusão da conta removerá o seu perfil permanentemente. Se você publicou algum recurso, ele ainda ficará disponÃvel para os usuários da plataforma.
@@ -113,6 +113,7 @@ export default function ModalExcluirConta (props) {
É necessário que você digite seu e-mail para confirmar a exclusão:
</p>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
@@ -122,9 +123,9 @@ export default function ModalExcluirConta (props) {
error = {formEmail.key}
help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "O e-mail deve ser o mesmo no qual você cadastrou esta conta") : ""}
/>
- <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
- <GreyButton callback={props.handleClose} text={"Cancelar"}/>
- <RedButton disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
+ <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
+ <GreyButton contrast={props.contrast} callback={props.handleClose} text={"Cancelar"}/>
+ <RedButton contrast={props.contrast} disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
</div>
</div>
</Content>
@@ -136,10 +137,17 @@ export default function ModalExcluirConta (props) {
}
const RedButton = styled(Button)`
- background-color : rgb(230,60,60) !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ background-color : ${props => props.contrast === "" ? "rgb(230,60,60)" : "black"} !important;
font-weight : bolder;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+
+ :disabled {
+ color: ${props => props.contrast === "" ? "white" : "white"} !important;
+ text-decoration : none !important;
+ background-color : ${props => props.contrast === "" ? "#666" : "black"} !important;
+ }
`
const Content = styled.div`
@@ -158,7 +166,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -186,9 +193,12 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -210,6 +220,6 @@ const Container = styled.div`
}
`
const StyledLink = styled(Link)`
- text-decoration : none !important;
- color : #00bcd4 !important;
+ text-decoration : none;
+ color : #00bcd4;
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 4d0e391b..7e771677 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -34,229 +34,230 @@ import { noAvatar } from "ImportImages.js";
export default function TabPanelAtividades(props) {
- const [loading, handleLoading] = useState(true)
- const [loadingMore, handleLoadingMore] = useState(false);
- const [notifications, setNotifications] = useState([]);
- const [notificatonsLength, setLength] = useState(0);
- const [totalResults, setTotalResults] = useState(0);
- const [limit, setLimit] = useState(30);
- const [error, setError] = useState(false)
- const [snackInfo, setSnackInfo] = useState({
- open: false,
- text: '',
- severity: '',
- color: '',
- })
-
- function handleCloseSnackBar() {
- const info = {
- open: false,
- text: '',
- severity: '',
- color: '',
- }
- handleSnackInfo(info)
- }
-
- function handleSnackInfo(info) {
- setSnackInfo({
- ...info
+ const [loading, handleLoading] = useState(true)
+ const [loadingMore, handleLoadingMore] = useState(false);
+ const [notifications, setNotifications] = useState([]);
+ const [notificatonsLength, setLength] = useState(0);
+ const [totalResults, setTotalResults] = useState(0);
+ const [limit, setLimit] = useState(30);
+ const [error, setError] = useState(false)
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: '',
+ severity: '',
+ color: '',
})
- }
-
- const showMore = (offset) => {
- handleLoadingMore(true);
- const url = `/feed?offset=${limit}&limit=${offset}`
- setLimit(limit + offset)
- getRequest(url, handleSuccess, handleError)
- }
- function handleError(error) {
- const info = {
- open: true,
- text: 'Ocorreu um erro ao tentar carregar suas notificações!',
- severity: 'error',
- color: 'red',
+ function handleCloseSnackBar() {
+ const info = {
+ open: false,
+ text: '',
+ severity: '',
+ color: '',
+ }
+ handleSnackInfo(info)
}
- handleSnackInfo(info)
- handleLoadingMore(false)
- handleLoading(false)
- setError(true)
- }
- function handleSuccess(data, header) {
- if (header.has('X-Total-Count')) {
- setTotalResults(header.get('X-Total-Count'));
+ function handleSnackInfo(info) {
+ setSnackInfo({
+ ...info
+ })
}
- if (data.errors) {
- const info = {
- open: true,
- text: 'Ocorreu um erro ao tentar carregar suas notificações!',
- severity: 'error',
- color: 'red',
- }
- handleSnackInfo(info)
- handleLoadingMore(false)
- handleLoading(false)
- setError(true)
+
+ const showMore = (offset) => {
+ handleLoadingMore(true);
+ const url = `/feed?offset=${limit}&limit=${offset}`
+ setLimit(limit + offset)
+ getRequest(url, handleSuccess, handleError)
}
- else {
- if (data.length >= 1) {
- handleLoadingMore(false)
- let currData = [...notifications]
- currData = currData.concat(data)
- setNotifications(currData)
- setLength(currData.length)
- handleLoading(false)
- }
- else {
+
+ function handleError(error) {
const info = {
- open: true,
- text: 'Não há mais notificações para serem carregadas...',
- severity: 'warning',
- color: '#FFC125'
+ open: true,
+ text: 'Ocorreu um erro ao tentar carregar suas notificações!',
+ severity: 'error',
+ color: 'red',
}
handleSnackInfo(info)
handleLoadingMore(false)
handleLoading(false)
- }
+ setError(true)
+ }
+
+ function handleSuccess(data, header) {
+ if (header.has('X-Total-Count')) {
+ setTotalResults(header.get('X-Total-Count'));
+ }
+ if (data.errors) {
+ const info = {
+ open: true,
+ text: 'Ocorreu um erro ao tentar carregar suas notificações!',
+ severity: 'error',
+ color: 'red',
+ }
+ handleSnackInfo(info)
+ handleLoadingMore(false)
+ handleLoading(false)
+ setError(true)
+ }
+ else {
+ if (data.length >= 1) {
+ handleLoadingMore(false)
+ let currData = [...notifications]
+ currData = currData.concat(data)
+ setNotifications(currData)
+ setLength(currData.length)
+ handleLoading(false)
+ }
+ else {
+ const info = {
+ open: true,
+ text: 'Não há mais notificações para serem carregadas...',
+ severity: 'warning',
+ color: '#FFC125'
+ }
+ handleSnackInfo(info)
+ handleLoadingMore(false)
+ handleLoading(false)
+ }
+ }
}
- }
- useEffect(() => {
- const url = `/feed?offset=0&limit=30`
- getRequest(url, handleSuccess, handleError)
- }, [])
+ useEffect(() => {
+ const url = `/feed?offset=0&limit=30`
+
+ getRequest(url, handleSuccess, handleError)
+ }, [])
- return (
- <MainContainerDesktop contrast={props.contrast}>
- <SnackBar
- snackbarOpen={snackInfo.open}
- handleClose={handleCloseSnackBar}
- severity={snackInfo.severity}
- color={snackInfo.color}
- text={snackInfo.text}
- />
- <Paper elevation={3}>
- <div style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <DivTitulo>
- <InnerDivTitulo>
- <TituloContent contrast={props.contrast}>
- <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
- </TituloContent>
- </InnerDivTitulo>
- </DivTitulo>
- {
- loading ?
- (
- <LoadingSpinner text={'Carregando Atividades'} contrast={props.contrast} />
- )
- :
- (
- [
- <div>
+ return (
+ <MainContainerDesktop contrast={props.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnackBar}
+ severity={snackInfo.severity}
+ color={snackInfo.color}
+ text={snackInfo.text}
+ />
+ <Paper elevation={3}>
+ <div style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <DivTitulo>
+ <InnerDivTitulo>
+ <TituloContent contrast={props.contrast}>
+ <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
+ </TituloContent>
+ </InnerDivTitulo>
+ </DivTitulo>
{
- error ?
- <ErrorP
- contrast={props.contrast}
- >
- Erro ao tentar obter as notificações
- </ErrorP>
+ loading ?
+ (
+ <LoadingSpinner text={'Carregando Atividades'} contrast={props.contrast} />
+ )
:
- notificatonsLength === 0 ?
- (
+ (
+ [
+ <div>
+ {
+ error ?
+ <ErrorP
+ contrast={props.contrast}
+ >
+ Erro ao tentar obter as notificações
+ </ErrorP>
+ :
+ notificatonsLength === 0 ?
+ (
- <NoNotificationsDiv>
- <div>
- <div>
- <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
- <H3Styled contrast={props.contrast}>Você se cadastrou na Plataforma</H3Styled>
- </div>
- <InfoP
- contrast={props.contrast}
- >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
- <br />
- com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
- </InfoP>
- </div>
- </NoNotificationsDiv>
+ <NoNotificationsDiv>
+ <div>
+ <div>
+ <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
+ <H3Styled contrast={props.contrast}>Você se cadastrou na Plataforma</H3Styled>
+ </div>
+ <InfoP
+ contrast={props.contrast}
+ >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
+ <br />com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
+ </InfoP>
+ </div>
+ </NoNotificationsDiv>
- )
- :
- (
- <>
- <List height={400} width={300}>
- {
- notifications.map((notification, id) =>
- (notification.recipient_type !== "NilClass") &&
- <ActivityListItem
- contrast={props.contrast}
- key={id}
- onMenuBar={false}
- avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
- activity={notification.activity}
- actionType={notification.trackable_type}
- objectType={notification.recipient_type}
- createdAt={notification.created_at}
- ownerName={notification.owner.name}
- ownerHref={'/usuario-publico/' + notification.owner.id}
- recipientName={notification.recipient.name}
- recipientHref={"/recurso/" + notification.recipient.id}
- />
- )
+ )
+ :
+ (
+ <>
+ <List height={400} width={300}>
+ {
+ notifications.map((notification, id) =>
+ (notification.recipient_type !== "NilClass") &&
+ <ActivityListItem
+ contrast={props.contrast}
+ key={id}
+ onMenuBar={false}
+ avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
+ activity={notification.activity}
+ actionType={notification.trackable_type}
+ objectType={notification.recipient_type}
+ createdAt={notification.created_at}
+ ownerName={notification.owner.name}
+ ownerHref={'/usuario-publico/' + notification.owner.id}
+ recipientName={notification.recipient.name}
+ recipientHref={"/recurso/" + notification.recipient.id}
+ />
+ )
+ }
+ </List>
+ {
+ loadingMore ?
+ <LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." />
+ :
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid xs={12} md={12} item style={{ fontSize: "14px", color: "#666" }}>
+ <ShowData disabled={true} contrast={props.contrast}>
+ Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}de {totalResults}
+ </ShowData>
+ </Grid>
+ <StyledGrid item xs={12} md={12}>
+ <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
+ <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
+ </StyledGrid>
+ </Grid>
+ }
+ </>
+ )
}
- </List>
- {
- loadingMore ?
- <LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." />
- :
- <Grid container direction="row" alignItems="center" justify="flex-start" spacing={1}>
- <Grid item xs={12} md={4}>
- <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
- </Grid>
- <Grid item xs={12} md={4}>
- <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
- </Grid>
- <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}>
- <ShowData disabled={true} contrast={props.contrast}>
- Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}
- de {totalResults}
- </ShowData>
- </Grid>
- </Grid>
- }
- </>
- )
+ </div>
+ ]
+ )
}
- </div>
-
- ]
- )
- }
- </div>
- </Paper>
- </MainContainerDesktop>
- )
+ </div>
+ </Paper>
+ </MainContainerDesktop>
+ )
}
+const StyledGrid = styled(Grid)`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
const InfoP = styled.p`
- font-size: "15px";
- font-weight: "lighter";
- margin: "0 0 10px";
- display: "flex";
- justify-content: "center";
- text-align: "center";
- color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: "15px";
+ font-weight: "lighter";
+ margin: "0 0 10px";
+ display: "flex";
+ justify-content: "center";
+ text-align: "center";
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const ErrorP = styled.p`
- font-size: "15px";
- font-weight: "lighter";
- margin: "0 0 10px";
- display: "flex";
- justify-content: "center";
- text-align: "center";
- color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: "15px";
+ font-weight: "lighter";
+ margin: "0 0 10px";
+ display: "flex";
+ justify-content: "center";
+ text-align: "center";
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const MainContainerDesktop = styled.div`
@@ -297,25 +298,25 @@ const NoNotificationsDiv = styled.div`
`
const LoadMoreButton = styled(Button)`
+ margin-left: 6px !important;
+ margin-right: 6px !important;
outline : none !important;
- display : block !important;
cursor : pointer !important;
- min-height : 36px !important;
+ max-height : 36px !important;
min-width : 88px !important;
- line-height: 36px !important;
vertical-align: middle !important;
border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
padding : 0 px !important;
- margin : auto !important;
+
text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
font-weight : 500 !important;
overflow : hidden !important;
text-transform : uppercase !important;
font-size : 14px !important;
background : transparent !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
`
@@ -323,9 +324,8 @@ const ShowData = styled(Button)`
outline : none !important;
display : block !important;
cursor : pointer !important;
- min-height : 36px !important;
+ max-height : 36px !important;
min-width : 88px !important;
- line-height: 36px !important;
vertical-align: middle !important;
border : 0 !important;
padding : 0 px !important;
@@ -336,7 +336,7 @@ const ShowData = styled(Button)`
text-transform : none !important;
font-size : 14px !important;
background : transparent !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
&:hover {
background : rgba(158,158,158,0.2) !important
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index 94d4a13a..cd49d1a7 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -198,9 +198,7 @@ export default function TabPanelEditarPerfil(props) {
const ButtonConfirmar = styled(Button)`
background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- color : #fff !important;
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
font-weight : 500 !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -260,13 +258,10 @@ export const ButtonCancelar = styled(Button)`
border-radius : 3px !important;
box-sizing : border-box !important;
user-select : none !important;
- color: ${props => props.contrast === "" ? "black !important" : "yellow !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "" : "transparent !important"};
padding : 0 6px !important;
margin : 6px 8px !important;
- :hover{
- background-color: ${props => props.contrast === "" ? "#f1f1f1 !important" : "rgba(255,255,0,0.24) !important"};
- }
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index 9cb598a7..502a5e04 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -219,7 +219,7 @@ export default function TabPanelGerenciarConta(props) {
</div>
<div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
<ModalExcluirConta contrast={state.contrast} open={modalExcluir} handleClose={() => { setModalExcluir(false) }} />
- <ButtonCancelar contrast={state.contrast} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
+ <ButtonCancelar contrast={state.contrast} style={{backgroundColor: "red", color: "white"}} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
</div>
</div>
</div>
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
index 4d5e702c..d4a20747 100644
--- a/src/Components/UserPageComponents/Cover.js
+++ b/src/Components/UserPageComponents/Cover.js
@@ -45,6 +45,7 @@ export default function Cover (props) {
useEffect( () => {
setCoverImg(state.currentUser.cover)
}, state.currentUser.cover)
+
return (
<>
<ModalAlterarCover
diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js
index de9e1d77..b0636380 100644
--- a/src/Components/UserPageComponents/EditProfileButton.js
+++ b/src/Components/UserPageComponents/EditProfileButton.js
@@ -36,7 +36,7 @@ export default function EditProfileButton({ contrast }) {
)
:
(
- <EditIcon className="icon" />
+ <EditIcon className="icon" style={contrast === "" ? {color: "white"} : {color: "yellow"}}/>
)
}
</Button>
@@ -45,35 +45,32 @@ export default function EditProfileButton({ contrast }) {
}
const EditProfileAnchor = styled(Link)`
- Button {
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
- background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
- position : absolute;
- right : 10px;
- top : 10px;
- margin-bottom : 20px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- padding : 0 10px;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- border-radius : 3px;
- @media screen and (min-width: 800px) {
- min-height : 36px;
- min-width : 88px;
- }
- line-height : 36px;
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- display: inline-block;
- text-align : center;
- :hover{
- background-color: ${props => props.contrast === "" ? "#fafafa" : "rgba(255,255,0,0.24)"};
- }
- @media screen and (max-width: 600px) {
- max-width : 44px !important ;
- }
- }
- .icon{
- margin-right: 5px;
- vertical-align: middle;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ Button {
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
+ background-color: ${props => props.contrast === "" ? "#52BCD4" : "black"} !important;
+ position : absolute;
+ right : 10px;
+ top : 10px;
+ margin-bottom : 20px;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ padding : 0 10px;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ border-radius : 3px;
+ @media screen and (min-width: 800px) {
+ min-height : 36px;
+ min-width : 88px;
+ }
+ line-height : 36px;
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ display: inline-block;
+ text-align : center;
+ @media screen and (max-width: 600px) {
+ max-width : 44px !important ;
+ }
+ }
+ .icon{
+ margin-right: 5px;
+ vertical-align: middle;
+ color: white;
+ }
`
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 9d0600c7..35733c32 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -146,8 +146,8 @@ export default function UserPage(props) {
<div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
<HeaderContainer contrast={state.contrast}>
- <Cover id={id} />
- <ProfileAvatar id={id} />
+ <Cover id={id} contrast={state.contrast}/>
+ <ProfileAvatar id={id} contrast={state.contrast}/>
{WIDTH <= 600 ? null : <UserInfo />}
<EditProfileButton contrast={state.contrast} />
</HeaderContainer>
--
GitLab