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',
encircle: '#cccccc',
alert: '#ff8888',
enabled: '#444444',
disabled: '#aaaaaa',
};
export default Colors;

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

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

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

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