Replaced all the css into tailwind css on TimelineNav component (#1787)

Co-authored-by: Kyle Holmberg <[email protected]>

components/Timeline/TimelineNav/TimelineNav.js

@@ -1,18 +1,22 @@
 import { Link } from 'react-scroll';
 import historyData from '../historyData';
-import styles from './TimelineNav.module.css';
 
 const TimelineNav = () => {
   return (
-    <section className={styles.timelineNav}>
-      <nav className={styles.timelineNavLinksContainer}>
+    <section className="px-16 sm:p-0">
+      <nav className="flex justify-around">
         {Object.keys(historyData).map(year => (
-          <Link key={year} to={`event-${year}`} smooth className={styles.timelineNavLink}>
+          <Link
+            key={year}
+            to={`event-${year}`}
+            smooth
+            className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
+          >
             {year}
           </Link>
         ))}
       </nav>
-      <div className={styles.timelineNavSeperator} />
+      <div className="mt-4 bg-[#d7d7d7] h-1" />
     </section>
   );
 };

components/Timeline/TimelineNav/TimelineNav.module.css

@@ -1,35 +1,3 @@
-.timelineNav {
-  padding: 0 4rem;
-}
-
-@media screen and (--small-viewport) {
-  .timelineNav {
-    padding: 0;
-  }
-}
-
-.timelineNavLinksContainer {
-  display: flex;
-  justify-content: space-around;
-}
-
-.timelineNavLink {
-  font-weight: 700;
-  font-size: 1.2rem;
-  cursor: pointer;
-  transition: transform opacity 100ms ease-in-out;
-}
-
 .timelineNavLink:not(:hover) {
   opacity: 0.6;
 }
-
-.timelineNavLink:hover {
-  transform: scale(1.1);
-}
-
-.timelineNavSeperator {
-  margin-top: 1rem;
-  background-color: #d7d7d7;
-  height: 2px;
-}

components/Timeline/TimelineNav/__tests__/__snapshots__/TimelineNav.test.js.snap

@@ -2,61 +2,61 @@
 
 exports[`TimelineNav should render with no props passed passed 1`] = `
 <section
-  className="timelineNav"
+  className="px-16 sm:p-0"
 >
   <nav
-    className="timelineNavLinksContainer"
+    className="flex justify-around"
   >
     <Link
-      className="timelineNavLink"
+      className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
       offset={0}
       smooth={true}
       to="event-2011"
     >
       2011
     </Link>
     <Link
-      className="timelineNavLink"
+      className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
       offset={0}
       smooth={true}
       to="event-2013"
     >
       2013
     </Link>
     <Link
-      className="timelineNavLink"
+      className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
       offset={0}
       smooth={true}
       to="event-2014"
     >
       2014
     </Link>
     <Link
-      className="timelineNavLink"
+      className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
       offset={0}
       smooth={true}
       to="event-2015"
     >
       2015
     </Link>
     <Link
-      className="timelineNavLink"
+      className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
       offset={0}
       smooth={true}
       to="event-2019"
     >
       2019
     </Link>
     <Link
-      className="timelineNavLink"
+      className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
       offset={0}
       smooth={true}
       to="event-2021"
     >
       2021
     </Link>
     <Link
-      className="timelineNavLink"
+      className="font-bold text-xl cursor-pointer opacity-60 hover:opacity-60 transition-all duration-100 ease-in-out hover:scale-[1.1]"
       offset={0}
       smooth={true}
       to="event-2023"
@@ -65,7 +65,7 @@ exports[`TimelineNav should render with no props passed passed 1`] = `
     </Link>
   </nav>
   <div
-    className="timelineNavSeperator"
+    className="mt-4 bg-[#d7d7d7] h-1"
   />
 </section>
 `;