[DOCS]chore: refactor footer and menu (#810)

kadena-community · Aug 24, 2023 · f83cfc7 · f83cfc7 · vercel · Aug 24, 2023
1 parent a3b6a84
commit f83cfc7
Show file tree

Hide file tree

Showing 19 changed files with 328 additions and 182 deletions.
diff --git a/packages/apps/docs/src/components/Layout/Blog/Blog.tsx b/packages/apps/docs/src/components/Layout/Blog/Blog.tsx
@@ -7,6 +7,7 @@ import {
   TitleHeader,
 } from '../components';
 import { Template } from '../components/Template';
+import { globalClass } from '../global.css';
 
 import { articleTopMetadataClass, bottomWrapperClass } from './Blog.css';
 import { ArticleMetadataItem, PageGrid } from './styles';
@@ -31,7 +32,7 @@ export const Blog: FC<IPageProps> = ({
   );
 
   return (
-    <PageGrid>
+    <PageGrid className={globalClass}>
       <Template menuItems={leftMenuTree} hideSideMenu layout="landing">
         <TitleHeader
           title="BlogChain"

diff --git a/packages/apps/docs/src/components/Layout/Full/Full.tsx b/packages/apps/docs/src/components/Layout/Full/Full.tsx
@@ -6,6 +6,7 @@ import {
   contentClassVariants,
 } from '../components';
 import { Template } from '../components/Template';
+import { globalClass } from '../global.css';
 
 import {
   Aside,
@@ -78,7 +79,7 @@ export const Full: FC<IPageProps> = ({
     aSideMenuTree.length > 1 || aSideMenuTree[0]?.children.length > 0;
 
   return (
-    <PageGrid>
+    <PageGrid className={globalClass}>
       <Template menuItems={leftMenuTree}>
         <div className={contentClassNames} id="maincontent">
           <article className={articleClass} ref={scrollRef}>

diff --git a/packages/apps/docs/src/components/Layout/Home/Home.tsx b/packages/apps/docs/src/components/Layout/Home/Home.tsx
@@ -1,12 +1,14 @@
 import { BasePageGrid } from '../components';
 import { Template } from '../components/Template';
 
+import { globalClass } from './../global.css';
+
 import { IPageProps } from '@/types/Layout';
 import React, { FC } from 'react';
 
 export const Home: FC<IPageProps> = ({ children, leftMenuTree }) => {
   return (
-    <BasePageGrid>
+    <BasePageGrid className={globalClass}>
       <Template menuItems={leftMenuTree} hideSideMenu>
         {children}
       </Template>

diff --git a/packages/apps/docs/src/components/Layout/Landing/Landing.tsx b/packages/apps/docs/src/components/Layout/Landing/Landing.tsx
@@ -5,6 +5,7 @@ import {
   TitleHeader,
 } from '../components';
 import { Template } from '../components/Template';
+import { globalClass } from '../global.css';
 
 import { PageGrid } from './styles';
 
@@ -19,7 +20,7 @@ export const Landing: FC<IPageProps> = ({
   leftMenuTree,
 }) => {
   return (
-    <PageGrid>
+    <PageGrid className={globalClass}>
       <Template menuItems={leftMenuTree} layout="landing">
         <TitleHeader
           title={frontmatter.title}

diff --git a/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx b/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx
@@ -4,6 +4,7 @@ import {
   contentClassVariants,
 } from '../components';
 import { Template } from '../components/Template';
+import { globalClass } from '../global.css';
 
 import { CodeBackground, PageGrid } from './styles';
 
@@ -53,7 +54,7 @@ export const Redocly: FC<IPageProps> = ({
   leftMenuTree,
 }) => {
   return (
-    <PageGrid>
+    <PageGrid className={globalClass}>
       <Template menuItems={leftMenuTree}>
         <div
           className={classNames(contentClass, contentClassVariants.code)}

diff --git a/packages/apps/docs/src/components/Layout/components/Footer/Footer.tsx b/packages/apps/docs/src/components/Layout/components/Footer/Footer.tsx
@@ -1,20 +1,20 @@
-import { IconButton, SystemIcon } from '@kadena/react-ui';
+import { IconButton, Stack, SystemIcon } from '@kadena/react-ui';
 
-import { Spacer } from '../styles';
+import { spacerClass } from '../styles.css';
 import { DocsLogo } from '..';
 
 import { FooterLink } from './FooterLink';
 import { FooterText } from './FooterText';
-import { Box, InnerFooterWrapper, StyledFooter } from './styles';
+import { footerClass, footerWrapperClass } from './styles.css';
 
 import Link from 'next/link';
 import React, { FC } from 'react';
 
 export const Footer: FC = () => {
   return (
-    <StyledFooter>
-      <InnerFooterWrapper>
-        <Box justifyContent="space-around" alignItems="center">
+    <footer className={footerWrapperClass}>
+      <div className={footerClass}>
+        <Stack justifyContent="space-around" alignItems="center" marginY="$2">
           <DocsLogo />
           <IconButton
             title="Go to our Github"
@@ -34,20 +34,22 @@ export const Footer: FC = () => {
             title="Go to our Linkedin"
             icon={SystemIcon.Linkedin}
           />
-        </Box>
-        <Spacer />
-        <Box justifyContent="space-around" alignItems="center">
+        </Stack>
+        <div className={spacerClass} />
+        <Stack justifyContent="space-around" alignItems="center" marginY="$2">
           <FooterLink href="https://kadena.io">Kadena.io</FooterLink>
           <FooterLink href="https://kadena.io">Privacy Policy</FooterLink>
           <FooterLink href="https://kadena.io">Terms of Service</FooterLink>
           <Link href="/docs/kadena/code-of-conduct" passHref legacyBehavior>
-            <FooterLink>Code of Conduct</FooterLink>
+            <FooterLink href="/docs/kadena/code-of-conduct">
+              Code of Conduct
+            </FooterLink>
           </Link>
-        </Box>
-        <Box justifyContent="space-around" alignItems="center">
+        </Stack>
+        <Stack justifyContent="space-around" alignItems="center" marginY="$2">
           <FooterText>Copyrights 2023 © Kadena LLC</FooterText>
-        </Box>
-      </InnerFooterWrapper>
-    </StyledFooter>
+        </Stack>
+      </div>
+    </footer>
   );
 };
diff --git a/packages/apps/docs/src/components/Layout/components/Footer/FooterLink.tsx b/packages/apps/docs/src/components/Layout/components/Footer/FooterLink.tsx
@@ -1,11 +1,29 @@
-import { styled, StyledComponent } from '@kadena/react-components';
-
-export const FooterLink: StyledComponent<'a'> = styled('a', {
-  textDecoration: 'none',
-  color: '$neutral4',
-  padding: '0 $3',
-  '&:hover': {
-    textDecoration: 'underline',
-    color: '$neutral5',
-  },
-});
+import { Text } from '@kadena/react-ui';
+
+import { linkClass } from './styles.css';
+
+import Link from 'next/link';
+import React, { FC, ReactNode } from 'react';
+
+interface IProps {
+  children?: ReactNode;
+  href: string;
+}
+
+export const FooterLink: FC<IProps> = ({ children, href }) => {
+  const isInnerLink = href.includes('http');
+
+  return (
+    <Text size="md" bold={false}>
+      {isInnerLink ? (
+        <a href={href} className={linkClass}>
+          {children}
+        </a>
+      ) : (
+        <Link href={href} className={linkClass}>
+          {children}
+        </Link>
+      )}
+    </Text>
+  );
+};
diff --git a/packages/apps/docs/src/components/Layout/components/Footer/FooterText.tsx b/packages/apps/docs/src/components/Layout/components/Footer/FooterText.tsx
@@ -1,21 +1,17 @@
-import { styled } from '@kadena/react-components';
 import { Text } from '@kadena/react-ui';
 
+import { textClass } from './styles.css';
+
 import React, { FC, ReactNode } from 'react';
 
 interface IProps {
   children?: ReactNode;
 }
 
-const StyledText = styled('span', {
-  color: '$neutral4',
-  padding: '0 $3',
-});
-
 export const FooterText: FC<IProps> = ({ children }) => {
   return (
     <Text size="md" bold={false}>
-      <StyledText>{children}</StyledText>
+      <span className={textClass}>{children}</span>
     </Text>
   );
 };
diff --git a/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts b/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts
@@ -0,0 +1,64 @@
+import { darkThemeClass, sprinkles, vars } from '@kadena/react-ui/theme';
+
+import { $$navMenu, $$pageWidth } from '../../global.css';
+
+import { style } from '@vanilla-extract/css';
+
+export const footerWrapperClass = style([
+  sprinkles({
+    position: 'relative',
+    background: '$neutral2',
+    marginTop: '$40',
+  }),
+  {
+    zIndex: $$navMenu,
+    gridArea: 'footer',
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        background: vars.colors.$neutral3,
+      },
+    },
+  },
+]);
+
+export const footerClass = style([
+  sprinkles({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    paddingY: '$3',
+    paddingX: '$4',
+
+    flexDirection: {
+      xs: 'column',
+      md: 'row',
+    },
+  }),
+  {
+    margin: '0 auto',
+    maxWidth: $$pageWidth,
+  },
+]);
+
+export const textClass = style([
+  sprinkles({
+    color: '$neutral4',
+    paddingX: '$3',
+  }),
+]);
+
+export const linkClass = style([
+  sprinkles({
+    textDecoration: 'none',
+    color: '$neutral4',
+    paddingX: '$3',
+  }),
+  {
+    selectors: {
+      '&:hover': {
+        textDecoration: 'underline',
+        color: vars.colors.$neutral5,
+      },
+    },
+  },
+]);
diff --git a/packages/apps/docs/src/components/Layout/components/Footer/styles.ts b/packages/apps/docs/src/components/Layout/components/Footer/styles.ts
diff --git a/packages/apps/docs/src/components/Layout/components/Header/Header.tsx b/packages/apps/docs/src/components/Layout/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import { IconButton, SystemIcon } from '@kadena/react-ui';
 
+import { globalClass } from '../../global.css';
 import {
   InnerWrapper,
   NavLink,
@@ -40,7 +41,7 @@ export const Header: FC<IProps> = ({ menuItems, layout = 'full' }) => {
   const { toggleMenu, isMenuOpen, toggleAside, isAsideOpen } = useMenu();
 
   return (
-    <StyledHeader>
+    <StyledHeader className={globalClass}>
       <SkipNav href="#maincontent">Skip to main content</SkipNav>
       <InnerWrapper>
         <StyledLogoWrapper>

diff --git a/packages/apps/docs/src/components/Layout/components/Menu/Menu.tsx b/packages/apps/docs/src/components/Layout/components/Menu/Menu.tsx
@@ -0,0 +1,38 @@
+import {
+  menuClass,
+  menuInLayoutVariants,
+  menuLayoutVariants,
+  menuOpenVariants,
+} from './menu.css';
+
+import classNames from 'classnames';
+import React, { FC, ReactNode } from 'react';
+
+interface IProps {
+  children?: ReactNode;
+  dataCy?: string;
+  isOpen?: boolean;
+  inLayout?: boolean;
+  layout: 'landing' | 'normal';
+}
+
+export const Menu: FC<IProps> = ({
+  children,
+  dataCy,
+  isOpen = false,
+  inLayout = false,
+  layout = 'normal',
+}) => {
+  const classes = classNames(
+    menuClass,
+    menuOpenVariants[isOpen ? 'isOpen' : 'isClosed'],
+    menuInLayoutVariants[inLayout ? 'true' : 'false'],
+    menuLayoutVariants[layout],
+  );
+
+  return (
+    <div data-cy={dataCy} className={classes}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/apps/docs/src/components/Layout/components/Menu/MenuBack.tsx b/packages/apps/docs/src/components/Layout/components/Menu/MenuBack.tsx
@@ -0,0 +1,18 @@
+import { menuBackClass, menuBackOpenVariants } from './menu.css';
+
+import classNames from 'classnames';
+import React, { FC } from 'react';
+
+interface IProps {
+  isOpen?: boolean;
+  onClick: () => void;
+}
+
+export const MenuBack: FC<IProps> = ({ isOpen = false, onClick }) => {
+  const classes = classNames(
+    menuBackClass,
+    menuBackOpenVariants[isOpen ? 'isOpen' : 'isClosed'],
+  );
+
+  return <button type="button" className={classes} onClick={onClick} />;
+};
diff --git a/packages/apps/docs/src/components/Layout/components/Menu/index.ts b/packages/apps/docs/src/components/Layout/components/Menu/index.ts
@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export { MenuBack } from './MenuBack';