fix rtl styles

This commit is contained in:
Elyor Djalilov 2024-02-02 14:32:05 +05:00
parent b63c7bc952
commit a256c9743b
3 changed files with 35 additions and 7 deletions

View File

@ -1,4 +1,4 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
import { Box } from "@docspace/shared/components/box";
import { Text } from "@docspace/shared/components/text";
@ -20,11 +20,25 @@ const StyledLastSessionBlock = styled.div`
align-items: center;
.session-info-left-container {
margin-right: 24px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 24px;
`
: css`
margin-right: 24px;
`}
p {
padding-left: 0px;
padding: 8px;
font-size: 13px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 0px;
`
: css`
padding-left: 0px;
`}
}
}

View File

@ -3,7 +3,7 @@ import { Box } from "@docspace/shared/components/box";
import { Text } from "@docspace/shared/components/text";
import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
import { Base } from "@docspace/shared/themes";
import styled from "styled-components";
import styled, { css } from "styled-components";
import LogoutReactSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
@ -34,7 +34,14 @@ const StyledUserInfoBlock = styled.div`
}
.avatar {
margin-right: 16px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 16px;
`
: css`
margin-right: 16px;
`}
}
`;

View File

@ -1,7 +1,7 @@
import { useRef } from "react";
import { withTranslation } from "react-i18next";
import { observer, inject } from "mobx-react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import { Backdrop } from "@docspace/shared/components/backdrop";
import { Aside } from "@docspace/shared/components/aside";
@ -15,7 +15,14 @@ import UserInfoBlock from "./UserInfoBlock";
const StyledSessionsPanel = styled.div`
.user-sessions-panel {
.scroll-body {
padding-right: 0px !important;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px !important;
`
: css`
padding-right: 0px !important;
`}
}
}
`;