rendering channel filter

net/web/src/access/createAccount/CreateAccount.styled.js

@@ -38,6 +38,7 @@ export const CreateAccountWrapper = styled.div`
 
   .form-form {
     flex: 2;
+    flex-grow: 1;
 
     .form-space {
       height: 8px;

net/web/src/constants/Colors.js

@@ -4,7 +4,7 @@ const Colors = {
   formBackground: '#f4f4f4',
   formHover: '#e8e8e8',
   grey: '#888888',
-  white: '#f8f8f8',
+  white: '#ffffff',
   divider: '#dddddd',
   encircle: '#cccccc',
   alert: '#ff8888',

net/web/src/session/Session.jsx

@@ -109,7 +109,9 @@ export function Session() {
       { (viewport.state.display === 'small') && (
         <div class="mobile-layout">
           <div class="top">
-            <Channels />
+            <div class="reframe">
+              <Channels />
+            </div>
             { state.conversation && (
               <div class="reframe">
                 <Conversation cardId={state.cardId} conversationId={state.conversationId} />

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

@@ -24,9 +24,11 @@ export const SessionWrapper = styled.div`
       background-color: yellow; 
       display: flex;
       flex-direction: column;
+      position: relative;
     }
     .center {
       flex-grow: 1;
+      position: relative;
     }
     .right {
       min-width: 256px;
@@ -36,6 +38,7 @@ export const SessionWrapper = styled.div`
       background-color: yellow; 
       display: flex;
       flex-direction: column;
+      position: relative;
     }
   }
 
@@ -53,9 +56,11 @@ export const SessionWrapper = styled.div`
       background-color: yellow; 
       display: flex;
       flex-direction: column;
+      position: relative;
     }
     .center {
       flex-grow: 1;
+      position: relative;
     }
   }
 
@@ -71,6 +76,7 @@ export const SessionWrapper = styled.div`
     }
     .bottom {
       height: 48px;
+      position: relative;
     }
   }
 `;

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

@@ -1,4 +1,16 @@
+import { Input } from 'antd';
+import { ChannelsWrapper } from './Channels.styled';
+import { SearchOutlined } from '@ant-design/icons';
+
 export function Channels() {
-  return <></>
+  return (
+    <ChannelsWrapper>
+      <div class="search">
+        <div class="filter">
+          <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />} />
+        </div>
+      </div>
+    </ChannelsWrapper>
+  );
 }
 

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const ChannelsWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${Colors.formBackground};
+
+  .search {
+    padding: 8px;
+
+    .filter {
+      border: 1px solid ${Colors.divider};
+      background-color: ${Colors.white};
+      border-radius: 8px;
+    }
+  }
+`;