Allegiances and groups have a white background and also appear in nav.

src/App.js

@@ -7,14 +7,14 @@ 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 { useAuth0 } from './components/auth/react-auth0-wrapper'
-import NavBar from './components/nav/NavBar'
-import NavBottom from './components/nav/NavBottom'
+import PrivateRoute from 'components/PrivateRoute'
+import { initGA, logPageView } from 'components/analytics/Analytics'
+import { useAuth0 } from 'components/auth/react-auth0-wrapper'
+import NavBar from 'components/nav/NavBar'
 import * as types from 'actions/actionTypes'
-import { Mixpanel } from './components/analytics/Mixpanel'
-import MixpanelMessages from './components/analytics/MixpanelMessages'
+import { Mixpanel } from 'components/analytics/Mixpanel'
+import MixpanelMessages from 'components/analytics/MixpanelMessages'
+import NavBottom from 'components/nav/NavBottom'
 
 const Landing = lazy(() => import('components/Landing'))
 const Profile = lazy(() => import('components/profile/Profile'))

src/actions/actionTypes.js

@@ -28,10 +28,6 @@ export const FETCH_POSTS_REQUEST = 'FETCH_POSTS_REQUEST'
 export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS'
 export const FETCH_POSTS_FAILURE = 'FETCH_POSTS_FAILURE'
 
-export const CREATE_POST_REQUEST = 'CREATE_POST_REQUEST'
-export const CREATE_POST_SUCCESS = 'CREATE_POST_SUCCESS'
-export const CREATE_POST_FAILURE = 'CREATE_POST_FAILURE'
-
 export const RECEIVE_POST_SUCCESS = 'RECEIVE_POST_SUCCESS'
 
 export const POST_LIKE_REQUEST = 'POST_LIKE_REQUEST'
@@ -101,10 +97,6 @@ export const SET_UNREAD_NOTIFICATION_NUM = 'SET_UNREAD_NOTIFICATION_NUM'
 export const INCREMENT_UNREAD_NOTIFICATION_NUM =
   'INCREMENT_UNREAD_NOTIFICATION_NUM'
 
-export const DELETE_POST_REQUEST = 'DELETE_POST_REQUEST'
-export const DELETE_POST_SUCCESS = 'DELETE_POST_SUCCESS'
-export const DELETE_POST_FAILURE = 'DELETE_POST_FAILURE'
-
 export const DELETE_REPLY_REQUEST = 'DELETE_REPLY_REQUEST'
 export const DELETE_REPLY_SUCCESS = 'DELETE_REPLY_SUCCESS'
 export const DELETE_REPLY_FAILURE = 'DELETE_REPLY_FAILURE'

src/actions/index.js

@@ -19,39 +19,6 @@ export const fetchGroupPosts = id => async dispatch => {
     dispatch({ type: actionTypes.FETCH_POSTS_FAILURE, payload: err })
   }
 }
-export const createGroupPost = (token, data, socket) => async dispatch => {
-  const { userId, groupId, post_content } = data
-  if (token) {
-    // If post content is not blank
-    if (!post_content.match(/^\s+$/)) {
-      try {
-        dispatch({ type: actionTypes.CREATE_POST_REQUEST })
-        const post = await axiosWithAuth([token]).post(
-          `/posts/group/${groupId}`,
-          {
-            user_id: userId,
-            group_id: groupId,
-            post_content: post_content,
-          }
-        )
-        dispatch({
-          type: actionTypes.CREATE_POST_SUCCESS,
-          payload: post.data.postResult,
-        })
-
-        socket.emit('groupPost', {
-          post: post.data.postResult,
-          room: groupId,
-        })
-
-        Mixpanel.activity(userId, MixpanelMessages.POST_CREATED)
-      } catch (err) {
-        console.log(err)
-        dispatch({ type: actionTypes.CREATE_POST_FAILURE, payload: err })
-      }
-    }
-  }
-}
 
 export const receiveGroupPost = data => async dispatch => {
   console.log('DATA IN RECEIVE', data)
@@ -419,7 +386,7 @@ export const createReply = (token, data, socket) => async dispatch => {
       })
     }
   } catch (err) {
-    console.log(err);
+    console.log(err)
   }
 }
 
@@ -453,16 +420,6 @@ export const receiveReplyDislike = data => dispatch => {
   dispatch({ type: actionTypes.RECEIVE_REPLY_DISLIKE, payload: data.likeType })
 }
 
