Merge branch 'test-page' into transactions

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,
+    primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
-    secondary: isDark ? grayDark.gray8 : gray.gray8,
+    secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
-    background: isDark ? "rgb(10, 10, 10)" : "rgb(244, 244, 244)",
+    background: isDark ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
-    searchText: isDark ? grayDark.gray12 : gray.gray12,
+    searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
-    placeholder: isDark ? grayDark.gray11 : gray.gray11,
+    placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11,
   };
   colors.outline = colors.background;
   colors.selected = colors.secondary;

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

@@ -282,12 +282,8 @@ const Test = () => {
   const snap = useSnapshot(state);
   return (
     <Container css={{ py: "$3", px: 0 }}>
-      <Flex
+      <Flex row fluid css={{ justifyContent: 'center', mb: "$2", height: '40vh', minHeight: '300px', p: '$3 $2' }}>
-        row
+        <Box css={{ width: "55%", px: "$2" }}>
-        fluid
-        css={{ justifyContent: "center", mb: "$2", height: "40vh", minHeight: "300px", p: "$3 $2" }}
-      >
-        <Box css={{ width: "60%", px: "$2", maxWidth: "800px", height: "100%", overflow: "auto" }}>
           <Tabs>
             {/* TODO Dynamic tabs */}
             <Tab header="test1.json">
@@ -298,7 +294,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>