From 1076158afb1cfb6f43b16a3a33e9598279271f0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aykut=20Sara=C3=A7?= <aykutsarac0@gmail.com>
Date: Fri, 18 Mar 2022 09:54:00 +0300
Subject: [PATCH] fix sidebar item height

---
 src/components/Sidebar/index.tsx | 12 +++++++++---
 src/components/Tooltip/index.tsx |  5 +++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 5560b54..865a293 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -43,6 +43,8 @@ const StyledSidebar = styled.div`
 `;
 
 const StyledElement = styled.div<{ disabled?: boolean }>`
+  display: flex;
+  justify-content: center;
   text-align: center;
   font-size: 28px;
   font-weight: 700;
@@ -62,6 +64,7 @@ const StyledElement = styled.div<{ disabled?: boolean }>`
   }
 
   svg {
+    padding: 8px 0;
     vertical-align: middle;
   }
 `;
@@ -78,8 +81,11 @@ const StyledTopWrapper = styled.nav`
   align-items: center;
   width: 100%;
 
-  & > div,
-  a {
+  & > div:first-of-type {
+    border-top: 1px solid ${({ theme }) => theme.SILVER_DARK};
+  }
+
+  & > div:nth-child(n + 1) {
     border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};
   }
 `;
@@ -92,7 +98,7 @@ const StyledBottomWrapper = styled.nav`
   width: 100%;
 
   & > div,
-  a {
+  a:nth-child(0) {
     border-top: 1px solid ${({ theme }) => theme.SILVER_DARK};
   }
 `;
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 9c25683..eed6019 100644
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -7,14 +7,15 @@ interface TooltipProps {
 
 const StyledTooltipWrapper = styled.div`
   position: relative;
-  width: fit-content;
+  width: 100%;
+  height: 100%;
 `;
 
 const StyledTooltip = styled.div<{ visible: boolean }>`
   position: absolute;
   top: 0;
   right: 0;
-  transform: translate(calc(100% + 20px), 25%);
+  transform: translate(calc(100% + 15px), 25%);
   z-index: 5;
   background: ${({ theme }) => theme.SILVER};
   color: ${({ theme }) => theme.SILVER_DARK};