fix height when testnet is enabled

src/design-system/components/AnimatedRoute/AnimatedRoute.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react-router-dom';
 
 import { useCurrentAddressStore } from '~/core/state';
+import { useTestnetModeStore } from '~/core/state/currentSettings/testnetMode';
 import { POPUP_DIMENSIONS } from '~/core/utils/dimensions';
 import { Box } from '~/design-system';
 import {
@@ -26,15 +27,14 @@ import {
 } from '~/design-system/styles/designTokens';
 import { ProtectedRoute } from '~/entries/popup/ProtectedRoute';
 import { Navbar } from '~/entries/popup/components/Navbar/Navbar';
+import { TESTNET_BAR_HEIGHT } from '~/entries/popup/components/TestnetBar/TestnetBar';
 import { UserStatusResult } from '~/entries/popup/hooks/useAuth';
 import { useAvatar } from '~/entries/popup/hooks/useAvatar';
 import { getActiveElement } from '~/entries/popup/utils/activeElement';
 import { mergeRefs } from '~/entries/popup/utils/mergeRefs';
 
 import { AccentColorProvider, AvatarColorProvider } from '../Box/ColorContext';
 
-import { animatedRouteStyles } from './AnimatedRoute.css';
-
 type AnimatedRouteProps = {
   background?: BackgroundColor;
   children: React.ReactNode;
@@ -184,6 +184,7 @@ export const AnimatedRoute = forwardRef((props: AnimatedRouteProps, ref) => {
     accentColor = true,
   } = props;
   const { state } = useLocation();
+  const { testnetMode } = useTestnetModeStore();
   const animationDirection: AnimatedRouteDirection =
     state?.direction ?? direction;
   const { initial, end, exit } = animatedRouteValues[animationDirection];
@@ -230,12 +231,16 @@ export const AnimatedRoute = forwardRef((props: AnimatedRouteProps, ref) => {
             flexDirection="column"
             height="full"
             initial={isBack ? exit : initial}
-            style={{ overflow: 'auto', maxHeight: POPUP_DIMENSIONS.height }}
+            style={{
+              overflow: 'auto',
+              maxHeight:
+                POPUP_DIMENSIONS.height -
+                (testnetMode ? TESTNET_BAR_HEIGHT : 0),
+            }}
             animate={end}
             exit={isBack ? initial : exit}
             transition={transition}
             background={background}
-            className={animatedRouteStyles}
           >
             {navbar && (
               <Navbar

src/entries/popup/components/FullScreen/FullScreenBackground.tsx

@@ -1,67 +1,13 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 
 import { useCurrentThemeStore } from '~/core/state/currentSettings/currentTheme';
 import { useTestnetModeStore } from '~/core/state/currentSettings/testnetMode';
 import { POPUP_DIMENSIONS } from '~/core/utils/dimensions';
-import { Box, Inline, Text } from '~/design-system';
-import { globalColors } from '~/design-system/styles/designTokens';
+import { Box } from '~/design-system';
 
 import { useIsFullScreen } from '../../hooks/useIsFullScreen';
-import { zIndexes } from '../../utils/zIndexes';
-import { MenuItem } from '../Menu/MenuItem';
-import { TestnetBarBackground } from '../TestnetBarBackground/TestnetBarBackground';
+import { TestnetBar } from '../TestnetBar/TestnetBar';
 
-const TestnetBar = ({ testnetMode }: { testnetMode: boolean }) => {
-  return (
-    <AnimatePresence initial={false}>
-      {testnetMode && (
-        <Box
-          as={motion.div}
-          key={'testnet-bar'}
-          initial={{ opacity: 0, height: 0 }}
-          animate={{ opacity: 1, height: '35px' }}
-          exit={{ opacity: 0, height: 0 }}
-          style={{
-            height: '35px',
-            width: POPUP_DIMENSIONS.width,
-            zIndex: zIndexes.SPEED_UP_CANCEL_PROMPT,
-            backgroundColor: 'rgba(62, 207, 91, 0.06)',
-          }}
-        >
-          <Box
-            height="full"
-            style={{
-              borderColor: globalColors.green90,
-            }}
-            borderBottomWidth="1px"
-          >
-            <Inline
-              height="full"
-              space="4px"
-              alignVertical="center"
-              alignHorizontal="center"
-            >
-              <Box
-                position="absolute"
-                style={{
-                  overflow: 'clip',
-                }}
-                marginRight="-12px"
-              >
-                <TestnetBarBackground />
-              </Box>
-              <MenuItem.TextIcon icon="🕹" />
-              <Text align="center" color="green" size="12pt" weight="heavy">
-                Testnet Mode
-              </Text>
-            </Inline>
-          </Box>
-        </Box>
-      )}
-    </AnimatePresence>
-  );
-};
 export function FullScreenBackground({
   children,
 }: {

src/entries/popup/components/TestnetBar/TestnetBar.tsx

@@ -0,0 +1,62 @@
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { POPUP_DIMENSIONS } from '~/core/utils/dimensions';
+import { Box, Inline, Text } from '~/design-system';
+import { globalColors } from '~/design-system/styles/designTokens';
+
+import { zIndexes } from '../../utils/zIndexes';
+import { MenuItem } from '../Menu/MenuItem';
+
+import { TestnetBarBackground } from './TestnetBarBackground';
+
+export const TESTNET_BAR_HEIGHT = 35;
+export const TestnetBar = ({ testnetMode }: { testnetMode: boolean }) => {
+  return (
+    <AnimatePresence initial={false}>
+      {testnetMode && (
+        <Box
+          as={motion.div}
+          key={'testnet-bar'}
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: '35px' }}
+          exit={{ opacity: 0, height: 0 }}
+          style={{
+            height: '35px',
+            width: POPUP_DIMENSIONS.width,
+            zIndex: zIndexes.SPEED_UP_CANCEL_PROMPT,
+            backgroundColor: 'rgba(62, 207, 91, 0.06)',
+          }}
+        >
+          <Box
+            height="full"
+            style={{
+              borderColor: globalColors.green90,
+            }}
+            borderBottomWidth="1px"
+          >
+            <Inline
+              height="full"
+              space="4px"
+              alignVertical="center"
+              alignHorizontal="center"
+            >
+              <Box
+                position="absolute"
+                style={{
+                  overflow: 'clip',
+                }}
+                marginRight="-12px"
+              >
+                <TestnetBarBackground />
+              </Box>
+              <MenuItem.TextIcon icon="🕹" />
+              <Text align="center" color="green" size="12pt" weight="heavy">
+                Testnet Mode
+              </Text>
+            </Inline>
+          </Box>
+        </Box>
+      )}
+    </AnimatePresence>
+  );
+};