hds-web 1.37.6 → 1.37.8

package/package.json

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

package/src/HDS/components/Footers/v3Footer.js

@@ -136,7 +136,7 @@ export default function V3Footer(props) {
             <div key={index} className="min-w-[130px] db-s:min-w-fit">
               <Typography
                 textStyle="body3c-semi-bold"
-                className={isDarkMode ? "text-neutral-0" : "text-neutral-600"}
+                className={isDarkMode ? "text-neutral-400" : "text-neutral-600"}
               >
                 {footerLink.title}
               </Typography>
@@ -146,7 +146,7 @@ export default function V3Footer(props) {
                     textStyle="body3"
                     className={
                       isDarkMode
-                        ? "text-neutral-0 mt-2 tb:mt-4 hover:text-neutral-200"
+                        ? "text-neutral-400 mt-2 tb:mt-4 hover:text-neutral-600"
                         : "text-neutral-600 mt-2 tb:mt-4 hover:text-neutral-1000"
                     }
                   >
@@ -177,12 +177,7 @@ export default function V3Footer(props) {
             <a href="https://status.hasura.io/" className="">
               <div className=" bg-neutral-0 rounded-full shadow hover:shadow-lg transition-all duration-300 px-4 py-2 inline-flex justify-center items-center">
                 <div className="w-4 h-4 bg-green-400 rounded-full mr-2"></div>
-                <Typography
-                  textStyle="body3"
-                  className={
-                    isDarkMode ? "text-neutral-0" : "text-neutral-1000"
-                  }
-                >
+                <Typography textStyle="body3" className={"text-neutral-1000"}>
                   {isItems?.status.description}
                 </Typography>
               </div>
@@ -194,7 +189,7 @@ export default function V3Footer(props) {
             textStyle="body3c"
             className={
               isDarkMode
-                ? "text-neutral-0 pt-4 tb-m:pt-0"
+                ? "text-neutral-400 pt-4 tb-m:pt-0"
                 : "text-neutral-600 pt-4 tb-m:pt-0"
             }
           >

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 = props?.isDarkMode;
+  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,7 +112,11 @@ 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">
@@ -150,7 +171,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 +187,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 +307,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 +321,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 +363,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/styles/tailwind.css

@@ -2118,6 +2118,10 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[103px\]{
+  min-width: 103px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -10207,6 +10211,11 @@ select{
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.hover\:text-neutral-600:hover{
+  --tw-text-opacity: 1;
+  color: rgb(77 87 97 / var(--tw-text-opacity));
+}
+
 .hover\:shadow:hover{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);