From f6ecba8c8b2ed752c4f73af4e0eb0a7488801a9e Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Mon, 21 Aug 2023 15:57:23 +0300
Subject: [PATCH] feat: create `NimbusLogoMark` component and add it to pages

---
 src/components/Logos/NimbusLogo.tsx           |  3 ++-
 src/components/Logos/NimbusLogoMark.tsx       | 20 +++++++++++++++++++
 .../PageWrappers/PageWrapperShadow.tsx        | 12 +++++++++--
 3 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Logos/NimbusLogoMark.tsx

diff --git a/src/components/Logos/NimbusLogo.tsx b/src/components/Logos/NimbusLogo.tsx
index 729c7c16..5ea1fc94 100644
--- a/src/components/Logos/NimbusLogo.tsx
+++ b/src/components/Logos/NimbusLogo.tsx
@@ -1,6 +1,7 @@
 import { XStack } from 'tamagui'
 import BetaTag from './BetaTag'
 import './NimbusLogo.css'
+import NimbusLogoMark from './NimbusLogoMark'
 
 const NimbusLogo = () => {
   return (
@@ -11,7 +12,7 @@ const NimbusLogo = () => {
       }}
       space={'$3'}
     >
-      <img src={'/icons/marks.svg'} alt="marks" className="nimbus-logomark" />
+      <NimbusLogoMark />
       <img src={'/icons/nimbus.svg'} alt="marks" />
       <BetaTag />
     </XStack>
diff --git a/src/components/Logos/NimbusLogoMark.tsx b/src/components/Logos/NimbusLogoMark.tsx
new file mode 100644
index 00000000..c86820bd
--- /dev/null
+++ b/src/components/Logos/NimbusLogoMark.tsx
@@ -0,0 +1,20 @@
+const NimbusLogoMark = () => {
+  return (
+    <div className="nimbus-logomark">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="147"
+        height="73"
+        viewBox="0 0 147 73"
+        fill="none"
+      >
+        <path
+          d="M110.25 36.5002V73C90.0427 73 79.625 71.1754 67.375 54.7503C55.125 38.3252 47.2108 36.4998 36.75 36.4998V73H0V36.4998H36.75V1.4385e-08C55.6049 -2.9897e-08 67.375 2.43335 79.625 18.2501C91.875 34.0669 98.3343 36.5002 110.25 36.5002V0H147V36.5002H110.25Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default NimbusLogoMark
diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx
index 73c89bcd..c0e0f2b3 100644
--- a/src/components/PageWrappers/PageWrapperShadow.tsx
+++ b/src/components/PageWrappers/PageWrapperShadow.tsx
@@ -1,13 +1,20 @@
 import { ReactNode } from 'react'
 import './layout.css'
+import NimbusLogoMark from '../Logos/NimbusLogoMark'
 
 type PageWrapperShadowProps = {
   breadcrumbBar?: ReactNode
   rightImageSrc?: string
+  rightImageLogo?: boolean
   children: ReactNode
 }
 
-const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapperShadowProps) => {
+const PageWrapperShadow = ({
+  breadcrumbBar,
+  rightImageSrc,
+  rightImageLogo,
+  children,
+}: PageWrapperShadowProps) => {
   return (
     <div className="layout">
       <section className="layout-left">
@@ -18,7 +25,8 @@ const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapp
       </section>
       <section className="layout-right">
         <div className="image-container">
-          <img src={rightImageSrc} alt="background" />
+          <img src={rightImageSrc} alt="background" className="background-img" />
+          {rightImageLogo ? <NimbusLogoMark /> : null}
         </div>
       </section>
     </div>