fix dark mode bugs with border-width and ProfileCalendar

components/footer/Footer.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Footer = () => {
   return (
-    <footer className="dark:bg-dark-color dark:border-t dark:border-gray-500 p-3 flex justify-center items-center gap-1 flex-col sm:flex-row bg-white">
+    <footer className="dark:bg-dark-color border-t dark:border-gray-500 p-3 flex justify-center items-center gap-1 flex-col sm:flex-row bg-white">
       <span>
         &copy; {new Date().getFullYear()} by
         <a

components/graphs/ContributionGraph.js

@@ -33,7 +33,7 @@ const ContributionGraph = ({ weeks, username }) => {
   };
 
   return (
-    <div className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 py-3 px-3 md:px-5 shadow-bs1 rounded-md h-full w-full min-h-[400px] bg-white mt-5 relative">
+    <div className="dark:bg-dark-color dark:text-white border dark:border-gray-700 py-3 px-3 md:px-5 shadow-bs1 rounded-md h-full w-full min-h-[400px] bg-white mt-5 relative">
       <p className="text-center mb-5 text-xl font-semibold">
         {username}&apos;s Contribution Graph
       </p>

components/graphs/LanguagePie.js

@@ -94,7 +94,7 @@ const LanguagePie = ({ repositories }) => {
   const CustomTooltip = ({ active, payload }) => {
     if (active && payload && payload.length) {
       return (
-        <div className="custom-tooltip backdrop-blur-sm shadow-bs1 bg-slate-50 p-2 dark:bg-dark-gray dark:text-white dark:border dark:border-gray-500">
+        <div className="custom-tooltip backdrop-blur-sm shadow-bs1 bg-slate-50 p-2 dark:bg-dark-gray dark:text-white border dark:border-gray-500">
           {payload[0].name +
             ': ' +
             ((payload[0].value * 100) / sum_of_all_values).toFixed(2) +
@@ -125,7 +125,7 @@ const LanguagePie = ({ repositories }) => {
 
   return (
     <motion.div
-      className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 p-3 pb-0 shadow-bs1 rounded-md h-full w-full min-h-[400px] max-w-[380px] bg-white"
+      className="dark:bg-dark-color dark:text-white border dark:border-gray-700 p-3 pb-0 shadow-bs1 rounded-md h-full w-full min-h-[400px] max-w-[380px] bg-white"
       transition={{ duration: 1 }}
       initial={{ scale: 0 }}
       animate={{ scale: 1 }}

components/graphs/MostForked.js

@@ -30,12 +30,12 @@ const MostForked = ({ repos }) => {
   };
 
   return (
-    <div className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 p-3 shadow-bs1 rounded-md h-full min-h-[400px] w-full bg-white">
+    <div className="dark:bg-dark-color dark:text-white border dark:border-gray-700 p-3 shadow-bs1 rounded-md h-full min-h-[400px] w-full bg-white">
       <p className="text-center mb-5 text-xl font-semibold">
         Most Forked Repositories
       </p>
       <ResponsiveContainer
-        className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700"
+        className="dark:bg-dark-color dark:text-white border dark:border-gray-700"
         width="100%"
         height={420}
       >

components/graphs/MostStar.js

@@ -30,7 +30,7 @@ const MostStar = ({ repos }) => {
   };
 
   return (
-    <div className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 p-3 shadow-bs1 rounded-md h-full min-h-[400px] w-full bg-white">
+    <div className="dark:bg-dark-color dark:text-white border dark:border-gray-700 p-3 shadow-bs1 rounded-md h-full min-h-[400px] w-full bg-white">
       <p className="text-center mb-5 text-xl font-semibold">
         Most Stared Repositories
       </p>

components/nav/Navbar.js

@@ -6,7 +6,7 @@ import { BsGithub } from 'react-icons/bs';
 
 const Navbar = () => {
   return (
-    <nav className="dark:bg-dark-color dark:border-b dark:border-gray-500 flex justify-center items-center bg-white w-full">
+    <nav className="dark:bg-dark-color border-b dark:border-gray-500 flex justify-center items-center bg-white w-full">
       <div className="flex justify-between items-center w-full max-w-[1500px] mx-auto px-5 py-4">
         <Link href="/">
           <a className="h-9 w-9">

components/profile/ProfileCalendar.js

@@ -1,13 +1,45 @@
 import { motion } from 'framer-motion';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import GitHubCalendar from 'react-github-calendar';
 import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
+import { useTheme } from 'next-themes';
+
+const useColorTheme = () => {
+  const { theme, systemTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const currentTheme = theme === 'system' ? systemTheme : theme;
+
+  if (currentTheme === 'dark') {
+    return {
+      level4: '#39d353',
+      level3: '#26a641',
+      level2: '#006d32',
+      level1: '#0e4429',
+      level0: '#161b22',
+    };
+  } else {
+    return {
+      level4: '#216e39',
+      level3: '#30a14e',
+      level2: '#40c463',
+      level1: '#9be9a8',
+      level0: '#ebedf0',
+    };
+  }
+};
 
 const ProfileCalendar = ({ username }) => {
   return (
     <CalenderWrap
-      className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 flex flex-col gap-3 items-center p-3 shadow-bs1 rounded-md w-full bg-white"
+      className="dark:bg-dark-color dark:text-white border dark:border-gray-700 flex flex-col gap-3 items-center p-3 shadow-bs1 rounded-md w-full bg-white"
       transition={{ duration: 1 }}
       initial={{ scale: 0 }}
       animate={{ scale: 1 }}
@@ -16,7 +48,7 @@ const ProfileCalendar = ({ username }) => {
         <a href={`https://github.com/${username}`}>{'@' + username}</a> on
         GitHub
       </p>
-      <GitHubCalendar username={username} fontSize={18}>
+      <GitHubCalendar username={username} fontSize={18} theme={useColorTheme()}>
         <ReactTooltip delayShow={50} html />
       </GitHubCalendar>
     </CalenderWrap>

components/profile/ProfileFollowers.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 const ProfileFollowers = ({ username, followers }) => {
   return (
-    <div className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 p-3 shadow-bs1 rounded-md h-full w-full bg-white">
+    <div className="dark:bg-dark-color dark:text-white border dark:border-gray-700 p-3 shadow-bs1 rounded-md h-full w-full bg-white">
       <p className="text-center mb-5 text-xl font-semibold">
         {'@'}
         {username} Follwers {'(Total: '}
@@ -27,7 +27,7 @@ const ProfileFollowers = ({ username, followers }) => {
                   {'@'}
                   {follow.login}
                 </p>
-                <p className="font-normal text-slate-600 text-sm">
+                <p className="font-normal text-slate-600 text-sm dark:text-slate-400">
                   {follow.name}
                 </p>
               </div>

components/profile/ProfileInfo.js

@@ -20,7 +20,7 @@ const ProfileInfo = ({ user }) => {
 
   return (
     <motion.div
-      className="py-4 px-5 shadow-bs1 rounded-md w-full h-full flex flex-col justify-center bg-white dark:bg-dark-color dark:text-white dark:border dark:border-gray-700"
+      className="py-4 px-5 shadow-bs1 rounded-md w-full h-full flex flex-col justify-center bg-white dark:bg-dark-color dark:text-white border dark:border-gray-700"
       transition={{ duration: 1 }}
       initial={{ scale: 0 }}
       animate={{ scale: 1 }}
@@ -65,7 +65,7 @@ const ProfileInfo = ({ user }) => {
             <HiOutlineMail size={20} />
             <a
               href={`mailto:${user.email}`}
-              className="hover:underline hover:text-gray-800"
+              className="hover:underline hover:text-gray-800 hover:dark:text-white"
             >
               {user.email}
             </a>

components/profile/ProfileNums.js

@@ -67,7 +67,7 @@ const ProfileNums = ({
 
   return (
     <motion.div
-      className="shadow-bs1 rounded-md w-full bg-white p-5 dark:bg-dark-color dark:text-white dark:border dark:border-gray-700"
+      className="shadow-bs1 rounded-md w-full bg-white p-5 dark:bg-dark-color dark:text-white border dark:border-gray-700"
       transition={{ duration: 1 }}
       initial={{ scale: 0 }}
       animate={{ scale: 1 }}
@@ -77,12 +77,12 @@ const ProfileNums = ({
         {items.map((item) => (
           <div
             key={item.id}
-            className="px-5 py-3 flex flex-col justify-between items-center rounded-md shadow-bs5 hover:shadow-bs2 transition-all duration-200 p-2 border-2 border-slate-300 cursor-default dark:bg-dark-gray dark:text-white dark:border dark:border-gray-700"
+            className="px-5 py-3 flex flex-col justify-between items-center rounded-md shadow-bs5 hover:shadow-bs2 transition-all duration-200 p-2 border-2 border-slate-300 cursor-default dark:bg-dark-gray dark:text-white dark:border-gray-700"
             title={item.title}
           >
             <Icon className={item.color}>{item.icon}</Icon>
             <p className="text-2xl font-bold mt-2 -mb-1">{item.value}</p>
-            <p className="text-gray-600">{item.label}</p>
+            <p className="text-gray-600 dark:text-gray-400">{item.label}</p>
           </div>
         ))}
       </div>

components/reuse/CustomTooltip.js

@@ -9,7 +9,7 @@ const CustomTooltip = ({
 }) => {
   if (active && payload && payload.length) {
     return (
-      <div className="custom-tooltip backdrop-blur-sm shadow-sm bg-slate-50 p-2 dark:bg-dark-gray dark:text-white dark:border dark:border-gray-500">
+      <div className="custom-tooltip backdrop-blur-sm shadow-sm bg-slate-50 p-2 dark:bg-dark-gray dark:text-white border dark:border-gray-500">
         <p className="flex gap-3">
           <span>{customLabel1} : </span>
           <span className="font-semibold">{label}</span>

components/social/SocialCard.js

@@ -20,7 +20,7 @@ const SocialCard = ({ ogImageUrl, username, loading }) => {
 
   return (
     <motion.div
-      className="dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 flex flex-col justify-between gap-4 py-3 px-3 md:px-5 shadow-bs1 rounded-md h-full w-full min-h-[442px] bg-white"
+      className="dark:bg-dark-color dark:text-white border dark:border-gray-700 flex flex-col justify-between gap-4 py-3 px-3 md:px-5 shadow-bs1 rounded-md h-full w-full min-h-[442px] bg-white"
       transition={{ duration: 1 }}
       initial={{ scale: 0 }}
       animate={{ scale: 1 }}

components/social/SocialShare.js

@@ -30,7 +30,7 @@ const SocialShare = ({ username }) => {
   };
 
   const ShareClass =
-    'dark:bg-dark-color dark:text-white dark:border dark:border-gray-700 flex justify-center items-center text-white shadow-bs5 hover:shadow-bs2 transition-all duration-200 p-2 rounded-full';
+    'dark:bg-dark-color dark:text-white border dark:border-gray-700 flex justify-center items-center text-white shadow-bs5 hover:shadow-bs2 transition-all duration-200 p-2 rounded-full';
 
   return (
     <div className="flex justify-center items-center flex-col gap-4 mb-4">

pages/index.js

@@ -4,7 +4,7 @@ import Search from '../components/reuse/Search';
 
 const Home = () => {
   const FreturePoint =
-    'dark:bg-dark-gray dark:border dark:border-gray-700 text-center font-semibold py-2 px-2 sm:px-4 bg-slate-200 rounded-md cursor-pointer shadow-bs4';
+    'dark:bg-dark-gray border dark:border-gray-700 text-center font-semibold py-2 px-2 sm:px-4 bg-slate-200 rounded-md cursor-pointer shadow-bs4';
 
   return (
     <main className="dark:bg-dark-color dark:text-white py-8 px-5 h-full md:h-[calc(100vh-48px)] flex gap-10 flex-col justify-center items-center">