-export const deleteGroupPost = (token, id) => async dispatch => {
-  dispatch({ type: actionTypes.DELETE_POST_REQUEST })
-  const deletedPost = await axiosWithAuth([token]).delete(`/posts/${id}`)
-  if (deletedPost.data) {
-    dispatch({
-      type: actionTypes.DELETE_POST_SUCCESS,
-      payload: deletedPost.data,
-    })
-  }
-}
 export const requestJoinPrivate = (token, data, socket) => async dispatch => {
   dispatch({ type: actionTypes.JOIN_PRIVATE_REQUEST })
   const { user, privateGroupID, adminIds } = data

src/components/Landing.js

@@ -4,17 +4,8 @@ import styled from 'styled-components'
 import { useAuth0 } from './auth/react-auth0-wrapper'
 import { withRouter } from 'react-router-dom'
 import NavSearch from './nav/NavSearch'
-import Logo2 from '../assets/landing/Logo2.png'
 import LandingImage from '../assets/landing/LandingImage.png'
-import DoSportsTogether from '../assets/landing/DoSportsTogether.png'
 import Logo from '../assets/landing/allegiance-logo.svg'
-import instagram from '../assets/landing/instagram.png'
-import twitter from '../assets/landing/twitter.png'
-import facebook from '../assets/landing/facebook.png'
-import NewWay from '../assets/landing/NewWay.png'
-import SportsBetter from '../assets/landing/SportsBetter.png'
-// import SportIcons from '../assets/landing/SportIcons.png'
-import Baseball from '../assets/landing/Baseball.jpg'
 import { Button } from 'semantic-ui-react'
 import { Icon } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
@@ -125,21 +116,6 @@ const SportIconsWrapper = styled.div`
   }
 `
 
-const P1 = styled.p`
-  color: white;
-`
-const P2 = styled.span`
-  color: white;
-  font-weight: bold;
-`
-
-const Title = styled.h1`
-  margin: 25px 0 0 25px
-  font-size: 3rem
-  font-weight: bold
-  color: white
-`
-
 const P = styled.p`
   color: white;
   font-size: 2.5rem;
@@ -148,7 +124,7 @@ const P = styled.p`
 const PBold = styled.p`
   color: white;
   font-size: 3rem;
-  font-weight: bold
+  font-weight: bold;
   line-height: 3.5rem;
 `
 
@@ -161,8 +137,6 @@ const Top = styled.div`
   justify-content: space-between;
   height: 67px;
   @media (max-width: 470px) {
-    // flex-direction: column;
-    // height: 100px;
     margin-top: 10px;
     align-items: center;
   }
@@ -190,7 +164,6 @@ const RightTop = styled.div`
   height: 15px;
   @media (max-width: 470px) {
     width: 100%;
-    // margin-bottom: 25px;
     margin-top: 0px;
     font-size: 1.5rem;
   }
@@ -229,9 +202,6 @@ const Bottom = styled.div`
   width: 100%;
   height: 80%;
   margin: 0 auto;
-  // @media (max-width: 700px) {
-  //   background-image: url(${Baseball});
-  // }
   @media (max-width: 500px) {
     text-align: center;
     align-items: center;
@@ -292,33 +262,7 @@ const H1 = styled.h1`
   font-size: 1rem;
   color: grey;
 `
-const RegisterBtn = styled.button`
-  &:hover {
-    background: #ed5959;
-    cursor: pointer;
-  }
 
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-  z-index: 1;
-  width: 163px;
-  color: white;
-  background: #1a4570;
-  font-size: 20px;
-  font-family: 'Roboto', sans-serif;
-  @media (max-width: 800px) {
-    width: 90vw;
-    height: 45px;
-  }
-  //
-`
-const ImageMini = styled.img`
-  &:hover {
-    transition: all 0.2s ease-in-out;
-
-    transform: scale(1.5);
-    cursor: pointer;
-  }
-`
 const About = styled.div`
   &:hover {
     transition: all 0.2s ease-in-out;

src/components/allegiances/AddAllegiance.js

@@ -15,7 +15,7 @@ const AddAllegiance = props => {
   const loggedInAllegiances = useSelector(
     state => state.userReducer.loggedInAllegiances
   )
-  const id = props.id
+  const id = useSelector(state => state.userReducer.loggedInUser.id)
   const dispatch = useDispatch()
 
   //Fetches Auth0 token for axios call
@@ -86,8 +86,8 @@ const AddAllegiance = props => {
       {/* <Link */}
       <Segment
         raised
-        color='blue'
-        style={{ width: '90%', margin: 'auto', marginBottom: '15%' }}
+        color='white'
+        style={{ width: '90%', margin: 'auto', marginBottom: '5%' }}
       >
         <Tab menu={{ borderless: true, pointing: true }} panes={panes} />
         <Link to='/makeallegiance'>
@@ -110,16 +110,17 @@ const ButtonDiv = styled.div`
 
 const JoinBtn = styled.button`
   &:hover {
-    background: #4483cd;
-    cursor: pointer;
+    background-color: #1a4570 !important;
+    cursor: pointer !important;
   }
-  height: 54px;
-  width: 192px;
-  border: none;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-  color: white;
-  background: #ed5959;
-  font-size: 16px;
+  height: 54px !important;
+  max-width: 400px !important;
+  margin-bottom: 18px !important;
+  border: none !important;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5) !important;
+  color: white !important;
+  background-color: #4483cd !important;
+  font-size: 16px !important;
   font-family: 'Roboto', sans-serif;
   @media (max-width: 500px) {
     width: 90%;

src/components/group-page/GroupAllegiances.js

@@ -34,6 +34,7 @@ const Allegiances = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  border: 4px solid red;
   h3 {
     margin: 0 auto;
   }
@@ -44,7 +45,7 @@ const ImageHolder = styled.div`
 
 const LogoHolder = styled.div`
   display: flex;
-  flexdirection: row;
+  flex-direction: row;
   justify-content: center;
   margin-top: 1%;
 `

src/components/groups/CreateGroup.js

@@ -77,7 +77,7 @@ const CreateGroup = props => {
   return (
     <FormHolder>
       <FormSegment raised color='violet' style={{ margin: 'auto' }}>
-        <Form onSubmit={handleSubmit} error>
+        <Form onSubmit={handleSubmit} error style={{ fontSize: '1.5rem' }}>
           <h4 style={{ fontWeight: 'bold' }}>Select Image</h4>
           <BasicInfoHolder>
             <Modal

src/components/groups/NearbyGroups.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { Loader, Button } from 'semantic-ui-react'
+import { Loader } from 'semantic-ui-react'
 import { axiosWithAuth } from '../utils/axiosWithAuth'
 import useGetToken from '../utils/useGetToken'
 import styled from 'styled-components'

src/components/nav/AllegianceAccordion.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { Accordion, Icon } from 'semantic-ui-react'
+import { useSelector } from 'react-redux'
+import styled from 'styled-components'
+import ProfileAllegiances from '../profile/ProfileAllegiances'
+
+const AllegianceAccordion = () => {
+  const loggedInAllegiances = useSelector(
+    state => state.userReducer.loggedInAllegiances
+  )
+  const [activeIndex, setActiveIndex] = useState({ activeIndex: 0 })
+  const handleClick = (e, titleProps) => {
+    const { index } = titleProps
+
+    const newIndex = activeIndex.activeIndex === index ? -1 : index
+    setActiveIndex({ activeIndex: newIndex })
+  }
+
+  return (
+    <StyledAccordion>
+      <Accordion.Title
+        active={activeIndex.activeIndex === 0}
+        index={0}
+        onClick={handleClick}
+        className='title'
+      >
+        <Icon name='dropdown' />
+        My Alliances
+      </Accordion.Title>
+      <Accordion.Content
+        active={activeIndex.activeIndex === 0}
+        className='accordion-content'
+      >
+        <ProfileAllegiances
+          content={loggedInAllegiances || []}
+          type='group'
+          name={"You don't"}
+          appear={true}
+        />
+      </Accordion.Content>
+    </StyledAccordion>
+  )
+}
+
+export default AllegianceAccordion
+
+const StyledAccordion = styled(Accordion)`
+  position: sticky;
+  top: 64px;
+  left: 0px;
+  z-index: 1 !important;
+  .title {
+    color: #fff !important;
+    background-color: #1a4571;
+    &:hover {
+      text-shadow: 0px 0px 5px #fff !important;
+    }
+  }
+  .accordion-content {
+    padding: 0px !important;
+  }
+`