refactor: delete top bar and tab

This commit is contained in:
RadoslavDimchev 2023-08-08 11:48:41 +03:00
parent f783891bb8
commit 50eda7176e
4 changed files with 13 additions and 276 deletions

View File

@ -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,13 +23,10 @@ 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%)',
background: 'linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)',
width: '100%',
display: 'flex',
justifyContent: 'end',
@ -39,7 +35,6 @@ const PageWrapper = ({ children }: PageWrapperProps) => {
>
{children}
</XStack>
</YStack>
</div>
</Background>
)

View File

@ -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

View File

@ -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;
}

View File

@ -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