Web: Files: fixed infoBlock theme

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/PublicRoomBar.js

@@ -4,6 +4,7 @@ import PeopleIcon from "PUBLIC_DIR/images/people.react.svg?url";
 import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
 import IconButton from "@docspace/components/icon-button";
 import { StyledPublicRoomBar } from "./StyledPublicRoom";
+import Text from "@docspace/components/text";
 
 const PublicRoomBar = (props) => {
   const { headerText, bodyText, iconName, onClose, ...rest } = props;
@@ -15,9 +16,13 @@ const PublicRoomBar = (props) => {
           <div className="header-icon">
             <ReactSVG src={iconName ? iconName : PeopleIcon} />
           </div>
-          <div>{headerText}</div>
+          <Text className="text-container_header" fontWeight={600}>
+            {headerText}
+          </Text>
         </div>
-        <div className="body-container">{bodyText}</div>
+        <Text className="text-container_body" fontWeight={400}>
+          {bodyText}
+        </Text>
       </div>
 
       {/* <IconButton

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js

@@ -4,7 +4,7 @@ import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 
 const StyledPublicRoomBar = styled.div`
   display: flex;
-  background-color: #f8f9f9;
+  background-color: ${(props) => props.theme.infoBlock.background};
   color: #333;
   font-size: 12px;
   padding: 12px 16px;
@@ -25,9 +25,12 @@ const StyledPublicRoomBar = styled.div`
     font-weight: 600;
   }
 
-  .body-container {
-    color: #555f65;
-    font-weight: 400;
+  .text-container_header {
+    color: ${(props) => props.theme.infoBlock.headerColor};
+  }
+
+  .text-container_body {
+    color: ${(props) => props.theme.infoBlock.descriptionColor};
   }
 
   .close-icon {

packages/components/themes/base.js

@@ -3121,6 +3121,12 @@ const Base = {
       errorColor: "#F21C0E",
     },
   },
+
+  infoBlock: {
+    background: "#F8F9F9",
+    headerColor: "#333",
+    descriptionColor: "#555F65",
+  },
 };
 
 export default Base;

packages/components/themes/dark.js

@@ -3124,6 +3124,12 @@ const Dark = {
       errorColor: "#F21C0E",
     },
   },
+
+  infoBlock: {
+    background: "#282828",
+    headerColor: "#FFF",
+    descriptionColor: "#ADADAD",
+  },
 };
 
 export default Dark;