Browse Source

fix sidebar item height

Aykut Saraç 3 years ago
parent
commit
1076158afb
2 changed files with 12 additions and 5 deletions
  1. 9 3
      src/components/Sidebar/index.tsx
  2. 3 2
      src/components/Tooltip/index.tsx

+ 9 - 3
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};
   }
 `;

+ 3 - 2
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};