minor changes

components/Select.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { gray, grayDark } from "@radix-ui/colors";
+import { mauve, mauveDark } from "@radix-ui/colors";
 import { useTheme } from "next-themes";
 import { styled } from '../stitches.config';
 import dynamic from 'next/dynamic';
@@ -11,11 +11,11 @@ const Select: FC<Props> = props => {
   const isDark = theme === "dark";
   const colors: any = {
     // primary: pink.pink9,
-    primary: isDark ? grayDark.gray4 : gray.gray4,
-    secondary: isDark ? grayDark.gray8 : gray.gray8,
+    primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
+    secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
     background: isDark ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
-    searchText: isDark ? grayDark.gray12 : gray.gray12,
-    placeholder: isDark ? grayDark.gray11 : gray.gray11,
+    searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
+    placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11,
   };
   colors.outline = colors.background;
   colors.selected = colors.secondary;

pages/test/[[...slug]].tsx

@@ -84,7 +84,7 @@ const Test = () => {
   return (
     <Container css={{ py: "$3", px: 0 }}>
       <Flex row fluid css={{ justifyContent: 'center', mb: "$2", height: '40vh', minHeight: '300px', p: '$3 $2' }}>
-        <Box css={{ width: "60%", px: "$2", maxWidth: '800px' }}>
+        <Box css={{ width: "55%", px: "$2" }}>
           <Tabs>
             {/* TODO Dynamic tabs */}
             <Tab header="test1.json">
@@ -95,7 +95,7 @@ const Test = () => {
             </Tab>
           </Tabs>
         </Box>
-        <Box css={{ width: "40%", mx: "$2", height: '100%', maxWidth: '750px' }}>
+        <Box css={{ width: "45%", mx: "$2", height: '100%' }}>
           <Accounts card hideDeployBtn showHookStats />
         </Box>
       </Flex>