adding contact menu

net/web/src/constants/Colors.js

@@ -1,7 +1,8 @@
 const Colors = {
   background: '#8fbea7',
   primary: '#448866',
-  formBackground: '#f4f4f4',
+  formBackground: '#f2f2f2',
+  formFocus: '#f8f8f8',
   formHover: '#e8e8e8',
   grey: '#888888',
   white: '#ffffff',

net/web/src/session/Session.jsx

@@ -35,7 +35,7 @@ export function Session() {
       { (viewport.state.display === 'xlarge') && (
         <div class="desktop-layout noselect">
           <div class="left">
-            <Identity />
+            <Identity openCards={actions.openCards} />
             <div class="bottom">
               <Channels />
             </div>
@@ -75,7 +75,7 @@ export function Session() {
       { (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
         <div class="tablet-layout noselect">
           <div class="left">
-            <Identity />
+            <Identity openCards={actions.openCards} />
             <div class="bottom">
               <Channels />
             </div>
@@ -87,16 +87,16 @@ export function Session() {
                 <Conversation cardId={state.cardId} conversationId={state.conversationId} />
               </div>
             )}
-            <Drawer width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
+            <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
               { state.details && (
                 <Details cardId={state.cardId} conversationId={state.conversationId} />
               )}
             </Drawer>
-            <Drawer width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
+            <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
               { state.cards && (
                 <Cards />
               )}
-              <Drawer width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
+              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
                 { state.contact && (
                   <Contact guid={state.contactGuid} />
                 )}

net/web/src/session/Session.styled.js

@@ -68,9 +68,13 @@ export const SessionWrapper = styled.div`
         height: calc(100% - 64px);
       }
     }
-    .center {
+    .right {
       flex-grow: 1;
       position: relative;
+
+      .drawer {
+        padding: 0px;
+      }
     }
   }
 
@@ -87,7 +91,7 @@ export const SessionWrapper = styled.div`
     .bottom {
       height: 48px;
       position: relative;
-      box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.3);
+      box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
     }
   }
 `;

net/web/src/session/bottomNav/BottomNav.styled.js

@@ -8,7 +8,7 @@ export const BottomNavWrapper = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  background-color: ${Colors.formBackground};
+  background-color: ${Colors.primary};
 
   .nav-item {
     width: 33%;
@@ -27,7 +27,7 @@ export const BottomNavWrapper = styled.div`
     .nav-active {
       width: 100%;
       height: 100%;
-      color: ${Colors.enabled};
+      color: ${Colors.formFocus};
       padding-top: 8px;
       padding-bottom: 8px;
       font-size: 24px;

net/web/src/session/cards/Cards.jsx

@@ -1,4 +1,28 @@
+import { Input, List } from 'antd';
+import { CardsWrapper } from './Cards.styled';
+import { SearchOutlined } from '@ant-design/icons';
+import { useCards } from './useCards.hook';
+import { CardItem } from './cardItem/CardItem';
+
 export function Cards() {
-  return <div>CARDS</div>
+
+  const { state, actions } = useCards();
+
+  return (
+    <CardsWrapper>
+      <div class="view">
+        <div class="search">
+          <div class="filter">
+            <Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
+                size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
+          </div>
+        </div>
+        <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
+          renderItem={item => (
+            <CardItem item={item} />
+          )} />
+      </div>
+    </CardsWrapper>
+  );
 }
 

net/web/src/session/cards/cardItem/CardItem.jsx

@@ -0,0 +1,3 @@
+export function CardItem() {
+  return <div>CARD ITEM</div>
+}

net/web/src/session/cards/useCards.hook.js

@@ -0,0 +1,29 @@
+import { useContext, useState, useEffect } from 'react';
+import { CardContext } from 'context/CardContext';
+
+export function useCards() {
+
+  const [filter, setFilter] = useState(null);
+
+  const [state, setState] = useState({
+    cards: [],
+    busy: false }
+  );
+
+  const card = useContext(CardContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    onFilter: (value) => {
+      setFilter(value.toUpperCase());
+    },
+  };
+
+  useEffect(() => {
+  }, [card]);
+
+  return { state, actions };
+}

net/web/src/session/channels/Channels.styled.js

@@ -6,7 +6,7 @@ export const ChannelsWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: ${Colors.formBackground};
+  background-color: ${Colors.formFocus};
 
   .view {
     min-height: 0;

net/web/src/session/channels/addTopic/AddTopic.jsx

@@ -12,12 +12,12 @@ export function AddTopic() {
         <div class="bar">
           <div class="add">
             <CommentOutlined />
-            <div class="label">New Topic</div>
+            <div class="label">New Channel</div>
           </div>
         </div>
       )}
       { state.mode === 'button' && (
-        <div class="button">New Topic</div>
+        <div class="button">New Channel</div>
       )}
     </AddTopicWrapper>
   );

net/web/src/session/channels/addTopic/AddTopic.styled.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import Colors from 'constants/Colors';
 
 export const AddTopicWrapper = styled.div`
+  background-color: ${Colors.formBackground};
 
   .button {
     position: absolute;

net/web/src/session/identity/Identity.jsx

@@ -4,7 +4,7 @@ import { IdentityWrapper } from './Identity.styled';
 import { useIdentity } from './useIdentity.hook';
 import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons';
 
-export function Identity() {
+export function Identity({ openCards }) {
 
   const { state, actions } = useIdentity();
 
@@ -14,7 +14,7 @@ export function Identity() {
         <div>Edit Profile</div>
       </Menu.Item>
       <Menu.Item key="1">
-        <div>Change Login</div>
+        <div onClick={openCards} >Manage Contacts</div>
       </Menu.Item>
       <Menu.Item key="2">
         <div onClick={actions.logout}>Logout</div>