addByNew17

backend/config/config.json

@@ -1,7 +1,7 @@
 {
   "development": {
     "username": "postgres",
-    "password": "nongnew2542",
+    "password": "bank1333",
     "database": "DD-Dinner-Dog",
     "host": "127.0.0.1",
     "dialect": "postgres",

frontend/src/App.css

@@ -308,3 +308,40 @@ html, body, #root {
   outline: none;
 }
 
+.linktool .tooltip{
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  width: 120px;
+  margin-left: -93px; /* Use half of the width (120/2 = 60), to center the tooltip */
+  margin-top: 70px;
+
+
+}
+
+
+.linktool .tooltip::after  {
+  content: " ";
+  position: absolute;
+  bottom: 100%;  /* At the top of the tooltip */
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+/* Show the tooltip text when you mouse over the tooltip container */
+.linktool:hover .tooltip{
+visibility: visible;
+}
+.home .linktool {
+  background-color: red;
+  }

frontend/src/components/ChatRoom/Home.js

@@ -31,7 +31,7 @@ const User = (props) => {
       </div>
       <div style={{ display: 'flex', flex: 1, justifyContent: 'space-between', margin: '0 10px' }}>
         <span style={{ fontWeight: 500 }}>{user.name}</span>
-
+        
       </div>
     </div>
   );

frontend/src/components/core/header/Header.css

@@ -16,3 +16,6 @@
   color:#696969;
 }
 
+.ico:after {
+  background-color: red !important;
+}

frontend/src/components/core/header/Header.js

@@ -14,35 +14,41 @@ function Header({backButton}) {
 
     return (
         <div className = "container">
-            <Link to="/home">
+            <Link to="/home" className="linktool">
                 <IconButton>
                     <AiFillHome className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Home</span>
             </Link>
-            <Link to="/premium">
+            <Link onClick={()=>alert("Coming Soon")} className="linktool">
                 <IconButton>
                     <GiCutDiamond className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Premium</span>
             </Link>
-            <Link to="/chat">
+            <Link to="/chat" className="linktool">
                 <IconButton>
                     <AiOutlineWechat className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Chat</span>
             </Link>
-            <Link to="/profile">
+            <Link to="/profile" className="linktool">
                 <IconButton>
                     <MdPets className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Profile</span>
             </Link>
-            <Link to="/notification">
-                <IconButton>
+            <Link onClick={()=>alert("Coming Soon")} className="linktool">
+                <IconButton className="ico">
                     <IoNotifications className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Notification</span>
             </Link>
-            <Link to="/setting">
+            <Link to="/setting" className="linktool">
                 <IconButton>
                     <IoIosSettings className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Setting</span>
             </Link>
 
 

frontend/src/components/pages/home/Swap-page.js

@@ -23,19 +23,21 @@ const alreadyRemoved = []
 
 const Ppic = (props) => {
   let m = ((Math.random() > 0.5) ? 1 : -1) * Math.round(Math.random() * 15);
-  console.log(props.data)
+
   const [prc, setPrc] = useState(null);
+  const [name, setName] = useState("");
 
   useEffect(() => {
     axios.post('/doginfo/getinfo', { id: props.data.id }).then(
       (res) => {
         setPrc((res !== undefined) ? res.data : '')
+        setName(res.data.name)
       })
   }, [])
 
 
-    return prc ? (<div style={{ backgroundImage: `url(${prc.profilePicture})`, transform: `rotate(${m}deg)` }}
-      className="card"><h3>name</h3></div>) : <div></div>
+    return prc ? (<div style={{ backgroundImage: `url(${prc.profilePicture})`, backgroundRepeat:"no-repeat",  backgroundSize:"cover", transform: `rotate(${m}deg)` }}
+      className="card"><h3>{name}</h3></div>)  : <div></div>
 
 }
 
@@ -49,7 +51,7 @@ const Swap = (props) => {
   const user = useSelector(state => state.user);
   let charactersState = user.users;
   const [dog, setCharacters] = useState(user.users)
-  console.log({dog})
+
   let unsubscribe;
   const [lastDirection, setLastDirection] = useState()
   // const [name, setName] = useState("")
@@ -69,7 +71,7 @@ const Swap = (props) => {
   //   }
   // }, [])
   useEffect(() => {
-
+    
     unsubscribe = dispatch(getRealtimeUsers(auth.uid))
       .then(unsubscribe => {
         return unsubscribe;
@@ -147,7 +149,7 @@ const Swap = (props) => {
       </div>
       <div className="swipeButtons">
         <IconButton className="swipeButtons_repeat" onClick={() => refresh()} style={{ width: "50px", height: "50px" }}>
-          <Link to="/"><ReplayIcon fontSize="large" /></Link>
+          <Link id="rp" to="/"><ReplayIcon fontSize="large" /></Link>
 
         </IconButton>
         <IconButton className="swipeButtons_left" onClick={() => swipe('left')} style={{ width: "50px", height: "50px" }}>

frontend/src/components/private-routes/PrivateRoutes.js

@@ -21,8 +21,9 @@ function PrivateRoutes(props) {
                 >
                     <div>
                         {(() => {
+                            console.log(route.url.slice(1, route.url.length))
                             if (route.url !== "/login" && route.url !== "/register") {
-                                return <Header />
+                                return <Header className={route.url.slice(1, route.url.length)} />
                             }
                         })()}