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

styles for webhooks history and webhook details pages were fixed

Browse Source
This commit is contained in:
Vladimir Khvan 2023-10-05 23:57:08 +05:00
parent 77949b5cb1
commit 4ddae7d546
3 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsNavigationHeader.js
View File

@ -13,7 +13,7 @@ import RetryIcon from "PUBLIC_DIR/images/refresh.react.svg?url";
import Headline from "@docspace/common/components/Headline"; import Headline from "@docspace/common/components/Headline";
import IconButton from "@docspace/components/icon-button"; import IconButton from "@docspace/components/icon-button";
import { tablet } from "@docspace/components/utils/device"; import { tablet, hugeMobile } from "@docspace/components/utils/device";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
@ -39,14 +39,21 @@ const HeaderContainer = styled.div`
} }
svg { svg {
${({ theme }) => ${({ theme }) => theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
} }
} }
.headline { .headline {
font-size: 18px; font-size: 18px;
margin-inline-end: 16px; margin-inline-end: 16px;
@media ${tablet} {
font-size: 21px;
}
@media ${hugeMobile} {
font-size: 18px;
}
} }
`; `;

12
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
View File

@ -19,15 +19,9 @@ const ListHeader = styled.header`
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
${() =>
isMobile &&
css`
margin-top: 9px;
`}
${() => ${() =>
isMobileOnly && isMobileOnly &&
css` css`
margin-top: 35px;
padding-inline-end: 8px; padding-inline-end: 8px;
`} `}
`; `;
@ -54,8 +48,7 @@ const FilterButton = styled.div`
z-index: ${(props) => (props.isGroupMenuVisible ? 199 : 201)}; z-index: ${(props) => (props.isGroupMenuVisible ? 199 : 201)};
border: 1px solid; border: 1px solid;
border-color: ${(props) => border-color: ${(props) => (props.theme.isBase ? "#d0d5da" : "rgb(71, 71, 71)")};
props.theme.isBase ? "#d0d5da" : "rgb(71, 71, 71)"};
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
@ -111,8 +104,7 @@ const HistoryFilterHeader = (props) => {
<FilterButton <FilterButton
id="filter-button" id="filter-button"
onClick={openFiltersModal} onClick={openFiltersModal}
isGroupMenuVisible={isGroupMenuVisible} isGroupMenuVisible={isGroupMenuVisible}>
>
<IconButton iconName={FilterReactSvrUrl} size={16} /> <IconButton iconName={FilterReactSvrUrl} size={16} />
<span hidden={historyFilters === null}></span> <span hidden={historyFilters === null}></span>
</FilterButton> </FilterButton>

21
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
View File

@ -10,7 +10,7 @@ import Headline from "@docspace/common/components/Headline";
import IconButton from "@docspace/components/icon-button"; import IconButton from "@docspace/components/icon-button";
// import { Hint } from "../../styled-components"; // import { Hint } from "../../styled-components";
import { tablet } from "@docspace/components/utils/device"; import { tablet, hugeMobile } from "@docspace/components/utils/device";
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu"; import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
import { isMobile, isMobileOnly } from "react-device-detect"; import { isMobile, isMobileOnly } from "react-device-detect";
@ -30,7 +30,7 @@ const HeaderContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
min-height: 70px; min-height: 53px;
flex-wrap: wrap; flex-wrap: wrap;
${() => ${() =>
@ -65,14 +65,20 @@ const HeaderContainer = styled.div`
`} `}
svg { svg {
${({ theme }) => ${({ theme }) => theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
} }
} }
.headline { .headline {
font-size: 18px; font-size: 18px;
margin-inline-end: 16px; margin-inline-end: 16px;
@media ${tablet} {
font-size: 21px;
}
@media ${hugeMobile} {
font-size: 18px;
}
} }
.table-container_group-menu { .table-container_group-menu {
@ -107,7 +113,7 @@ const HeaderContainer = styled.div`
css` css`
position: absolute; position: absolute;
height: 48px; height: 48px;
margin-block: -35px 0; margin-block: -17px 0;
margin-inline: -17px 0; margin-inline: -17px 0;
width: calc(100% + 32px); width: calc(100% + 32px);
`} `}
@ -161,7 +167,7 @@ const HistoryHeader = (props) => {
}); });
toastr.success( toastr.success(
`${t("WebhookRedilivered")}: ${checkedEventIds.length}`, `${t("WebhookRedilivered")}: ${checkedEventIds.length}`,
<b>{t("Common:Done")}</b> <b>{t("Common:Done")}</b>,
); );
} catch (error) { } catch (error) {
console.log(error); console.log(error);
@ -181,8 +187,7 @@ const HistoryHeader = (props) => {
}, },
]; ];
const onKeyPress = (e) => const onKeyPress = (e) => (e.key === "Esc" || e.key === "Escape") && emptyCheckedIds();
(e.key === "Esc" || e.key === "Escape") && emptyCheckedIds();
useEffect(() => { useEffect(() => {
window.addEventListener("keyup", onKeyPress); window.addEventListener("keyup", onKeyPress);