hds-web 1.37.7 → 1.37.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.37.7",
+  "version": "1.37.9",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Headers/v3Header.js

@@ -22,26 +22,43 @@ const updatePGParam = (originalLink, websiteKey) => {
 
 export default function V3Header(props) {
   const listSize = props.HEADER_LIST.length;
+
   const [mobileNavOpen, setmobileNavOpen] = useState(false);
+
   const [isProduct, setIsProduct] = useState(false);
+
   const [isDeveloper, setIsDeveloper] = useState(false);
+
   const [isCompany, setIsCompany] = useState(false);
+
   const [currentTab, setCurrentTab] = useState("");
+
   const [isShown, setIsShown] = useState(false);
+
   const [isArrowActive, setIsArrowActive] = useState(false);
+
   const signUpLink = props.signUpLink
     ? props.signUpLink
     : "https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default";
+
   const logInLink = props.logInLink
     ? props.logInLink
     : "https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default";
+
   const signupURL = updatePGParam(signUpLink, props.website_key);
+
   const loginURL = updatePGParam(logInLink, props.website_key);
+
   const hideLoginButton = props.hideLoginButton;
+
+  // const isDarkMode = true;
+  const isDarkMode = props?.isDarkMode;
+
   //testing
   const [dropdownVisibility, setDropdownVisibility] = useState(
     Array(props.HEADER_LIST.length).fill(false)
   );
+
   const handleDropdownEnter = (index) => {
     setDropdownVisibility((prevVisibility) => {
       const updatedVisibility = [...prevVisibility];
@@ -95,12 +112,20 @@ export default function V3Header(props) {
             <div
               className={classNames(
                 "group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
-                dropdownVisibility[id] ? "" : "text-gray-500"
+                dropdownVisibility[id]
+                  ? ""
+                  : isDarkMode
+                  ? "text-neutral-0"
+                  : "text-gray-500"
               )}
             >
               <div className="flex flex-col items-center cursor-pointer">
                 <Typography
-                  className="hover:text-blue-600"
+                  className={
+                    isDarkMode
+                      ? "text-neutral-0 hover:text-blue-600"
+                      : "hover:text-blue-600"
+                  }
                   textStyle="body3c-medium"
                 >
                   {`${title} `}
@@ -150,7 +175,11 @@ export default function V3Header(props) {
       {
         <a href="/customers">
           <Typography
-            className="hover:text-blue-600 cursor-pointer"
+            className={
+              isDarkMode
+                ? "text-neutral-0 hover:text-blue-600 cursor-pointer"
+                : "hover:text-blue-600 cursor-pointer"
+            }
             textStyle="body3c-medium"
           >
             {`Customers `}
@@ -162,7 +191,11 @@ export default function V3Header(props) {
       {
         <a href="/pricing">
           <Typography
-            className="hover:text-blue-600 cursor-pointer"
+            className={
+              isDarkMode
+                ? "text-neutral-0 hover:text-blue-600 cursor-pointer"
+                : "hover:text-blue-600 cursor-pointer"
+            }
             textStyle="body3c-medium"
           >
             {`Pricing `}
@@ -278,6 +311,10 @@ export default function V3Header(props) {
 
   // **************************** //
 
+  const logoUrl = isDarkMode
+    ? `https://res.cloudinary.com/dh8fp23nd/image/upload/v1718878031/hasura_dark_mode_kjrlxi.svg`
+    : `https://res.cloudinary.com/dh8fp23nd/image/upload/v1686659126/website%20v3/hasura-primary_y9cdnn.svg`;
+
   return (
     <div className="relative mx-auto">
       <div
@@ -288,10 +325,10 @@ export default function V3Header(props) {
         <div className="flex flex-row justify-between items-center w-full tb-l:w-fit">
           <div>
             <a href={props.headerUrl} className={"flex items-center"}>
-              <Icon
-                height="w-[103px] h-[33px]"
-                variant={"hasuraPrimary"}
-                strokeColor={""}
+              <img
+                className="min-w-[103px] w-[103px] h-[33px]"
+                src={logoUrl}
+                alt={props.brandAlt}
               />
             </a>
           </div>
@@ -330,11 +367,17 @@ export default function V3Header(props) {
             {headerListfunction(props.HEADER_LIST)}
           </nav>
           <div className="hds-hidden tb-l:flex flex-row items-center gap-x-4 ">
-            {!props.hideSearch && <AlgoliaSearch {...props} />}
+            {!props.hideSearch && (
+              <AlgoliaSearch isDarkMode={isDarkMode} {...props} />
+            )}
             <a href="/contact-us" className="hds-hidden db:flex">
               <Typography
                 textStyle="body3c-medium"
-                className="text-neutral-800 hover:text-blue-600"
+                className={
+                  isDarkMode
+                    ? "text-neutral-0 hover:text-blue-600"
+                    : "text-neutral-800 hover:text-blue-600"
+                }
               >
                 Contact Us
               </Typography>

package/src/HDS/helpers/AlgoliaSearch/search.js

@@ -35,11 +35,15 @@ export default function Search(props) {
               setShowSearch((preShowSearch) => !preShowSearch);
             }}
           >
-            <p className="-mt-1">/ </p>
+            <p className={props?.isDarkMode ? "-mt-1 text-neutral-0" : "-mt-1"}>
+              /{" "}
+            </p>
             <Icon
               height={"h-4 w-4 stroke-2"}
               variant={`searchsm`}
-              strokeClass="stroke-neutral-1000"
+              strokeClass={
+                props?.isDarkMode ? "stroke-neutral-0" : "stroke-neutral-1000"
+              }
             />
           </div>
         </div>

package/src/styles/tailwind.css

@@ -2118,6 +2118,10 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[103px\]{
+  min-width: 103px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }