From e6de43a977683281c07a57727dd0513f8ac1abb1 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Sun, 14 Aug 2022 22:19:23 -0700
Subject: [PATCH] fixing search bar in channel and card list

---
 net/web/src/session/cards/Cards.jsx           | 60 ++++++------
 net/web/src/session/cards/Cards.styled.js     | 92 +++++++++----------
 net/web/src/session/channels/Channels.jsx     | 28 +++---
 .../src/session/channels/Channels.styled.js   | 44 ++++-----
 4 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/net/web/src/session/cards/Cards.jsx b/net/web/src/session/cards/Cards.jsx
index 1c88da48..ec58e851 100644
--- a/net/web/src/session/cards/Cards.jsx
+++ b/net/web/src/session/cards/Cards.jsx
@@ -10,38 +10,38 @@ export function Cards({ close }) {
 
   return (
     <CardsWrapper>
-      <div class="view">
-        <div class="search">
-          { !state.sorted && (
-            <div class="unsorted" onClick={() => actions.setSort(true)}>
-              <SortAscendingOutlined />
-            </div>
-          )}
-          { state.sorted && (
-            <div class="sorted" onClick={() => actions.setSort(false)}>
-              <SortAscendingOutlined />
-            </div>
-          )}
-          <div class="filter">
-            <Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
-                size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
+      <div class="search">
+        { !state.sorted && (
+          <div class="unsorted" onClick={() => actions.setSort(true)}>
+            <SortAscendingOutlined />
           </div>
-          { state.display === 'small' && (
-            <div class="inline">
-              <div class="add">
-                <UserOutlined />
-                <div class="label">New</div>
-              </div>
-            </div>
-          )}
-          { state.display !== 'small' && (
-            <div class="inline">
-              <div class="dismiss" onClick={close} >
-                <RightOutlined />
-              </div>
-            </div>
-          )}
+        )}
+        { state.sorted && (
+          <div class="sorted" onClick={() => actions.setSort(false)}>
+            <SortAscendingOutlined />
+          </div>
+        )}
+        <div class="filter">
+          <Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
+              size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
         </div>
+        { state.display === 'small' && (
+          <div class="inline">
+            <div class="add">
+              <UserOutlined />
+              <div class="label">New</div>
+            </div>
+          </div>
+        )}
+        { state.display !== 'small' && (
+          <div class="inline">
+            <div class="dismiss" onClick={close} >
+              <RightOutlined />
+            </div>
+          </div>
+        )}
+      </div>
+      <div class="view">
         <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
           renderItem={item => (
             <CardItem item={item} />
diff --git a/net/web/src/session/cards/Cards.styled.js b/net/web/src/session/cards/Cards.styled.js
index 19abd257..ce532c70 100644
--- a/net/web/src/session/cards/Cards.styled.js
+++ b/net/web/src/session/cards/Cards.styled.js
@@ -12,55 +12,55 @@ export const CardsWrapper = styled.div`
     min-height: 0;
     overflow: scroll;
     flex-grow: 1;
-    
-    .search {
-      padding: 16px;
-      border-bottom: 1px solid ${Colors.divider};
+  }
+  
+  .search {
+    padding: 12px;
+    border-bottom: 1px solid ${Colors.divider};
+    display: flex;
+    flex-direction: row;
+
+    .sorted {
+      color: ${Colors.enabled};
+      font-size: 18px;
+      padding-right: 8px;
       display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .unsorted {
+      color: ${Colors.disabled};
+      font-size: 18px;
+      padding-right: 8px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+
+    .filter {
+      border: 1px solid ${Colors.divider};
+      background-color: ${Colors.white};
+      border-radius: 8px;
+      flex-grow: 1;
+    }
+
+    .inline {
+      padding-left: 8px;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
       flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
 
-      .sorted {
-        color: ${Colors.enabled};
-        font-size: 18px;
-        padding-right: 8px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-
-      .unsorted {
-        color: ${Colors.disabled};
-        font-size: 18px;
-        padding-right: 8px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-
-
-      .filter {
-        border: 1px solid ${Colors.divider};
-        background-color: ${Colors.white};
-        border-radius: 8px;
-        flex-grow: 1;
-      }
-
-      .inline {
-        padding-left: 8px;
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .dismiss {
-        font-size: 18px;
-        color: ${Colors.text};
-        cursor: pointer;
-      }
+    .dismiss {
+      font-size: 18px;
+      color: ${Colors.text};
+      cursor: pointer;
     }
   }
 
diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx
index 4a3f948c..6b0ecbbc 100644
--- a/net/web/src/session/channels/Channels.jsx
+++ b/net/web/src/session/channels/Channels.jsx
@@ -10,21 +10,21 @@ export function Channels() {
 
   return (
     <ChannelsWrapper>
-      <div class="view">
-        <div class="search">
-          <div class="filter">
-            <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}
-                size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
-          </div>
-          { state.display === 'small' && (
-            <div class="inline">
-              <div class="add">
-                <CommentOutlined />
-                <div class="label">New</div>
-              </div> 
-            </div>
-          )}
+      <div class="search">
+        <div class="filter">
+          <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}
+              size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
         </div>
+        { state.display === 'small' && (
+          <div class="inline">
+            <div class="add">
+              <CommentOutlined />
+              <div class="label">New</div>
+            </div> 
+          </div>
+        )}
+      </div>
+      <div class="view">
         <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
           renderItem={item => (
             <ChannelItem item={item} />
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js
index 2649e526..a2f6cd7e 100644
--- a/net/web/src/session/channels/Channels.styled.js
+++ b/net/web/src/session/channels/Channels.styled.js
@@ -12,30 +12,30 @@ export const ChannelsWrapper = styled.div`
     min-height: 0;
     overflow: scroll;
     flex-grow: 1;
-    
-    .search {
-      padding: 16px;
-      border-bottom: 1px solid ${Colors.divider};
+  }
+ 
+  .search {
+    padding: 12px;
+    border-bottom: 1px solid ${Colors.divider};
+    display: flex;
+    flex-direction: row;
+
+    .filter {
+      border: 1px solid ${Colors.divider};
+      background-color: ${Colors.white};
+      border-radius: 8px;
+      flex-grow: 1;
+    }
+
+    .inline {
+      padding-left: 8px;
       display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
       flex-direction: row;
-
-      .filter {
-        border: 1px solid ${Colors.divider};
-        background-color: ${Colors.white};
-        border-radius: 8px;
-        flex-grow: 1;
-      }
-
-      .inline {
-        padding-left: 8px;
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-      }
+      align-items: center;
+      justify-content: center;
     }
   }