status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: convert TopBar and fix new issues

This commit is contained in:
RadoslavDimchev 2023-08-08 10:32:17 +03:00
parent 2376120104
commit 94fbbb6f15
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/TopBar.jsx → src/components/TopBar.tsx
View File

@ -12,41 +12,43 @@ import User from '/top-bar-icons/user.png'
import FullScreen from '/top-bar-icons/full-screen.png' import FullScreen from '/top-bar-icons/full-screen.png'
import Bell from '/top-bar-icons/bell.png' import Bell from '/top-bar-icons/bell.png'
import './TopBar.css'
import { ReactButton } from './ReactButton'
import { XStack } from 'tamagui' import { XStack } from 'tamagui'
import { Icon } from './Icon'
import { Tab } from './Tab' 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 = () => { const TopBar = () => {
const bgIconBtn = {
border: 'none',
'background-color': '#1d2738',
cursor: 'pointer',
padding: '8px',
'border-radius': '5px',
display: 'flex',
'align-items': 'center',
}
return ( return (
<XStack className="topbar"> <XStack className="topbar">
<XStack className="topbar_left"> <XStack className="topbar_left">
<div className="topbar_actions"> <div className="topbar_actions">
<Icon src={RedDot} alt=" " className="icon_btn" /> <Icon source={RedDot} className="icon_btn" />
<Icon src={YelloDot} className="icon_btn"></Icon> <Icon source={YelloDot} className="icon_btn"></Icon>
<Icon className="icon_btn" src={BlueDot}></Icon> <Icon className="icon_btn" source={BlueDot}></Icon>
</div> </div>
<Icon src={Arrow} width={32} height={32} style={bgIconBtn}></Icon> <Icon source={Arrow} width={32} height={32} style={bgIconBtn}></Icon>
<Icon src={CommunitiesIcon} width={20} height={20} style={bgIconBtn}></Icon> <Icon source={CommunitiesIcon} width={20} height={20} style={bgIconBtn}></Icon>
<Icon src={MessagesIcon} width={20} height={20} style={bgIconBtn}></Icon> <Icon source={MessagesIcon} width={20} height={20} style={bgIconBtn}></Icon>
<Icon src={WalletIcon} width={20} height={20} style={bgIconBtn}></Icon> <Icon source={WalletIcon} width={20} height={20} style={bgIconBtn}></Icon>
<Icon src={BrowserIcon} width={20} height={20} style={bgIconBtn}></Icon> <Icon source={BrowserIcon} width={20} height={20} style={bgIconBtn}></Icon>
<Icon src={NodesIcon} width={20} height={20} style={bgIconBtn}></Icon> <Icon source={NodesIcon} width={20} height={20} style={bgIconBtn}></Icon>
</XStack> </XStack>
<div className="topbar_middle"> <div className="topbar_middle">
{Array.from({ length: 9 }).map((e, i) => ( {Array.from({ length: 9 }).map((_, i) => (
<Tab key={i} icon={Rarible} text={'Rarible'} /> <Tab key={i} icon={Rarible} text={'Rarible'} />
))} ))}
</div> </div>
@ -66,20 +68,18 @@ const TopBar = () => {
fontWeight: 'bold', fontWeight: 'bold',
}} }}
> >
<p>Jump to </p> Jump to
</ReactButton> </ReactButton>
<button className="icon_btn"> <button className="icon_btn">
<img src={FullScreen} alt=" " width="100%" /> <img src={FullScreen} alt="icon" width="100%" />
</button> </button>
<button className="icon_btn"> <button className="icon_btn">
<div className="badge_top" /> <div className="badge_top" />
<img src={Bell} alt="icon" />
<img src={Bell} alt=" " />
</button> </button>
<button className="icon_btn"> <button className="icon_btn">
<div className="badge_bottom" /> <div className="badge_bottom" />
<img src={User} alt="icon" />
<img src={User} alt=" " />
</button> </button>
</div> </div>
</XStack> </XStack>