#25 Add follow/unfollow buttons

src/pages/travelers/Traveler.js

@@ -1,30 +1,52 @@
-import React from 'react'
-import styles from '../../styles/TravelerProfile.module.css'
-import btnStyles from '../../styles/Button.module.css'
-import { useCurrentUser } from '../../contexts/CurrentUserContext'
-import { Link } from 'react-router-dom'
-import Avatar from '../../components/Avatar'
+import React from "react";
+import styles from "../../styles/TravelerProfile.module.css";
+import btnStyles from "../../styles/Button.module.css";
+import { useCurrentUser } from "../../contexts/CurrentUserContext";
+import { Link } from "react-router-dom";
+import Avatar from "../../components/Avatar";
+import { Button } from "react-bootstrap";
 
 const Traveler = (props) => {
-    const {traveler, mobile, imageSize=55} = props
-    const {id, following_id, image, owner} = traveler;
+  const { traveler, mobile, imageSize = 55 } = props;
+  const { id, following_id, image, owner } = traveler;
 
-    const currentUser = useCurrentUser();
-    const is_owner = currentUser?.username === owner;
+  const currentUser = useCurrentUser();
+  const is_owner = currentUser?.username === owner;
 
   return (
-    <div className={`my-3 d-flex align-items-center ${mobile && 'flex-column'}`}>
-        <div>
-            <Link className="align-self-center" to={`/travelers/${id}`}>
-                <Avatar src={image} height={imageSize} />
-            </Link>
-        </div>
-        <div className={`mx-2 ${styles.WordBreak}`}>
-            <strong>{owner}</strong>
-
-        </div>
+    <div
+      className={`my-3 d-flex align-items-center ${mobile && "flex-column"}`}
+    >
+      <div>
+        <Link className="align-self-center" to={`/travelers/${id}`}>
+          <Avatar src={image} height={imageSize} />
+        </Link>
+      </div>
+      <div className={`mx-2 ${styles.WordBreak}`}>
+        <strong>{owner}</strong>
+      </div>
+      <div className={`text-right ${!mobile && "ml-auto"}`}>
+        {!mobile &&
+          currentUser &&
+          !is_owner &&
+          (following_id ? (
+            <Button
+              className={`me-1 ${btnStyles.Button} ${btnStyles.Pink}`}
+              onClick={() => {}}
+            >
+              unfollow
+            </Button>
+          ) : (
+            <Button
+              className={`me-1 btn-sm ${btnStyles.Button} ${btnStyles.PinkOutline}`}
+              onClick={() => {}}
+            >
+              follow
+            </Button>
+          ))}
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Traveler
+export default Traveler;

src/styles/Button.module.css

@@ -41,26 +41,20 @@
 
   .BlueOutline,
   .Blue:hover {
-    /* border: 1px solid #2142b2; */
     background-color: #ffffff;
     color: var(--clr-accent-dark);
   }
 
-  .Black,
-  .BlackOutline:hover {
-    /* background-color: #242a3d;
-    color: white; */
-    background-color: #242a3d;
-    color: aliceblue;
+  .Pink,
+  .PinkOutline:hover {
+    background-color: var(--clr-accent-danger);
+    color: var(--clr-primary-light);
   }
 
-  .Black:hover,
-  .BlackOutline {
-    /* background-color: #dadadf;
-    color: #242a3d;
-    border-color: #242a3d; */
-    background-color: aliceblue;
-    color: #242a3d;
+  .Pink:hover,
+  .PinkOutline {
+    background-color: var(--clr-accent-pink);
+    color: var(--clr-primary-light);
   }
 
   .Bright {