Add entries component

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

Button.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ButtonStyle } from './ButtonStyle'
+
+// eslint-disable-next-line react/prop-types
+const Button = ({ text, onClick }) => (
+  <ButtonStyle onClick={onClick}>
+    <nav>
+      {text}
+      <span />
+      <span />
+      <span />
+      <span />
+    </nav>
+  </ButtonStyle>
+)
+
+export default Button

package.json

@@ -4,19 +4,29 @@
   "private": true,
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-regular-svg-icons": "^5.12.0",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
     "@storybook/react": "^5.2.8",
     "apollo-cache-inmemory": "^1.6.3",
     "apollo-client": "^2.6.4",
     "apollo-link": "^1.2.13",
     "apollo-link-error": "^1.1.12",
     "apollo-link-http": "^1.5.16",
+    "bootstrap": "^4.4.1",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
     "react": "^16.11.0",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.11.0",
+    "react-particles-js": "^2.7.0",
+    "react-particles-webgl": "^1.0.10",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
-    "styled-components": "^4.4.0"
+    "react-text-transition": "^1.0.2",
+    "styled-components": "^4.4.0",
+    "three": "^0.112.1"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",

public/index.html

@@ -13,6 +13,8 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet"> 
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,23 +1,77 @@
 import React from 'react'
 import { ApolloProvider } from '@apollo/react-hooks'
-import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'
-import { ThemeProvider } from 'styled-components'
+import { Switch, Route } from 'react-router-dom'
+import styled, { ThemeProvider } from 'styled-components'
 import theme from './theme'
 import client from './client'
 import Home from './containers/Home'
+import Navbar from './containers/Navbar'
+import Friends from './containers/Friends'
+import Register from './containers/Register'
+import Welcome from './containers/Welcome'
+import PositiveMessages from './containers/PositiveMessages'
+import ParticlesBackground from './UI/particles.js'
+import Login from './containers/Login'
+
+const AppWrapper = styled.div`
+  min-height: 100vh;
+  max-width: 100vw;
+  background-color: ${props => props.theme.colors.lightLilac};
+`
 
 const App = () => (
-  <Router>
     <ThemeProvider theme={theme}>
-      <ApolloProvider client={client}>
-        <div className="App">
-          <Switch>
-            <Route path="/" component={Home} />
-          </Switch>
-        </div>
-      </ApolloProvider>
+      <AppWrapper>
+        <ApolloProvider client={client}>
+          <div className="App">
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            <ParticlesBackground />
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <Switch>
+                <Route exact path="/">
+                  <Welcome />
+                </Route>
+                <Route path="/home">
+                  <Navbar />
+                  <Home />
+                </Route>
+                <Route path="/friends">
+                  <Navbar />
+                  <Friends />
+                </Route>
+                <Route path="/positiveMessages">
+                  <Navbar />
+                  <PositiveMessages />
+                </Route>
+                <Route path="/login">
+                  <Login />
+                </Route>
+                <Route path="/register">
+                  <Register />
+                </Route>
+              </Switch>
+            </div>
+          </div>
+          </div>
+        </ApolloProvider>
+      </AppWrapper>
     </ThemeProvider>
-  </Router>
 )
 
 export default App

src/UI/Button.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ButtonStyle } from './ButtonStyle'
+
+// eslint-disable-next-line react/prop-types
+const Button = ({ text, onClick }) => (
+  <ButtonStyle onClick={onClick}>
+    <nav>
+      {text}
+      <span />
+      <span />
+      <span />
+      <span />
+    </nav>
+  </ButtonStyle>
+)
+
+export default Button

src/UI/ButtonStyle.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+
+
+export const ButtonStyle = styled.button`
+
+    --c: ${({ theme }) => theme.colors.orange};
+    color: var(--c);
+    background-color: white;
+    font-size: 16px;
+    border: 3px solid var(--c);
+    border-radius: 0.5em;
+    /*width: 12em;*/
+    height: 3em;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-family: ${({ theme }) => theme.fonts.family};
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    transition: 0.25s;
+    padding: 10px;
+    margin: 10px;
+
+span {
+    position: absolute;
+    width: 25%;
+    height: 100%;
+    background-color: var(--c);
+    transform: translateY(150%);
+    border-radius: 50%;
+    left: calc((var(--n) - 1) * 25%);
+    transition: 0.5s;
+    transition-delay: calc((var(--n) - 1) * 0.04s);
+    z-index: -1;
+}
+
+&:hover {
+    color: white;
+}
+
+&:hover span {
+    transform: translateY(0) scale(3.2);
+}
+
+span:nth-child(1) {
+    --n: 1;
+}
+
+span:nth-child(2) {
+    --n: 2;
+}
+
+span:nth-child(3) {
+    --n: 3;
+}
+
+span:nth-child(4) {
+    --n: 4;
+}
+`

