Make the hero logo icon color blue like on designs, not white (#2028)

Author: hasparus

packages/components/src/components/hero/hero-logo.tsx

@@ -2,9 +2,14 @@ import { cloneElement, ReactElement } from 'react';
 import { cn } from '../../cn';
 import { GRADIENT_GREEN_ID, GRADIENT_WHITE_ID } from './hero-gradient-ids';
 
+const GRADIENT_BLUE = 'logo-blue-3028';
+const GRADIENT_WHITE_INVERTED = 'logo-white-3028';
+
 export interface HeroLogoProps extends React.HTMLAttributes<HTMLDivElement> {
   children: ReactElement<{
     fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
     className?: string;
   }>;
 }
@@ -13,20 +18,22 @@ export function HeroLogo({ children, className, ...rest }: HeroLogoProps) {
   return (
     <div className={cn('relative', className)} {...rest}>
       {cloneElement(children, {
-        fill: `url(#${GRADIENT_WHITE_ID})`,
+        stroke: `url(#${GRADIENT_WHITE_INVERTED})`,
+        fill: `url(#${GRADIENT_BLUE})`,
         className: cn(
           'absolute inset-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2',
           children.props.className,
         ),
       })}
       <LogoBadgeBackground />
+      <LogoGradientDefs />
     </div>
   );
 }
 
 function LogoBadgeBackground() {
   return (
-    <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="96" height="96" viewBox="0 0 96 96" fill="none">
       <rect width="96" height="96" rx="24" fill={`url(#${GRADIENT_GREEN_ID})`} />
       <rect
         x="0.5"
@@ -40,3 +47,33 @@ function LogoBadgeBackground() {
     </svg>
   );
 }
+
+// these are not reused
+function LogoGradientDefs() {
+  return (
+    <svg viewBox="0 0 52 53" className="size-0">
+      <linearGradient
+        id={GRADIENT_BLUE}
+        x1="0"
+        y1="0.524872"
+        x2="51.998"
+        y2="52.5229"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#A7D5CA" />
+        <stop offset="1" stopColor="#86B6C1" />
+      </linearGradient>
+      <linearGradient
+        id={GRADIENT_WHITE_INVERTED}
+        x1="0"
+        y1="0.524872"
+        x2="52"
+        y2="52.5249"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity="0.5" />
+        <stop offset="1" stopColor="white" stopOpacity="0.2" />
+      </linearGradient>
+    </svg>
+  );
+}

packages/components/src/components/hero/index.stories.tsx renamed to packages/components/src/components/hero/hero.stories.tsx

@@ -4,6 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator';
 import { ModulesLogo } from '../../logos';
 import { CallToAction } from '../call-to-action';
+import { HiveGatewayIcon } from '../icons';
 import { Hero, HeroDecorationFromLogo, HeroLogo } from './index';
 
 export default {
@@ -26,6 +27,7 @@ export default {
   },
   parameters: {
     padding: true,
+    forcedLightMode: true,
   },
 } satisfies Meta<ComponentProps<typeof Hero>>;
 
@@ -35,7 +37,7 @@ export const Default: StoryObj<ComponentProps<typeof Hero>> = {
     text: 'GraphQL Modules is a toolset of libraries and guidelines dedicated to create reusable, maintainable, testable and extendable modules out of your GraphQL server.',
     top: (
       <HeroLogo>
-        <ModulesLogo />
+        <HiveGatewayIcon />
       </HeroLogo>
     ),
     checkmarks: ['Fully open source', 'No vendor lock'],

packages/components/src/components/hero/index.tsx

@@ -20,7 +20,7 @@ export const Hero: FC<HeroProps> = props => {
   return (
     <div
       className={cn(
-        'relative isolate flex max-w-[90rem] flex-col items-center justify-center gap-6 overflow-hidden rounded-3xl bg-blue-400 px-4 py-6 max-sm:mt-2 sm:py-12 md:gap-8 lg:py-24',
+        'relative isolate flex max-w-[90rem] flex-col items-center justify-center gap-6 overflow-hidden rounded-3xl bg-blue-400 px-4 py-6 text-green-1000 max-sm:mt-2 sm:py-12 md:gap-8 lg:py-24',
         props.className,
       )}
     >