Login and register

.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

@@ -10,13 +10,19 @@
     "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,7 @@
     -->
     <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,76 @@
 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>
+        </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/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Container } from './styles'
+import {withRouter} from 'react-router';
+
+
+
+const Friends = () => {
+  console.log('RANDOM MESSAGE')
+
+  return (
+    <div>
+      yeaint got a damn friend yet
+    </div>
+  )
+}
+
+export default withRouter(Friends)

src/containers/Friends/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+
+export const Container = styled.div`
+  height: 100px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme }) => theme.colors.lilac};
+`

src/containers/Home/index.js

@@ -1,6 +1,19 @@
 import React from 'react'
+import ReactTextTransition, { presets } from 'react-text-transition'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import { Container, Row, Col } from 'react-bootstrap'
+import { BigText } from '../../UI/bigtext'
 
-const Home = () => <div>Welcome to the DEV React starter!</div>
-
+const Home = () => (
+  <BigText>
+    <ReactTextTransition
+      text="Welcome "
+      spring={presets.molasses}
+      className="big"
+      delay={800}
+      inline
+    />
+  </BigText>
+)
 
 export default Home