style: added dark mode

saifulshihab · Jun 1, 2024 · 44ffa1c · 44ffa1c
1 parent b4c0abf
commit 44ffa1c
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 178 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -13,7 +13,7 @@
     />
     <title>Facebook Clone</title>
   </head>
-  <body>
+  <body class="bg-[#f0f2f5] dark:bg-[#18191A]">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

diff --git a/src/App.css b/src/App.css
@@ -2,7 +2,6 @@ body,
 html {
   width: 100%;
   height: 100%;
-  background: #f0f2f5;
 }
 #root {
   width: 100%;

diff --git a/src/components/atoms/navbar/index.tsx b/src/components/atoms/navbar/index.tsx
@@ -6,7 +6,7 @@ const Navbar: React.FC = () => {
   const location = useLocation();
   const pathName = location?.pathname.split('/')[1];
   return (
-    <div className="fixed z-50 grid h-14 w-full grid-cols-7 gap-4 bg-white">
+    <div className="fixed z-50 grid h-14 w-full grid-cols-7 gap-4 bg-white dark:bg-[#242526]">
       <div className="col-span-2 flex items-center">
         <div className="ml-2 flex items-center">
           <div className="h-10 text-primary">
@@ -18,14 +18,14 @@ const Navbar: React.FC = () => {
           <div className="h-10">
             <input
               placeholder="Search Facebook"
-              className="ml-2 h-full rounded-full bg-gray-100 px-3 pr-4 focus:outline-none"
+              className="dark:placeholder:text-gra ml-2 h-full rounded-full bg-gray-100 px-3 pr-4 placeholder:text-neutral-400 focus:outline-none dark:bg-neutral-700"
             />
           </div>
         </div>
       </div>
       <div className="col-span-3 flex items-center justify-center space-x-2">
         <Link to="/" id="home">
-          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700">
             <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
@@ -51,7 +51,7 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#home" content="Home" />
         <Link to="/watch" id="watch">
-          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700">
             <div className="relative flex h-auto w-14 items-center justify-center">
               <div className="absolute right-0 top-0 rounded-lg bg-red-500 px-1 text-xs font-bold text-white">
                 9+
@@ -78,7 +78,7 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#watch" content="Video" />
         <Link to="/marketplace" id="marketplace">
-          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700">
             <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
@@ -105,7 +105,7 @@ const Navbar: React.FC = () => {
           content="Marketplace"
         />
         <Link to="/groups" id="groups">
-          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700">
             <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
@@ -129,7 +129,7 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#groups" content="Groups" />
         <Link to="/gaming" id="gaming">
-          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700">
             <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
@@ -156,7 +156,7 @@ const Navbar: React.FC = () => {
       <div className="col-span-2 flex items-center justify-end">
         <div className="flex h-10 w-auto items-center space-x-2 pr-2">
           <Link to="/profile">
-            <button className="flex h-10 items-center justify-center space-x-1 rounded-full px-2 hover:bg-gray-300 focus:outline-none">
+            <button className="flex h-10 items-center justify-center space-x-1 rounded-full px-2 text-black hover:bg-gray-300 focus:outline-none dark:bg-neutral-700 dark:text-gray-200 dark:hover:bg-neutral-600">
               <div className="h-8">
                 <img
                   src="https://random.imagecdn.app/200/200"
@@ -169,16 +169,16 @@ const Navbar: React.FC = () => {
               </div>
             </button>
           </Link>
-          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-neutral-600 focus:outline-none dark:bg-neutral-700 dark:text-gray-200">
             <i className="fas fa-plus"></i>
           </button>
-          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-neutral-600 focus:outline-none dark:bg-neutral-700 dark:text-gray-200">
             <i className="fab fa-facebook-messenger"></i>
           </button>
-          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-neutral-600 focus:outline-none dark:bg-neutral-700 dark:text-gray-200">
             <i className="fas fa-bell"></i>
           </button>
-          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-neutral-600 focus:outline-none dark:bg-neutral-700 dark:text-gray-200">
             <i className="fas fa-sort-down"></i>
           </button>
         </div>

diff --git a/src/components/atoms/post/CreatePostBox.tsx b/src/components/atoms/post/CreatePostBox.tsx
@@ -2,37 +2,37 @@ import React from 'react';
 
 const CreatePostBox: React.FC = () => {
   return (
-    <div className="flex flex-col rounded-lg bg-white p-3 px-4 shadow">
-      <div className="mb-2 flex items-center space-x-2 border-b pb-3">
+    <div className="flex flex-col rounded-lg bg-white p-3 px-4 shadow dark:bg-neutral-800">
+      <div className="mb-2 flex items-center space-x-2 border-b pb-3 dark:border-neutral-700">
         <div className="h-10 w-10">
           <img
             src="https://random.imagecdn.app/200/200"
             className="h-full w-full rounded-full"
             alt="dp"
           />
         </div>
-        <button className="h-10 flex-grow rounded-full bg-gray-100 pl-5 text-left text-gray-500 hover:bg-gray-200 focus:bg-gray-300 focus:outline-none">
+        <button className="h-10 flex-grow rounded-full bg-gray-100 pl-5 text-left text-gray-500 hover:bg-gray-200 focus:bg-gray-300 focus:outline-none dark:bg-neutral-700 dark:text-gray-300 dark:hover:bg-neutral-600 dark:focus:bg-neutral-700">
           What&apos;s on your mind, Shihab?
         </button>
       </div>
-      <div className="-mb-1 flex space-x-3 text-sm font-thin text-gray-600">
-        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
+      <div className="-mb-1 flex space-x-3 text-sm font-thin">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md text-gray-600 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none dark:text-gray-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
           <div>
             <i className="fab fa-youtube text-red-600"></i>
           </div>
           <div>
             <p className="font-semibold">Create Video</p>
           </div>
         </button>
-        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md text-gray-600 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none dark:text-gray-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
           <div>
             <i className="fas fa-images text-green-600"></i>
           </div>
           <div>
             <p className="font-semibold">Photos/Video</p>
           </div>
         </button>
-        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md text-gray-600 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none dark:text-gray-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
           <div>
             <i className="far fa-smile text-yellow-600"></i>
           </div>

diff --git a/src/components/atoms/post/index.tsx b/src/components/atoms/post/index.tsx
@@ -9,26 +9,28 @@ const Post: React.FC<IProps> = (props) => {
   const { post } = props;
   const { user } = post;
   return (
-    <div className="h-auto w-full rounded-md bg-white shadow">
+    <div className="h-auto w-full rounded-md bg-white shadow dark:bg-neutral-800">
       <div className="flex items-center space-x-2 p-2.5 px-4">
         <div className="h-10 w-10">
           <img src={user.dp} className="h-full w-full rounded-full" alt="dp" />
         </div>
         <div className="flex flex-grow flex-col">
-          <p className="text-sm font-semibold text-gray-700">{user.fullName}</p>
+          <p className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            {user.fullName}
+          </p>
           <span className="text-xs font-thin text-gray-400">
             {moment(post.createdAt).fromNow()}
           </span>
         </div>
         <div className="h-8 w-8">
-          <button className="h-full w-full rounded-full text-gray-400 hover:bg-gray-100 focus:outline-none">
+          <button className="h-full w-full rounded-full text-gray-400 hover:bg-gray-100 focus:outline-none dark:text-gray-500 dark:hover:bg-neutral-700">
             <i className="fas fa-ellipsis-h"></i>
           </button>
         </div>
       </div>
       {post.caption ? (
         <div className="mb-1">
-          <p className="max-h-10 truncate px-3 text-sm text-gray-700">
+          <p className="max-h-10 truncate px-3 text-sm text-gray-700 dark:text-gray-300">
             {post.caption}
           </p>
         </div>
@@ -44,46 +46,50 @@ const Post: React.FC<IProps> = (props) => {
       ) : null}
 
       <div className="flex w-full flex-col space-y-2 p-2 px-4">
-        <div className="flex items-center justify-between border-b border-gray-300 pb-2 text-sm text-gray-500">
+        <div className="flex items-center justify-between border-b border-gray-300 pb-2 text-sm dark:border-neutral-700">
           <div className="flex items-center">
             <div className="flex items-center">
-              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white focus:outline-none">
+              <span className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-heart"></i>
-              </button>
-              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-primary text-white focus:outline-none">
+              </span>
+              <span className="flex h-4 w-4 items-center justify-center rounded-full bg-primary text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-thumbs-up"></i>
-              </button>
-              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-white focus:outline-none">
+              </span>
+              <span className="flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-surprise"></i>
-              </button>
+              </span>
               <div className="ml-1">
-                <p>{post.likes}</p>
+                <p className="text-gray-500 dark:text-gray-300">{post.likes}</p>
               </div>
             </div>
           </div>
           <div className="flex items-center space-x-2">
-            <button>{post.comments} Comments</button>
-            <button>{post.shares} Shares</button>
+            <button className="text-gray-500 dark:text-gray-300">
+              {post.comments} Comments
+            </button>
+            <button className="text-gray-500 dark:text-gray-300">
+              {post.shares} Shares
+            </button>
           </div>
         </div>
         <div className="flex space-x-3 text-sm font-thin text-gray-500">
-          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none dark:text-gray-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
             <div>
               <i className="fas fa-thumbs-up"></i>
             </div>
             <div>
               <p className="font-semibold">Like</p>
             </div>
           </button>
-          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none dark:text-gray-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
             <div>
               <i className="fas fa-comment"></i>
             </div>
             <div>
               <p className="font-semibold">Comment</p>
             </div>
           </button>
-          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none dark:text-gray-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
             <div>
               <i className="fas fa-share"></i>
             </div>

diff --git a/src/components/atoms/story/index.tsx b/src/components/atoms/story/index.tsx
@@ -10,13 +10,13 @@ const Story: React.FC<IProps> = (props) => {
   const { user } = story;
   return (
     <div
-      className="relative h-48 w-28 cursor-pointer rounded-xl to-pink-500 p-3 shadow"
+      className="to relative h-48 w-28 cursor-pointer rounded-xl p-3 shadow"
       style={{ backgroundImage: `url(${story.image})` }}
     >
       <div className="absolute">
         <img
           src={user.dp}
-          className="h-10 w-10 rounded-full border-4 border-white"
+          className="h-10 w-10 rounded-full border-4 border-white dark:border-neutral-800"
           alt="story"
         />
       </div>

diff --git a/src/components/layouts/NewsFeedLayout.tsx b/src/components/layouts/NewsFeedLayout.tsx
@@ -7,7 +7,7 @@ import RightSidebar from '../organisms/newsfeed/RightSidebar';
 const NewsFeedLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="flex h-full w-full flex-col">
+    <div className="flex min-h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>
         <div className="flex">