post-audit improvements

Author: hasparus

src/components/index-page/graphql-advantages/optimization.tsx

@@ -3,7 +3,7 @@ import OptimizationSvg from "./optimization.svg?svgr"
 export function OptimizationFigure() {
   return (
     <div
-      className="flex w-full bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:px-[46px] [&_pre]:!h-48"
+      className="flex w-full items-center justify-center bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:px-[46px] [&_pre]:!h-48"
       aria-hidden
     >
       <OptimizationSvg className="max-w-full max-sm:h-[200px]" />

src/components/index-page/graphql-advantages/productivity.tsx

@@ -14,17 +14,16 @@ export function ProductivityFigure() {
           playsInline
           className="hidden dark:block"
         >
-          <source src={`${VIDEOS_DIR}/graphiql-dark.mp4`} type="video/mp4" />
-        </video>
-        <video
-          disablePictureInPicture
-          autoPlay
-          muted
-          loop
-          playsInline
-          className="block dark:hidden"
-        >
-          <source src={`${VIDEOS_DIR}/graphiql-light.mp4`} type="video/mp4" />
+          <source
+            src={`${VIDEOS_DIR}/graphiql-dark.mp4`}
+            media="(prefers-color-scheme: dark)"
+            type="video/mp4"
+          />
+          <source
+            src={`${VIDEOS_DIR}/graphiql-light.mp4`}
+            media="(prefers-color-scheme: light)"
+            type="video/mp4"
+          />
         </video>
         <div
           /* the video is cropped a bit short at the bottom, so we're adding missing padding */

src/components/index-page/what-is-graphql/wires.tsx

@@ -97,7 +97,6 @@ function ServerEdges({
     <>
       {paths.map((d, index) => {
         const isHighlighted = highlighted?.includes(index)
-        console.log(d, index, isHighlighted && index + "h")
         return (
           <Fragment key={index}>
             <path