Styles updates for board elements.

src/app/(main)/TopNav.tsx

@@ -38,8 +38,9 @@ export function TopNav() {
       paddingRight="5"
       width="100%"
       zIndex={100}
+      backgroundColor="surface-raised"
     >
-      <Row alignItems="center" backgroundColor="surface-raised" borderRadius>
+      <Row alignItems="center">
         <TeamsButton />
         {(websiteId || linkId || pixelId || boardId) && (
           <>
@@ -93,6 +94,17 @@ export function TopNav() {
           </>
         )}
       </Row>
+      <div
+        style={{
+          position: 'absolute',
+          bottom: -16,
+          left: 0,
+          right: 0,
+          height: 16,
+          background: 'linear-gradient(to bottom, var(--surface-raised), transparent)',
+          pointerEvents: 'none',
+        }}
+      />
     </Row>
   );
 }

src/app/(main)/boards/[boardId]/BoardEditBody.tsx

@@ -49,7 +49,7 @@ export function BoardEditBody({ requiresBoardWebsite = true }: { requiresBoardWe
     }
   };
 
-  const handleAddRow = () => {
+  const handle = () => {
     updateBoard({
       parameters: produce(board.parameters, draft => {
         if (!draft.rows) {
@@ -160,14 +160,16 @@ export function BoardEditBody({ requiresBoardWebsite = true }: { requiresBoardWe
         ))}
         {canEdit && (
           <Panel minSize={BUTTON_ROW_HEIGHT}>
-            <Row padding="3">
+            <Row paddingY="3">
               <TooltipTrigger delay={0}>
-                <Button variant="outline" onPress={handleAddRow}>
+                <Button variant="outline" onPress={handle}>
                   <Icon>
                     <Plus />
                   </Icon>
                 </Button>
-                <Tooltip placement="bottom">Add row</Tooltip>
+                <Tooltip placement="right" offset={8}>
+                  Add row
+                </Tooltip>
               </TooltipTrigger>
             </Row>
           </Panel>

src/app/(main)/boards/[boardId]/BoardEditColumn.tsx

@@ -76,8 +76,8 @@ export function BoardEditColumn({
       onMouseLeave={() => setShowActions(false)}
     >
       {canEdit && canRemoveAction && showActions && (
-        <Box position="absolute" top="22px" right="24px" zIndex={100}>
-          <Row gap="2">
+        <Box position="absolute" top="12px" right="12px" zIndex={100}>
+          <Row gap="1" padding="2" borderRadius backgroundColor="surface-sunken">
             {hasComponent && (
               <TooltipTrigger delay={0}>
                 <Button variant="outline" onPress={() => setShowSelect(true)}>

src/app/(main)/boards/[boardId]/BoardEditRow.tsx

@@ -135,12 +135,14 @@ export function BoardEditRow({
       </Group>
       {canEdit && showActions && (
         <Column
-          padding="3"
+          padding="2"
           gap="1"
           position="absolute"
           top="50%"
           right="12px"
           zIndex={20}
+          backgroundColor="surface-sunken"
+          borderRadius
           style={{ transform: 'translateY(-50%)' }}
         >
           <TooltipTrigger delay={0}>