martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

tweaking bottom nav style

Browse Source
This commit is contained in:
Roland Osborne 2022-08-07 18:05:54 -07:00
parent 5f2391ce7f
commit 814b342eab
3 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/constants/Colors.js
View File

@ -8,6 +8,8 @@ const Colors = {
divider: '#dddddd', divider: '#dddddd',
encircle: '#cccccc', encircle: '#cccccc',
alert: '#ff8888', alert: '#ff8888',
enabled: '#444444',
disabled: '#aaaaaa',
}; };
export default Colors; export default Colors;

18
net/web/src/session/bottomNav/BottomNav.jsx
View File

@ -49,12 +49,10 @@ export function BottomNav({ state, actions }) {
</div> </div>
)} )}
{ (state.cards || state.contact || state.profile) && ( { (state.cards || state.contact || state.profile) && (
<div class="nav-item"> <div class="nav-item" onClick={() => setChannels()}>
<div class="nav-inactive"> <div class="nav-inactive">
<div class="nav-div-right"> <div class="nav-div-right">
<div class="nav-button" onClick={() => setChannels()}> <CommentOutlined />
<CommentOutlined />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -69,12 +67,10 @@ export function BottomNav({ state, actions }) {
</div> </div>
)} )}
{ !state.profile && ( { !state.profile && (
<div class="nav-item"> <div class="nav-item" onClick={() => setProfile()}>
<div class="nav-inactive"> <div class="nav-inactive">
<div class="nav-div-right nav-div-left"> <div class="nav-div-right nav-div-left">
<div class="nav-button" onClick={() => setProfile()}> <UserOutlined />
<UserOutlined />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -89,12 +85,10 @@ export function BottomNav({ state, actions }) {
</div> </div>
)} )}
{ ((!state.cards && !state.contact) || state.profile) && ( { ((!state.cards && !state.contact) || state.profile) && (
<div class="nav-item"> <div class="nav-item" onClick={() => setCards()}>
<div class="nav-inactive"> <div class="nav-inactive">
<div class="nav-div-left"> <div class="nav-div-left">
<div class="nav-button" onClick={() => setCards()}> <TeamOutlined />
<TeamOutlined />
</div>
</div> </div>
</div> </div>
</div> </div>

11
net/web/src/session/bottomNav/BottomNav.styled.js
View File

@ -9,7 +9,6 @@ export const BottomNavWrapper = styled.div`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: ${Colors.formBackground}; background-color: ${Colors.formBackground};
font-size: 24px;
.nav-item { .nav-item {
width: 33%; width: 33%;
@ -18,16 +17,20 @@ export const BottomNavWrapper = styled.div`
.nav-inactive { .nav-inactive {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: ${Colors.disabled};
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
font-size: 20px;
cursor: pointer;
} }
.nav-active { .nav-active {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: ${Colors.formHover}; color: ${Colors.enabled};
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
font-size: 24px;
} }
.nav-div-right { .nav-div-right {
@ -47,10 +50,6 @@ export const BottomNavWrapper = styled.div`
height: 100%; height: 100%;
border-left: 1px solid ${Colors.divider}; border-left: 1px solid ${Colors.divider};
} }
.nav-button {
cursor: pointer;
}
} }
`; `;