diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index 3a3eb3bda3738b19ef1d94bedf62b625c1614a18..5591b9c10d10bfbee63fd918c3bf2f272ce4205f 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -139,7 +139,8 @@ export default function ActivityListItem(props) {
secondary={
<div>
- <span>
+ <span style={props.contrast === "" ? { color: "#666" } : {color: "white"}}>
+
<Link to={{
pathname: props.ownerHref,
state: '0',
@@ -168,22 +169,23 @@ const StyledListItem = styled(ListItem)`
.time-ago-span {
font-size : 12px;
font-family : 'Lato', medium;
- color: ${props => props.contrast === '' ? "#787380" : "yellow"};
- color : #787380;
+ color: ${props => props.contrast === '' ? "#787380" : "white"};
}
.owner-name-a {
- color : #00bcd4;
+ color: ${props => props.contrast === '' ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
}
.recipient-name-a {
cursor : pointer;
- color : #337ab7;
+ color: ${props => props.contrast === '' ? "#337ab7" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
}
.icon {
padding-right : 10px;
- color : #666;
+ color: ${props => props.contrast === '' ? "#666" : "white"};
}
.tag-object {
@@ -207,15 +209,18 @@ const StyledListItem = styled(ListItem)`
}
.recurso-color {
- background-color : orange;
+ background-color: ${props => props.contrast === '' ? "orange" : ""};
+ border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
.colecao-color {
- background-color : blue;
+ background-color: ${props => props.contrast === '' ? "blue" : ""};
+ border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
.curadoria-color {
- background-color : red;
+ background-color: ${props => props.contrast === '' ? "red" : ""};
+ border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index 68c447c4c3be4aee028bf6b4997ceefa956fd197..81089ad97a61e48e55765d0006fee99267f32029 100644
--- a/src/Components/LoadingSpinner.js
+++ b/src/Components/LoadingSpinner.js
@@ -1,11 +1,11 @@
import React from 'react';
import LoadingGif from '../img/loading_busca.gif'
- const LoadingSpinner = (props) => (
- <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
- <img alt="" src={LoadingGif} />
- <span style={{textTransform:"uppercase"}}>{props.text}</span>
- </div>
- );
+const LoadingSpinner = (props) => (
+ <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
+ <img alt="" src={LoadingGif} />
+ <span style={props.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
+ </div>
+);
- export default LoadingSpinner;
+export default LoadingSpinner;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index bd7fd73dce890f685a1e6aba0aa3f9b2e348a42c..9d4c315e717de98b9f73a9f923e2ef5c7b533f68 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -33,213 +33,235 @@ import SnackBar from '../../SnackbarComponent'
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: '',
- })
+ 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 handleCloseSnackBar() {
+ const info = {
+ open: false,
+ text: '',
+ severity: '',
+ color: '',
}
+ handleSnackInfo(info)
+ }
- function handleSnackInfo(info) {
- setSnackInfo({
- ...info
- })
- }
+ function handleSnackInfo(info) {
+ setSnackInfo({
+ ...info
+ })
+ }
+
+ const showMore = (offset) => {
+ handleLoadingMore(true);
+ const url = `/feed?offset=${limit}&limit=${offset}`
+ setLimit(limit + offset)
+ getRequest(url, handleSuccess, handleError)
+ }
- 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',
}
+ handleSnackInfo(info)
+ handleLoadingMore(false)
+ handleLoading(false)
+ setError(true)
+ }
- function handleError(error) {
+ 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: 'Ocorreu um erro ao tentar carregar suas notificações!',
- severity: 'error',
- color: 'red',
+ open: true,
+ text: 'Não há mais notificações para serem carregadas...',
+ severity: 'warning',
+ color: '#FFC125'
}
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`
+ }
+ useEffect(() => {
+ const url = `/feed?offset=0&limit=30`
- getRequest(url, handleSuccess, handleError)
- }, [])
+ getRequest(url, handleSuccess, handleError)
+ }, [])
- return (
- <MainContainerDesktop>
- <SnackBar
- snackbarOpen={snackInfo.open}
- handleClose={handleCloseSnackBar}
- severity={snackInfo.severity}
- color={snackInfo.color}
- text={snackInfo.text}
- />
- <Paper elevation={3}>
- <div>
- <DivTitulo>
- <InnerDivTitulo>
- <TituloContent>
- <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
- </TituloContent>
- </InnerDivTitulo>
- </DivTitulo>
+ 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>
{
- loading ?
- (
- <LoadingSpinner text={'Carregando Atividades'} />
- )
- :
- (
- [
- <div>
- {
- error ?
- <p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
- >
- Erro ao tentar obter as notificações
- </p>
- :
- notificatonsLength === 0 ?
- (
+ 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>Você se cadastrou na Plataforma</H3Styled>
- </div>
- <p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
- >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
+ <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!
- </p>
- </div>
- </NoNotificationsDiv>
+ </InfoP>
+ </div>
+ </NoNotificationsDiv>
- )
- :
- (
- <>
- <List height={400} width={300}>
- {
- notifications.map((notification, id) =>
- <ActivityListItem
- key={id}
- onMenuBar={false}
- avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : DefaultProfile}
- 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 text="Carregando mais atividades..." />
- :
- <Grid container direction="row" alignItems="center" justify="flex-start">
- <Grid item xs={12} md={4}>
- <LoadMoreButton onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
- </Grid>
- <Grid item xs={12} md={4}>
- <LoadMoreButton onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
- </Grid>
- <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}>
- <ShowData disabled={true}>
- Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}
+ )
+ :
+ (
+ <>
+ <List height={400} width={300}>
+ {
+ notifications.map((notification, id) =>
+ <ActivityListItem
+ contrast={props.contrast}
+ key={id}
+ onMenuBar={false}
+ avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : DefaultProfile}
+ 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" justify="flex-start">
+ <Grid item xs={12} md={4}>
+ <LoadMoreButton onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
+ </Grid>
+ <Grid item xs={12} md={4}>
+ <LoadMoreButton 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>
-
- ]
- )
+ </ShowData>
+ </Grid>
+ </Grid>
+ }
+ </>
+ )
}
- </div>
- </Paper>
- </MainContainerDesktop>
- )
+ </div>
+
+ ]
+ )
+ }
+ </div>
+ </Paper>
+ </MainContainerDesktop>
+ )
}
+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"};
+`
+
+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"};
+`
+
const MainContainerDesktop = styled.div`
padding : 10px 0 8px 0;
margin-left : auto;
margin-right : auto;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
@media screen and (min-width: 1200px) {
width : 1170px;
@@ -255,7 +277,7 @@ const MainContainerDesktop = styled.div`
const H3Styled = styled.h3`
font-size: 24px;
font-weight : lighter;
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
margin-top : 20px;
margin-bottom : 10px;
display : flex;
@@ -279,18 +301,18 @@ const LoadMoreButton = styled(Button)`
min-widht : 88px !important;
line-height: 36px !important;
vertical-align: middle !important;
- border : 0 !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
padding : 0 px !important;
margin : auto !important;
- text-decoration : none !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 : #666 !important
+ background : transparent !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
&:hover {
- background : rgba(158,158,158,0.2) !important
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
`
@@ -311,7 +333,7 @@ const ShowData = styled(Button)`
text-transform : none !important;
font-size : 14px !important;
background : transparent !important;
- color : #666 !important
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
&:hover {
background : rgba(158,158,158,0.2) !important
}
@@ -323,6 +345,7 @@ const TituloContent = styled.div`
position : relative;
font-family: Roboto, sans-serif;
font-weight : ligther;
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const InnerDivTitulo = styled.div`
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 2688500eeb48d71df1f3fc1469d744a41d4b71e6..c0266970426f39887b3158fd54e687e428411a64 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -53,7 +53,7 @@ export default function UserPage(props) {
const [follows, setFollows] = useState(0);
const [following, setFollowing] = useState(0);
- const [loading, setLoading] = useState(false);
+ const [loading, setLoading] = useState(false);
const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
const [tabs, setTabs] = useState([
"Atividades",
@@ -225,12 +225,12 @@ export default function UserPage(props) {
</div>
</Grid>
<Grid item xs={12}>
- {tabValue === 0 && <TabPanelAtividades id={id} />}
- {tabValue === 1 && <TabPanelMeusRecursos id={id} />}
- {tabValue === 2 && <TabPanelFavoritos id={id} />}
- {tabValue === 3 && <TabPanelColecoes id={id} />}
- {tabValue === 4 && <TabPanelRede id={id} />}
- {tabValue === 5 && <TabPanelCuradoria id={id} />}
+ {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />}
+ {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />}
+ {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />}
+ {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />}
+ {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />}
+ {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />}
</Grid>
</Grid>
</BackgroundDiv>