From e793d611d1e159d88dcd2ec44d87e53babc126d9 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 31 Jan 2025 20:42:13 +0100
Subject: [PATCH] Make the hero logo icon color blue like on designs, not white

---
 .../components/hero/hero-gradient-defs.tsx    |  7 +++-
 .../src/components/hero/hero-logo.tsx         | 41 ++++++++++++++++++-
 .../{index.stories.tsx => hero.stories.tsx}   |  4 +-
 .../components/src/components/hero/index.tsx  |  2 +-
 .../src/components/icons/hive-gateway.svg     | 13 ++++--
 5 files changed, 59 insertions(+), 8 deletions(-)
 rename packages/components/src/components/hero/{index.stories.tsx => hero.stories.tsx} (94%)

diff --git a/packages/components/src/components/hero/hero-gradient-defs.tsx b/packages/components/src/components/hero/hero-gradient-defs.tsx
index a805bc4bf..4e82324fb 100644
--- a/packages/components/src/components/hero/hero-gradient-defs.tsx
+++ b/packages/components/src/components/hero/hero-gradient-defs.tsx
@@ -1,4 +1,9 @@
-import { GRADIENT_GREEN_ID, GRADIENT_WHITE_2_ID, GRADIENT_WHITE_ID } from './hero-gradient-ids';
+import {
+  GRADIENT_BLUE_ID,
+  GRADIENT_GREEN_ID,
+  GRADIENT_WHITE_2_ID,
+  GRADIENT_WHITE_ID,
+} from './hero-gradient-ids';
 
 export function HeroGradientDefs() {
   return (
diff --git a/packages/components/src/components/hero/hero-logo.tsx b/packages/components/src/components/hero/hero-logo.tsx
index 14a0c8842..c0778ad3d 100644
--- a/packages/components/src/components/hero/hero-logo.tsx
+++ b/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>
+  );
+}
diff --git a/packages/components/src/components/hero/index.stories.tsx b/packages/components/src/components/hero/hero.stories.tsx
similarity index 94%
rename from packages/components/src/components/hero/index.stories.tsx
rename to packages/components/src/components/hero/hero.stories.tsx
index 881a36b64..59d38cec1 100644
--- a/packages/components/src/components/hero/index.stories.tsx
+++ b/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'],
diff --git a/packages/components/src/components/hero/index.tsx b/packages/components/src/components/hero/index.tsx
index 1054bc093..e5efb8c29 100644
--- a/packages/components/src/components/hero/index.tsx
+++ b/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,
       )}
     >
diff --git a/packages/components/src/components/icons/hive-gateway.svg b/packages/components/src/components/icons/hive-gateway.svg
index 886cd174f..4e7b6166d 100644
--- a/packages/components/src/components/icons/hive-gateway.svg
+++ b/packages/components/src/components/icons/hive-gateway.svg
@@ -5,7 +5,14 @@
   fill="currentColor"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="m25 .524872-7.7758.000001V13.6981c0 2.2382-1.8128 4.051-4.0509 4.051H0l7.2e-7 7.7758H8.48411c1.06096 0 2.07849-.4215 2.82859-1.1718l12.5159-12.5176C24.5786 11.0854 25 10.068 25 9.00727V.524872Zm2 0 7.7758.000001V13.6981c0 2.2382 1.8128 4.051 4.0509 4.051H52v7.7758h-8.4841c-1.061 0-2.0785-.4215-2.8286-1.1718L28.1714 11.8355C27.4214 11.0854 27 10.068 27 9.00727V.524872ZM25 52.5249h-7.7758V39.3516c0-2.2381-1.8128-4.0509-4.0509-4.0509H0l7.2e-7-7.7758H8.48411c1.06096 0 2.07849.4215 2.82859 1.1717l12.5159 12.5176c.75.7502 1.1714 1.7675 1.1714 2.8283v8.4824Zm2 0h7.7758V39.3516c0-2.2381 1.8128-4.0509 4.0509-4.0509H52v-7.7758h-8.4841c-1.061 0-2.0785.4215-2.8286 1.1717L28.1714 41.2142c-.75.7502-1.1714 1.7675-1.1714 2.8283v8.4824Zm2.8369-29.837H22.163v7.6739h7.6739v-7.6739Z"
-  />
+  <defs>
+    <path
+      id="hive-gateway-path"
+      d="m25 .524872-7.7758.000001V13.6981c0 2.2382-1.8128 4.051-4.0509 4.051H0l7.2e-7 7.7758H8.48411c1.06096 0 2.07849-.4215 2.82859-1.1718l12.5159-12.5176C24.5786 11.0854 25 10.068 25 9.00727V.524872Zm2 0 7.7758.000001V13.6981c0 2.2382 1.8128 4.051 4.0509 4.051H52v7.7758h-8.4841c-1.061 0-2.0785-.4215-2.8286-1.1718L28.1714 11.8355C27.4214 11.0854 27 10.068 27 9.00727V.524872ZM25 52.5249h-7.7758V39.3516c0-2.2381-1.8128-4.0509-4.0509-4.0509H0l7.2e-7-7.7758H8.48411c1.06096 0 2.07849.4215 2.82859 1.1717l12.5159 12.5176c.75.7502 1.1714 1.7675 1.1714 2.8283v8.4824Zm2 0h7.7758V39.3516c0-2.2381 1.8128-4.0509 4.0509-4.0509H52v-7.7758h-8.4841c-1.061 0-2.0785.4215-2.8286 1.1717L28.1714 41.2142c-.75.7502-1.1714 1.7675-1.1714 2.8283v8.4824Zm2.8369-29.837H22.163v7.6739h7.6739v-7.6739Z"
+    />
+    <clipPath id="hive-gateway-clip-path">
+      <use href="#hive-gateway-path" />
+    </clipPath>
+  </defs>
+  <use href="#hive-gateway-path" clipPath="url(#hive-gateway-clip-path)" />
 </svg>