OCT-2048: Improve display of Sepolia testnet mode warning

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

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

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 {

client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.tsx

@@ -131,17 +131,30 @@ 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 && (
         <div className={styles.links}>
           {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} />

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>
 );
 

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';
 }

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);