Added icon toggler

This commit was merged in pull request #592.
This commit is contained in:
2024-02-28 11:41:17 +01:00
parent c4c1bf6ca1
commit cab5debfb7
+25 -12
View File
@@ -158,17 +158,30 @@ export default function RightSideBar({ myJobList }) {
{/* dark mode */} {/* dark mode */}
<div <div
onClick={darkMode.handleThemeSwitch} onClick={darkMode.handleThemeSwitch}
className="item flex space-x-3 items-center mb-4" className="item flex space-x-5 items-center mb-4 cursor-pointer"
> >
<div className="flex space-x-2.5 items-center"> <span className="dark:text-dark-gray text-white">
<span className="dark:text-dark-gray text-white"> {darkMode.theme === "light" ? (
<svg <svg
width="27" xmlns="http://www.w3.org/2000/svg"
height="27" fill="none"
viewBox="0 0 27 27" viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 fill-black"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
/>
</svg>
) : (
<svg
viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="fill-current" className="fill-current w-6 h-6"
> >
<path <path
fillRule="evenodd" fillRule="evenodd"
@@ -221,11 +234,11 @@ export default function RightSideBar({ myJobList }) {
d="M3.92974 5.82165L5.43568 7.34911C5.94893 7.86969 6.78228 7.86969 7.29553 7.34911C7.80878 6.82853 7.80878 5.98328 7.29553 5.46269L5.78958 3.93524C5.27633 3.41465 4.44299 3.41465 3.92974 3.93524C3.41649 4.45582 3.41649 5.30107 3.92974 5.82165Z" d="M3.92974 5.82165L5.43568 7.34911C5.94893 7.86969 6.78228 7.86969 7.29553 7.34911C7.80878 6.82853 7.80878 5.98328 7.29553 5.46269L5.78958 3.93524C5.27633 3.41465 4.44299 3.41465 3.92974 3.93524C3.41649 4.45582 3.41649 5.30107 3.92974 5.82165Z"
/> />
</svg> </svg>
</span> )}
<p className="text-thin-light-gray text-base font-medium"> </span>
{darkMode.theme === "light" ? "Dark" : "Light"} Mode <p className="text-thin-light-gray text-base font-medium">
</p> {darkMode.theme === "light" ? "Dark" : "Light"} Mode
</div> </p>
</div> </div>
</div> </div>
</div> </div>