src/UI/Input.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const Input = styled.input`
+  border: 3px solid ${({ theme }) => theme.colors.purple};
+  border-radius: 7px;
+  background-color: white;
+  padding: 10px;
+  font-family: ${({ theme }) => theme.fonts.family};
+  transition: all 0.2s ease-out;
+  outline: none;
+  margin: 10px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.lightLilac};
+  }
+
+  &:focus {
+    background-color: white;
+    border-color: ${({ theme }) => theme.colors.orange};
+  }
+`

src/UI/bigtext.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+
+export const BigText = styled.h1`
+  font-family: ${({ theme }) => theme.fonts.header.family};
+  font-weight: ${({ theme }) => theme.fonts.header.weight};
+  font-size: 150px;
+  font-color: ${({ theme }) => theme.fonts.header.accent};
+  margin: auto;
+`
+
+
+export const BigText2 = styled.h1`
+  font-family: ${({ theme }) => theme.fonts.header.family};
+  font-weight: ${({ theme }) => theme.fonts.header.weight};
+  font-size: 70px;
+  font-color: ${({ theme }) => theme.fonts.header.accent};
+  margin: auto;
+`
+
+export const BigText3 = styled.h1`
+  font-family: ${({ theme }) => theme.fonts.header.family};
+  font-weight: ${({ theme }) => theme.fonts.header.weight};
+  font-size: 33px;
+  font-color: ${({ theme }) => theme.fonts.header.accent};
+  margin: auto;
+`

src/UI/particles.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import Particles from 'react-particles-js';
+
+var style = {
+    width: "100vw",
+    height: "100vh",
+};
+
+
+class ParticlesBackground extends Component {
+
+    render() {
+        return (
+            <div style={style}>
+            <Particles
+              params={{
+                "particles": {
+                    "number": {
+                        "value": 200,
+                        "density": {
+                            "enable": false
+                        }
+                    },
+                    "size": {
+                        "value": 10,
+                        "random": true,
+                        "anim": {
+                            "speed": 4,
+                            "size_min": 2
+                        }
+                    },
+                    "line_linked": {
+                        "enable": false,
+                    },
+                    "move": {
+                        "random": true,
+                        "speed": 2,
+                        "direction": "top",
+                        "out_mode": "out"
+                    }
+                },
+                "interactivity": {
+                    "events": {
+                        "onhover": {
+                            "enable": true,
+                            "mode": "bubble"
+                        },
+                        "onclick": {
+                            "enable": true,
+                            "mode": "repulse"
+                        }
+                    },
+                    "modes": {
+                        "bubble": {
+                            "distance": 150,
+                            "duration": 1.5,
+                            "size": 0,
+                            "opacity": 0
+                        },
+                        "repulse": {
+                            "distance": 400,
+                            "duration": 4
+                        }
+                    }
+                }
+            }} />
+            </div>
+            )
+    }
+}
+
+export default ParticlesBackground;

src/containers/Friends/components/AddFriend/UserResult/graphql.js

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag'
+
+export const SEND_FRIEND_REQUEST = gql`
+  mutation ($requesteeId: ID!) {
+    sendFriendRequest (requesteeId: $requesteeId) {
+      requestorId
+      requesteeId
+    }
+  }
+`

src/containers/Friends/components/AddFriend/UserResult/index.js

@@ -0,0 +1,36 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react'
+import { useMutation } from '@apollo/react-hooks'
+import { UserContainer, Name, Confirmation } from './styles'
+import { SEND_FRIEND_REQUEST } from './graphql'
+import Button from '../../../../../UI/Button'
+
+const UserResult = ({ firstName, lastName, userId }) => {
+  const [requestSent, setRequestSent] = useState(false)
+  const [addFriend] = useMutation(SEND_FRIEND_REQUEST, {
+    variables: {
+      requesteeId: userId,
+    },
+    onCompleted: () => {
+      setRequestSent(true)
+    },
+  })
+
+  if (requestSent) {
+    return (
+      <UserContainer>
+        <Name>{`${firstName} ${lastName}`}</Name>
+        <Confirmation>Request Sent</Confirmation>
+      </UserContainer>
+    )
+  }
+
+  return (
+    <UserContainer>
+      <Name>{`${firstName} ${lastName}`}</Name>
+      <Button text="Request" onClick={addFriend} />
+    </UserContainer>
+  )
+}
+
+export default UserResult