-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat/background page title plus (#981)
* background component + move table component to tsx + remove mui on table component * Adding PageTitle component + Background component * fix the font-family & PageTitle * adding cases without slug, and no render on doesn't get title * fix for the failing tset * background position based on url --------- Co-authored-by: Sahil Kashetwar <sahil@enya.ai> (cherry picked from commit f2f3e0a)
- Loading branch information
1 parent
04bec93
commit 3b7c0a1
Showing
24 changed files
with
1,198 additions
and
73 deletions.
There are no files selected for viewing
15 changes: 15 additions & 0 deletions
15
packages/boba/gateway/src/components/global/background/index.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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({}) |
27 changes: 27 additions & 0 deletions
27
packages/boba/gateway/src/components/global/background/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
83 changes: 83 additions & 0 deletions
83
packages/boba/gateway/src/components/global/background/styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| ` |
10 changes: 10 additions & 0 deletions
10
packages/boba/gateway/src/components/global/background/types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export enum BackgroundPosition { | ||
| TOP = 'top', | ||
| CENTER = 'center', | ||
| } | ||
|
|
||
| export interface BackgroundProps { | ||
| position: BackgroundPosition | ||
| } | ||
|
|
||
| export const RoutesWithBackgroundPositionAtTop = ['/bridge', '/'] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 14 additions & 2 deletions
16
packages/boba/gateway/src/components/layout/Header/style.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
packages/boba/gateway/src/components/layout/PageTitle/__snapshots__/index.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| `; |
33 changes: 33 additions & 0 deletions
33
packages/boba/gateway/src/components/layout/PageTitle/constants.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }, | ||
| ] |
Oops, something went wrong.