From dc4ea8fa31658149eb0664ebbc782c3154e65748 Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Mon, 30 Sep 2024 14:27:52 -0400
Subject: [PATCH] some design qa

---
 src/components/Navigation.tsx                 |  1 +
 src/components/menu/Menu.tsx                  | 51 ++++++++++---------
 .../page-sections/ImpactCardSection.tsx       | 30 +++++++----
 src/data/getSiteSettings.tsx                  | 20 ++++----
 src/generated/graphqlPlural.ts                | 19 ++++++-
 5 files changed, 75 insertions(+), 46 deletions(-)

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 21ca1476..1ae10a06 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -128,6 +128,7 @@ export const SolutionLink = forwardRef(
         <ResponsiveText
           as="p"
           textStyles={{ '': 'mBody2Bold' }}
+          color="text-light"
         >
           {props.children}
         </ResponsiveText>
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 8d68ce74..080ffeb5 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -198,7 +198,7 @@ function MenuDropdown<T extends object>({
       <DropdownCard>
         <div className={kind === 'product' ? 'p-xlarge' : ''}>
           {kind === 'product' && (
-            <MenuCategoryLabel>Platform features</MenuCategoryLabel>
+            <MenuCategoryLabel>Product features</MenuCategoryLabel>
           )}
           <ul className={kind === 'product' ? 'grid grid-cols-2' : ''}>
             {[...state.collection].map((item) => (
@@ -249,30 +249,31 @@ function SolutionNavDropdown<T extends object>({
   const ItemRenderer = itemRenderer
 
   return (
-    <div
-      ref={ref}
-      {...menuProps}
-    >
-      <DropdownCard style={{ minWidth: '30vw', maxWidth: '500px' }}>
-        <div className="p-xlarge">
-          {Object.keys(itemByCategory).map((category) => (
-            <div key={category}>
-              <MenuCategoryLabel>{category}</MenuCategoryLabel>
-              <ul>
-                {itemByCategory[category].map((item) => (
-                  <ItemRenderer
-                    key={item.key}
-                    kind="solution"
-                    item={item}
-                    state={state}
-                  />
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      </DropdownCard>
-    </div>
+    <DropdownCard {...menuProps}>
+      <div
+        ref={ref}
+        className="flex min-w-[500px] gap-xlarge p-xlarge"
+      >
+        {Object.keys(itemByCategory).map((category) => (
+          <div
+            css={{ flex: 1 }}
+            key={category}
+          >
+            <MenuCategoryLabel>{category}</MenuCategoryLabel>
+            <ul>
+              {itemByCategory[category].map((item) => (
+                <ItemRenderer
+                  key={item.key}
+                  kind="solution"
+                  item={item}
+                  state={state}
+                />
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </DropdownCard>
   )
 }
 
diff --git a/src/components/page-sections/ImpactCardSection.tsx b/src/components/page-sections/ImpactCardSection.tsx
index 4bcfb194..6440e1ff 100644
--- a/src/components/page-sections/ImpactCardSection.tsx
+++ b/src/components/page-sections/ImpactCardSection.tsx
@@ -8,6 +8,8 @@ import { useMousePosition } from '@src/hooks/useMousePosition'
 
 import { ResponsiveText } from '../Typography'
 
+const CARD_Z_INDEX = 1
+
 export function ImpactCardSection() {
   return (
     <div className="flex flex-col items-center gap-xxlarge">
@@ -90,7 +92,7 @@ function ImpactCard({
             color={theme.colors.grey[600]}
             maxWidth={500}
           >
-            <ImpactCardInfoIconSC size={32} />
+            <ImpactCardInfoIconSC size={30} />
           </Tooltip>
         )}
         <ImpactCardMetricSC>{metric}</ImpactCardMetricSC>
@@ -103,7 +105,8 @@ function ImpactCard({
 const ImpactCardsWrapperSC = styled.div(({ theme }) => ({
   display: 'grid',
   gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
-  gap: theme.spacing.xxlarge,
+  width: '100%',
+  gap: theme.spacing.xlarge,
   paddingBottom: theme.spacing.xxxxlarge,
   [`@media (min-width: ${theme.breakpoints.desktopSmall}px)`]: {
     gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
@@ -118,13 +121,14 @@ const ImpactCardSC = styled.div<{
   overflow: 'hidden',
   transition: 'filter 0.3s ease',
   // first value is circular glow that follows cursor, second is actual background
-  background: `radial-gradient(400px circle at var(--x) var(--y),rgba(255, 255, 255, 0.06), transparent),
+  background: `radial-gradient(300px circle at var(--x) var(--y),rgba(255, 255, 255, 0.06), transparent),
     linear-gradient(96deg, rgba(42, 46, 55, 0.48) -95.57%, rgba(42, 46, 55, 0.16) 113.54%)`,
   // trick to make a border with a gradient effect
   '::before': {
-    transition: '--gradient-opacity 0.3s ease',
     content: '""',
     position: 'absolute',
+    zIndex: CARD_Z_INDEX,
+    transition: '--gradient-opacity 0.3s ease',
     inset: 0,
     borderRadius: theme.borderRadiuses.large,
     border: '1px solid transparent',
@@ -145,13 +149,14 @@ const ImpactCardContentSC = styled.div(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: theme.spacing.medium,
+  gap: theme.spacing.xsmall,
   borderRadius: theme.borderRadiuses.large,
   padding: theme.spacing.xxlarge,
 }))
 
 const ImpactCardInfoIconSC = styled(InfoOutlineIcon)(({ theme }) => ({
   position: 'absolute',
+  zIndex: CARD_Z_INDEX,
   cursor: 'pointer',
   top: theme.spacing.medium,
   right: theme.spacing.medium,
@@ -165,7 +170,7 @@ const ImpactCardMetricSC = styled.h3(({ theme }) => ({
 const ImpactCardSubtitleSC = styled.p(({ theme }) => ({
   color: theme.colors['text-light'],
   fontFamily: 'Inter',
-  fontSize: '28px',
+  fontSize: '22px',
   fontStyle: 'normal',
   fontWeight: 400,
   lineHeight: '150%',
@@ -179,10 +184,12 @@ const EmblishmentSC = styled.div<{ $position: 'top-left' | 'bottom-right' }>(
       <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${size} ${size}'>
         <defs>
           <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>
-            <stop offset='0%' stop-color='#5C77FF00'/>
+            <stop offset='0%' stop-color='#5C77FF'/>
             <stop offset='30%' stop-color='#494FF299'/>
-            <stop offset='36%' stop-color='#8FD6FF5C'/>
-            <stop offset='50%' stop-color='#52F4D94D'/>
+            <stop offset='46%' stop-color='#8FD6FF5C'/>
+            <stop offset='60%' stop-color='#52F4D94D'/>
+            <stop offset='85%' stop-color='#8FD6FF5C'/>
+            <stop offset='98%' stop-color='#494FF299'/>
           </linearGradient>
         </defs>
         <circle
@@ -198,10 +205,11 @@ const EmblishmentSC = styled.div<{ $position: 'top-left' | 'bottom-right' }>(
 
     return {
       position: 'absolute',
+      zIndex: CARD_Z_INDEX - 1,
       top: $position === 'top-left' ? -size / 2 : 'auto',
       left: $position === 'top-left' ? -size / 2 : 'auto',
-      right: $position === 'bottom-right' ? -size / 2 : 'auto',
-      bottom: $position === 'bottom-right' ? -size / 2 : 'auto',
+      right: $position === 'bottom-right' ? -size / 2.25 : 'auto',
+      bottom: $position === 'bottom-right' ? -size / 1.6 : 'auto',
       width: `${size}px`,
       height: `${size}px`,
       backgroundImage: `url("data:image/svg+xml,${gradientBorderSVG}")`,
diff --git a/src/data/getSiteSettings.tsx b/src/data/getSiteSettings.tsx
index b8ed9841..7d052ce4 100644
--- a/src/data/getSiteSettings.tsx
+++ b/src/data/getSiteSettings.tsx
@@ -210,13 +210,15 @@ function getProductSubnav(products?: ProductPageTinyFragment[]): NavList[] {
 function getSolutionSubnav(solutions?: Solution[]) {
   if (!solutions || !solutions.length) return undefined
 
-  return solutions.map((solution, i) => ({
-    id: solution.slug,
-    link: {
-      id: `${solution.slug}-${i}`,
-      title: solution.nav_title,
-      url: `/solutions/${solution.slug}`,
-      category: solution.category,
-    },
-  }))
+  return solutions
+    .map((solution, i) => ({
+      id: solution.slug,
+      link: {
+        id: `${solution.slug}-${i}`,
+        title: solution.nav_title,
+        url: `/solutions/${solution.slug}`,
+        category: solution.category?.split('_').join(' '),
+      },
+    }))
+    .reverse()
 }
diff --git a/src/generated/graphqlPlural.ts b/src/generated/graphqlPlural.ts
index 38b8a42b..06cf0f73 100644
--- a/src/generated/graphqlPlural.ts
+++ b/src/generated/graphqlPlural.ts
@@ -379,6 +379,11 @@ export enum CloudProvider {
   Aws = 'AWS'
 }
 
+export type CloudRegions = {
+  __typename?: 'CloudRegions';
+  aws?: Maybe<Array<Maybe<Scalars['String']['output']>>>;
+};
+
 export type CloudShell = {
   __typename?: 'CloudShell';
   aesKey: Scalars['String']['output'];
@@ -2202,6 +2207,17 @@ export type PlatformSubscriptionLineItems = {
   quantity: Scalars['Int']['output'];
 };
 
+export type PluralCloudRegions = {
+  __typename?: 'PluralCloudRegions';
+  dedicated: CloudRegions;
+  shared: CloudRegions;
+};
+
+export type PluralCloudSettings = {
+  __typename?: 'PluralCloudSettings';
+  regions?: Maybe<PluralCloudRegions>;
+};
+
 export type PluralConfiguration = {
   __typename?: 'PluralConfiguration';
   gitCommit?: Maybe<Scalars['String']['output']>;
@@ -3402,7 +3418,7 @@ export type RootMutationTypeLinkPublisherArgs = {
 
 
 export type RootMutationTypeLoginArgs = {
-  captcha?: InputMaybe<Scalars['String']['input']>;
+  captcha: Scalars['String']['input'];
   deviceToken?: InputMaybe<Scalars['String']['input']>;
   email: Scalars['String']['input'];
   password: Scalars['String']['input'];
@@ -3727,6 +3743,7 @@ export type RootQueryType = {
   charts?: Maybe<ChartConnection>;
   chat?: Maybe<ChatMessage>;
   closure?: Maybe<Array<Maybe<ClosureItem>>>;
+  cloudSettings?: Maybe<PluralCloudSettings>;
   /** Get a cluster by its ID. */
   cluster?: Maybe<Cluster>;
   /** Get a list of clusters owned by the current account. */