From 3ddc2278b2042498acb9aae0cc37a797276f9f9f Mon Sep 17 00:00:00 2001
From: Ricky James Smith <jamesricky@me.com>
Date: Mon, 20 Jan 2025 10:36:42 +0100
Subject: [PATCH] Adjust the spacings inside `Toolbar` and `DataGridToolbar`
 (#3214)

---
 .changeset/rude-moons-help.md                 |   5 +
 .../admin/src/common/toolbar/Toolbar.tsx      |  25 +++-
 .../common/toolbar/actions/ToolbarActions.tsx |   4 -
 .../src/common/toolbar/item/ToolbarItem.tsx   |   6 +-
 .../src/pages/pageSearch/PageSearch.tsx       |  29 ++--
 .../src/pages/pagesPage/PagesPage.tsx         |  15 +-
 .../components/Toolbar/Toolbar.stories.tsx    | 134 ++++++++----------
 7 files changed, 104 insertions(+), 114 deletions(-)
 create mode 100644 .changeset/rude-moons-help.md

diff --git a/.changeset/rude-moons-help.md b/.changeset/rude-moons-help.md
new file mode 100644
index 0000000000..88342de2de
--- /dev/null
+++ b/.changeset/rude-moons-help.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": patch
+---
+
+Adjust the spacings inside `Toolbar` and `DataGridToolbar` to match the Comet design
diff --git a/packages/admin/admin/src/common/toolbar/Toolbar.tsx b/packages/admin/admin/src/common/toolbar/Toolbar.tsx
index 4e06603d26..3b124967b6 100644
--- a/packages/admin/admin/src/common/toolbar/Toolbar.tsx
+++ b/packages/admin/admin/src/common/toolbar/Toolbar.tsx
@@ -52,8 +52,18 @@ const TopBar = createComponentSlot("div")<ToolbarClassKey>({
         display: flex;
         align-items: center;
         gap: ${theme.spacing(2)};
-        padding-left: ${theme.spacing(4)};
-        padding-right: ${theme.spacing(4)};
+        padding-left: ${theme.spacing(2)};
+        padding-right: ${theme.spacing(2)};
+
+        ${theme.breakpoints.up("sm")} {
+            padding-left: ${theme.spacing(2)};
+            padding-right: ${theme.spacing(2)};
+        }
+
+        ${theme.breakpoints.up("md")} {
+            padding-left: ${theme.spacing(4)};
+            padding-right: ${theme.spacing(4)};
+        }
     `,
 );
 
@@ -73,11 +83,18 @@ const BottomBar = createComponentSlot(MuiToolbar)<ToolbarClassKey>({
         border-top: solid 1px ${theme.palette.grey["50"]};
         box-sizing: border-box;
         min-height: 60px;
-        padding: 0 5px;
+        padding-left: ${theme.spacing(2)};
+        padding-right: ${theme.spacing(2)};
 
         ${theme.breakpoints.up("sm")} {
             min-height: 60px;
-            padding: 0 10px;
+            padding-left: ${theme.spacing(2)};
+            padding-right: ${theme.spacing(2)};
+        }
+
+        ${theme.breakpoints.up("md")} {
+            padding-left: ${theme.spacing(4)};
+            padding-right: ${theme.spacing(4)};
         }
 
         // necessary to override strange MUI default styling
diff --git a/packages/admin/admin/src/common/toolbar/actions/ToolbarActions.tsx b/packages/admin/admin/src/common/toolbar/actions/ToolbarActions.tsx
index aa2adeab31..dded00eb00 100644
--- a/packages/admin/admin/src/common/toolbar/actions/ToolbarActions.tsx
+++ b/packages/admin/admin/src/common/toolbar/actions/ToolbarActions.tsx
@@ -15,10 +15,6 @@ const Root = createComponentSlot("div")<ToolbarActionsClassKey>({
         display: flex;
         align-items: center;
         gap: ${theme.spacing(2)};
-
-        ${theme.breakpoints.up("md")} {
-            gap: ${theme.spacing(4)};
-        }
     `,
 );
 
diff --git a/packages/admin/admin/src/common/toolbar/item/ToolbarItem.tsx b/packages/admin/admin/src/common/toolbar/item/ToolbarItem.tsx
index 7654a86929..ce2ad46cea 100644
--- a/packages/admin/admin/src/common/toolbar/item/ToolbarItem.tsx
+++ b/packages/admin/admin/src/common/toolbar/item/ToolbarItem.tsx
@@ -15,11 +15,7 @@ const Root = createComponentSlot("div")<ToolbarItemClassKey>({
         display: flex;
         justify-items: center;
         align-items: center;
-        padding: 0 ${theme.spacing(1)};
-
-        ${theme.breakpoints.up("sm")} {
-            padding: 0 ${theme.spacing(1)};
-        }
+        padding-right: ${theme.spacing(2)};
     `,
 );
 
diff --git a/packages/admin/cms-admin/src/pages/pageSearch/PageSearch.tsx b/packages/admin/cms-admin/src/pages/pageSearch/PageSearch.tsx
index dbc1ed3abe..e709f6ef52 100644
--- a/packages/admin/cms-admin/src/pages/pageSearch/PageSearch.tsx
+++ b/packages/admin/cms-admin/src/pages/pageSearch/PageSearch.tsx
@@ -1,5 +1,3 @@
-import { styled } from "@mui/material/styles";
-
 import { SearchInput } from "../../common/SearchInput";
 import { PageSearchApi } from "./usePageSearch";
 
@@ -11,24 +9,13 @@ interface PageSearchProps {
 
 export function PageSearch({ query, onQueryChange, pageSearchApi }: PageSearchProps) {
     return (
-        <Root>
-            <SearchInput
-                query={query}
-                onQueryChange={onQueryChange}
-                currentMatch={pageSearchApi.currentMatch}
-                totalMatches={pageSearchApi.totalMatches}
-                jumpToPreviousMatch={pageSearchApi.jumpToPreviousMatch}
-                jumpToNextMatch={pageSearchApi.jumpToNextMatch}
-            />
-        </Root>
+        <SearchInput
+            query={query}
+            onQueryChange={onQueryChange}
+            currentMatch={pageSearchApi.currentMatch}
+            totalMatches={pageSearchApi.totalMatches}
+            jumpToPreviousMatch={pageSearchApi.jumpToPreviousMatch}
+            jumpToNextMatch={pageSearchApi.jumpToNextMatch}
+        />
     );
 }
-
-const Root = styled("div")`
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    margin-left: 10px;
-    margin-right: 10px;
-`;
diff --git a/packages/admin/cms-admin/src/pages/pagesPage/PagesPage.tsx b/packages/admin/cms-admin/src/pages/pagesPage/PagesPage.tsx
index 4d131c1ca8..5d026dd6b8 100644
--- a/packages/admin/cms-admin/src/pages/pagesPage/PagesPage.tsx
+++ b/packages/admin/cms-admin/src/pages/pagesPage/PagesPage.tsx
@@ -10,6 +10,7 @@ import {
     StackSwitch,
     Toolbar,
     ToolbarActions,
+    ToolbarItem,
     useEditDialog,
     useFocusAwarePolling,
     useStoredState,
@@ -138,11 +139,15 @@ export function PagesPage({
                 <StackSwitch>
                     <StackPage name="table">
                         <Toolbar scopeIndicator={renderContentScopeIndicator(scope)}>
-                            <PageSearch query={query} onQueryChange={setQuery} pageSearchApi={pageSearchApi} />
-                            <FormControlLabel
-                                control={<Switch checked={showArchive} color="primary" onChange={handleArchiveToggleClick} />}
-                                label={<FormattedMessage id="comet.pages.pages.archivedItems" defaultMessage="Archived items" />}
-                            />
+                            <ToolbarItem sx={{ flexGrow: 1 }}>
+                                <PageSearch query={query} onQueryChange={setQuery} pageSearchApi={pageSearchApi} />
+                            </ToolbarItem>
+                            <ToolbarItem>
+                                <FormControlLabel
+                                    control={<Switch checked={showArchive} color="primary" onChange={handleArchiveToggleClick} />}
+                                    label={<FormattedMessage id="comet.pages.pages.archivedItems" defaultMessage="Archived items" />}
+                                />
+                            </ToolbarItem>
                             <ToolbarActions>
                                 <Button
                                     variant="contained"
diff --git a/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx b/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx
index fdae5a9744..4eed2709c6 100644
--- a/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx
+++ b/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx
@@ -22,7 +22,7 @@ import {
     useStackSwitchApi,
 } from "@comet/admin";
 import { ChevronLeft, CometColor, Search } from "@comet/admin-icons";
-import { Autocomplete, Button, Grid, IconButton, InputAdornment, InputBase, Typography } from "@mui/material";
+import { Autocomplete, Button, IconButton, InputAdornment, InputBase, Typography } from "@mui/material";
 import { useState } from "react";
 import { Form } from "react-final-form";
 import { FormattedMessage } from "react-intl";
@@ -70,30 +70,26 @@ export const Breadcrumbs = () => {
             <ToolbarActions>
                 <StackSwitchApiContext.Consumer>
                     {(stackSwitchApi) => (
-                        <Grid container spacing={4}>
-                            <Grid item>
-                                <Button
-                                    color="primary"
-                                    variant="contained"
-                                    onClick={() => {
-                                        stackSwitchApi.activatePage("page-1", "details");
-                                    }}
-                                >
-                                    1
-                                </Button>
-                            </Grid>
-                            <Grid item>
-                                <Button
-                                    color="primary"
-                                    variant="contained"
-                                    onClick={() => {
-                                        stackSwitchApi.activatePage("page-2", "details");
-                                    }}
-                                >
-                                    2
-                                </Button>
-                            </Grid>
-                        </Grid>
+                        <>
+                            <Button
+                                color="primary"
+                                variant="contained"
+                                onClick={() => {
+                                    stackSwitchApi.activatePage("page-1", "details");
+                                }}
+                            >
+                                1
+                            </Button>
+                            <Button
+                                color="primary"
+                                variant="contained"
+                                onClick={() => {
+                                    stackSwitchApi.activatePage("page-2", "details");
+                                }}
+                            >
+                                2
+                            </Button>
+                        </>
                     )}
                 </StackSwitchApiContext.Consumer>
             </ToolbarActions>
@@ -131,9 +127,9 @@ export const FillSpaceLeft = {
         return (
             <Toolbar>
                 <FillSpace />
-                <ToolbarItem>
+                <ToolbarActions>
                     <Typography>Item</Typography>
-                </ToolbarItem>
+                </ToolbarActions>
             </Toolbar>
         );
     },
@@ -184,30 +180,24 @@ export const FillSpaceMiddle2 = {
                 </ToolbarItem>
                 <FillSpace />
                 <ToolbarActions>
-                    <Grid container spacing={4}>
-                        <Grid item>
-                            <Button
-                                color="primary"
-                                variant="contained"
-                                onClick={() => {
-                                    alert("clicked Action 1");
-                                }}
-                            >
-                                Action 1
-                            </Button>
-                        </Grid>
-                        <Grid item>
-                            <Button
-                                color="secondary"
-                                variant="contained"
-                                onClick={() => {
-                                    alert("clicked Action 2");
-                                }}
-                            >
-                                Action 2
-                            </Button>
-                        </Grid>
-                    </Grid>
+                    <Button
+                        color="primary"
+                        variant="contained"
+                        onClick={() => {
+                            alert("clicked Action 1");
+                        }}
+                    >
+                        Action 1
+                    </Button>
+                    <Button
+                        color="secondary"
+                        variant="contained"
+                        onClick={() => {
+                            alert("clicked Action 2");
+                        }}
+                    >
+                        Action 2
+                    </Button>
                 </ToolbarActions>
                 <FillSpace />
                 <ToolbarItem>
@@ -288,30 +278,24 @@ export const ToolbarActionsTwoActions = {
                 <ToolbarAutomaticTitleItem />
                 <FillSpace />
                 <ToolbarActions>
-                    <Grid container spacing={4}>
-                        <Grid item>
-                            <Button
-                                color="primary"
-                                variant="contained"
-                                onClick={() => {
-                                    alert("clicked Action 1");
-                                }}
-                            >
-                                Action 1
-                            </Button>
-                        </Grid>
-                        <Grid item>
-                            <Button
-                                color="secondary"
-                                variant="contained"
-                                onClick={() => {
-                                    alert("clicked Action 2");
-                                }}
-                            >
-                                Action 2
-                            </Button>
-                        </Grid>
-                    </Grid>
+                    <Button
+                        color="primary"
+                        variant="contained"
+                        onClick={() => {
+                            alert("clicked Action 1");
+                        }}
+                    >
+                        Action 1
+                    </Button>
+                    <Button
+                        color="secondary"
+                        variant="contained"
+                        onClick={() => {
+                            alert("clicked Action 2");
+                        }}
+                    >
+                        Action 2
+                    </Button>
                 </ToolbarActions>
             </Toolbar>
         );