From 8e2a7c214d98b5f8f137637c053768e73a2b3678 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Tue, 22 Mar 2022 13:07:43 -0700
Subject: [PATCH] styling sidebar identity

---
 net/web/src/User/Profile/Profile.styled.js    |  7 +++---
 .../User/SideBar/Contacts/Contacts.styled.jsx |  3 ---
 .../src/User/SideBar/Identity/Identity.jsx    | 24 +++++++++----------
 .../User/SideBar/Identity/Identity.styled.js  | 22 ++++++++++++-----
 net/web/src/User/SideBar/SideBar.styled.js    |  5 +---
 net/web/src/User/User.styled.js               |  8 ++-----
 6 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/net/web/src/User/Profile/Profile.styled.js b/net/web/src/User/Profile/Profile.styled.js
index 20835795..6e8e4387 100644
--- a/net/web/src/User/Profile/Profile.styled.js
+++ b/net/web/src/User/Profile/Profile.styled.js
@@ -6,7 +6,6 @@ export const ProfileWrapper = styled.div`
   width: 100%;
   height: 100%;
   background-color: #f6f5ed;
-  border-radius: 2px;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
@@ -16,8 +15,10 @@ export const ProfileWrapper = styled.div`
     width: 100%;
     flex-direction: row;
     align-items: center;
-    background-color: #dddddd;
-    height: 72px;
+    background-color: #ddeedd;
+    height: 64px;
+    padding-right: 16px;
+    padding-left: 16px;
   }
 
   .title {
diff --git a/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx b/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx
index 1e660d11..a79dd553 100644
--- a/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx
+++ b/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx
@@ -4,8 +4,5 @@ import styled from 'styled-components';
 export const ContactsWrapper = styled.div`
   width: 100%;
   flex-grow: 1;
-  border-radius: 8px;
   background-color: #f6f5ed;
-  border-top: 1px solid #8fbea7;
-  border-right: 1px solid #8fbea7;
 `;
diff --git a/net/web/src/User/SideBar/Identity/Identity.jsx b/net/web/src/User/SideBar/Identity/Identity.jsx
index b464c634..14831b9a 100644
--- a/net/web/src/User/SideBar/Identity/Identity.jsx
+++ b/net/web/src/User/SideBar/Identity/Identity.jsx
@@ -1,6 +1,6 @@
 import { Avatar, Image } from 'antd';
 import React from 'react'
-import { IdentityWrapper, MenuWrapper } from './Identity.styled';
+import { IdentityWrapper, IdentityDropdown, MenuWrapper } from './Identity.styled';
 import { RightOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
 import { useIdentity } from './useIdentity.hook';
 import { Menu, Dropdown } from 'antd';
@@ -35,20 +35,18 @@ export function Identity() {
 
   return (
     <IdentityWrapper>
-      <Dropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="rightTop">
-        <div>
-          <div class="container">
-            <div class="avatar">
-              <Logo />
-            </div>
-            <div class="username">
-              <span class="name">{ state.name }</span>
-              <span class="handle">{ state.handle }</span>
-            </div>
-            <RightOutlined />
+      <IdentityDropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="rightTop">
+        <div class="container">
+          <div class="avatar">
+            <Logo />
           </div>
+          <div class="username">
+            <span class="name">{ state.name }</span>
+            <span class="handle">{ state.handle }</span>
+          </div>
+          <RightOutlined />
         </div>
-      </Dropdown>     
+      </IdentityDropdown>     
     </IdentityWrapper>
   )
 }
diff --git a/net/web/src/User/SideBar/Identity/Identity.styled.js b/net/web/src/User/SideBar/Identity/Identity.styled.js
index 6e0b8f23..d1d93026 100644
--- a/net/web/src/User/SideBar/Identity/Identity.styled.js
+++ b/net/web/src/User/SideBar/Identity/Identity.styled.js
@@ -1,13 +1,15 @@
-import { Menu, Button } from 'antd';
+import { Menu, Button, Dropdown } from 'antd';
 import styled from 'styled-components';
 
 export const IdentityWrapper = styled.div`
-  border-top: 1px solid #8fbea7;
-  border-right: 1px solid #8fbea7;
   border-bottom: 1px solid #8fbea7;
   overflow: hidden;
-  border-radius: 8px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 64px;
+  background-color: #f6f5ed;
 
   .container {
     display: flex;
@@ -38,8 +40,8 @@ export const IdentityWrapper = styled.div`
   .avatar {
     color: #888888;
     font-size: 3em;
-    width: 64px;
-    height: 64px;
+    width: 48px;
+    height: 48px;
     border-radius: 6px;
     overflow: hidden;
     display: flex;
@@ -63,3 +65,11 @@ export const MenuWrapper = styled(Menu)`
   border-radius: 4px;
 `;
 
+export const IdentityDropdown = styled(Dropdown)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 16px;
+  padding-right: 16px;
+`;
diff --git a/net/web/src/User/SideBar/SideBar.styled.js b/net/web/src/User/SideBar/SideBar.styled.js
index e43e41ba..f63de2f5 100644
--- a/net/web/src/User/SideBar/SideBar.styled.js
+++ b/net/web/src/User/SideBar/SideBar.styled.js
@@ -5,11 +5,8 @@ export const SideBarWrapper = styled.div`
   height: 100%;
   max-width: 300px;
   min-width: 200px;
-  border: 1px solid #8fbea7;
+  border-right: 1px solid #8fbea7;
   background-color: #8fbea7;
   display: flex;
   flex-direction: column;
-  padding-top: 2px;
-  padding-left: 4px;
-  padding-bottom: 4px;
 `;
diff --git a/net/web/src/User/User.styled.js b/net/web/src/User/User.styled.js
index b79740f3..4dceb0d6 100644
--- a/net/web/src/User/User.styled.js
+++ b/net/web/src/User/User.styled.js
@@ -20,8 +20,8 @@ export const UserWrapper = styled.div`
 
   .connect {
     position: absolute;
-    width: 33%;
-    height: 33%;
+    width: 40%;
+    height: 40%;
     object-fit: contain;
   }
 
@@ -31,10 +31,6 @@ export const UserWrapper = styled.div`
     justify-content: center;
     width: 100%;
     height: 100%;
-    padding-left: 8px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-right: 4px;
     z-index: 1;
   }
 `;