Web:Fix styles navigation.

packages/common/components/Navigation/StyledNavigation.js

@@ -36,6 +36,7 @@ const StyledContainer = styled.div`
   }
 
   .arrow-button {
+    padding-top: 2px;
     width: 17px;
     min-width: 17px;
   }
@@ -49,7 +50,7 @@ const StyledContainer = styled.div`
     padding-left: 16px;
     border-right: ${(props) =>
       `1px solid ${props.theme.navigation.icon.stroke}`};
-
+    height: 21px;
     @media ${mobile} {
       display: none;
     }

packages/common/components/Navigation/sub-components/text.js

@@ -24,7 +24,7 @@ const StyledTextContainer = styled.div`
 
   ${(props) =>
     !props.isRootFolder && !props.isRootFolderTitle && "cursor: pointer"};
-  ${(props) => props.isRootFolderTitle && "padding-right: 2px"};
+  ${(props) => props.isRootFolderTitle && "padding-right: 3px"};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -37,7 +37,9 @@ const StyledHeading = styled(Heading)`
 
   margin: 0;
 
-  ${(props) => props.isRootFolderTitle && "color: #A3A9AE"};
+  ${(props) =>
+    props.isRootFolderTitle &&
+    `color: ${props.theme.navigation.rootFolderTitle}`};
 
   @media ${tablet} {
     font-size: 21px;
@@ -75,7 +77,7 @@ const StyledArrowIcon = styled(ArrowIcon)`
 
   padding-left: 6px;
   path {
-    fill: #a3a9ae;
+    fill: ${(props) => props.theme.navigation.rootFolderTitle};
   }
 `;
 

packages/components/themes/base.js

@@ -1952,6 +1952,7 @@ const Base = {
   navigation: {
     expanderColor: black,
     background: white,
+    rootFolderTitle: "#A3A9AE",
 
     icon: {
       fill: "#316DAA",

packages/components/themes/dark.js

@@ -1946,6 +1946,7 @@ const Dark = {
   navigation: {
     expanderColor: "#eeeeee",
     background: black,
+    rootFolderTitle: "#858585",
 
     icon: {
       fill: "#E06A1B",