IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Files: PublicRoom: Added background image for RoomPassword dialog

Browse Source
This commit is contained in:
Nikita Gopienko 2024-08-07 17:02:49 +03:00
parent 46bfdde9fc
commit 83c01cb80f
2 changed files with 85 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
packages/client/src/pages/PublicRoom/sub-components/RoomPassword.js
View File

@ -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>
);
};

25
packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js
View File

@ -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;