From 213577e41864128fa1ed8467cfea85e262cae895 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Sun, 7 Aug 2022 23:30:34 -0700
Subject: [PATCH] rendering channel filter

---
 .../createAccount/CreateAccount.styled.js     |  1 +
 net/web/src/constants/Colors.js               |  2 +-
 net/web/src/session/Session.jsx               |  4 +++-
 net/web/src/session/Session.styled.js         |  6 ++++++
 net/web/src/session/channels/Channels.jsx     | 14 ++++++++++++-
 .../src/session/channels/Channels.styled.js   | 20 +++++++++++++++++++
 6 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 net/web/src/session/channels/Channels.styled.js

diff --git a/net/web/src/access/createAccount/CreateAccount.styled.js b/net/web/src/access/createAccount/CreateAccount.styled.js
index 4c86d2e5..1f4bb9e5 100644
--- a/net/web/src/access/createAccount/CreateAccount.styled.js
+++ b/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;
diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index 851bfe46..95db9883 100644
--- a/net/web/src/constants/Colors.js
+++ b/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',
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index 100a79fc..d5329287 100644
--- a/net/web/src/session/Session.jsx
+++ b/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} />
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js
index 9745d7f7..38503c7a 100644
--- a/net/web/src/session/Session.styled.js
+++ b/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;
     }
   }
 `;
diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx
index ff7d2e40..f974c9b4 100644
--- a/net/web/src/session/channels/Channels.jsx
+++ b/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>
+  );
 }
 
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js
new file mode 100644
index 00000000..7c392087
--- /dev/null
+++ b/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;
+    }
+  }
+`;