feat(SceneSlate): use new private indicator

This commit is contained in:
Aminejv 2021-08-18 08:27:53 +01:00
parent 4152d9f7ac
commit 7a23becdec
3 changed files with 18 additions and 35 deletions

View File

@ -1988,25 +1988,6 @@ export const Box = (props) => (
</svg>
);
export const Lock = (props) => (
<svg width={8} height={8} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M6.333 3.667H1.667A.667.667 0 001 4.333v2.334c0 .368.298.666.667.666h4.666A.667.667 0 007 6.667V4.333a.667.667 0 00-.667-.666z"
stroke="#C7CACC"
strokeWidth={1.25}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.333 3.667V2.333a1.667 1.667 0 013.334 0v1.334"
stroke="#C7CACC"
strokeWidth={1.25}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
export const Share = (props) => (
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path

View File

@ -82,10 +82,11 @@ const STYLES_TEXT_GRAY = (theme) => css`
color: ${theme.semantic.textGray};
`;
const LOCK_WRAPPER = (theme) => css`
const STYLES_SECURITY_LOCK_WRAPPER = (theme) => css`
background-color: ${theme.semantic.bgDark};
border-radius: 4px;
padding: 4px;
color: ${theme.semantic.textGrayLight};
`;
export default function CollectionPreview({ collection, viewer, owner, onAction }) {
@ -177,8 +178,8 @@ export default function CollectionPreview({ collection, viewer, owner, onAction
{title}
</H5>
{!isPublic && (
<div css={LOCK_WRAPPER} style={{ marginLeft: 8 }}>
<SVG.Lock style={{ display: "block" }} />
<div css={STYLES_SECURITY_LOCK_WRAPPER} style={{ marginLeft: 8 }}>
<SVG.SecurityLock height={8} style={{ display: "block" }} />
</div>
)}
</div>

View File

@ -8,6 +8,7 @@ import * as Strings from "~/common/strings";
import * as Utilities from "~/common/utilities";
import * as UserBehaviors from "~/common/user-behaviors";
import * as Events from "~/common/custom-events";
import * as Styles from "~/common/styles";
import { Link } from "~/components/core/Link";
import { LoaderSpinner } from "~/components/system/components/Loaders";
@ -58,6 +59,13 @@ const STYLES_MOBILE_ONLY = css`
}
`;
const STYLES_SECURITY_LOCK_WRAPPER = (theme) => css`
background-color: ${theme.semantic.bgDark};
border-radius: 4px;
padding: 8px;
color: ${theme.semantic.textGrayLight};
`;
export default class SceneSlate extends React.Component {
state = {
loading: true,
@ -450,23 +458,16 @@ class SlatePage extends React.Component {
</span>{" "}
</Link>
/ {data.name}
{isOwner && !isPublic && (
<SVG.SecurityLock
height="24px"
style={{ marginLeft: 16, color: Constants.system.grayLight2 }}
/>
)}
</span>
) : (
<span>
{data.name}
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<span>{data.name}</span>
{isOwner && !isPublic && (
<SVG.SecurityLock
height="24px"
style={{ marginLeft: 16, color: Constants.system.grayLight2 }}
/>
<div css={STYLES_SECURITY_LOCK_WRAPPER} style={{ marginLeft: 16 }}>
<SVG.SecurityLock height="16px" style={{ display: "block" }} />
</div>
)}
</span>
</div>
)
}
actions={<span css={STYLES_MOBILE_HIDDEN}>{actions}</span>}