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

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

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