From 83c01cb80f2f4554e9d66d608ac2dd7fca5023a3 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Wed, 7 Aug 2024 17:02:49 +0300
Subject: [PATCH] Web: Files: PublicRoom: Added background image for
 RoomPassword dialog

---
 .../PublicRoom/sub-components/RoomPassword.js | 130 +++++++++---------
 .../PublicRoom/sub-components/RoomStyles.js   |  25 +++-
 2 files changed, 85 insertions(+), 70 deletions(-)

diff --git a/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js b/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js
index b74f86f907..539179e565 100644
--- a/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js
+++ b/packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js
@@ -116,74 +116,76 @@ const RoomPassword = (props) => {
 
   return (
     <StyledPage>
-      <StyledContent className="public-room-content">
-        <StyledBody>
-          <PortalLogo className="portal-logo" />
+      <div className="public-room-page">
+        <StyledContent className="public-room-content">
+          <StyledBody>
+            <PortalLogo className="portal-logo" />
 
-          <FormWrapper>
-            <div className="password-form">
-              <Text fontSize="16px" fontWeight="600">
-                {t("UploadPanel:EnterPassword")}
-              </Text>
-
-              <Text
-                fontSize="13px"
-                fontWeight="400"
-                className="public-room-text"
-              >
-                {t("Common:NeedPassword")}:
-              </Text>
-              <div className="public-room-name">
-                <PublicRoomIcon className="public-room-icon" />
-                <Text
-                  className="public-room-text"
-                  fontSize="15px"
-                  fontWeight="600"
-                >
-                  {roomTitle}
+            <FormWrapper>
+              <div className="password-form">
+                <Text fontSize="16px" fontWeight="600">
+                  {t("UploadPanel:EnterPassword")}
                 </Text>
+
+                <Text
+                  fontSize="13px"
+                  fontWeight="400"
+                  className="public-room-text"
+                >
+                  {t("Common:NeedPassword")}:
+                </Text>
+                <div className="public-room-name">
+                  <PublicRoomIcon className="public-room-icon" />
+                  <Text
+                    className="public-room-text"
+                    fontSize="15px"
+                    fontWeight="600"
+                  >
+                    {roomTitle}
+                  </Text>
+                </div>
+
+                <FieldContainer
+                  isVertical={true}
+                  labelVisible={false}
+                  hasError={!!errorMessage}
+                  errorMessage={errorMessage}
+                >
+                  <PasswordInput
+                    simpleView
+                    id="password"
+                    inputName="password"
+                    placeholder={t("Common:Password")}
+                    type="password"
+                    inputValue={password}
+                    hasError={!!errorMessage}
+                    size="large"
+                    scale
+                    tabIndex={1}
+                    autoComplete="current-password"
+                    onChange={onChangePassword}
+                    onKeyDown={onKeyPress}
+                    isDisabled={isLoading}
+                    isDisableTooltip
+                    forwardedRef={inputRef}
+                    isAutoFocussed
+                  />
+                </FieldContainer>
               </div>
 
-              <FieldContainer
-                isVertical={true}
-                labelVisible={false}
-                hasError={!!errorMessage}
-                errorMessage={errorMessage}
-              >
-                <PasswordInput
-                  simpleView
-                  id="password"
-                  inputName="password"
-                  placeholder={t("Common:Password")}
-                  type="password"
-                  inputValue={password}
-                  hasError={!!errorMessage}
-                  size="large"
-                  scale
-                  tabIndex={1}
-                  autoComplete="current-password"
-                  onChange={onChangePassword}
-                  onKeyDown={onKeyPress}
-                  isDisabled={isLoading}
-                  isDisableTooltip
-                  forwardedRef={inputRef}
-                  isAutoFocussed
-                />
-              </FieldContainer>
-            </div>
-
-            <Button
-              primary
-              size="medium"
-              scale
-              label={t("Common:ContinueButton")}
-              tabIndex={5}
-              onClick={onSubmit}
-              isDisabled={isLoading}
-            />
-          </FormWrapper>
-        </StyledBody>
-      </StyledContent>
+              <Button
+                primary
+                size="medium"
+                scale
+                label={t("Common:ContinueButton")}
+                tabIndex={5}
+                onClick={onSubmit}
+                isDisabled={isLoading}
+              />
+            </FormWrapper>
+          </StyledBody>
+        </StyledContent>
+      </div>
     </StyledPage>
   );
 };
diff --git a/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js b/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js
index c63e7eb4b3..37f7150b39 100644
--- a/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js
+++ b/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js
@@ -26,20 +26,32 @@
 
 import styled, { css } from "styled-components";
 import { mobile, tablet } from "@docspace/shared/utils";
+import BackgroundPatternReactSvgUrl from "PUBLIC_DIR/images/background.pattern.react.svg?url";
 
 export const StyledPage = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 960px;
-  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  background-image: url("${BackgroundPatternReactSvgUrl}");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+
+  .public-room-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    max-width: 960px;
+    box-sizing: border-box;
+  }
 
   @media ${tablet} {
     padding: 0 16px;
   }
 
   @media ${mobile} {
+    background-image: none;
     ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
@@ -64,6 +76,7 @@ export const StyledPage = styled.div`
   }
 
   .public-room-content {
+    width: 100%;
     padding-top: 9%;
     justify-content: unset;
     min-height: unset;