From 1ac66b5be6f696d76d01c8fe393f7179d5fd0a06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= <j.mikolajczyk96@gmail.com>
Date: Tue, 22 Oct 2024 12:28:42 +0200
Subject: [PATCH] oct-2048: testnet warning update

---
 .../shared/Layout/Layout.module.scss          |  4 +++
 .../src/components/shared/Layout/Layout.tsx   |  2 ++
 .../LayoutTopBar/LayoutTopBar.module.scss     | 28 +++++++++++++++++--
 .../Layout/LayoutTopBar/LayoutTopBar.tsx      | 23 +++++++++++----
 .../src/components/ui/TinyLabel/TinyLabel.tsx |  3 +-
 client/src/components/ui/TinyLabel/types.ts   |  1 +
 client/src/styles/utils/_colors.scss          |  1 +
 7 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/client/src/components/shared/Layout/Layout.module.scss b/client/src/components/shared/Layout/Layout.module.scss
index 7353fd40dc..e2c2386f7b 100644
--- a/client/src/components/shared/Layout/Layout.module.scss
+++ b/client/src/components/shared/Layout/Layout.module.scss
@@ -37,6 +37,10 @@
     backdrop-filter: blur(2.5rem);
     border-bottom: 0.1rem solid $color-octant-grey1;
 
+    &.isTestnet {
+      background-color: $color-octant-orange4;
+    }
+
     &.isPatronMode {
       background: $color-octant-purple3-20;
     }
diff --git a/client/src/components/shared/Layout/Layout.tsx b/client/src/components/shared/Layout/Layout.tsx
index 1b274c4d14..adc707c4b3 100644
--- a/client/src/components/shared/Layout/Layout.tsx
+++ b/client/src/components/shared/Layout/Layout.tsx
@@ -9,6 +9,7 @@ import ModalLayoutConnectWallet from 'components/shared/Layout/ModalLayoutConnec
 import ModalLayoutWallet from 'components/shared/Layout/ModalLayoutWallet';
 import Loader from 'components/ui/Loader';
 import { LAYOUT_BODY_ID } from 'constants/domElementsIds';
+import networkConfig from 'constants/networkConfig';
 import useIsProjectAdminMode from 'hooks/helpers/useIsProjectAdminMode';
 import useMediaQuery from 'hooks/helpers/useMediaQuery';
 import useIsPatronMode from 'hooks/queries/useIsPatronMode';
@@ -115,6 +116,7 @@ const Layout: FC<LayoutProps> = ({
             styles.topBarWrapper,
             isProjectAdminMode && styles.isProjectAdminMode,
             isPatronMode && styles.isPatronMode,
+            networkConfig.isTestnet && styles.isTestnet,
           )}
         >
           <LayoutTopBar className={styles.section} />
