feat: highliting sections

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
       justify="center"
       pt={wideFormat ? '0' : '6'}
       style={{
-        background: `linear-gradient(${wideFormat ? -90 : 180}deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`,
+        background: 'var(--color-surface)',
         position: 'relative',
         height: wideFormat ? undefined : 'calc(75vh - 64px)',
       }}

src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx

@@ -133,11 +133,11 @@ export function TechTreeSection() {
         style: {
           overflow: 'hidden',
           marginTop: 16,
+          backgroundColor: 'var(--color-surface)',
         },
       }}
       size={tank.ancestors && tank.successors ? 880 : 480}
       gap="0"
-      highlight
     >
       {/* <Flex justify="center">
         <Heading>Tech tree</Heading>

src/components/PageWrapper.tsx

@@ -1,13 +1,11 @@
 import { Flex, FlexProps, Theme } from '@radix-ui/themes';
 import { ComponentProps } from 'react';
-import { theme } from '../stitches.config';
 
 type PageWrapperProps = FlexProps & {
   color?: ComponentProps<typeof Theme>['accentColor'];
   size?: number | string;
   noPadding?: boolean;
   noMaxWidth?: boolean;
-  highlight?: boolean;
   containerProps?: ComponentProps<typeof Theme>;
   noFlex1?: boolean;
 };
@@ -20,7 +18,6 @@ export default function PageWrapper({
   noPadding = false,
   noMaxWidth = false,
   noFlex1 = false,
-  highlight = false,
   containerProps,
   ...props
 }: PageWrapperProps) {
@@ -31,9 +28,6 @@ export default function PageWrapper({
         flex: noFlex1 ? undefined : 1,
         display: 'flex',
         flexDirection: 'column',
-        background: highlight
-          ? `linear-gradient(-90deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`
-          : undefined,
         ...containerProps?.style,
       }}
       {...containerProps}