Added background to onboarding page

client/src/components/ChatHeader.js

@@ -1,18 +1,9 @@
 import { useCookies} from "react-cookie"
-import { useNavigate } from 'react-router-dom'
+
 
 const ChatHeader = ({user}) => {
     const [cookies, setCookie, removeCookie] = useCookies(['user'])
-    let navigate = useNavigate()
-
-    const logout = () => {
-        removeCookie('UserId', cookies.UserId)
-        removeCookie('AuthToken', cookies.AuthToken)
-        navigate('/')
-        window.location.reload()
-    }
-
-
+
     return (
         <div className="chat-container-header">
             <div className="profile">
@@ -21,7 +12,6 @@ const ChatHeader = ({user}) => {
                 </div>
                 <h3>{user.first_name}</h3>
             </div>
-            <i className="log-out-icon" onClick={logout}>⇦</i>
     </div>
     )
 }

client/src/index.css

@@ -258,6 +258,23 @@ nav .logo-container .logo {
     width: 100%
 }
 
+/* onboarding page background */
+.wrapper {
+      width: 100%;
+      height: 120%;
+      position: absolute;
+      background: linear-gradient(45deg,#F17C58, #E94584, #fba226 ,#FD297B,#FF655B,#ffb618);
+      background-size: 600% 100%;
+      animation: gradient 16s linear infinite;
+      animation-direction: alternate;
+}
+@keyframes gradient {
+      0% {background-position: 0%}
+      100% {background-position: 100%}
+}
+
+
+
 /*-----Dashboard Page -----*/
 
 
@@ -304,6 +321,13 @@ nav .logo-container .logo {
     padding: 10px;
 }
 
+.logout-icon{
+    display: flex;
+    justify-content:flex-end;
+    width: 97%;
+    cursor: pointer;
+}
+
 
 /*------Chat Container ------*/
 

client/src/pages/Dashboard.js

@@ -3,12 +3,21 @@ import {useEffect, useState} from "react"
 import { useCookies} from "react-cookie"
 import ChatContainer from '../components/ChatContainer'
 import axios from "axios"
+import { useNavigate } from "react-router-dom"
 
 const Dashboard = () => {
     const [user, setUser] = useState(null)
     const [genderedUsers, setGenderedUsers] = useState(null)
     const [lastDirection, setLastDirection] = useState()
     const [cookies, setCookie, removeCookie] = useCookies(['user'])
+    let navigate = useNavigate()
+
+    const logout = () => {
+        removeCookie('UserId', cookies.UserId)
+        removeCookie('AuthToken', cookies.AuthToken)
+        navigate('/')
+        window.location.reload()
+    }
 
 
     const userId = cookies.UserId
@@ -94,8 +103,8 @@ const Dashboard = () => {
                 <div className="dashboard">
                     <ChatContainer user={user}/>
                     <div className="swipe-container">
+                    <div className="logout-icon"><i className="log-out-icon" onClick={logout}>⇦</i></div>
                         <div className="card-container">
-
                             {filteredGenderedUsers?.map((genderedUser) =>
                                 <TinderCard className='swipe'
                                             key={genderedUser.user_id}

client/src/pages/OnBoarding.js

@@ -59,7 +59,7 @@ const OnBoarding = () => {
                 showModal={false}
 
             />
-            <div className="onboarding">
+            <div className="onboarding wrapper">
                 <h2>Create Account</h2>
 
                 <form onSubmit={handleSubmit}>

server/.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+# /node_modules
 /.pnp
 .pnp.js
 

server/index.js

@@ -7,7 +7,7 @@ const jwt = require('jsonwebtoken')
 const cors = require('cors')
 const bcrypt = require('bcrypt')
 const {google}=require('googleapis');
-const uri = 'mongodb://localhost:27017'
+const uri = 'mongodb://0.0.0.0:27017'
 
 
 const app = express()