Padding & colour tweaks (#356)

* Tweak padding and ... menu colour/size
* Avoid "Action" header moving when you change page

Author: microbit-matt-hillsdon

src/components/DataSampleGridView.tsx

@@ -23,8 +23,7 @@ import { FormattedMessage } from "react-intl";
 const gridCommonProps: Partial<GridProps> = {
   gridTemplateColumns: "290px 1fr",
   gap: 3,
-  px: 10,
-  py: 2,
+  px: 5,
   w: "100%",
 };
 
@@ -138,6 +137,7 @@ const DataSamplesGridView = () => {
       ) : (
         <Grid
           {...gridCommonProps}
+          py={2}
           alignItems="start"
           autoRows="max-content"
           overflow="auto"

src/components/DataSamplesMenu.tsx

@@ -29,7 +29,7 @@ const DataSamplesMenu = () => {
           id: "content.data.controlbar.button.menu",
         })}
         variant="ghost"
-        icon={<Icon as={MdMoreVert} boxSize={10} color="brand.500" />}
+        icon={<Icon as={MdMoreVert} color="gray.800" boxSize={7} />}
         isRound
       />
       <Portal>

src/components/LiveGraphPanel.tsx

@@ -56,7 +56,7 @@ const LiveGraphPanel = ({
           top={0}
           left={0}
           right={0}
-          px={2.5}
+          px={5}
           py={2.5}
           w={`calc(100% - ${
             showPredictedGesture ? `${predictedGestureDisplayWidth}px` : "0"

src/components/TestingModelGridView.tsx

@@ -33,7 +33,6 @@ import MoreMenuButton from "./MoreMenuButton";
 const gridCommonProps: Partial<GridProps> = {
   gridTemplateColumns: "290px 360px 40px auto",
   gap: 3,
-  py: 2,
   w: "100%",
 };
 
@@ -86,9 +85,9 @@ const TestingModelGridView = () => {
             values={{ action: detectedLabel }}
           />
         </VisuallyHidden>
-        <HeadingGrid {...gridCommonProps} px={10} headings={headings} />
+        <HeadingGrid {...gridCommonProps} px={5} headings={headings} />
         <VStack
-          px={10}
+          px={5}
           w="full"
           h={0}
           justifyContent="start"
@@ -101,6 +100,7 @@ const TestingModelGridView = () => {
             <Grid
               {...gridCommonProps}
               {...(projectEdited ? { w: "fit-content", pr: 0 } : {})}
+              py={2}
               autoRows="max-content"
               h="fit-content"
               alignSelf="start"
@@ -154,7 +154,7 @@ const TestingModelGridView = () => {
       <VStack w="full" flexShrink={0} bottom={0} gap={0} bg="gray.25">
         <HStack
           justifyContent="right"
-          px={10}
+          px={5}
           py={2}
           w="full"
           borderBottomWidth={3}

src/pages/DataSamplesPage.tsx

@@ -40,7 +40,7 @@ const DataSamplesPage = () => {
       <VStack w="full" flexShrink={0} bottom={0} gap={0} bg="gray.25">
         <HStack
           justifyContent="space-between"
-          px={10}
+          px={5}
           py={2}
           w="full"
           borderBottomWidth={3}