From b16e2ff78486541f1df0e0b2c1a7c8e7b5174706 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Sun, 27 Mar 2022 17:02:05 -0700
Subject: [PATCH] styling sidebar

---
 net/web/src/Create/Create.styled.js                        | 1 +
 net/web/src/Login/Login.styled.js                          | 3 ++-
 net/web/src/User/Profile/Profile.styled.js                 | 2 +-
 net/web/src/User/SideBar/Contacts/Cards/Cards.jsx          | 6 +++---
 net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js    | 7 ++++---
 .../SideBar/Contacts/Cards/Registry/Registry.styled.js     | 4 +++-
 .../src/User/SideBar/Contacts/Channels/Channels.styled.js  | 2 +-
 net/web/src/User/SideBar/Contacts/Contacts.jsx             | 2 +-
 8 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/net/web/src/Create/Create.styled.js b/net/web/src/Create/Create.styled.js
index e9c4c3fa..99dffd6a 100644
--- a/net/web/src/Create/Create.styled.js
+++ b/net/web/src/Create/Create.styled.js
@@ -7,6 +7,7 @@ export const CreateWrapper = styled.div`
   align-items: center;
   justify-content: center;
   width: 100%;
+  height: 100%;
   
   .container {
     background-color: #ffffff;
diff --git a/net/web/src/Login/Login.styled.js b/net/web/src/Login/Login.styled.js
index 5880be0f..9dc1841e 100644
--- a/net/web/src/Login/Login.styled.js
+++ b/net/web/src/Login/Login.styled.js
@@ -7,7 +7,8 @@ export const LoginWrapper = styled.div`
   align-items: center;
   justify-content: center;
   width: 100%;
-  
+  height: 100%;
+\  
   .container {
     background-color: #ffffff;
     display: flex;
diff --git a/net/web/src/User/Profile/Profile.styled.js b/net/web/src/User/Profile/Profile.styled.js
index da0f5d73..b2e5392b 100644
--- a/net/web/src/User/Profile/Profile.styled.js
+++ b/net/web/src/User/Profile/Profile.styled.js
@@ -43,7 +43,7 @@ export const ProfileWrapper = styled.div`
     flex-direction: row;
     padding: 32px;
     width: 100%;
-    overflow: scroll
+    overflow: auto; 
   }
 
   .profile {
diff --git a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
index cb1c1bd4..cf7f118a 100644
--- a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
+++ b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
@@ -11,19 +11,19 @@ export function Cards({ showRegistry }) {
 
   return (
     <CardsWrapper>
-
+      <div>
         <Drawer
           placement="right"
           closable={false}
           visible={showRegistry}
           getContainer={false}
           contentWrapperStyle={{ width: '100%' }}
-          bodyStyle={{ padding: 0, backgroundColor: '#f6f5ed' }}
+          bodyStyle={{ backgroundColor: '#f6f5ed', padding: 16 }}
           style={{ position: 'absolute' }}
         >
           <Registry />
         </Drawer>
-
+      </div>
     </CardsWrapper>
   )
 }
diff --git a/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js b/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js
index 403ecc31..c459cca7 100644
--- a/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js
+++ b/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js
@@ -3,10 +3,11 @@ import styled from 'styled-components';
 
 export const CardsWrapper = styled.div`
   position: relative;
-  height: calc(100vh - 143px);
+  height: calc(100vh - 127px);
   width: 100%;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;;
   text-align: center;
-  border-radius: 2px;
+  padding-top: 16px;
 `;
 
diff --git a/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js b/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js
index e0e91632..7045e982 100644
--- a/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js
+++ b/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js
@@ -5,8 +5,10 @@ export const RegistryWrapper = styled.div`
   padding-left: 8px;
   padding-right: 8px;
   text-align: center;
-  height: calc(100vh - 143px);
   display: flex;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
   flex-direction: column;
 
   .contacts {
diff --git a/net/web/src/User/SideBar/Contacts/Channels/Channels.styled.js b/net/web/src/User/SideBar/Contacts/Channels/Channels.styled.js
index ead6aa44..6b0cd1f5 100644
--- a/net/web/src/User/SideBar/Contacts/Channels/Channels.styled.js
+++ b/net/web/src/User/SideBar/Contacts/Channels/Channels.styled.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const ChannelsWrapper = styled.div`
   position: relative;
-  height: calc(100vh - 143px);
+  height: calc(100vh - 127px);
   width: 100%;
   overflow: hidden;
   text-align: center;
diff --git a/net/web/src/User/SideBar/Contacts/Contacts.jsx b/net/web/src/User/SideBar/Contacts/Contacts.jsx
index a2c94507..7bf06a03 100644
--- a/net/web/src/User/SideBar/Contacts/Contacts.jsx
+++ b/net/web/src/User/SideBar/Contacts/Contacts.jsx
@@ -50,7 +50,7 @@ export function Contacts() {
 
   return (
     <ContactsWrapper>
-      <Tabs onChange={onTab} tabBarStyle={{ paddingLeft: 16, paddingRight: 16 }} tabBarExtraContent={addButton}>>
+      <Tabs onChange={onTab} tabBarStyle={{ marginBottom: 0, paddingLeft: 16, paddingRight: 16 }} tabBarExtraContent={addButton}>>
         <TabPane tab="Contacts" key="contact">
           <Cards showRegistry={showRegistry} />
         </TabPane>