Client:OAuth2: add theme support

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 import { mobile } from "@docspace/components/utils/device";
+import { Base } from "@docspace/components/themes";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -93,15 +94,17 @@ const StyledInputGroup = styled.div`
     }
 
     p {
-      color: #a3a9ae;
+      color: ${(props) => props.theme.oauth.clientForm.descriptionColor};
     }
   }
 
   .description {
-    color: #a3a9ae;
+    color: ${(props) => props.theme.oauth.clientForm.descriptionColor};
   }
 `;
 
+StyledInputGroup.defaultProps = { theme: Base };
+
 const StyledInputRow = styled.div`
   width: 100%;
 
@@ -141,7 +144,7 @@ const StyledScopesContainer = styled.div`
     padding-right: 24px;
     margin-right: -12px;
 
-    border-bottom: 1px solid #474747;
+    border-bottom: ${(props) => props.theme.oauth.clientForm.headerBorder};
   }
 
   .header-last {
@@ -154,6 +157,8 @@ const StyledScopesContainer = styled.div`
   }
 `;
 
+StyledScopesContainer.defaultProps = { theme: Base };
+
 const StyledScopesName = styled.div`
   display: flex;
 
@@ -164,10 +169,12 @@ const StyledScopesName = styled.div`
   }
 
   .scope-desc {
-    color: #858585;
+    color: ${(props) => props.theme.oauth.clientForm.scopeDesc};
   }
 `;
 
+StyledScopesName.defaultProps = { theme: Base };
+
 const StyledScopesCheckbox = styled.div`
   width: 100%;
   height: 100%;

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/InfoDialog.tsx

@@ -18,6 +18,7 @@ import ContextMenuButton from "@docspace/components/context-menu-button";
 import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
 import Avatar from "@docspace/components/avatar";
 import Link from "@docspace/components/link";
+import { Base } from "@docspace/components/themes";
 
 const StyledContainer = styled.div<{
   showDescription: boolean;
@@ -75,14 +76,14 @@ const StyledContainer = styled.div<{
   }
 
   .desc-link {
-    color: #adadad;
+    color: ${(props) => props.theme.oauth.infoDialog.descLinkColor};
   }
 
   .block-header {
     margin-top: 20px;
     margin-bottom: 12px;
 
-    color: #858585;
+    color: ${(props) => props.theme.oauth.infoDialog.blockHeaderColor};
   }
 
   .creator-block {
@@ -108,11 +109,13 @@ const StyledContainer = styled.div<{
 
       margin: 0 8px;
 
-      background: #ffffff;
+      background: ${(props) => props.theme.oauth.infoDialog.separatorColor};
     }
   }
 `;
 
+StyledContainer.defaultProps = { theme: Base };
+
 interface InfoDialogProps {
   visible: boolean;
   scopeList?: IScope[];

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts

@@ -40,7 +40,7 @@ const StyledTableRow = styled(TableRow)`
   }
 
   .description-text {
-    color: #858585;
+    color: ${(props) => props.theme.oauth.list.descriptionColor};
   }
 
   .toggleButton {

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx

@@ -19,6 +19,7 @@ import OnlyofficeDark from "PUBLIC_DIR/images/onlyoffice.dark.react.svg";
 //@ts-ignore
 import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
 import Button from "@docspace/components/button";
+import { Base } from "@docspace/components/themes";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -37,7 +38,7 @@ const StyledPreviewContainer = styled.div`
 
   box-sizing: border-box;
 
-  border: 1px solid #242424;
+  border: ${(props) => props.theme.oauth.previewDialog.border};
 
   border-radius: 6px;
 
@@ -62,6 +63,8 @@ const StyledPreviewContainer = styled.div`
   }
 `;
 
+StyledPreviewContainer.defaultProps = { theme: Base };
+
 const StyledBlocksContainer = styled.div`
   width: 100%;
   height: auto;

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/RegisterNewButton.types.ts

@@ -2,5 +2,5 @@ import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
 
 export interface RegisterNewButtonProps {
   t: any;
-  currentDeviceType: DeviceUnionType;
+  currentDeviceType?: DeviceUnionType;
 }

packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/TableView.styled.ts

@@ -40,7 +40,7 @@ const StyledTableRow = styled(TableRow)`
   }
 
   .description-text {
-    color: #858585;
+    color: ${(props) => props.theme.oauth.list.descriptionColor};
   }
 
   .toggleButton {

packages/components/themes/base.js

@@ -3175,6 +3175,25 @@ const Base = {
     borderColor: "#D0D5DA",
     pluginName: "#5C5C5C",
   },
+
+  oauth: {
+    previewDialog: {
+      border: "1px solid #eceef1",
+    },
+    infoDialog: {
+      descLinkColor: "#657077",
+      blockHeaderColor: "#a3a9ae",
+      separatorColor: "#333333",
+    },
+    list: {
+      descriptionColor: "#a3a9ae",
+    },
+    clientForm: {
+      descriptionColor: "#a3a9ae",
+      headerBorder: "1px solid #d0d5da",
+      scopeDesc: "#a3a9ae",
+    },
+  },
 };
 
 export default Base;

packages/components/themes/dark.js

@@ -3177,6 +3177,25 @@ const Dark = {
     borderColor: "#474747",
     pluginName: "#A3A9AE",
   },
+
+  oauth: {
+    previewDialog: {
+      border: "1px solid #242424",
+    },
+    infoDialog: {
+      descLinkColor: "#adadad",
+      blockHeaderColor: "#858585",
+      separatorColor: "#ffffff",
+    },
+    list: {
+      descriptionColor: "#858585",
+    },
+    clientForm: {
+      descriptionColor: "#858585",
+      headerBorder: "1px solid #474747",
+      scopeDesc: "#858585",
+    },
+  },
 };
 
 export default Dark;