Feat/background page title plus

packages/boba/gateway/src/components/global/background/index.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { Meta, StoryFn } from '@storybook/react'
+
+import { Background } from '.'
+
+export default {
+  title: 'Components/Background',
+  component: Background,
+} as Meta
+
+const Template: StoryFn = (args: any) => <Background />
+
+export const Default = Template.bind({})

packages/boba/gateway/src/components/global/background/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+import { BackgroundPosition, RoutesWithBackgroundPositionAtTop } from './types'
+import {
+  BackgroundContainer,
+  GridBackground,
+  GridFade,
+  GridLines,
+} from './styles'
+
+export const Background = () => {
+  const location = useLocation()
+  const currentPath = location.pathname
+  const isPositionTop: BackgroundPosition =
+    RoutesWithBackgroundPositionAtTop.includes(currentPath)
+      ? BackgroundPosition.TOP
+      : BackgroundPosition.CENTER
+
+  return (
+    <BackgroundContainer>
+      <GridBackground>
+        <GridFade position={isPositionTop} />
+        <GridLines />
+      </GridBackground>
+    </BackgroundContainer>
+  )
+}

packages/boba/gateway/src/components/global/background/styles.ts

@@ -0,0 +1,83 @@
+import styled, { keyframes } from 'styled-components'
+import { BackgroundProps } from './types'
+const gridHeight = '200vh'
+
+const linesColor = (theme: string) => {
+  if (theme === 'light') {
+    return 'rgba(0, 0, 0, 0.025)'
+  } else {
+    return 'rgba(255, 255, 255, 0.025)'
+  }
+}
+
+const gradientColor = (theme: string) => {
+  if (theme === 'light') {
+    return 'radial-gradient(45% 45% at 50% 50%, rgba(174, 219, 1, 0.4) 19.79%, rgba(174, 219, 1, 0.125) 50%, rgba(174, 219, 1, 0) 70%);'
+  } else {
+    return 'radial-gradient(45% 45% at 50% 50%, rgba(174, 219, 1, 0.32) 19.79%, rgba(174, 219, 1, 0.1) 50%, rgba(174, 219, 1, 0) 70%);'
+  }
+}
+
+export const BackgroundContainer = styled.div`
+  height: 100vh;
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  position: fixed;
+  z-index: 0;
+`
+
+export const GridBackground = styled.div`
+  width: 100%;
+  height: ${gridHeight};
+  overflow: hidden;
+  perspective: calc(${gridHeight} * 90);
+`
+
+export const GridFade = styled.div<BackgroundProps>`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  transform: translateY(-50vh);
+  will-change: translateY;
+  transition: transform 1s ease;
+  background-image: ${(props) => gradientColor(props.theme.name)};
+  background-clip: padding-box;
+  background-origin: content-box;
+
+  ${({ position }) =>
+    position === 'top' &&
+    `
+    transform: translateY(-100vh);
+  `}
+`
+
+const playAnimation = keyframes`
+	0% {
+		transform: rotateX(45deg) translateY(-50%);
+	}
+	100% {
+		transform: rotateX(45deg) translateY(0%);
+	}
+`
+
+export const GridLines = styled.div`
+  width: 100%;
+  height: 200%;
+  background-image: linear-gradient(
+      to right,
+      ${(props) => linesColor(props.theme.name)} 1px,
+      transparent 0
+    ),
+    linear-gradient(
+      to bottom,
+      ${(props) => linesColor(props.theme.name)} 1px,
+      transparent 0
+    );
+  background-size: 45px 30px;
+  background-repeat: repeat;
+  transform-origin: 100% 0 0;
+  will-change: transform;
+  animation: ${playAnimation} 15s linear infinite;
+`

packages/boba/gateway/src/components/global/background/types.ts

@@ -0,0 +1,10 @@
+export enum BackgroundPosition {
+  TOP = 'top',
+  CENTER = 'center',
+}
+
+export interface BackgroundProps {
+  position: BackgroundPosition
+}
+
+export const RoutesWithBackgroundPositionAtTop = ['/bridge', '/']

packages/boba/gateway/src/components/global/table/index.js → packages/boba/gateway/src/components/global/table/index.tsx

@@ -4,27 +4,7 @@ import { Row } from 'components/global/containers'
 import { Text } from 'components/global/text'
 import Tooltip from 'components/tooltip/Tooltip'
 import { HelpOutline } from '@mui/icons-material'
