diff --git a/cypress/integration/homepage_spec.js b/cypress/integration/homepage_spec.js index 0ef0b87..320f3d6 100644 --- a/cypress/integration/homepage_spec.js +++ b/cypress/integration/homepage_spec.js @@ -1,5 +1,5 @@ -describe("The Home Page", function() { - it("successfully loads", function() { - cy.visit("/"); - }); -}); +describe('The Home Page', function() { + it('Visits team allegiance local host website', function() { + cy.visit('http://localhost:3000') + }) +}) diff --git a/cypress/integration/sample_spec.js b/cypress/integration/sample_spec.js deleted file mode 100644 index 691ad65..0000000 --- a/cypress/integration/sample_spec.js +++ /dev/null @@ -1,11 +0,0 @@ -describe("My First Test", function() { - it("Does not do much!", function() { - expect(true).to.equal(true); - }); -}); - -describe("My First Test", function() { - it("Does not do much!", function() { - expect(true).to.equal(false); - }); -}); diff --git a/package-lock.json b/package-lock.json index 9a8116d..c73f375 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2374,6 +2374,12 @@ "@types/react": "*" } }, + "@types/sizzle": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", + "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==", + "dev": true + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -2814,6 +2820,11 @@ "integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==", "dev": true }, + "are-passive-events-supported": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz", + "integrity": "sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww==" + }, "are-we-there-yet": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", @@ -4929,13 +4940,14 @@ "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=" }, "cypress": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.4.1.tgz", - "integrity": "sha512-1HBS7t9XXzkt6QHbwfirWYty8vzxNMawGj1yI+Fu6C3/VZJ8UtUngMW6layqwYZzLTZV8tiDpdCNBypn78V4Dg==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.5.0.tgz", + "integrity": "sha512-I1iSReD2C8CTP6s4BvQky4gEqHBnKLmhBIqFyCUZdj6BQ6ZDxGnmIbQPM5g79E2iP60KTIbTK99ZPSDVtsNUUg==", "dev": true, "requires": { "@cypress/listr-verbose-renderer": "0.4.1", "@cypress/xvfb": "1.2.4", + "@types/sizzle": "2.3.2", "arch": "2.1.1", "bluebird": "3.5.0", "cachedir": "1.3.0", @@ -4962,6 +4974,7 @@ "request-progress": "3.0.0", "supports-color": "5.5.0", "tmp": "0.1.0", + "untildify": "3.0.3", "url": "0.11.0", "yauzl": "2.10.0" }, @@ -17164,6 +17177,12 @@ } } }, + "untildify": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/untildify/-/untildify-3.0.3.tgz", + "integrity": "sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==", + "dev": true + }, "upath": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz", @@ -17265,6 +17284,20 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-latest": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.0.0.tgz", + "integrity": "sha512-CxmFi75KTXeTIBlZq3LhJ4Hz98pCaRKZHCpnbiaEHIr5QnuHvH8lKYoluPBt/ik7j/hFVPB8K3WqF6mQvLyQTg==" + }, + "use-onclickoutside": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/use-onclickoutside/-/use-onclickoutside-0.3.1.tgz", + "integrity": "sha512-aahvbW5+G0XJfzj31FJeLsvc6qdKbzeTsQ8EtkHHq5qTg6bm/qkJeKLcgrpnYeHDDbd7uyhImLGdkbM9BRzOHQ==", + "requires": { + "are-passive-events-supported": "^1.1.0", + "use-latest": "^1.0.0" + } + }, "util": { "version": "0.10.3", "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", diff --git a/package.json b/package.json index e777ec0..0e627eb 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "devDependencies": { - "cypress": "^3.4.1", + "cypress": "^3.5.0", "jest-dom": "^4.0.0" }, "dependencies": { @@ -31,7 +31,8 @@ "semantic-ui-css": "^2.4.1", "semantic-ui-react": "^0.88.0", "socket.io-client": "^2.3.0", - "styled-components": "^4.3.2" + "styled-components": "^4.3.2", + "use-onclickoutside": "^0.3.1" }, "scripts": { "start": "react-scripts start", diff --git a/public/index.html b/public/index.html index b8b55ce..c8c25dc 100644 --- a/public/index.html +++ b/public/index.html @@ -1,35 +1,25 @@ - - - - - - - - - - - - - - - - - Allegiance - - - -
- - + Allegiance + + + + + +
+ + + \ No newline at end of file diff --git a/src/App.js b/src/App.js index bada585..7af0e07 100644 --- a/src/App.js +++ b/src/App.js @@ -4,14 +4,12 @@ import { withRouter } from 'react-router' import axios from 'axios' import { useDispatch, useSelector } from 'react-redux' import moment from 'moment' - import styled from 'styled-components' import { Loader } from 'semantic-ui-react' - +import CssReset from 'styles/cssReset' import PrivateRoute from './components/PrivateRoute' import { initGA, logPageView } from './components/analytics/Analytics' -// // import { Mixpanel } from './components/analytics/Mixpanel' import { useAuth0 } from './components/auth/react-auth0-wrapper' import useGetToken from './components/utils/useGetToken' @@ -69,12 +67,8 @@ function App(props) { const { newUser, currentUser } = result.data.userInfo if (newUser) { props.history.push('/makeprofile') - // Mixpanel.login(newUser, 'New user sign up.') - } - if (currentUser && currentUser.first_name === null) { - props.history.push('/makeprofile') - // Mixpanel.login(currentUser, 'Successful login, no profile info.') } + if (currentUser && currentUser.first_name !== null) { const pushTo = window.location.pathname !== '/' @@ -133,36 +127,46 @@ function App(props) { return ( - - - - - - - - - - - - - - - - - - + + {props.location.pathname !== '/' && } +
+ + + + + + + + + + + + + + + +
) } const AppContainer = styled.div` - text-align: center; - padding-top: 11%; - padding-bottom: 12%; + background-color: #dee4e7; + min-height: 100vh; ` export default withRouter(App) +// text-align: center; +// position: relative; +// background-color: #dee4e7; +// min-height: 100vh; +// margin: 0 auto; +// border: 4px solid blue; diff --git a/src/assets/jersey.png b/src/assets/jersey.png new file mode 100644 index 0000000..28fe218 Binary files /dev/null and b/src/assets/jersey.png differ diff --git a/src/components/allegiances/MakeAllegiance.js b/src/components/allegiances/MakeAllegiance.js index 8e9b75c..6ead312 100644 --- a/src/components/allegiances/MakeAllegiance.js +++ b/src/components/allegiances/MakeAllegiance.js @@ -57,7 +57,7 @@ const MakeAllegiance = props => { setTimeout(push, 1000) } catch { - dispatch({ type: types.ADD_ALLEGIANCES_FAILURE}) + dispatch({ type: types.ADD_ALLEGIANCES_FAILURE }) setError(true) setLoading(false) } @@ -135,8 +135,6 @@ const MakeAllegiance = props => { const FormHolder = styled.div` background-color: #dee4e7; min-height: 90vh; - padding-top: 5%; - margin-top: -1.5%; @media (max-width: 320px) { height: 87vh; } diff --git a/src/components/groups/CreateGroup.js b/src/components/groups/CreateGroup.js index ff2e692..ba4a797 100644 --- a/src/components/groups/CreateGroup.js +++ b/src/components/groups/CreateGroup.js @@ -56,7 +56,11 @@ const CreateGroup = props => { async function createGroup() { try { dispatch({ type: types.ADD_GROUP_REQUEST }) - const newGroup = { ...values, image: image || Default, creator_id: loggedInUser.id } + const newGroup = { + ...values, + image: image || Default, + creator_id: loggedInUser.id, + } const result = await axiosWithAuth([token]).post('/groups/', newGroup) const addedGroup = { name: result.data.newGroup.group_name, @@ -215,8 +219,6 @@ const CreateGroup = props => { const FormHolder = styled.div` background-color: #dee4e7; min-height: 90vh; - padding-top: 5%; - margin-top: -1.5%; @media (max-width: 320px) { height: 87vh; } diff --git a/src/components/groups/GroupContainer.js b/src/components/groups/GroupContainer.js index 7342099..6dacdaa 100644 --- a/src/components/groups/GroupContainer.js +++ b/src/components/groups/GroupContainer.js @@ -1,9 +1,10 @@ -import React from 'react' +import React, { useEffect } from 'react' import { useSelector } from 'react-redux' import { Divider } from 'semantic-ui-react' import styled from 'styled-components' import { withRouter } from 'react-router-dom' +import { useAuth0 } from '../auth/react-auth0-wrapper' import GroupList from './GroupList' import SearchBar from './SearchBar' import MyAllegianceGroups from '../profile/MyAllegianceGroups' @@ -14,7 +15,7 @@ function GroupContainer(props) { return ( - + diff --git a/src/components/groups/GroupList.js b/src/components/groups/GroupList.js index d5500de..1863f06 100644 --- a/src/components/groups/GroupList.js +++ b/src/components/groups/GroupList.js @@ -20,6 +20,7 @@ const GroupList = () => { useEffect(() => { const fetchData = async () => { + console.log('are we ever fetching groups ? ', token) if (token) { const groups = await axiosWithAuth([token]).post(`/groups/search`, { column: 'group_name', diff --git a/src/components/groups/SearchBar.js b/src/components/groups/SearchBar.js index 628fd62..13f02aa 100644 --- a/src/components/groups/SearchBar.js +++ b/src/components/groups/SearchBar.js @@ -54,11 +54,12 @@ const SearchBar = props => { if (e.keyCode === 13) { e.preventDefault() console.log(results) - props.history.push(`/group/${results[0].id}`) + // Check that results from SearchResults has something to fill if (results.length > 0) { setSuggestion(0) setValues(results[activeSuggestion]) + props.history.push(`/group/${results[0].id}`) } } // User pressed the up arrow @@ -132,8 +133,14 @@ const SearchFormWrapper = styled.div` flex-direction: column; align-items: center; margin: 0 auto; - width: 90%; + width: 600px; position: relative; + @media (max-width: 800px) { + width: 400px; + } + @media (max-width: 800px) { + width: 300px; + } ` const SearchForm = styled.form` diff --git a/src/components/groups/SearchResults.js b/src/components/groups/SearchResults.js index babe743..835ec24 100644 --- a/src/components/groups/SearchResults.js +++ b/src/components/groups/SearchResults.js @@ -44,14 +44,22 @@ const SearchResults = props => { const ResultsContainer = styled.div` display: flex; - width: 95.5%; + width: 581px; flex-direction: column; position: absolute; z-index: 1; background-color: white; - margin-top: 18.5%; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); + border-radius: 20px; + margin-top: 65px; + @media (max-width: 800px) { + width: 281px; + } + // @media (max-width: 500px) { + // width: 428px; + // } .suggestion-active { - background-color: lightgoldenrodyellow; + background-color: white; } .single-result { display: flex; @@ -61,10 +69,9 @@ const ResultsContainer = styled.div` padding: 0 5%; text-decoration: none; width: 100%; - border: 1px solid black; height: 8vh; &:hover { - background-color: lightgoldenrodyellow; + background-color: #add8e6; } } .result-info { diff --git a/src/components/nav/Avatar.js b/src/components/nav/Avatar.js new file mode 100644 index 0000000..497771d --- /dev/null +++ b/src/components/nav/Avatar.js @@ -0,0 +1,25 @@ +import React, { useState, useRef } from 'react' +import useOnClickOutside from 'use-onclickoutside' +// import DownSvg from 'assets/svg/DownSvg' +import styled from 'styled-components' +import { AvatarPopup } from './AvatarPopup' + +export const Avatar = ({ user }) => { + const popupRef = useRef() + const [isMenuOpen, setMenu] = useState(false) + useOnClickOutside(popupRef, () => setMenu(false)) + + return ( + +
setMenu(prev => !prev)}> + avatar +
+ {isMenuOpen ? : null} + + ) +} + +const StyledAvatar = styled.div` + height: 40px; + width: 61px; +` diff --git a/src/components/nav/AvatarPopup.js b/src/components/nav/AvatarPopup.js new file mode 100644 index 0000000..b4be43b --- /dev/null +++ b/src/components/nav/AvatarPopup.js @@ -0,0 +1,109 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import styled from 'styled-components' +import { useAuth0 } from '../auth/react-auth0-wrapper' + +export const AvatarPopup = ({ user }) => { + const { isAuthenticated, logout } = useAuth0() + const logoutWithRedirect = () => + logout({ + returnTo: window.location.origin, + }) + + return ( + +
+
+
+ + avatar + +
+
+ + {user.username} + +
+
+ + Account Settings + + logoutWithRedirect()}> + Logout + + + ) +} + +const StyledAvatarPopup = styled.div` + position: absolute; + cursor: default; + width: 220px; + height: 152px; + top: 0; + right: 0px; + z-index: 50; + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + padding: 12px; + margin-top: 59px; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.2); + .arrow-up { + position: absolute; + top: -10px; + right: 15%; + z-index: 60; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid white; + } + .user-details { + display: flex; + border-bottom: 1px solid #e6e6e6; + } + .avatar-wrapper { + width: 60px; + height: 49px; + } + .avatar-image { + border-radius: 4px; + } + .user-info { + margin-left: 10px; + } + .username { + font-weight: bold; + color: #0077b3; + &:hover { + text-decoration: underline; + } + } + .location { + font-size: 12px; + font-weight: bold; + } + .logout, + .settings, + .add-business { + color: #0073bb; + display: block; + cursor: pointer; + padding-bottom: 12px; + &:hover { + text-decoration: underline; + } + } + .add-business { + margin-top: 12px; + font-weight: bold; + } + .settings { + margin-top: 12px; + border-bottom: 1px solid #e6e6e6; + font-weight: bold; + } + .logout { + padding-top: 12px; + } +` diff --git a/src/components/nav/NavBar.js b/src/components/nav/NavBar.js index 9dcd234..5290804 100644 --- a/src/components/nav/NavBar.js +++ b/src/components/nav/NavBar.js @@ -4,13 +4,14 @@ import { useAuth0 } from '../auth/react-auth0-wrapper' import { useSelector, useDispatch } from 'react-redux' import { axiosWithAuth } from '../utils/axiosWithAuth' import useGetToken from '../utils/useGetToken' - +import NavLeft from './NavLeft' import styled from 'styled-components' import { Icon, Loader } from 'semantic-ui-react' import IconButton from '@material-ui/core/IconButton' import { ArrowBack } from '@material-ui/icons' - +import NavRight from './NavRight' import { fetchNotifications } from 'actions/index' +import NavMiddle from './NavMiddle' const NavBar = () => { const { isAuthenticated, logout } = useAuth0() @@ -26,52 +27,21 @@ const NavBar = () => { const [navNotifications, setNavNotifications] = useState() // Retrieve all groups where user has a relation const userGroups = useSelector(state => state.userReducer.loggedInGroups) - const userId = useSelector(state => state.userReducer.loggedInUser.id) + const user = useSelector(state => state.userReducer.loggedInUser) const timeStamp = useSelector( state => state.userReducer.loggedInUser.notification_check ) - const socket = useSelector(state => state.socketReducer.socket); - const notifications = useSelector(state => state.notifyReducer.notifications); - const dispatch = useDispatch(); + const socket = useSelector(state => state.socketReducer.socket) + const notifications = useSelector(state => state.notifyReducer.notifications) + const dispatch = useDispatch() const [token] = useGetToken() useEffect(() => { - // // Obtain array of group ids where user has a relation for axios feed call - // const mappedGroupIds = userGroups.map(group => { - // return group.id - // }) - // // Fetch notifications related data - // const fetchData = async () => { - // if (token) { - // try { - // const response = await axiosWithAuth([token]).post(`/feed`, { - // group_id: mappedGroupIds, - // interval: 48, - // }) - // // Filter out activity performed by the user, current filter uses activity's - // // created_at - in future if allowing content updates, use updated_at - // if (response) { - // const filtered = response.data.allActivity.filter( - // act => - // userId !== act.user_id && - // userId !== act.liker_id && - // // Notification_checks default to null for new users, thus the need for || check - // (act.created_at > timeStamp || timeStamp === null) - // ) - // setNavNotifications(filtered) - // } - // } catch (error) { - // console.log(error) - // } - // } - // } - // fetchData() - const fetchData = async () => { - if (token && userId) { + if (token && user) { try { const data = { - userId, + userId: user.id, } const response = await dispatch(fetchNotifications(token, data)) console.log(response) @@ -85,13 +55,15 @@ const NavBar = () => { return () => { socket.off('new notification') } - }, [userId, token, timeStamp, socket, dispatch]) + }, [user, token, timeStamp, socket, dispatch]) useEffect(() => { if (token) { - console.log(notifications); - const filtered = notifications.filter(notify => notify.created_at > timeStamp || timeStamp === null) - console.log(filtered); + console.log(notifications) + const filtered = notifications.filter( + notify => notify.created_at > timeStamp || timeStamp === null + ) + console.log(filtered) setNavNotifications(filtered) } }, [notifications, timeStamp, token]) @@ -128,95 +100,26 @@ const NavBar = () => { setNavNotifications([]) return ( - <> - - {pathname === '/home' &&

Fan Feed

} - {pathname === '/groups' &&

Groups

} - {pathname.includes('/group/') && - TopNavItem('back to groups', '/groups', 'Group')} - {pathname === '/creategroup' &&

Create Group

} - {pathname === '/notifications' &&

Notifications

} - {pathname === '/profile' &&

Profile

} - {pathname === '/makeprofile' && - TopNavItem('back to profile', '/profile', 'Edit Profile')} - {pathname.includes('/editgroup/') && - TopNavItem( - 'back to group', - groupId === 0 ? '/groups' : `/group/${groupId}`, - 'Edit Group' - )} - {pathname.includes('/post') && - TopNavItem('back to group', `/group/${groupId}`, 'Post')} - {pathname === '/makeallegiance' &&

Edit Allegiances

} - - - {/* If user is authenticated, show links to navigate app */} - {isAuthenticated && ( - - )} - - + + + + ) } -const TopNav = styled.div` +const Sticky = styled.nav` + position: sticky; + width: 100%; + top: 0; + left: 0; + z-index: 1; + margin: 0 auto; + height: 55px; display: flex; - justify-content: center; - height: 6%; + justify-content: space-between; align-items: center; - font-weight: bold; + background-color: #1a4570; color: white; - position: fixed; - background-color: #1b4570; - top: 0; - width: 100%; - z-index: 2; - -webkit-transition: height 0.2s ease-in-out; - transition: height 0.2s ease-in-out; - border-radius: 0; - p { - width: 70%; - margin: 0; - } - @media (max-width: 320px) { - max-width: 320px; - } ` const IconBut = styled(IconButton)` @@ -246,14 +149,13 @@ const Nav = styled.div` justify-content: space-between; align-content: center; height: 6.5vh; - background-color: #1b4570; ` -const NavLeft = styled.div` - display: flex; - flex: 1 1 0; - width: 85%; -` +// const NavLeft = styled.div` +// display: flex; +// flex: 1 1 0; +// width: 85%; +// ` const MenuItem = styled(Link)` width: 20%; @@ -284,11 +186,11 @@ const NotificationNumber = styled.div` left: -14px; ` -const NavRight = styled.div` - display: flex; - color: white; - width: 15%; -` +// const NavRight = styled.div` +// display: flex; +// color: white; +// width: 15%; +// ` const LogOut = styled.div` display: flex; diff --git a/src/components/nav/NavLeft.js b/src/components/nav/NavLeft.js new file mode 100644 index 0000000..9b37e3a --- /dev/null +++ b/src/components/nav/NavLeft.js @@ -0,0 +1,62 @@ +import React from 'react' +import { NavLink, withRouter } from 'react-router-dom' +import styled from 'styled-components' +import logo from 'assets/logo192.png' +import jersey from 'assets/jersey.png' +const NavLeft = props => { + const { location } = props + + return ( + +
    +
  • + + + Home + +
    • +
  • + + + Discover + +
    • +
