titleheader refactor

packages/apps/docs/src/components/Layout/components/TitleHeader/TitleHeader.tsx

@@ -1,6 +1,11 @@
 import { Heading, ProductIcon, Stack } from '@kadena/react-ui';
 
-import { HeaderWrapper, StyledHeader, SubHeader, Wrapper } from './style';
+import {
+  headerClass,
+  headerWrapperClass,
+  subheaderClass,
+  wrapperClass,
+} from './style.css';
 
 import { ProductIconNames } from '@/types/Layout';
 import React, { FC } from 'react';
@@ -15,22 +20,22 @@ export const TitleHeader: FC<IProps> = ({ title, subTitle, icon }) => {
   const Icon = icon ? ProductIcon[icon] : null;
 
   return (
-    <HeaderWrapper data-cy="titleheader">
-      <StyledHeader>
-        <Wrapper>
+    <div data-cy="titleheader" className={headerWrapperClass}>
+      <header className={headerClass}>
+        <div className={wrapperClass}>
           <Stack alignItems="center">
             {Icon && <Icon size="heroHeader" />}
             <Heading as="h1">{title}</Heading>
           </Stack>
           {subTitle !== undefined && (
-            <SubHeader>
-              <Heading as="h5" bold={false}>
+            <span className={subheaderClass}>
+              <Heading as="h5" variant="h6" bold={false}>
                 {subTitle}
               </Heading>
-            </SubHeader>
+            </span>
           )}
-        </Wrapper>
-      </StyledHeader>
-    </HeaderWrapper>
+        </div>
+      </header>
+    </div>
   );
 };

packages/apps/docs/src/components/Layout/components/TitleHeader/style.css.ts

@@ -0,0 +1,93 @@
+import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+
+import { $$pageWidth } from '../../global.css';
+
+import { style } from '@vanilla-extract/css';
+
+export const headerWrapperClass = style([
+  sprinkles({
+    position: 'relative',
+    display: 'grid',
+  }),
+  {
+    gridArea: 'pageheader',
+    height: `calc(${vars.sizes.$64} + ${vars.sizes.$10})`,
+    gridTemplateRows: `${vars.sizes.$64} ${vars.sizes.$10}`,
+    gridTemplateAreas: `
+    "main"
+    "shadow"
+    `,
+    zIndex: 99,
+
+    selectors: {
+      '&::before': {
+        content: '',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: vars.sizes.$10,
+        backgroundColor: vars.colors.$background,
+      },
+      '&::after': {
+        content: '',
+        position: 'absolute',
+        inset: 0,
+        background: 'url("/assets/bg-horizontal.png")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPositionX: 'center',
+        backgroundPositionY: '95%',
+        transform: 'scaleX(-1)',
+
+        '@media': {
+          [`screen and ${breakpoints.md}`]: {
+            transform: 'scaleX(1)',
+          },
+        },
+      },
+    },
+
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        zIndex: 101,
+      },
+    },
+  },
+]);
+
+export const headerClass = style([
+  sprinkles({
+    position: 'relative',
+  }),
+  {
+    gridArea: 'main',
+    zIndex: 3,
+    backgroundColor: 'rgba(250,250,250, .8)',
+  },
+]);
+
+export const wrapperClass = style([
+  sprinkles({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginX: 'auto',
+    marginTop: 0,
+    marginBottom: '$6',
+    paddingBottom: '$10',
+    paddingTop: '$20',
+    paddingX: '$4',
+  }),
+  {
+    maxWidth: $$pageWidth,
+  },
+]);
+
+export const subheaderClass = style([
+  sprinkles({
+    color: '$neutral4',
+    textAlign: 'center',
+  }),
+]);