Web: Watermarks: Added Checkbox.

packages/client/public/locales/en/CreateEditRoomDialog.json

@@ -23,6 +23,7 @@
   "ReviewRoomTitle": "Review room",
   "RoomEditing": "Room editing",
   "RootLabel": "Root",
+  "Semitransparent": "Semitransparent",
   "TagsPlaceholder": "Add a tag",
   "Text": "Text",
   "ThirdPartyStorageComboBoxPlaceholder": "Select storage",

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js

@@ -9,6 +9,9 @@ const StyledWatermark = styled.div`
   .watermark-title {
     margin: 16px 0 4px 0;
   }
+  .watermark-checkbox {
+    margin: 18px 0 0 0;
+  }
 `;
 const StyledBody = styled.div`
   .types-content {

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/Text.js

@@ -4,11 +4,12 @@ import { useTranslation } from "react-i18next";
 import TextInput from "@docspace/components/text-input";
 import ComboBox from "@docspace/components/combobox";
 import Text from "@docspace/components/text";
+import Checkbox from "@docspace/components/checkbox";
 
 import { StyledWatermark } from "./StyledComponent";
 
 const options = (t) => [
-  { key: "diagonal", label: t("Diagonal"), default: true },
+  { key: "diagonal", label: t("Diagonal") },
   { key: "horizontal", label: t("Horizontal") },
 ];
 const TextWatermark = () => {
@@ -17,15 +18,20 @@ const TextWatermark = () => {
   const typesOptions = options(t);
 
   const [value, setValue] = useState("");
+  const [isChecked, setIsChecked] = useState(true);
   const [selectedOption, setSelectedOption] = useState(typesOptions[0]);
 
   const onChange = (e) => {
-    setValue(e.target.value);
+    const { value } = e.target;
+    setValue(value);
   };
 
   const onTypeChange = (item) => {
     setSelectedOption(item);
   };
+  const onCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
 
   return (
     <StyledWatermark>
@@ -45,7 +51,12 @@ const TextWatermark = () => {
           options={typesOptions}
           onSelect={onTypeChange}
           scaled
-          displaySelectedOption
+        />
+        <Checkbox
+          className="watermark-checkbox"
+          label={t("Semitransparent")}
+          onChange={onCheckboxChange}
+          isChecked={isChecked}
         />
       </div>
       <div