From 7a23becdec57715fdbd64f01409e1247488c17a8 Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Wed, 18 Aug 2021 08:27:53 +0100
Subject: [PATCH] feat(SceneSlate): use new private indicator

---
 common/svg.js                                 | 19 -------------
 .../core/CollectionPreviewBlock/index.js      |  7 ++---
 scenes/SceneSlate.js                          | 27 ++++++++++---------
 3 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/common/svg.js b/common/svg.js
index 6e1d7802..0985f628 100644
--- a/common/svg.js
+++ b/common/svg.js
@@ -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
diff --git a/components/core/CollectionPreviewBlock/index.js b/components/core/CollectionPreviewBlock/index.js
index f614f147..525c0fb0 100644
--- a/components/core/CollectionPreviewBlock/index.js
+++ b/components/core/CollectionPreviewBlock/index.js
@@ -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>
diff --git a/scenes/SceneSlate.js b/scenes/SceneSlate.js
index 1f4325ee..55d35c20 100644
--- a/scenes/SceneSlate.js
+++ b/scenes/SceneSlate.js
@@ -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>}