Added watermark to text component.

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

@@ -5,7 +5,8 @@ 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 WMReactSvgUrl from "PUBLIC_DIR/images/WM.react.svg?url";
+import Watermark from "@docspace/common/components/Watermarks";
 import { StyledWatermark } from "./StyledComponent";
 
 const options = (t) => [
@@ -32,7 +33,7 @@ const TextWatermark = () => {
   const onCheckboxChange = () => {
     setIsChecked(!isChecked);
   };
-
+  const isHorizontal = selectedOption.key === "horizontal";
   return (
     <StyledWatermark>
       <div>
@@ -59,9 +60,12 @@ const TextWatermark = () => {
           isChecked={isChecked}
         />
       </div>
-      <div
-        style={{ width: "100px", height: "140px", backgroundColor: "red" }}
-      ></div>
+      <Watermark
+        text={value}
+        image={WMReactSvgUrl}
+        rotate={isHorizontal ? 0 : -45}
+        isSemitransparent={isChecked}
+      />
     </StyledWatermark>
   );
 };

public/images/WM.react.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="140" viewBox="0 0 100 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87 13.5H99.5V139.5H0.5V0.5H86.5V13V13.5H87Z" fill="white" stroke="#D0D5DA"/>
+<path d="M87 0L100 13H87V0Z" fill="#F3F4F4"/>
+</svg>