diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
index e764bd2a86..114a792640 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
@@ -9,7 +9,6 @@ import Label from "@docspace/components/label";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
import ComboBox from "@docspace/components/combobox";
-import Heading from "@docspace/components/heading";
import TabContainer from "@docspace/components/tabs-container";
import SelectFolderInput from "client/SelectFolderInput";
import { tablet } from "@docspace/components/utils/device";
@@ -19,6 +18,7 @@ import { isMobileOnly } from "react-device-detect";
import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
import Loaders from "@docspace/common/components/Loaders";
import HelpButton from "@docspace/components/help-button";
+import Link from "@docspace/components/link";
const Controls = styled(Box)`
min-width: 350px;
@@ -32,11 +32,22 @@ const Controls = styled(Box)`
}
`;
-const CategoryHeader = styled(Heading)`
- margin-block-start: 0px;
- margin-block-end: 0px;
+const CategoryHeader = styled.div`
+ margin-top: 40px;
+ margin-bottom: 24px;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 22px;
+`;
- margin-top: 24px;
+const CategorySubHeader = styled.div`
+ margin-top: 8px;
+ margin-bottom: 8px;
+ font-size: 15px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 16px;
`;
const CategoryDescription = styled(Box)`
@@ -98,14 +109,12 @@ const ColumnContainer = styled(Box)`
const Preview = styled(Box)`
margin-top: 24px;
-
min-width: 660px;
-
flex-direction: row;
`;
const PortalIntegration = (props) => {
- const { t, setDocumentTitle } = props;
+ const { t, setDocumentTitle, currentColorScheme, sdkLink } = props;
setDocumentTitle(t("JavascriptSdk"));
@@ -309,9 +318,7 @@ const PortalIntegration = (props) => {
const code = (
<>
-
- {t("CopyWindowCode")}
-
+ {t("CopyWindowCode")}
>
);
@@ -335,15 +342,24 @@ const PortalIntegration = (props) => {
) : (
<>
- {t("SDKDescription")}
+
+ {t("SDKDescription")}
+ window.open(sdkLink, "_blank")}
+ >
+ {t("APILink")}.
+
+
+ {t("CreateSampleHeader")}
-
- {t("CustomizingDisplay")}
-
+ {t("CustomizingDisplay")}
@@ -393,9 +409,7 @@ const PortalIntegration = (props) => {
value={config.frameId}
/>
-
- {t("InterfaceElements")}
-
+ {t("InterfaceElements")}
{
/>
{`(${t("MobileOnly")})`}
- {t("DataDisplay")}
+ {t("DataDisplay")}
{
filteredType="exceptSortedByTags"
/>
-
- {t("AdvancedDisplay")}
-
+ {t("AdvancedDisplay")}
@@ -526,11 +538,13 @@ const PortalIntegration = (props) => {
export default inject(({ setup, auth }) => {
const { settingsStore, setDocumentTitle } = auth;
- const { theme } = settingsStore;
+ const { theme, currentColorScheme, sdkLink } = settingsStore;
return {
theme,
setDocumentTitle,
+ currentColorScheme,
+ sdkLink,
};
})(
withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common"])(