@empoweredvote/ev-ui 0.8.3 → 0.8.5

package/dist/index.mjs

@@ -796,6 +796,16 @@ function useMediaQuery(query) {
 }
 
 // src/Header.jsx
+var dark = {
+  bg: "#1C1F23",
+  bgElevated: "#2F3237",
+  bgHover: "#41454E",
+  border: "#41454E",
+  link: "#59B0C4",
+  text: "#D3D7DE",
+  textMuted: "#9CA3AF",
+  shadow: "0 10px 40px rgba(0,0,0,0.4)"
+};
 function Header({
   logoSrc,
   logoAlt = "Empowered Vote",
@@ -806,6 +816,7 @@ function Header({
   currentPath,
   onNavigate,
   profileMenu,
+  darkMode = false,
   style = {}
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
@@ -829,9 +840,16 @@ function Header({
       onNavigate(href);
     }
   };
+  const linkColor = darkMode ? dark.link : colors.evTeal;
+  const dropdownBg = darkMode ? dark.bgElevated : colors.bgWhite;
+  const dropdownShadow = darkMode ? dark.shadow : "0 10px 40px rgba(0,0,0,0.1)";
+  const hoverBg = darkMode ? dark.bgHover : colors.bgLight;
+  const borderColor = darkMode ? dark.border : colors.borderLight;
+  const mobileShadow = darkMode ? "0 4px 20px rgba(0,0,0,0.4)" : "0 4px 20px rgba(0,0,0,0.1)";
   const styles2 = {
     header: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: darkMode ? dark.bg : colors.bgWhite,
+      borderBottom: darkMode ? `1px solid ${dark.border}` : "none",
       position: "sticky",
       top: 0,
       zIndex: 50,
@@ -859,7 +877,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.xl,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       cursor: "pointer",
       display: "flex",
@@ -882,11 +900,12 @@ function Header({
       zIndex: 100
     },
     dropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: dropdownBg,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: dropdownShadow,
       minWidth: "200px",
-      padding: spacing[2]
+      padding: spacing[2],
+      border: darkMode ? `1px solid ${dark.border}` : "none"
     },
     dropdownItem: {
       display: "block",
@@ -894,7 +913,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer"
@@ -916,13 +935,13 @@ function Header({
       display: "inline-flex",
       alignItems: "center",
       backgroundColor: "transparent",
-      color: colors.evTeal,
+      color: linkColor,
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.base,
       padding: `${spacing[2]} ${spacing[5]}`,
       borderRadius: borderRadius.full || "999px",
-      border: `1.5px solid ${colors.evTeal}`,
+      border: `1.5px solid ${linkColor}`,
       cursor: "pointer",
       textDecoration: "none",
       lineHeight: 1.2,
@@ -938,7 +957,7 @@ function Header({
     hamburger: {
       width: "24px",
       height: "2px",
-      backgroundColor: colors.evTeal,
+      backgroundColor: linkColor,
       position: "relative"
     },
     mobileMenu: {
@@ -948,25 +967,26 @@ function Header({
       top: "100%",
       left: 0,
       right: 0,
-      backgroundColor: colors.bgWhite,
+      backgroundColor: darkMode ? dark.bg : colors.bgWhite,
       padding: spacing[4],
-      boxShadow: "0 4px 20px rgba(0,0,0,0.1)"
+      boxShadow: mobileShadow,
+      borderTop: darkMode ? `1px solid ${dark.border}` : "none"
     },
     mobileNavItem: {
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.lg,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       padding: `${spacing[3]} 0`,
-      borderBottom: `1px solid ${colors.borderLight}`
+      borderBottom: `1px solid ${borderColor}`
     },
     profileButton: {
       width: "40px",
       height: "40px",
       borderRadius: borderRadius.full,
-      border: `2px solid ${colors.evTeal}`,
-      backgroundColor: colors.bgLight,
+      border: `2px solid ${linkColor}`,
+      backgroundColor: darkMode ? dark.bgElevated : colors.bgLight,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -981,11 +1001,12 @@ function Header({
       zIndex: 100
     },
     profileDropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: dropdownBg,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: dropdownShadow,
       minWidth: "160px",
-      padding: spacing[2]
+      padding: spacing[2],
+      border: darkMode ? `1px solid ${dark.border}` : "none"
     },
     profileDropdownItem: {
       display: "block",
@@ -994,7 +1015,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer",
@@ -1004,7 +1025,7 @@ function Header({
     },
     mobileDivider: {
       height: "1px",
-      backgroundColor: colors.borderLight,
+      backgroundColor: borderColor,
       margin: `${spacing[3]} 0`
     },
     profileLabel: {
@@ -1012,8 +1033,8 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.semibold,
       fontSize: fontSizes.sm,
-      color: colors.textMuted,
-      borderBottom: `1px solid ${colors.borderLight}`,
+      color: darkMode ? dark.textMuted : colors.textMuted,
+      borderBottom: `1px solid ${borderColor}`,
       marginBottom: spacing[1],
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -1054,7 +1075,7 @@ function Header({
             "path",
             {
               d: "M1 1L8 8L15 1",
-              stroke: colors.evTeal,
+              stroke: linkColor,
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
@@ -1070,7 +1091,7 @@ function Header({
           onClick: (e) => handleNavClick(e, dropdownItem.href),
           style: styles2.dropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1094,7 +1115,7 @@ function Header({
           fontFamily: fonts.primary,
           fontWeight: fontWeights.bold,
           fontSize: fontSizes["2xl"],
-          color: colors.evTeal
+          color: linkColor
         }
       },
       "empowered.vote"
@@ -1113,12 +1134,12 @@ function Header({
       style: styles2.secondaryAction,
       className: "ev-header-secondary",
       onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = colors.evTeal;
+        e.currentTarget.style.backgroundColor = linkColor;
         e.currentTarget.style.color = colors.textWhite;
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.backgroundColor = "transparent";
-        e.currentTarget.style.color = colors.evTeal;
+        e.currentTarget.style.color = linkColor;
       }
     },
     secondaryAction.label
@@ -1152,7 +1173,7 @@ function Header({
         height: "20",
         viewBox: "0 0 24 24",
         fill: "none",
-        stroke: colors.evTeal,
+        stroke: linkColor,
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round"
@@ -1176,7 +1197,7 @@ function Header({
           },
           style: styles2.profileDropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1196,7 +1217,7 @@ function Header({
         },
         style: styles2.profileDropdownItem,
         onMouseEnter: (e) => {
-          e.target.style.backgroundColor = colors.bgLight;
+          e.target.style.backgroundColor = hoverBg;
         },
         onMouseLeave: (e) => {
           e.target.style.backgroundColor = "transparent";
@@ -1222,7 +1243,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ), /* @__PURE__ */ React2.createElement(
@@ -1234,7 +1255,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ))
@@ -1487,6 +1508,7 @@ function SiteHeader({
   profileMenu,
   secondaryAction,
   feedbackFeature,
+  darkMode = false,
   style = {}
 }) {
   const handleNavigate = (href) => {
@@ -1515,6 +1537,7 @@ function SiteHeader({
       currentPath,
       onNavigate: handleNavigate,
       profileMenu,
+      darkMode,
       style
     }
   );