-import { useMediaQuery } from '@mui/material'
-import { useTheme } from '@mui/material/styles'
-import styled from '@emotion/styled'
-
-const TableHeaderContainer = styled(Row)(({ theme }) => ({
-  padding: '20px',
-  borderTopLeftRadius: '6px',
-  borderTopRightRadius: '6px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  // @ts-ignore
-  background: theme.palette.background.secondary,
-  [theme.breakpoints.down('md')]: {
-    marginBottom: '5px',
-  },
-}));
-
-const TableContentContainer = styled(Row)`
-  justify-content: space-between;
-`
+import styled from 'styled-components'
 
 const TableRow = styled(Row)`
   &:not(:first-of-type) {
@@ -34,17 +14,34 @@ const TableRow = styled(Row)`
     margin-right: 0px;
   }
 `
-// type TableHeaderOptionType = {
-//   name: string
-//   tooltip: string
-//   width: number
-// }
 
-// type TableHeaderType = {
-//   options: TableHeaderOptionType[]
-// }
+const TableHeaderContainer = styled(Row)`
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 6px 6px 0 0;
+  background: ${(props) => props.theme.colors.gray[800]};
+  @media (max-width: 960px) {
+    margin-bottom: 5px;
+  }
+`
+
+const TableContentContainer = styled(Row)`
+  justify-content: space-between;
+`
+
+type TableHeaderOptionType = {
+  name: string
+  tooltip: string
+  width: number
+}
 
-export const TableHeader = ({ options }) => {
+type TableHeaderType = {
+  options: TableHeaderOptionType[]
+}
+
+export const TableHeader = ({ options }: TableHeaderType) => {
   return (
     <TableHeaderContainer>
       {options?.map((option) => {
@@ -66,19 +63,18 @@ export const TableHeader = ({ options }) => {
   )
 }
 
-// type TableContentOptionType = {
-//   content: any
-//   width: number
-// }
+type TableContentOptionType = {
+  content: any
+  width: number
+}
 
-// type TableContentType = {
-//   options: TableContentOptionType[]
-//   mobileOptions?: number[]
-// }
+type TableContentType = {
+  options: TableContentOptionType[]
+  mobileOptions?: number[]
+}
 
-export const TableContent = ({ options, mobileOptions }) => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+export const TableContent = ({ options, mobileOptions }: TableContentType) => {
+  const isMobile = false
   const currentOptions =
     isMobile && mobileOptions ? mobileOptions.map((i) => options[i]) : options
   return (

packages/boba/gateway/src/components/layout/Header/__snapshots__/index.test.tsx.snap

@@ -234,7 +234,8 @@ exports[`Layout => Header should match the snapshot 1`] = `
 
 .c0 {
   height: 73px;
-  margin: 0px 32px;
+  margin: 0px;
+  padding: 0px 32px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -247,6 +248,9 @@ exports[`Layout => Header should match the snapshot 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  -webkit-backdrop-filter: blur(7.5px);
+  backdrop-filter: blur(7.5px);
+  background: rgba(0,0,0,0.05);
 }
 
 .c1 {

packages/boba/gateway/src/components/layout/Header/style.ts

@@ -1,13 +1,25 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import BobaLogoImage from 'assets/images/boba-logo.png'
 import { Svg } from 'components/global'
 
 export const HeaderContainer = styled.div`
   height: 73px;
-  margin: 0px 32px;
+  margin: 0px;
+  padding: 0px 32px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  backdrop-filter: blur(7.5px);
+  ${(props) =>
+    props.theme.name === 'light' &&
+    css`
+      background: rgba(255, 255, 255, 0.5);
+    `}
+  ${(props) =>
+    props.theme.name === 'dark' &&
+    css`
+      background: rgba(0, 0, 0, 0.05);
+    `}
 `
 
 export const BobaLogo = styled.div`

packages/boba/gateway/src/components/layout/PageTitle/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageTitle should match snapshots head 1`] = `
+<DocumentFragment>
+  .c1 {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 700;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 50px 15px;
+  gap: 15px 0px;
+}
+
+.c2 {
+  color: #fff;
+}
+
+<div
+    class="c0"
+  >
+    <h1
+      class="c1 c2"
+    >
+      Page Title
+    </h1>
+    This is the current slug
+  </div>
+</DocumentFragment>
+`;

packages/boba/gateway/src/components/layout/PageTitle/constants.tsx

@@ -0,0 +1,33 @@
+import { ROUTES_PATH } from 'util/constant'
+export const pageTitleWhiteList = [
+  {
+    title: 'History',
+    slug: 'Look back on past transactions',
+    path: ROUTES_PATH.HISTORY,
+  },
+  {
+    title: 'Earn',
+    slug: 'Participate in voting on proposals concerning the future of Boba Network',
+    path: ROUTES_PATH.EARN,
+  },
+  {
+    title: 'Stake',
+    slug: 'Stake BOBA and earn rewards.',
+    path: ROUTES_PATH.STAKE,
+  },
+  {
+    title: 'DAO',
+    slug: 'Participate in voting on proposals concerning the future of Boba Network',
+    path: ROUTES_PATH.DAO,
+  },
+  {
+    title: 'Dev Tools',
+    slug: '',
+    path: ROUTES_PATH.DEV_TOOLS,
+  },
+  {
+    title: 'Boba Scope',
+    slug: '',
+    path: ROUTES_PATH.BOBASCOPE,
+  },
+]