From 814b342eab254565e8503ee0fdd8889524c8c186 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Sun, 7 Aug 2022 18:05:54 -0700
Subject: [PATCH] tweaking bottom nav style

---
 net/web/src/constants/Colors.js                |  2 ++
 net/web/src/session/bottomNav/BottomNav.jsx    | 18 ++++++------------
 .../src/session/bottomNav/BottomNav.styled.js  | 11 +++++------
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index b8093f7d..851bfe46 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -8,6 +8,8 @@ const Colors = {
   divider: '#dddddd',
   encircle: '#cccccc',
   alert: '#ff8888',
+  enabled: '#444444',
+  disabled: '#aaaaaa',
 };
 
 export default Colors;
diff --git a/net/web/src/session/bottomNav/BottomNav.jsx b/net/web/src/session/bottomNav/BottomNav.jsx
index 30a71b7e..c306b3b7 100644
--- a/net/web/src/session/bottomNav/BottomNav.jsx
+++ b/net/web/src/session/bottomNav/BottomNav.jsx
@@ -49,12 +49,10 @@ 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>
+              <CommentOutlined />
             </div>
           </div>
         </div>
@@ -69,12 +67,10 @@ 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>
+              <UserOutlined />
             </div>
           </div>
         </div>
@@ -89,12 +85,10 @@ 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>
+              <TeamOutlined />
             </div>
           </div>
         </div>
diff --git a/net/web/src/session/bottomNav/BottomNav.styled.js b/net/web/src/session/bottomNav/BottomNav.styled.js
index 74da0748..8d8b993d 100644
--- a/net/web/src/session/bottomNav/BottomNav.styled.js
+++ b/net/web/src/session/bottomNav/BottomNav.styled.js
@@ -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;
-    }
   }
 `;