fixed all styling problems; added link to profile page

src/Components/Notifications.js

@@ -31,6 +31,9 @@ import {apiDomain, apiUrl} from '../env.js'
 import axios from 'axios'
 import ActivityListItem from './ActivityListItem.js'
 import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'
+import { withStyles } from '@material-ui/core/styles';
+import {Link} from 'react-router-dom'
+
 const StyledBadge = styled(Badge) `
     .MuiBadge-dot-45{
         height : 9px ;
@@ -55,29 +58,53 @@ const StyledNotificationButton = styled(Button)`
     }
 `
 
+const StyledMenu = withStyles({
+  paper: {
+    border: '1px solid #d3d4d5',
+  },
+})((props) => (
+  <Menu
+    elevation={0}
+    getContentAnchorEl={null}
+    anchorOrigin={{
+      horizontal: 'center',
+      vertical: "bottom",
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'center',
+    }}
+    {...props}
+  />
+));
+
 export default function Notification (props) {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [notifications, setNotifications] = useState([]);
     const [notificatonsLength, setLength] = useState(0);
-    // useEffect(() => {
-    //     let config = getAxiosConfig()
-    //     axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
-    //     .then( (response) => {
-    //             if ( response.headers['access-token'] ) {
-    //                 sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
-    //             }
-    //
-    //             console.log('atividades response: ', response)
-    //             setNotifications(response.data)
-    //             setLength(response.data.length)
-    //
-    //         },
-    //         (error) => {
-    //             console.log('error while running getNotifications')
-    //         }
-    //     )
-    // }, [])
+    useEffect(() => {
+
+        setTimeout(() => {
+            let config = getAxiosConfig()
+            axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
+            .then( (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+
+                console.log('atividades response: ', response)
+                setNotifications(response.data)
+                setLength(response.data.length)
+
+                },
+                (error) => {
+                    console.log('error while running getNotifications')
+                }
+            )
+        }, 1000);
+    }, [sessionStorage.getItem('@portalmec/uid')])
     function handleClick(event) {
+        console.log('event.currentTarget: ', event.currentTarget)
         setAnchorEl(event.currentTarget);
     }
 
@@ -118,6 +145,13 @@ export default function Notification (props) {
                         />
                     )
                 }
+                <div style={{padding : "0 15px", borderTop : "1px solid #dadada"}}>
+                    <Link to="/perfil">
+                        <NoPadButton>
+                            MOSTRAR TODAS
+                        </NoPadButton>
+                    </Link>
+                </div>
             </ContainerDiv>
         </StyledMenu>
         </React.Fragment>
@@ -125,8 +159,8 @@ export default function Notification (props) {
 
 }
 
-const StyledMenu = styled(Menu)`
-
+const NoPadButton = styled(Button)`
+    padding : 6px 0 !important;
 `
 
 const ContainerDiv = styled.div`
@@ -134,15 +168,16 @@ const ContainerDiv = styled.div`
     right : 5%;
     width : 360px;
     max-height : 400px;
-    position : absolute;
     box-shadow : 8px 8px 8px 8px
     rgba(0,0,0,.1);
     overflow-y : scroll;
     padding : 5px 5px 5px 5px;
     min-width : 160px;
+    background-color : #f1f1f1;
 
     .cabecalho {
-        border-bottom : 1px solid #666;
+        border-bottom : 1px solid #dadada;
+        padding : 10px 15px;
 
         .cabecalho-marcar {
             font-family: Lato,bold;