hds-web 1.37.5 → 1.37.7

package/package.json

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

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

@@ -95,7 +95,9 @@ const socialShare = [
 
 export default function V3Footer(props) {
   const [isError, setIsError] = useState(false);
+
   const [isItems, setIsItems] = useState(null);
+
   useEffect(() => {
     fetch("https://status.hasura.io/api/v2/status.json")
       .then((res) => res.json())
@@ -109,6 +111,13 @@ export default function V3Footer(props) {
         }
       );
   }, []);
+
+  const isDarkMode = props?.isDarkMode;
+
+  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>
       <div className="db-s:flex justify-between gap-10 db-s:gap-20 db:gap-40">
@@ -116,7 +125,8 @@ export default function V3Footer(props) {
           <a href={props.brandLink} className="">
             <img
               className="max-w-[125px]"
-              src={props.brandUrl}
+              src={logoUrl}
+              loading="lazy"
               alt={props.brandAlt}
             />
           </a>
@@ -126,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="text-neutral-600"
+                className={isDarkMode ? "text-neutral-400" : "text-neutral-600"}
               >
                 {footerLink.title}
               </Typography>
@@ -134,7 +144,11 @@ export default function V3Footer(props) {
                 <a href={link.linkUrl}>
                   <Typography
                     textStyle="body3"
-                    className="text-neutral-600 mt-2 tb:mt-4 hover:text-neutral-1000"
+                    className={
+                      isDarkMode
+                        ? "text-neutral-400 mt-2 tb:mt-4 hover:text-neutral-600"
+                        : "text-neutral-600 mt-2 tb:mt-4 hover:text-neutral-1000"
+                    }
                   >
                     {link.linkText}
                   </Typography>
@@ -163,7 +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="text-neutral-1000">
+                <Typography textStyle="body3" className={"text-neutral-1000"}>
                   {isItems?.status.description}
                 </Typography>
               </div>
@@ -173,7 +187,11 @@ export default function V3Footer(props) {
         <div>
           <Typography
             textStyle="body3c"
-            className="text-neutral-600 pt-4 tb-m:pt-0"
+            className={
+              isDarkMode
+                ? "text-neutral-400 pt-4 tb-m:pt-0"
+                : "text-neutral-600 pt-4 tb-m:pt-0"
+            }
           >
             © {new Date().getFullYear()} Hasura Inc. All rights reserved
           </Typography>
@@ -250,14 +268,6 @@ V3Footer.defaultProps = {
           linkText: "Hasura Hub",
           linkUrl: "https://hasura.io/hub/",
         },
-        // {
-        //   linkText: 'GraphQL Hub',
-        //   linkUrl: '#',
-        // },
-        // {
-        //   linkText: 'Guides',
-        //   linkUrl: '#',
-        // },
         {
           linkText: "Changelog",
           linkUrl: "https://github.com/hasura/graphql-engine/releases/",
@@ -275,10 +285,6 @@ V3Footer.defaultProps = {
           linkText: "Blog",
           linkUrl: "https://hasura.io/blog",
         },
-        // {
-        //   linkText: 'Tech Talks',
-        //   linkUrl: '#',
-        // },
         {
           linkText: "Tutorials",
           linkUrl: "https://hasura.io/learn/",
@@ -300,18 +306,10 @@ V3Footer.defaultProps = {
           linkText: "Our Story",
           linkUrl: "https://hasura.io/about/",
         },
-        // {
-        //   linkText: 'Newsroom',
-        //   linkUrl: '#',
-        // },
         {
           linkText: "Careers",
           linkUrl: "https://hasura.io/careers/",
         },
-        // {
-        //   linkText: 'Partners',
-        //   linkUrl: '#',
-        // },
         {
           linkText: "Partners",
           linkUrl: "https://hasura.io/partners",
@@ -324,10 +322,6 @@ V3Footer.defaultProps = {
           linkText: "Privacy Policy",
           linkUrl: "https://hasura.io/legal/hasura-privacy-policy",
         },
-        // {
-        //   linkText: 'Brand',
-        //   linkUrl: 'https://hasura.io/brand/',
-        // },
       ],
     },
     {
@@ -341,18 +335,6 @@ V3Footer.defaultProps = {
           linkText: "Discord",
           linkUrl: "https://discord.com/invite/hasura",
         },
-        // {
-        //   linkText: 'Forum',
-        //   linkUrl: '#',
-        // },
-        // {
-        //   linkText: 'Meetup',
-        //   linkUrl: '#',
-        // },
-        // {
-        //   linkText: 'Support',
-        //   linkUrl: '#',
-        // },
       ],
     },
     {

package/src/styles/tailwind.css

@@ -1774,10 +1774,18 @@ select{
   max-height: 26.25;
 }
 
+.max-h-\[36px\]{
+  max-height: 36px;
+}
+
 .max-h-\[40px\]{
   max-height: 40px;
 }
 
+.max-h-\[42px\]{
+  max-height: 42px;
+}
+
 .max-h-\[44px\]{
   max-height: 44px;
 }
@@ -1802,14 +1810,6 @@ select{
   max-height: 100vh;
 }
 
-.max-h-\[42px\]{
-  max-height: 42px;
-}
-
-.max-h-\[36px\]{
-  max-height: 36px;
-}
-
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -10202,6 +10202,16 @@ select{
   color: rgb(0 6 21 / var(--tw-text-opacity));
 }
 
+.hover\:text-neutral-200:hover{
+  --tw-text-opacity: 1;
+  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);