From 43954922a02a750f7f5ee015bd6f129c1c4eed02 Mon Sep 17 00:00:00 2001 From: xnatsuk Date: Thu, 13 Oct 2022 18:55:23 -0300 Subject: [PATCH 01/42] fix: fix border width in dark mode --- tailwind.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index ca3994e..b315b1b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -52,6 +52,9 @@ module.exports = { 'dark-gray': '#161b22', }, }, + borderWidth: { + default: '0px', + }, }, plugins: [ // require('@tailwindcss/typography'), From 9b1eb644a6aaa4a7be23a55784916a22ead8b453 Mon Sep 17 00:00:00 2001 From: xnatsuk Date: Thu, 13 Oct 2022 20:51:50 -0300 Subject: [PATCH 02/42] fix: update profile calendar to use dark theme --- components/profile/ProfileCalendar.js | 36 +++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/components/profile/ProfileCalendar.js b/components/profile/ProfileCalendar.js index 6c25723..be4422a 100644 --- a/components/profile/ProfileCalendar.js +++ b/components/profile/ProfileCalendar.js @@ -1,8 +1,40 @@ 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 ( @@ -16,7 +48,7 @@ const ProfileCalendar = ({ username }) => { {'@' + username} on GitHub

- + From 312f7ce276a7be326fa8a01f8c643d16a5ba1a56 Mon Sep 17 00:00:00 2001 From: xnatsuk Date: Fri, 14 Oct 2022 16:03:53 -0300 Subject: [PATCH 03/42] fix(ui): fix borders only displaying in dark mode Removed dark only borders, making elements change size on theme change. --- components/footer/Footer.js | 2 +- components/graphs/ContributionGraph.js | 2 +- components/graphs/LanguagePie.js | 4 ++-- components/graphs/MostForked.js | 4 ++-- components/graphs/MostStar.js | 2 +- components/nav/Navbar.js | 2 +- components/profile/ProfileCalendar.js | 2 +- components/profile/ProfileFollowers.js | 2 +- components/profile/ProfileInfo.js | 2 +- components/profile/ProfileNums.js | 4 ++-- components/reuse/CustomTooltip.js | 2 +- components/social/SocialCard.js | 2 +- components/social/SocialShare.js | 2 +- pages/index.js | 2 +- tailwind.config.js | 3 --- 15 files changed, 17 insertions(+), 20 deletions(-) diff --git a/components/footer/Footer.js b/components/footer/Footer.js index 9bcacee..807dca8 100644 --- a/components/footer/Footer.js +++ b/components/footer/Footer.js @@ -2,7 +2,7 @@ import React from 'react'; const Footer = () => { return ( -