[4333] Improve the appearance of the palette

Bug: #4333 Signed-off-by: Stéphane Bégaudeau <[email protected]>
eclipse-sirius · Dec 20, 2024 · c7da748 · c7da748
1 parent 23a4a91
commit c7da748
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -124,6 +124,7 @@ This is now fixed
 - https://github.com/eclipse-sirius/sirius-web/issues/4317[#4317] [sirius-web] Export `NewObjectModal`, `NewRootObjectModal`, and `NewRepresentationModal` frontend components
 These components could be reused by downstream applications in custom creation tool.
 - https://github.com/eclipse-sirius/sirius-web/issues/4330[#4330] [diagram] Improve responsiveness when executing a tool from the palette
+- https://github.com/eclipse-sirius/sirius-web/issues/4333[#4333] [diagram] Improve the style of the palette by switching the positions of the search field and the quick access tools and by adding a small touch of grey in the header bar and search field
 
 
 == v2024.11.0

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx
@@ -54,7 +54,7 @@ const usePaletteStyle = makeStyles<PaletteStyleProps>()((theme, props) => ({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    color: theme.palette.grey[400],
+    backgroundColor: `${theme.palette.secondary.main}08`,
   },
 }));
 
@@ -171,18 +171,18 @@ export const Palette = ({
           <DragIndicatorIcon />
         </Box>
         <Divider />
-        <PaletteSearchField
-          onValueChanged={onSearchFieldValueChanged}
-          onEscape={onEscape}
-          onDirectEditClick={onDirectEditClick}
-        />
         <PaletteQuickAccessToolBar
           diagramElementId={diagramElementId}
           onToolClick={handleToolClick}
           quickAccessTools={palette.quickAccessTools}
           x={x}
           y={y}
         />
+        <PaletteSearchField
+          onValueChanged={onSearchFieldValueChanged}
+          onEscape={onEscape}
+          onDirectEditClick={onDirectEditClick}
+        />
         {state.searchToolValue.length > 0 ? (
           <PaletteSearchResult
             searchToolValue={state.searchToolValue}

diff --git a/...ms/frontend/sirius-components-diagrams/src/renderer/palette/search/PaletteSearchField.tsx b/...ms/frontend/sirius-components-diagrams/src/renderer/palette/search/PaletteSearchField.tsx
@@ -17,10 +17,27 @@ import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import { useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
 import { PaletteSearchFieldProps, PaletteSearchFieldState } from './PaletteSearchField.types';
+
+const usePaletteSearchFieldStyle = makeStyles()((theme) => ({
+  paletteSearchField: {
+    '& .MuiInputBase-root': {
+      backgroundColor: `${theme.palette.secondary.main}08`,
+      borderWidth: '0px',
+    },
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginBottom: theme.spacing(0.5),
+    marginTop: theme.spacing(0.5),
+  },
+}));
+
 export const PaletteSearchField = ({ onValueChanged, onEscape, onDirectEditClick }: PaletteSearchFieldProps) => {
   const [state, setState] = useState<PaletteSearchFieldState>({ value: '' });
 
+  const { classes } = usePaletteSearchFieldStyle();
+
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
     setState((prevState) => ({ ...prevState, value }));
@@ -43,12 +60,13 @@ export const PaletteSearchField = ({ onValueChanged, onEscape, onDirectEditClick
 
   return (
     <TextField
-      autoFocus={true}
+      autoFocus
       value={state.value}
       size="small"
       onKeyDown={handleKeyDown}
       onClick={(event) => event.stopPropagation()}
       placeholder="Search Tool"
+      className={classes.paletteSearchField}
       InputProps={{
         disableUnderline: true,
         startAdornment: (