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 CatalogSpamIcon from "PUBLIC_DIR/images/catalog.spam.react.svg";
|
||||
|
||||
const StyledBadgesContainer = styled.div`
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const StyledPaidBadge = styled(Badge)`
|
||||
margin-right: 8px;
|
||||
`;
|
||||
@ -26,9 +34,10 @@ const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
|
||||
|
||||
const Badges = ({ statusType, isPaid = true }) => {
|
||||
return (
|
||||
<>
|
||||
<StyledBadgesContainer className="badges additional-badges">
|
||||
{isPaid && (
|
||||
<StyledPaidBadge
|
||||
className="paid-badge"
|
||||
label={"Paid"}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor={"#EDC409"}
|
||||
@ -40,7 +49,7 @@ const Badges = ({ statusType, isPaid = true }) => {
|
||||
)}
|
||||
{statusType === "pending" && <StyledSendClockIcon size="small" />}
|
||||
{statusType === "disabled" && <StyledCatalogSpamIcon size="small" />}
|
||||
</>
|
||||
</StyledBadgesContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,11 +1,37 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import { isTablet } from "react-device-detect";
|
||||
|
||||
import RowContent from "@docspace/components/row-content";
|
||||
import Link from "@docspace/components/link";
|
||||
|
||||
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 = ({
|
||||
item,
|
||||
sectionWidth,
|
||||
@ -26,7 +52,7 @@ const UserContent = ({
|
||||
: theme.peopleTableRow.sideInfoColor;
|
||||
|
||||
return (
|
||||
<RowContent
|
||||
<StyledRowContent
|
||||
sideColor={sideInfoColor}
|
||||
sectionWidth={sectionWidth}
|
||||
nameColor={nameColor}
|
||||
@ -45,7 +71,9 @@ const UserContent = ({
|
||||
>
|
||||
{displayName}
|
||||
</Link>
|
||||
|
||||
<Badges statusType={statusType} />
|
||||
|
||||
<Link
|
||||
containerMinWidth="140px"
|
||||
containerWidth="17%"
|
||||
@ -70,7 +98,7 @@ const UserContent = ({
|
||||
>
|
||||
{email}
|
||||
</Link>
|
||||
</RowContent>
|
||||
</StyledRowContent>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user