refactor: delete top bar and tab
This commit is contained in:
RadoslavDimchev
parent
f783891bb8
commit
50eda7176e
|
|
@ -1,5 +1,4 @@
|
|||
import { Stack, XStack, YStack, styled } from 'tamagui'
|
||||
import TopBar from './TopBar'
|
||||
import { Stack, XStack, styled } from 'tamagui'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
const Background = styled(Stack, {
|
||||
|
|
@ -24,22 +23,18 @@ const PageWrapper = ({ children }: PageWrapperProps) => {
|
|||
margin: 0,
|
||||
}}
|
||||
>
|
||||
<YStack>
|
||||
<TopBar />
|
||||
<XStack
|
||||
space={'$8'}
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'end',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</XStack>
|
||||
</YStack>
|
||||
<XStack
|
||||
space={'$8'}
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'end',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</XStack>
|
||||
</div>
|
||||
</Background>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
import { XStack, Text } from 'tamagui'
|
||||
import './TopBar.css'
|
||||
import Icon from './Icon'
|
||||
|
||||
type TabProps = {
|
||||
icon: string
|
||||
text: string
|
||||
}
|
||||
|
||||
const Tab = ({ icon, text }: TabProps) => {
|
||||
const style = {
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
padding: '6px 12px 6px 6px',
|
||||
'align-items': ' center',
|
||||
gap: '8px',
|
||||
'border-radius': '10px',
|
||||
background: ' #131D2F',
|
||||
width: '136px',
|
||||
height: '32px',
|
||||
}
|
||||
|
||||
return (
|
||||
<XStack style={style}>
|
||||
<Icon source={icon}></Icon>
|
||||
<Text>{text}</Text>
|
||||
</XStack>
|
||||
)
|
||||
}
|
||||
export default Tab
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px 25px;
|
||||
background-color: rgba(9, 16, 28, 0.96);
|
||||
max-width: 1512px;
|
||||
height: 56px;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
}
|
||||
|
||||
.topbar_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 15vw;
|
||||
box-shadow: 40px 12px 62px -19px rgba(9, 16, 28, 0.9);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.topbar_middle {
|
||||
max-width: 75vw;
|
||||
width: 75vw;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.topbar_middle::-webkit-scrollbar {
|
||||
width: 0.5em;
|
||||
/* Set the width of the scrollbar */
|
||||
}
|
||||
|
||||
.topbar_middle::-webkit-scrollbar-thumb {
|
||||
background-color: darkgrey;
|
||||
/* Set the color of the scrollbar thumb */
|
||||
}
|
||||
|
||||
.topbar_middle::-webkit-scrollbar {
|
||||
width: 0.5em;
|
||||
}
|
||||
|
||||
.topbar_middle::-webkit-scrollbar-thumb {
|
||||
background-color: #888;
|
||||
}
|
||||
/* Hide scrollbar for Firefox */
|
||||
|
||||
.topbar_middle {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.topbar_middle::-webkit-scrollbar,
|
||||
.topbar_middle::-webkit-scrollbar-thumb {
|
||||
/* Hide scrollbar for Edge */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topbar_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-width: 10vw;
|
||||
box-shadow: -40px 0px 8px 4px rgba(9, 16, 28, 0.592);
|
||||
}
|
||||
|
||||
.topbar_actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.icon_btn {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg_icon_btn {
|
||||
border: none;
|
||||
background-color: #1d2738;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.img_text_btn .profile {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge_top {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #223bc4;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.badge_bottom {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #1c8a80;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.outlined_btn {
|
||||
border: none;
|
||||
border: 1px solid #1d2738;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import RedDot from '/top-bar-icons/red.png'
|
||||
import YelloDot from '/top-bar-icons/yellow.png'
|
||||
import BlueDot from '/top-bar-icons/blue.png'
|
||||
import Arrow from '/top-bar-icons/chevron-left.png'
|
||||
import CommunitiesIcon from '/top-bar-icons/communities.png'
|
||||
import MessagesIcon from '/top-bar-icons/messages.png'
|
||||
import WalletIcon from '/top-bar-icons/wallet.png'
|
||||
import BrowserIcon from '/top-bar-icons/browser.png'
|
||||
import NodesIcon from '/top-bar-icons/nodes.png'
|
||||
import Rarible from '/top-bar-icons/Rarible.png'
|
||||
import User from '/top-bar-icons/user.png'
|
||||
import FullScreen from '/top-bar-icons/full-screen.png'
|
||||
import Bell from '/top-bar-icons/bell.png'
|
||||
|
||||
import { XStack } from 'tamagui'
|
||||
|
||||
import './TopBar.css'
|
||||
import Icon from './Icon'
|
||||
import ReactButton from './ReactButton'
|
||||
import Tab from './Tab'
|
||||
|
||||
const bgIconBtn = {
|
||||
border: 'none',
|
||||
'background-color': '#1d2738',
|
||||
cursor: 'pointer',
|
||||
padding: '8px',
|
||||
'border-radius': '5px',
|
||||
display: 'flex',
|
||||
'align-items': 'center',
|
||||
}
|
||||
|
||||
const TopBar = () => {
|
||||
return (
|
||||
<XStack className="topbar">
|
||||
<XStack className="topbar_left">
|
||||
<div className="topbar_actions">
|
||||
<Icon source={RedDot} className="icon_btn" />
|
||||
<Icon source={YelloDot} className="icon_btn"></Icon>
|
||||
<Icon className="icon_btn" source={BlueDot}></Icon>
|
||||
</div>
|
||||
<Icon source={Arrow} width={32} height={32} style={bgIconBtn}></Icon>
|
||||
<Icon source={CommunitiesIcon} width={20} height={20} style={bgIconBtn}></Icon>
|
||||
|
||||
<Icon source={MessagesIcon} width={20} height={20} style={bgIconBtn}></Icon>
|
||||
|
||||
<Icon source={WalletIcon} width={20} height={20} style={bgIconBtn}></Icon>
|
||||
<Icon source={BrowserIcon} width={20} height={20} style={bgIconBtn}></Icon>
|
||||
<Icon source={NodesIcon} width={20} height={20} style={bgIconBtn}></Icon>
|
||||
</XStack>
|
||||
<div className="topbar_middle">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<Tab key={i} icon={Rarible} text={'Rarible'} />
|
||||
))}
|
||||
</div>
|
||||
<div className="topbar_right">
|
||||
<ReactButton
|
||||
style={{
|
||||
border: '1px solid #1d2738',
|
||||
backgroundColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
padding: '10px',
|
||||
borderRadius: '5px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '15px',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
Jump to
|
||||
</ReactButton>
|
||||
<button className="icon_btn">
|
||||
<img src={FullScreen} alt="icon" width="100%" />
|
||||
</button>
|
||||
<button className="icon_btn">
|
||||
<div className="badge_top" />
|
||||
<img src={Bell} alt="icon" />
|
||||
</button>
|
||||
<button className="icon_btn">
|
||||
<div className="badge_bottom" />
|
||||
<img src={User} alt="icon" />
|
||||
</button>
|
||||
</div>
|
||||
</XStack>
|
||||
)
|
||||
}
|
||||
|
||||
export default TopBar
|
||||
Loading…
Reference in New Issue