diff --git a/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.module.scss b/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.module.scss
index d392f5c2e0..8ca6454290 100644
--- a/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.module.scss
+++ b/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.module.scss
@@ -9,18 +9,32 @@
 
   .logoWrapper {
     position: relative;
+    height: 4rem;
   }
 
   .octantLogo {
     cursor: pointer;
+
+    &.isTestnet {
+      path {
+        fill: $color-octant-orange;
+      }
+    }
   }
 
   .testnetIndicator {
     position: absolute;
-    top: -1rem;
-    right: -0.2rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     text-transform: uppercase;
-    letter-spacing: 0.1rem;
+    letter-spacing: 0.05rem;
+    font-size: $font-size-10;
+    background-color: $color-octant-orange4;
+  }
+
+  .testnetIndicatorText {
+    padding: 0 0.5rem;
   }
 
   .links {
@@ -34,6 +48,10 @@
       color: $color-octant-grey2;
       cursor: pointer;
 
+      &.isTestnet {
+        color: $color-octant-dark;
+      }
+
       &:not(:last-child) {
         margin-right: 2.4rem;
       }
@@ -140,6 +158,10 @@
     background-color: $color-white;
     border-radius: $border-radius-16;
     margin-left: 1.6rem;
+
+    &.isTestnet {
+      background-color: $color-octant-orange11;
+    }
   }
 
   .allocateButton {
diff --git a/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.tsx b/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.tsx
index 00e1169863..b6f3d78b36 100644
--- a/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.tsx
+++ b/client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.tsx
@@ -131,9 +131,18 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
   return (
     <div className={cx(styles.root, className)}>
       <div className={styles.logoWrapper}>
-        <Svg classNameSvg={styles.octantLogo} img={octant} onClick={onLogoClick} size={4} />
+        <Svg
+          classNameSvg={cx(styles.octantLogo, networkConfig.isTestnet && styles.isTestnet)}
+          img={octant}
+          onClick={onLogoClick}
+          size={4}
+        />
         {networkConfig.isTestnet && (
-          <TinyLabel className={styles.testnetIndicator} text={networkConfig.name} />
+          <TinyLabel
+            className={styles.testnetIndicator}
+            text={networkConfig.name}
+            textClassName={styles.testnetIndicatorText}
+          />
         )}
       </div>
       {isDesktop && (
@@ -141,7 +150,11 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
           {tabs.map(({ label, to, isActive, isDisabled }) => (
             <div
               key={to}
-              className={cx(styles.link, isActive && styles.isActive)}
+              className={cx(
+                styles.link,
+                isActive && styles.isActive,
+                networkConfig.isTestnet && styles.isTestnet,
+              )}
               onClick={
                 isDisabled && to
                   ? () => {}
@@ -188,14 +201,14 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
       {isDesktop && (
         <Fragment>
           <div
-            className={styles.settingsButton}
+            className={cx(styles.settingsButton, networkConfig.isTestnet && styles.isTestnet)}
             onClick={() => setIsSettingsDrawerOpen(!isSettingsDrawerOpen)}
           >
             <Svg classNameSvg={styles.settingsButtonIcon} img={settings} size={2} />
           </div>
           {!isProjectAdminMode && !isPatronMode && (
             <div
-              className={styles.allocateButton}
+              className={cx(styles.allocateButton, networkConfig.isTestnet && styles.isTestnet)}
               onClick={() => setIsAllocationDrawerOpen(!isAllocationDrawerOpen)}
             >
               <Svg classNameSvg={styles.allocateButtonIcon} img={allocate} size={2} />
diff --git a/client/src/components/ui/TinyLabel/TinyLabel.tsx b/client/src/components/ui/TinyLabel/TinyLabel.tsx
index 3a1a4078e6..fafdf71f1d 100644
--- a/client/src/components/ui/TinyLabel/TinyLabel.tsx
+++ b/client/src/components/ui/TinyLabel/TinyLabel.tsx
@@ -9,9 +9,10 @@ const TinyLabel: FC<TinyLabelProps> = ({
   text,
   variant = 'orange2',
   isInTopRightCorner = true,
+  textClassName,
 }) => (
   <div className={cx(styles.root, isInTopRightCorner && styles.isInTopRightCorner, className)}>
-    <div className={cx(styles.text, styles[`variant--${variant}`])}>{text}</div>
+    <div className={cx(styles.text, styles[`variant--${variant}`], textClassName)}>{text}</div>
   </div>
 );
 
diff --git a/client/src/components/ui/TinyLabel/types.ts b/client/src/components/ui/TinyLabel/types.ts
index f4ea85dcac..6f7ed58e16 100644
--- a/client/src/components/ui/TinyLabel/types.ts
+++ b/client/src/components/ui/TinyLabel/types.ts
@@ -2,5 +2,6 @@ export default interface TinyLabelProps {
   className?: string;
   isInTopRightCorner?: boolean;
   text: string;
+  textClassName?: string;
   variant?: 'orange2' | 'orange3';
 }
diff --git a/client/src/styles/utils/_colors.scss b/client/src/styles/utils/_colors.scss
index 791b02e407..15eee9123c 100644
--- a/client/src/styles/utils/_colors.scss
+++ b/client/src/styles/utils/_colors.scss
@@ -38,6 +38,7 @@ $color-octant-orange3: #f6c54b;
 $color-octant-orange4: #ffefee;
 $color-octant-orange5: #f7d2cc;
 $color-octant-orange6: #fffbf2;
+$color-octant-orange11: #fffafa;
 $color-octant-purple: #685b8a;
 $color-octant-purple2: #8777af;
 $color-octant-purple3-20: rgba(219, 220, 252, 0.2);