dark theme was added / styles were corrected

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookInfo.js

@@ -1,29 +1,58 @@
 import React from "react";
 import styled from "styled-components";
-import { InfoText } from "../styled-components";
+import { inject, observer } from "mobx-react";
+
+import { Base } from "@docspace/components/themes";
 
 import Link from "@docspace/components/link";
+import Text from "@docspace/components/text";
 
 import { useTranslation } from "react-i18next";
 
 const InfoWrapper = styled.div`
-  margin-bottom: 27px;
+  margin-bottom: 25px;
 `;
 
-export const WebhookInfo = () => {
+const InfoText = styled(Text)`
+  max-width: 660px;
+  white-space: break-spaces;
+  margin: 0 0 8px 0;
+
+  color: ${(props) => (props.theme.isBase ? "#657077" : "rgba(255, 255, 255, 0.6)")};
+  &:hover {
+    color: ${(props) => (props.theme.isBase ? "#657077" : "rgba(255, 255, 255, 0.6)")};
+  }
+`;
+
+InfoText.defaultProps = { theme: Base };
+
+const StyledGuideLink = styled(Link)`
+  color: ${(props) => (props.theme.isBase ? "#316DAA" : "#4781D1")};
+  &:hover {
+    color: ${(props) => (props.theme.isBase ? "#316DAA" : "#4781D1")};
+  }
+`;
+
+StyledGuideLink.defaultProps = { theme: Base };
+
+const WebhookInfo = (props) => {
   const { t } = useTranslation(["Webhooks"]);
+  const { webhooksGuideUrl } = props;
 
   return (
     <InfoWrapper>
-      <InfoText>{t("WebhooksInfo")}</InfoText>
-      <Link
-        fontWeight={600}
-        color="#316DAA"
-        isHovered
-        type="page"
-        href="https://api.onlyoffice.com/portals/basic">
+      <InfoText as="p">{t("WebhooksInfo")}</InfoText>
+      <StyledGuideLink fontWeight={600} isHovered type="page" href={webhooksGuideUrl}>
         {t("WebhooksGuide")}
-      </Link>
+      </StyledGuideLink>
     </InfoWrapper>
   );
 };
+
+export default inject(({ settingsStore }) => {
+  const { webhooksGuideUrl } = settingsStore;
+
+  return {
+    webhooksGuideUrl,
+  };
+})(observer(WebhookInfo));