+ + ) +} +export default withRouter(NavLeft) + +const StyledNavLeft = styled.div` + width: 100%; + display: flex; + height: 45px; + ul { + display: flex; + color: white; + margin: 0; + padding: 0; + height: %100; + justify-content: space-evenly; + width: 225px; + list-style-type: none; + li { + display: block; + list-style-type: none; + a { + display: flex; + height: 100%; + justify-content: center; + align-items: center; + } + span { + color: white; + margin-left: 5px; + font-size: 20px; + } + } + } + .tab { + display: flex; + } +` diff --git a/src/components/nav/NavMiddle.js b/src/components/nav/NavMiddle.js new file mode 100644 index 0000000..e59746a --- /dev/null +++ b/src/components/nav/NavMiddle.js @@ -0,0 +1,17 @@ +import React from 'react' +import { NavLink, withRouter } from 'react-router-dom' +import styled from 'styled-components' + +const NavLeft = props => { + const { location } = props + + return Allegiance +} +export default withRouter(NavLeft) + +const StyledMiddleNav = styled.h1` + color: black; + display: flex; + text-align: center; + width: 100%; +` diff --git a/src/components/nav/NavRight.js b/src/components/nav/NavRight.js new file mode 100644 index 0000000..96b25ed --- /dev/null +++ b/src/components/nav/NavRight.js @@ -0,0 +1,63 @@ +import React from 'react' +import { NavLink, withRouter } from 'react-router-dom' +import styled from 'styled-components' +import { Avatar } from './Avatar' +import { Icon, Loader } from 'semantic-ui-react' + +const NavRight = props => { + const { location, user } = props + + return ( + +
    +
  • + + + +
    • +
  • + + + +
    • +
+ + ) +} +export default withRouter(NavRight) + +const StyledNavRight = styled.div` + width: 100%; + display: flex; + justify-content: flex-end; + + ul { + display: flex; + color: white; + height: %100; + list-style-type: none; + justify-content: space-between; + width: 120px; + li { + list-style-type: none; + display: flex; + align-items: center; + a { + font-size: 1.9rem; + } + img { + border-radius: 50%; + width: 4.5rem; + } + } + } +` + +const NavIcon = styled(Icon)` + color: white; +` diff --git a/src/components/notifications/Notifications.js b/src/components/notifications/Notifications.js index 2c4e7d8..ec8647a 100644 --- a/src/components/notifications/Notifications.js +++ b/src/components/notifications/Notifications.js @@ -61,6 +61,10 @@ const Notifications = () => { // instead of mount so that different styling can be applied to new vs old notifications useEffect(() => { return async () => { + console.log( + 'am i getting my new notification time check ?', + token && userId && mountTime + ) if (token && userId && mountTime) { try { const response = await axiosWithAuth([token]).put( @@ -95,17 +99,19 @@ const Notifications = () => { return ( - {notifications.sort((e1, e2) => { - if (e1.created_at > e2.created_at) { - return 1; - } else if (e1.created_at < e2.created_at) { - return -1; - } else { - return 0; - } - }).map(activity => ( - - ))} + {notifications + .sort((e1, e2) => { + if (e1.created_at > e2.created_at) { + return 1 + } else if (e1.created_at < e2.created_at) { + return -1 + } else { + return 0 + } + }) + .map(activity => ( + + ))} ) } diff --git a/src/components/profile/MakeProfile.js b/src/components/profile/MakeProfile.js index 693e46f..6d38499 100644 --- a/src/components/profile/MakeProfile.js +++ b/src/components/profile/MakeProfile.js @@ -172,10 +172,6 @@ const MakeProfile = props => { } const FormHolder = styled.div` - background-color: #dee4e7; - min-height: 90vh; - padding-top: 5%; - margin-top: -1.5%; @media (max-width: 320px) { height: 87vh; } diff --git a/src/index.js b/src/index.js index b0db7ec..0586008 100644 --- a/src/index.js +++ b/src/index.js @@ -4,15 +4,12 @@ import 'semantic-ui-css/semantic.min.css' import App from './App' import * as serviceWorker from './serviceWorker' import { Auth0Provider } from './components/auth/react-auth0-wrapper' - import { Provider } from 'react-redux' import { createStore, applyMiddleware, compose } from 'redux' import thunk from 'redux-thunk' import logger from 'redux-logger' import rootReducer from './reducers' - import { BrowserRouter as Router } from 'react-router-dom' - // A function that routes the user to the right place // after login const onRedirectCallback = appState => { @@ -34,7 +31,6 @@ ReactDOM.render( client_id={process.env.REACT_APP_CLIENTID} audience={process.env.REACT_APP_AUDIENCE} redirect_uri={window.location.origin} - onRedirectCallback={onRedirectCallback} > diff --git a/src/styles/cssReset.js b/src/styles/cssReset.js new file mode 100644 index 0000000..90b9e03 --- /dev/null +++ b/src/styles/cssReset.js @@ -0,0 +1,68 @@ +import { createGlobalStyle } from 'styled-components' + +const CSSReset = createGlobalStyle` +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +html { + font-family: 'Helvetica Nue', sans-serif; + font-size: 62.5%; + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +// TODO: Fix bg +body { + font-size: 1.6rem; + line-height: 1; + background-color: 'white'; +} + +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +a { + color: black; + text-decoration: none; +} +` +export default CSSReset