@empoweredvote/ev-ui 0.8.3 → 0.8.4

package/dist/index.js

@@ -887,6 +887,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",
@@ -897,6 +907,7 @@ function Header({
   currentPath,
   onNavigate,
   profileMenu,
+  darkMode = false,
   style = {}
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react3.useState)(false);
@@ -920,9 +931,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,
@@ -950,7 +968,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.xl,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       cursor: "pointer",
       display: "flex",
@@ -973,11 +991,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",
@@ -985,7 +1004,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer"
@@ -1007,13 +1026,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,
@@ -1029,7 +1048,7 @@ function Header({
     hamburger: {
       width: "24px",
       height: "2px",
-      backgroundColor: colors.evTeal,
+      backgroundColor: linkColor,
       position: "relative"
     },
     mobileMenu: {
@@ -1039,25 +1058,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",
@@ -1072,11 +1092,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",
@@ -1085,7 +1106,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: linkColor,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer",
@@ -1095,7 +1116,7 @@ function Header({
     },
     mobileDivider: {
       height: "1px",
-      backgroundColor: colors.borderLight,
+      backgroundColor: borderColor,
       margin: `${spacing[3]} 0`
     },
     profileLabel: {
@@ -1103,8 +1124,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",
@@ -1145,7 +1166,7 @@ function Header({
             "path",
             {
               d: "M1 1L8 8L15 1",
-              stroke: colors.evTeal,
+              stroke: linkColor,
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
@@ -1161,7 +1182,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";
@@ -1185,7 +1206,7 @@ function Header({
           fontFamily: fonts.primary,
           fontWeight: fontWeights.bold,
           fontSize: fontSizes["2xl"],
-          color: colors.evTeal
+          color: linkColor
         }
       },
       "empowered.vote"
@@ -1204,12 +1225,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
@@ -1243,7 +1264,7 @@ function Header({
         height: "20",
         viewBox: "0 0 24 24",
         fill: "none",
-        stroke: colors.evTeal,
+        stroke: linkColor,
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round"
@@ -1267,7 +1288,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";
@@ -1287,7 +1308,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";
@@ -1313,7 +1334,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ), /* @__PURE__ */ import_react3.default.createElement(
@@ -1325,7 +1346,7 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: linkColor
         }
       }
     ))
@@ -1578,6 +1599,7 @@ function SiteHeader({
   profileMenu,
   secondaryAction,
   feedbackFeature,
+  darkMode = false,
   style = {}
 }) {
   const handleNavigate = (href) => {
@@ -1606,6 +1628,7 @@ function SiteHeader({
       currentPath,
       onNavigate: handleNavigate,
       profileMenu,
+      darkMode,
       style
     }
   );