Merge pull request #307 from siddhant-2002/main

dark mode
PatilHarshh · Jul 3, 2024 · 8f5b5ce · 8f5b5ce
2 parents 7a23ffe + 1ca3e46
commit 8f5b5ce
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 63 deletions.
diff --git a/client/index.html b/client/index.html
@@ -8,7 +8,7 @@
   <title>Job Finder | Find Dream Job</title>
 </head>
 
-<body className="dark">
+<body >
   <div id="root"></div>
   <script type="module" src="./src/main.jsx"></script>
 </body>

diff --git a/client/src/pages/blogs.jsx b/client/src/pages/blogs.jsx
@@ -30,76 +30,22 @@ const BlogGrid = () => {
       });
   }, []);
 
-  const gridContainerStyle = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
-    gap: '20px',
-    padding: '20px',
-  };
-
-  const gridItemStyle = {
-    padding: '10px',
-    textAlign: 'center',
-    width: '100%', // Adjust to fit within the grid
-    boxSizing: 'border-box',
-    border: '1px solid #ddd',
-    borderRadius: '5px',
-    backgroundColor: '#f9f9f9',
-  };
-
-  const imageStyle = {
-    maxWidth: '100%',
-    height: 'auto',
-    marginBottom: '10px',
-  };
-
-  const titleStyle = {
-    fontSize: '1.2em',
-    marginBottom: '10px',
-  };
-
-  const paragraphStyle = {
-    fontSize: '0.9em',
-    marginBottom: '10px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    display: '-webkit-box',
-    WebkitLineClamp: 3,
-    WebkitBoxOrient: 'vertical',
-  };
-
-  const linkStyle = {
-    display: 'inline-block',
-    marginTop: '10px',
-    padding: '8px 16px',
-    backgroundColor: '#0073e6',
-    color: 'white',
-    textDecoration: 'none',
-    borderRadius: '5px',
-  };
-
-  const linkHoverStyle = {
-    backgroundColor: '#005bb5',
-  };
-
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error fetching data: {error.message}</div>;
 
   return (
-    <div style={gridContainerStyle}>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 p-5">
       {posts.map((post) => (
-        <div key={post.guid} style={gridItemStyle}>
-          {post.thumbnail && <img src={post.thumbnail} alt={post.title} style={imageStyle} />}
-          <h2 style={titleStyle}>{post.title}</h2>
-          <p style={paragraphStyle}>{new Date(post.pubDate).toLocaleDateString()}</p>
-          <p style={paragraphStyle} dangerouslySetInnerHTML={{ __html: post.description }}></p>
+        <div key={post.guid} className="p-4 pt-2 text-center w-full box-border border border-gray-300 rounded bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:text-white">
+          {post.thumbnail && <img src={post.thumbnail} alt={post.title} className="max-w-full h-auto mb-2" />}
+          <h2 className="text-lg pt-2 mb-2">{post.title}</h2>
+          <p className="text-sm pt-2 mb-2">{new Date(post.pubDate).toLocaleDateString()}</p>
+          <p className="text-sm mb-2 pt-2 overflow-hidden  text-ellipsis line-clamp-3" dangerouslySetInnerHTML={{ __html: post.description }}></p>
           <a
             href={post.link}
             target="_blank"
             rel="noopener noreferrer"
-            style={linkStyle}
-            onMouseOver={(e) => (e.currentTarget.style.backgroundColor = linkHoverStyle.backgroundColor)}
-            onMouseOut={(e) => (e.currentTarget.style.backgroundColor = linkStyle.backgroundColor)}
+            className="inline-block mt-2 pt-2 px-4 py-2 bg-blue-600 text-white no-underline rounded hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
           >
             Read More
           </a>
@@ -109,4 +55,4 @@ const BlogGrid = () => {
   );
 };
 
-export default BlogGrid;
+export default BlogGrid;