Web:Client:Accounts: update position for badges on row view
This commit is contained in:
parent
9c220ab77b
commit
12f59e8e35
@ -7,6 +7,14 @@ import commonIconsStyles from "@docspace/components/utils/common-icons-style";
|
|||||||
import SendClockIcon from "PUBLIC_DIR/images/send.clock.react.svg";
|
import SendClockIcon from "PUBLIC_DIR/images/send.clock.react.svg";
|
||||||
import CatalogSpamIcon from "PUBLIC_DIR/images/catalog.spam.react.svg";
|
import CatalogSpamIcon from "PUBLIC_DIR/images/catalog.spam.react.svg";
|
||||||
|
|
||||||
|
const StyledBadgesContainer = styled.div`
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
const StyledPaidBadge = styled(Badge)`
|
const StyledPaidBadge = styled(Badge)`
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
`;
|
`;
|
||||||
@ -26,9 +34,10 @@ const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
|
|||||||
|
|
||||||
const Badges = ({ statusType, isPaid = true }) => {
|
const Badges = ({ statusType, isPaid = true }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<StyledBadgesContainer className="badges additional-badges">
|
||||||
{isPaid && (
|
{isPaid && (
|
||||||
<StyledPaidBadge
|
<StyledPaidBadge
|
||||||
|
className="paid-badge"
|
||||||
label={"Paid"}
|
label={"Paid"}
|
||||||
color={"#FFFFFF"}
|
color={"#FFFFFF"}
|
||||||
backgroundColor={"#EDC409"}
|
backgroundColor={"#EDC409"}
|
||||||
@ -40,7 +49,7 @@ const Badges = ({ statusType, isPaid = true }) => {
|
|||||||
)}
|
)}
|
||||||
{statusType === "pending" && <StyledSendClockIcon size="small" />}
|
{statusType === "pending" && <StyledSendClockIcon size="small" />}
|
||||||
{statusType === "disabled" && <StyledCatalogSpamIcon size="small" />}
|
{statusType === "disabled" && <StyledCatalogSpamIcon size="small" />}
|
||||||
</>
|
</StyledBadgesContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,11 +1,37 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import styled, { css } from "styled-components";
|
||||||
import { withRouter } from "react-router";
|
import { withRouter } from "react-router";
|
||||||
|
import { isTablet } from "react-device-detect";
|
||||||
|
|
||||||
import RowContent from "@docspace/components/row-content";
|
import RowContent from "@docspace/components/row-content";
|
||||||
import Link from "@docspace/components/link";
|
import Link from "@docspace/components/link";
|
||||||
|
|
||||||
import Badges from "../Badges";
|
import Badges from "../Badges";
|
||||||
|
|
||||||
|
const StyledRowContent = styled(RowContent)`
|
||||||
|
${(props) =>
|
||||||
|
((props.sectionWidth <= 1024 && props.sectionWidth > 500) || isTablet) &&
|
||||||
|
css`
|
||||||
|
.row-main-container-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 9px;
|
||||||
|
margin-right: 12px;
|
||||||
|
|
||||||
|
.paid-badge {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
const UserContent = ({
|
const UserContent = ({
|
||||||
item,
|
item,
|
||||||
sectionWidth,
|
sectionWidth,
|
||||||
@ -26,7 +52,7 @@ const UserContent = ({
|
|||||||
: theme.peopleTableRow.sideInfoColor;
|
: theme.peopleTableRow.sideInfoColor;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RowContent
|
<StyledRowContent
|
||||||
sideColor={sideInfoColor}
|
sideColor={sideInfoColor}
|
||||||
sectionWidth={sectionWidth}
|
sectionWidth={sectionWidth}
|
||||||
nameColor={nameColor}
|
nameColor={nameColor}
|
||||||
@ -45,7 +71,9 @@ const UserContent = ({
|
|||||||
>
|
>
|
||||||
{displayName}
|
{displayName}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Badges statusType={statusType} />
|
<Badges statusType={statusType} />
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
containerMinWidth="140px"
|
containerMinWidth="140px"
|
||||||
containerWidth="17%"
|
containerWidth="17%"
|
||||||
@ -70,7 +98,7 @@ const UserContent = ({
|
|||||||
>
|
>
|
||||||
{email}
|
{email}
|
||||||
</Link>
|
</Link>
|
||||||
</RowContent>
|
</StyledRowContent>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user