feat: add lock/unlock icons; rename previous lock to paywall (#340)

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,
 }

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>
   )
-}
+}

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