Proll 158/dark mode changing #8
Conversation
There was a problem hiding this comment.
Well done! 🔥 Two notes:
-
The pandas and AWS icons are poorly visible in dark mode and look slightly different in Figma. In addition, with the Redis icon the white color is visible in places that should be transparent
-
Second thing, there are still some warnings in the console:
| <div className="bg-neutralLight-neutral90 rounded-[2rem] md:min-w-[36.225rem] overflow-hidden"> | ||
| <div className="bg-neutralLight-neutral90 dark:bg-neutralDark-neutral90 rounded-[2rem] md:min-w-[36.225rem] overflow-hidden"> | ||
| <Image | ||
| height={283} | ||
| width={343} |
There was a problem hiding this comment.
It is possible that downloading a photo with a background was not the best idea, because in dark mode we have a light background and if Figma it changes with theme. You can try swapping image conditionally or change the photo and add the background manually
| @@ -5,7 +5,7 @@ import solutionsTexts from "@/data/solutionsSectionTexts"; | |||
| const SolutionsSection = ({ version }) => { | |||
| const { title } = solutionsTexts[version]; | |||
| return ( | |||
| <section className="bg-neutralLight-neutral10 w-full flex justify-center"> | |||
| <section className="bg-neutralLight-neutral10 dark:bg-neutralDark-neutral90 w-full flex justify-center"> | |||
| <div className="pt-[5.88rem] pb-[5.88rem] md:pt-[7.75rem] md:pb-[7.75rem] flex flex-col justify-center items-center gap-11 max-w-[49.375rem]"> | |||
| <h4 className="text-neutralLight-neutral100 h2SB xl:h2 justify-center items-center text-center"> | |||
| {title} | |||
There was a problem hiding this comment.
The second link icon should also be visible for both themes, and the background colors for the dark mode don't match the design in Figma. Here's figma:
| @@ -3,7 +3,7 @@ import React from "react"; | |||
| const RoundedRectangle = () => { | |||
| return ( | |||
| <div className="relative w-full h-[2rem] md:h-[6.25rem] bg-neutralLight-neutral10"> | |||
There was a problem hiding this comment.
The dark:bg-neutralLight-neutral20 is missing here, so in dark mode it looks like not rounded
| const [darkMode, setDarkMode] = useState(true); | ||
|
|
||
| useEffect(() => { | ||
| const theme = localStorage.getItem("theme"); | ||
| if (theme === "dark") setDarkMode(true); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (darkMode) { | ||
| document.documentElement.classList.add("dark"); | ||
| localStorage.setItem("theme", "dark"); | ||
| } else { | ||
| document.documentElement.classList.remove("dark"); | ||
| localStorage.setItem("theme", "light"); | ||
| } | ||
| }, [darkMode]); |
There was a problem hiding this comment.
This code uses LocalStorage, but when the page is refreshed, dark mode is set as the default. So it looks like there is a problem somewhere in the logic 🤔
|
Looks great! 🕶️ Pandas and AWS icons are hard to read - can we make them look like in figma: 
|
|
…ogos in TechnologiesSection- darkMode
|
@roszcz , please take a look when you have a moment, at the CustomSolutions subpage and the icons in Our technologies. They appear a little differently than in Figma in DarkMode, but they are visible. Should it stay like this, or should I change it to preserve the color? |
|
Icons look good for me, I think we can keep redis as is 👍 |
Tasks:
Please remember that there was design update, which I'm going to do in next task:)
task link
Done:)