Web:InvitePanel:Infobar: Fixed info bar theme

packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js

@@ -8,7 +8,7 @@ import Text from "@docspace/components/text";
 
 const StyledInfoBar = styled.div`
   display: flex;
-  background-color: #f8f9f9;
+  background-color: ${(props) => props.theme.infoBar.background};
   color: #333;
   font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
   padding: 12px 16px;
@@ -33,9 +33,13 @@ const StyledInfoBar = styled.div`
         }
       }
     }
+
+    &__title {
+      color: ${(props) => props.theme.infoBar.title};
+    }
   }
   .body-container {
-    color: #555f65;
+    color: ${(props) => props.theme.infoBar.description};
     font-weight: 400;
   }
   .close-icon {
@@ -44,8 +48,8 @@ const StyledInfoBar = styled.div`
       fill: ${({ theme }) => theme.iconButton.color};
     }
     svg {
-      weight: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
     }
   }
 `;
@@ -60,7 +64,7 @@ const InfoBar = (props) => {
           <div className="header-icon">
             <ReactSVG src={InfoIcon} />
           </div>
-          <Text fontSize="12px" fontWeight={600}>
+          <Text className="header-body__title" fontSize="12px" fontWeight={600}>
             {t("Common:Info")}
           </Text>
         </div>

packages/components/themes/base.js

@@ -3178,6 +3178,12 @@ const Base = {
     descriptionColor: "#555F65",
   },
 
+  infoBar: {
+    background: "#f8f9f9",
+    title: black,
+    description: cyanBlueDarkShade,
+  },
+
   roomIcon: {
     backgroundArchive: "#A3A9AE",
     opacityBackground: "1",

packages/components/themes/dark.js

@@ -3179,6 +3179,12 @@ const Dark = {
     descriptionColor: "#ADADAD",
   },
 
+  infoBar: {
+    background: "#282828",
+    title: white,
+    description: "#ADADAD",
+  },
+
   roomIcon: {
     backgroundArchive: "#FFFFFF",
     opacityBackground: "0.1",