From eaf6998130bd79e7d10a09609beda6adf0a4c21f Mon Sep 17 00:00:00 2001
From: Anastasiia Stavitskaya <stavitskaya.anastasiia@gmail.com>
Date: Thu, 25 Jul 2024 10:40:27 -0700
Subject: [PATCH] feat: add lock/unlock icons; rename previous lock to paywall
 (#340)

---
 src/assets/svg/mp_act_lt_lock.svg                      |  3 +++
 src/assets/svg/mp_act_lt_unlock.svg                    |  3 +++
 src/assets/svg/{lock.svg => paywall.svg}               |  0
 src/components/icons/index.ts                          | 10 +++++++---
 .../navigation/GlobalNavigation/NavigationCreate.tsx   |  4 ++--
 src/constants/Icons.ts                                 |  8 ++++++--
 6 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/svg/mp_act_lt_lock.svg
 create mode 100644 src/assets/svg/mp_act_lt_unlock.svg
 rename src/assets/svg/{lock.svg => paywall.svg} (100%)

diff --git a/src/assets/svg/mp_act_lt_lock.svg b/src/assets/svg/mp_act_lt_lock.svg
new file mode 100644
index 000000000..f109a832b
--- /dev/null
+++ b/src/assets/svg/mp_act_lt_lock.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+<path d="M12 6C12 4.34375 13.3438 3 15 3C16.6562 3 18 4.34375 18 6V8.5C18 8.775 18.225 9 18.5 9C18.775 9 19 8.775 19 8.5V6C19 3.79063 17.2094 2 15 2C12.7906 2 11 3.79063 11 6V8H3.5C2.11875 8 1 9.11875 1 10.5V15.5C1 16.8813 2.11875 18 3.5 18H12.5C13.8813 18 15 16.8813 15 15.5V10.5C15 9.11875 13.8813 8 12.5 8H12V6ZM11.5 9H12.5C13.3281 9 14 9.67188 14 10.5V15.5C14 16.3281 13.3281 17 12.5 17H3.5C2.67188 17 2 16.3281 2 15.5V10.5C2 9.67188 2.67188 9 3.5 9H11.5Z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/mp_act_lt_unlock.svg b/src/assets/svg/mp_act_lt_unlock.svg
new file mode 100644
index 000000000..a8e37e883
--- /dev/null
+++ b/src/assets/svg/mp_act_lt_unlock.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+<path d="M7 6V8H13V6C13 4.34375 11.6562 3 10 3C8.34375 3 7 4.34375 7 6ZM6 8V6C6 3.79063 7.79063 2 10 2C12.2094 2 14 3.79063 14 6V8H14.5C15.8813 8 17 9.11875 17 10.5V15.5C17 16.8813 15.8813 18 14.5 18H5.5C4.11875 18 3 16.8813 3 15.5V10.5C3 9.11875 4.11875 8 5.5 8H6ZM4 10.5V15.5C4 16.3281 4.67188 17 5.5 17H14.5C15.3281 17 16 16.3281 16 15.5V10.5C16 9.67188 15.3281 9 14.5 9H5.5C4.67188 9 4 9.67188 4 10.5Z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/lock.svg b/src/assets/svg/paywall.svg
similarity index 100%
rename from src/assets/svg/lock.svg
rename to src/assets/svg/paywall.svg
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 20e38f13d..7c6f69e43 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -27,7 +27,7 @@ import IdentityIcon from 'src/assets/svg/mp_pm_lt_identity.svg?react'
 import JumpToIcon from 'src/assets/svg/mp_act_lt_jump-to.svg?react'
 import LightBulbIcon from 'src/assets/svg/lightbulb.svg?react'
 import LiveStreamIcon from 'src/assets/svg/mp_pm_lt_live-stream.svg?react'
-import LockIcon from 'src/assets/svg/lock.svg?react'
+import PaywallIcon from 'src/assets/svg/paywall.svg?react'
 import MessageQuestionIcon from 'src/assets/svg/message-question.svg?react'
 import MpLogoIcon from 'src/assets/svg/mpLogo.svg?react'
 import ObservabilityIcon from 'src/assets/svg/mp_pm_lt_observability.svg?react'
@@ -55,7 +55,9 @@ import HelpVideoIcon from 'src/assets/svg/mp_info_lt_help-video.svg?react'
 import NextIcon from 'src/assets/svg/mp_act_lt_next.svg?react'
 import OpenTabIcon from 'src/assets/svg/mp_act_lt_open-tab.svg?react'
 import PreviousIcon from 'src/assets/svg/mp_act_lt_previous.svg?react'
-import DirectoryIcon from 'src/assets/svg//mp_pm_lt_directory.svg?react'
+import DirectoryIcon from 'src/assets/svg/mp_pm_lt_directory.svg?react'
+import LockIcon from 'src/assets/svg/mp_act_lt_lock.svg?react'
+import UnlockIcon from 'src/assets/svg/mp_act_lt_unlock.svg?react'
 
 export {
   AddIcon,
@@ -88,7 +90,7 @@ export {
   JumpToIcon,
   LightBulbIcon,
   LiveStreamIcon,
-  LockIcon,
+  PaywallIcon,
   MessageQuestionIcon,
   MpLogoIcon,
   ObservabilityIcon,
@@ -116,4 +118,6 @@ export {
   NextIcon,
   PreviousIcon,
   DirectoryIcon,
+  LockIcon,
+  UnlockIcon,
 }
diff --git a/src/components/navigation/GlobalNavigation/NavigationCreate.tsx b/src/components/navigation/GlobalNavigation/NavigationCreate.tsx
index 94659bb53..52b54fe00 100644
--- a/src/components/navigation/GlobalNavigation/NavigationCreate.tsx
+++ b/src/components/navigation/GlobalNavigation/NavigationCreate.tsx
@@ -59,7 +59,7 @@ export function NavigationCreate(props: INavigationCreateProps) {
             <span className="navigationCreate__itemTitle">
               {item.title}
               {item.isLoading && <Spin className="navigationCreate__itemLoading" size="small" />}
-              {isLocked && <Icon name="lock" size="xs" />}
+              {isLocked && <Icon name="paywall" size="xs" />}
             </span>
 
             <span className="navigationCreate__itemDescription">{item.description}</span>
@@ -93,4 +93,4 @@ export function NavigationCreate(props: INavigationCreateProps) {
       />
     </Center>
   )
-}
\ No newline at end of file
+}
diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts
index 98861be5b..3bc9b54be 100644
--- a/src/constants/Icons.ts
+++ b/src/constants/Icons.ts
@@ -28,7 +28,7 @@ import {
   JumpToIcon,
   LightBulbIcon,
   LiveStreamIcon,
-  LockIcon,
+  PaywallIcon,
   MessageQuestionIcon,
   MpLogoIcon,
   ObservabilityIcon,
@@ -57,6 +57,8 @@ import {
   PreviousIcon,
   OpenTabIcon,
   DirectoryIcon,
+  LockIcon,
+  UnlockIcon,
 } from 'src/components/icons'
 
 export const Icons = {
@@ -88,7 +90,7 @@ export const Icons = {
   jumpTo: JumpToIcon,
   lightBulb: LightBulbIcon,
   liveStream: LiveStreamIcon,
-  lock: LockIcon,
+  paywall: PaywallIcon,
   messageQuestion: MessageQuestionIcon,
   mpLogo: MpLogoIcon,
   observability: ObservabilityIcon,
@@ -118,4 +120,6 @@ export const Icons = {
   previous: PreviousIcon,
   openTab: OpenTabIcon,
   directory: DirectoryIcon,
+  lock: LockIcon,
+  unlock: UnlockIcon,
 } as const