adding new button to channels container

net/web/src/constants/Colors.js

@@ -1,6 +1,6 @@
 const Colors = {
   background: '#8fbea7',
-  primary: '#8fbea7',
+  primary: '#448866',
   formBackground: '#f4f4f4',
   formHover: '#e8e8e8',
   grey: '#888888',

net/web/src/session/Session.jsx

@@ -33,10 +33,12 @@ export function Session() {
   return (
     <SessionWrapper>
       { (viewport.state.display === 'xlarge') && (
-        <div class="desktop-layout">
+        <div class="desktop-layout noselect">
           <div class="left">
             <Identity />
-            <Channels />
+            <div class="bottom">
+              <Channels />
+            </div>
           </div>
           <div class="center">
             { state.conversation && (
@@ -71,10 +73,12 @@ export function Session() {
         </div>
       )}
       { (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
-        <div class="tablet-layout">
+        <div class="tablet-layout noselect">
           <div class="left">
             <Identity />
-            <Channels />
+            <div class="bottom">
+              <Channels />
+            </div>
           </div>
           <div class="right">
             <Welcome />
@@ -107,7 +111,7 @@ export function Session() {
         </div>
       )}
       { (viewport.state.display === 'small') && (
-        <div class="mobile-layout">
+        <div class="mobile-layout noselect">
           <div class="top">
             <div class="reframe">
               <Channels />

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

@@ -26,6 +26,10 @@ export const SessionWrapper = styled.div`
       flex-direction: column;
       position: relative;
       min-height: 0;
+
+      .bottom {
+        height: calc(100% - 64px);
+      }
     }
     .center {
       flex-grow: 1;
@@ -59,6 +63,10 @@ export const SessionWrapper = styled.div`
       flex-direction: column;
       position: relative;
       min-height: 0;
+
+      .bottom {
+        height: calc(100% - 64px);
+      }
     }
     .center {
       flex-grow: 1;

net/web/src/session/channels/Channels.jsx

@@ -3,6 +3,7 @@ import { ChannelsWrapper } from './Channels.styled';
 import { SearchOutlined } from '@ant-design/icons';
 import { useChannels } from './useChannels.hook';
 import { ChannelItem } from './channelItem/ChannelItem';
+import { AddTopic } from './addTopic/AddTopic';
 
 export function Channels() {
 
@@ -10,19 +11,20 @@ export function Channels() {
 
   return (
     <ChannelsWrapper>
-      <div class="search">
+      <div class="view">
-        <div class="filter">
+        <div class="search">
-          <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}
+          <div class="filter">
-              size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
+            <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}
+                size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
+          </div>
         </div>
-      </div>
-      <div class="results">
         <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
           renderItem={item => (
             <ChannelItem item={item} />
           )}
         />
       </div>
+      <AddTopic />
     </ChannelsWrapper>
   );
 }

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

@@ -7,20 +7,21 @@ export const ChannelsWrapper = styled.div`
   display: flex;
   flex-direction: column;
   background-color: ${Colors.formBackground};
-  min-height: 0;
-  overflow: scroll;
 
-  .search {
+  .view {
-    padding: 16px;
+    min-height: 0;
-    border-bottom: 1px solid ${Colors.divider};
+    overflow: scroll;
+    flex-grow: 1;
     
-    .filter {
+    .search {
-      border: 1px solid ${Colors.divider};
+      padding: 16px;
-      background-color: ${Colors.white};
+      border-bottom: 1px solid ${Colors.divider};
-      border-radius: 8px;
+
+      .filter {
+        border: 1px solid ${Colors.divider};
+        background-color: ${Colors.white};
+        border-radius: 8px;
+      }
     }
   }
-
-  .results {
-  }
 `;

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

@@ -0,0 +1,25 @@
+import { AddTopicWrapper } from './AddTopic.styled';
+import { CommentOutlined } from '@ant-design/icons';
+import { useAddTopic } from './useAddTopic.hook';
+
+export function AddTopic() {
+
+  const { state, actions } = useAddTopic();
+
+  return (
+    <AddTopicWrapper>
+      { state.mode === 'bar' && ( 
+        <div class="bar">
+          <div class="add">
+            <CommentOutlined />
+            <div class="label">New Topic</div>
+          </div>
+        </div>
+      )}
+      { state.mode === 'button' && (
+        <div class="button">New Topic</div>
+      )}
+    </AddTopicWrapper>
+  );
+}
+

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

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const AddTopicWrapper = styled.div`
+
+  .button {
+    position: absolute;
+    bottom: 32px;
+    right: 32px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    background-color: ${Colors.primary};
+    color: ${Colors.white};
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+  }
+
+  .bar {
+    height: 64px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: ${Colors.formBackground};
+    border-top: 2px solid ${Colors.divider};
+
+    .add {
+      display: flex;
+      flex-direction: row;
+      background-color: ${Colors.primary};
+      color: ${Colors.white};
+      align-items: center;
+      justify-content: center;
+      padding-left: 16px;
+      padding-right: 16px;
+      border-radius: 4px;
+      font-size: 18px;
+      cursor: pointer;
+
+      .label {
+        padding-left: 8px;
+      }
+    }
+  }
+`;
+

net/web/src/session/channels/addTopic/useAddTopic.hook.js

@@ -0,0 +1,30 @@
+import { useState, useEffect, useContext } from 'react';
+import { ViewportContext } from 'context/ViewportContext';
+
+export function useAddTopic() {
+
+  const [state, setState] = useState({
+    mode: null
+  });
+
+  const viewport = useContext(ViewportContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    if (viewport.state.display === 'small') {
+      updateState({ mode: 'button' });
+    }
+    else {
+      updateState({ mode: 'bar' });
+    }
+  }, [viewport]);
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+

net/web/src/session/identity/Identity.styled.js

@@ -9,8 +9,9 @@ export const IdentityWrapper = styled.div`
   align-items: center;
   padding-left: 16px;
   padding-right: 16px;
-  border-bottom: 3px solid ${Colors.divider};
+  border-bottom: 2px solid ${Colors.divider};
   background-color: ${Colors.formBackground};
+  flex-shrink: 0;
 
   &:hover {
     cursor: pointer;