fix: making the webpage more accessible (#105)

* fix: change primary color to accessible equivalent

* fix: add for attribute for theme selector label

* feat: add aria-label in label for dropdown menu

* fix: add aria-label

* fix: add for attribute

* Revert "fix: add aria-label"

This reverts commit 6c5bf83.

Author: CBID2

src/components/Header.tsx

@@ -13,7 +13,11 @@ export const Header = () => {
         <div className="navbar bg-base-100">
           <div className="navbar-start">
             <div className="dropdown">
-              <label tabIndex={0} className="btn btn-ghost lg:hidden">
+              <label
+                for="menu"
+                tabIndex={0}
+                className="btn btn-ghost lg:hidden"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-5 w-5"

src/components/ThemeSelector.tsx

@@ -31,6 +31,7 @@ export function ThemeSelector() {
     <>
       <div className="dropdown dropdown-bottom dropdown-end">
         <label
+          for="themeToggle"
           tabIndex={0}
           className="btn btn-circle btn-ghost m-1"
           data-testid="themeSelectorButton"

tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
       "light",
       {
         "custom-dark": {
-          primary: "#3b82f6",
+          primary: "#2d63bc",
 
           secondary: "#a78bfa",