Replaced all the css into tailwind css on FeaturedJobItem component (#…

…1757)
OperationCode · Nov 2, 2023 · 33ed32b · 33ed32b · vercel · Nov 2, 2023
1 parent d1146da
commit 33ed32b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 73 deletions.
diff --git a/components/FeaturedJobItem/FeaturedJobItem.js b/components/FeaturedJobItem/FeaturedJobItem.js
@@ -3,7 +3,6 @@ import OutboundLink from 'components/OutboundLink/OutboundLink';
 import BuildingIcon from 'static/images/icons/FontAwesome/building_icon.svg';
 import CloudUploadIcon from 'static/images/icons/FontAwesome/cloud_upload_icon.svg';
 import MapMarkerIcon from 'static/images/icons/FontAwesome/map_marker_icon.svg';
-import styles from './FeaturedJobItem.module.css';
 
 FeaturedJobItem.propTypes = {
   title: string.isRequired,
@@ -25,32 +24,34 @@ FeaturedJobItem.defaultProps = {
 
 function FeaturedJobItem({ title, source, sourceUrl, city, state, country, description, remote }) {
   return (
-    <article className={styles.job}>
+    <article className="py-4 px-0">
       <OutboundLink href={sourceUrl} analyticsEventLabel={`Featured Job ${source}`}>
         <h6>{title}</h6>
       </OutboundLink>
 
-      <div className={styles.details}>
-        <div className={styles.detailsContainer}>
-          <BuildingIcon className={styles.icon} />
-          <span className={styles.detail}>{source}</span>
+      <div className="flex flex-wrap text-lg text-secondary opacity-80 mt-1 ">
+        <div className="flex items-center gap-1.5">
+          <BuildingIcon className="fill-secondary opacity-80 h-3.5" />
+          <span className="ml-1">{source}</span>
         </div>
 
-        <div className={styles.detailsContainer}>
-          {(city || state || country) && <MapMarkerIcon className={styles.icon} />}
-          {city && <span className={styles.detail}>{city},</span>}
-          {state && <span className={styles.detail}>{state},</span>}
-          {country && <span className={styles.detail}>{country}</span>}
+        <div className="flex items-center gap-1.5">
+          {(city || state || country) && (
+            <MapMarkerIcon className="fill-secondary opacity-80 h-3.5" />
+          )}
+          {city && <span className="ml-1">{city},</span>}
+          {state && <span className="ml-1">{state},</span>}
+          {country && <span className="ml-1">{country}</span>}
         </div>
 
         {remote && (
-          <div className={styles.detailsContainer}>
-            <CloudUploadIcon className={styles.icon} />
-            <span className={styles.remote}>Remote</span>
+          <div className="flex items-center gap-1.5">
+            <CloudUploadIcon className="fill-secondary opacity-80 h-3.5" />
+            <span className="ml-1">Remote</span>
           </div>
         )}
       </div>
-      <p className={styles.description}>{description}</p>
+      <p className="m-0">{description}</p>
     </article>
   );
 }

diff --git a/components/FeaturedJobItem/FeaturedJobItem.module.css b/components/FeaturedJobItem/FeaturedJobItem.module.css
diff --git a/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap b/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FeaturedJobItem should render with many props assigned 1`] = `
 <article
-  className="job"
+  className="py-4 px-0"
 >
   <a
     className="OutboundLink"
@@ -25,59 +25,59 @@ exports[`FeaturedJobItem should render with many props assigned 1`] = `
     />
   </a>
   <div
-    className="details"
+    className="flex flex-wrap text-lg text-secondary opacity-80 mt-1 "
   >
     <div
-      className="detailsContainer"
+      className="flex items-center gap-1.5"
     >
       <svg
-        className="icon"
+        className="fill-secondary opacity-80 h-3.5"
       />
       <span
-        className="detail"
+        className="ml-1"
       >
         Formidable Labs
       </span>
     </div>
     <div
-      className="detailsContainer"
+      className="flex items-center gap-1.5"
     >
       <svg
-        className="icon"
+        className="fill-secondary opacity-80 h-3.5"
       />
       <span
-        className="detail"
+        className="ml-1"
       >
         Seattle
         ,
       </span>
       <span
-        className="detail"
+        className="ml-1"
       >
         WA
         ,
       </span>
       <span
-        className="detail"
+        className="ml-1"
       >
         United States
       </span>
     </div>
     <div
-      className="detailsContainer"
+      className="flex items-center gap-1.5"
     >
       <svg
-        className="icon"
+        className="fill-secondary opacity-80 h-3.5"
       />
       <span
-        className="remote"
+        className="ml-1"
       >
         Remote
       </span>
     </div>
   </div>
   <p
-    className="description"
+    className="m-0"
   >
     As an Experienced React Engineer, you will do React things.
   </p>
@@ -86,7 +86,7 @@ exports[`FeaturedJobItem should render with many props assigned 1`] = `
 
 exports[`FeaturedJobItem should render with required props 1`] = `
 <article
-  className="job"
+  className="py-4 px-0"
 >
   <a
     className="OutboundLink"
@@ -109,26 +109,26 @@ exports[`FeaturedJobItem should render with required props 1`] = `
     />
   </a>
   <div
-    className="details"
+    className="flex flex-wrap text-lg text-secondary opacity-80 mt-1 "
   >
     <div
-      className="detailsContainer"
+      className="flex items-center gap-1.5"
     >
       <svg
-        className="icon"
+        className="fill-secondary opacity-80 h-3.5"
       />
       <span
-        className="detail"
+        className="ml-1"
       >
         GitLab
       </span>
     </div>
     <div
-      className="detailsContainer"
+      className="flex items-center gap-1.5"
     />
   </div>
   <p
-    className="description"
+    className="m-0"
   >
     This is a fake role, since GitLab always has remote.
   </p>