Address feedback for community stats (#13)

* Address feedback for tables and naming

* Add nav shadow

Author: Predrag

src/components/common/Navigation.js

@@ -165,7 +165,7 @@ const Navigation = ({ navClass, children, isDark }) => {
                         className="text-midnight-900 text-center font-semibold inline-block w-full px-6 lg:px-5 py-4 lg:py-2 lg:border border-b border-midnight-50 lg:rounded-lg lg:bg-[rgba(30,30,105,0.04)] group-hover:bg-[#0505580f] group-active:bg-[#132e891c]"
                         href="https://datacebo.com/contact"
                       >
-                        Contact us
+                        Contact Us
                       </a>
                     </li>
                   )}

src/components/community-stats/SdvCoreSection.js

@@ -24,7 +24,7 @@ export default function SdvCoreSection({ dependenciesData }) {
     setTableColDimensions(
       isMobile
         ? "minmax(134px, 199px) minmax(136px, 488px)"
-        : "minmax(1px, 199px) minmax(136px, 488px) minmax(136px, 488px)"
+        : "minmax(134px, 199px) minmax(136px, 488px) minmax(136px, 488px)"
     );
   }, [isMobile]);
 

src/components/community-stats/SdvInNumbersSection.js

@@ -14,7 +14,7 @@ export default function SdvInNumbersSection({ data }) {
   const metricKeys = ["toDate", "yearToDate"];
   const metricLabels = ["To date", currentYear];
   const [tableColDimensions, setTableColDimensions] = useState(
-    "minmax(199px, 199px) minmax(136px, 488px) minmax(136px, 488px)"
+    "minmax(199px, 199px) minmax(130px, 488px) minmax(136px, 488px)"
   );
   const width = useWindowWidth();
   const isMobile = width < 768;
@@ -25,8 +25,8 @@ export default function SdvInNumbersSection({ data }) {
   useEffect(() => {
     setTableColDimensions(
       isMobile
-        ? "minmax(199px, 199px) minmax(136px, 488px)"
-        : "minmax(199px, 199px) minmax(136px, 488px) minmax(136px, 488px)"
+        ? "minmax(199px, 199px) minmax(130px, 488px)"
+        : "minmax(199px, 199px) minmax(130px, 488px) minmax(136px, 488px)"
     );
   }, [isMobile]);
 

src/styles/navbar.scss

@@ -22,9 +22,22 @@
 
     &.white-start {
       background-color: white;
+      --tw-shadow: 0px 4px 6px -2px rgba(0, 0, 54, 0.06),
+        0px 10px 15px -3px rgba(0, 0, 54, 0.1);
+      --tw-shadow-colored: 0px 4px 6px -2px var(--tw-shadow-color),
+        0px 10px 15px -3px var(--tw-shadow-color);
+      background-color: #fff;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
       .nav-bg-white & {
         transition: all 400ms ease-in-out;
-        box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.05);
+        --tw-shadow: 0px 4px 6px -2px rgba(0, 0, 54, 0.06),
+          0px 10px 15px -3px rgba(0, 0, 54, 0.1);
+        --tw-shadow-colored: 0px 4px 6px -2px var(--tw-shadow-color),
+          0px 10px 15px -3px var(--tw-shadow-color);
+        background-color: #fff;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
         background-color: white;
       }
       .white-logo {