Web:Rename rootFolderTitle to rootFolderTitleColor. Added truncation of the long folder name in the room.

packages/common/components/Navigation/StyledNavigation.js

@@ -43,6 +43,9 @@ const StyledContainer = styled.div`
 
   .title-container {
     display: flex;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .navigation-header-separator {

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

@@ -20,14 +20,17 @@ const StyledTextContainer = styled.div`
 
   position: relative;
 
-  overflow: hidden;
-
   ${(props) =>
     !props.isRootFolder && !props.isRootFolderTitle && "cursor: pointer"};
   ${(props) => props.isRootFolderTitle && "padding-right: 3px"};
-  overflow: hidden;
+
+  ${(props) =>
+    !props.isRootFolderTitle &&
+    css`
       white-space: nowrap;
+      overflow: hidden;
       text-overflow: ellipsis;
+    `};
 `;
 
 const StyledHeading = styled(Heading)`
@@ -39,7 +42,7 @@ const StyledHeading = styled(Heading)`
 
   ${(props) =>
     props.isRootFolderTitle &&
-    `color: ${props.theme.navigation.rootFolderTitle}`};
+    `color: ${props.theme.navigation.rootFolderTitleColor}`};
 
   @media ${tablet} {
     font-size: 21px;
@@ -77,7 +80,7 @@ const StyledArrowIcon = styled(ArrowIcon)`
 
   padding-left: 6px;
   path {
-    fill: ${(props) => props.theme.navigation.rootFolderTitle};
+    fill: ${(props) => props.theme.navigation.rootFolderTitleColor};
   }
 `;
 

packages/components/themes/base.js

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

packages/components/themes/dark.js

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