From 1515e1d8b2991f3d00b93412ed97e6882491af19 Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Thu, 7 May 2026 10:19:34 +0200 Subject: [PATCH 01/11] Z order by default Display Z order (from foreground to background) by default to match how visual tools work (tool learnability). --- newIDE/app/src/InstancesEditor/InstancesList/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index 8d25438ba628..d3d2df7cde3e 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -85,8 +85,8 @@ class InstancesList extends Component { // $FlowFixMe[missing-local-annot] state = { searchText: '', - sortBy: '', - sortDirection: SortDirection.ASC, + sortBy: 'zOrder', + sortDirection: SortDirection.DESC, }; renderedRows: Array = []; instanceRowRenderer: ?typeof gd.InitialInstanceJSFunctor; From 85ac72a148fa53f54bfc75ce8794d9d8934ad635 Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Thu, 7 May 2026 12:38:58 +0200 Subject: [PATCH 02/11] Reorder Instances List columns and move lock icon to far right Reorder the columns in the Instances List panel so the sequence is: Object name, X, Y, Z, Angle, Layer, Lock. The lock icon column was previously the second column; it is now at the right to follow the UI pattern in other panels. Also shortened the Z Order column header label to "Z". --- .../InstancesEditor/InstancesList/index.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index d3d2df7cde3e..8dc119db7dfe 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -298,18 +298,17 @@ class InstancesList extends Component { className={'tableColumn'} /> X} + dataKey="x" width={Math.max( - width * 0.05, + width * 0.1, minimumWidths.numberProperty )} className={'tableColumn'} - cellRenderer={this._renderLockCell} /> X} - dataKey="x" + label={Y} + dataKey="y" width={Math.max( width * 0.1, minimumWidths.numberProperty @@ -317,8 +316,8 @@ class InstancesList extends Component { className={'tableColumn'} /> Y} - dataKey="y" + label={Z} + dataKey="zOrder" width={Math.max( width * 0.1, minimumWidths.numberProperty @@ -341,13 +340,14 @@ class InstancesList extends Component { className={'tableColumn'} /> Z Order} - dataKey="zOrder" + label="" + dataKey="locked" width={Math.max( - width * 0.1, + width * 0.05, minimumWidths.numberProperty )} className={'tableColumn'} + cellRenderer={this._renderLockCell} /> )} From 923ef02a3c38017ddc814d514d7424a0c0e09fd0 Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Thu, 7 May 2026 14:41:16 +0200 Subject: [PATCH 03/11] Replace Angle/Layer column headers with icons in Instances List Replace the "Angle" and "Layer" text column headers in the Instances List with SVG icons (RotateZ and Layers) to save horizontal space and match the icon-first visual language used in the editor. - Use titleAccess for screen reader accessibility ("Rotation (Z)" / "Layer") - Size icons with inline style to work around react-virtualized rendering context, where MUI's sx prop and fontSize have no effect --- .../src/InstancesEditor/InstancesList/index.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index 8dc119db7dfe..ffba8c52a5a5 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -14,6 +14,8 @@ import CompactSearchBar from '../../UI/CompactSearchBar'; import RemoveCircle from '../../UI/CustomSvgIcons/RemoveCircle'; import Lock from '../../UI/CustomSvgIcons/Lock'; import LockOpen from '../../UI/CustomSvgIcons/LockOpen'; +import RotateZ from '../../UI/CustomSvgIcons/RotateZ'; +import Layers from '../../UI/CustomSvgIcons/Layers'; import { toFixedWithoutTrailingZeros } from '../../Utils/Mathematics'; import ErrorBoundary from '../../UI/ErrorBoundary'; import useForceUpdate from '../../Utils/UseForceUpdate'; @@ -118,7 +120,7 @@ class InstancesList extends Component { y: toFixedWithoutTrailingZeros(instance.getY(), 2), angle: toFixedWithoutTrailingZeros(instance.getAngle(), 2), layer: instance.getLayer(), - zOrder: instance.getZOrder(), + zOrder: String(instance.getZOrder()), }); } }; @@ -325,7 +327,12 @@ class InstancesList extends Component { className={'tableColumn'} /> Angle} + label={ + + } dataKey="angle" width={Math.max( width * 0.1, @@ -334,7 +341,12 @@ class InstancesList extends Component { className={'tableColumn'} /> Layer} + label={ + + } dataKey="layer" width={Math.max(width * 0.2, minimumWidths.layerName)} className={'tableColumn'} From 456172cb86b97a57418a2f3cee677d7e5aec289b Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Thu, 7 May 2026 15:10:28 +0200 Subject: [PATCH 04/11] Highlight active sort column header in Instances List MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a custom headerRenderer to sortable columns in the Instances List table. The active sort column label now uses the primary text color (--theme-text-default-color) while inactive headers stay muted (--table-text-color-header). A directional arrow icon (ā†‘/ā†“) is shown next to the active column label to indicate sort direction. Chevrons were replaced (they are used for "open and close" while this use requires "direction"). New icon components added: - UI/CustomSvgIcons/SortArrowUp.js - UI/CustomSvgIcons/SortArrowDown.js --- .../InstancesEditor/InstancesList/index.js | 32 +++++++++++++++++++ .../src/UI/CustomSvgIcons/SortArrowDown.js | 11 +++++++ .../app/src/UI/CustomSvgIcons/SortArrowUp.js | 11 +++++++ 3 files changed, 54 insertions(+) create mode 100644 newIDE/app/src/UI/CustomSvgIcons/SortArrowDown.js create mode 100644 newIDE/app/src/UI/CustomSvgIcons/SortArrowUp.js diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index ffba8c52a5a5..3d0a9050a97b 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -16,6 +16,8 @@ import Lock from '../../UI/CustomSvgIcons/Lock'; import LockOpen from '../../UI/CustomSvgIcons/LockOpen'; import RotateZ from '../../UI/CustomSvgIcons/RotateZ'; import Layers from '../../UI/CustomSvgIcons/Layers'; +import SortArrowUp from '../../UI/CustomSvgIcons/SortArrowUp'; +import SortArrowDown from '../../UI/CustomSvgIcons/SortArrowDown'; import { toFixedWithoutTrailingZeros } from '../../Utils/Mathematics'; import ErrorBoundary from '../../UI/ErrorBoundary'; import useForceUpdate from '../../Utils/UseForceUpdate'; @@ -65,6 +67,30 @@ const compareStrings = (x: string, y: string, direction: number): number => { return 0; }; +const renderSortableHeader = ({ dataKey, label, sortBy, sortDirection }) => { + const isActive = dataKey === sortBy; + return ( + + {label} + {isActive && + (sortDirection === 'ASC' ? ( + + ) : ( + + ))} + + ); +}; + export type InstancesListInterface = {| forceUpdate: () => void, |}; @@ -298,6 +324,7 @@ class InstancesList extends Component { dataKey="name" width={Math.max(width * 0.35, minimumWidths.objectName)} className={'tableColumn'} + headerRenderer={renderSortableHeader} /> X} @@ -307,6 +334,7 @@ class InstancesList extends Component { minimumWidths.numberProperty )} className={'tableColumn'} + headerRenderer={renderSortableHeader} /> Y} @@ -316,6 +344,7 @@ class InstancesList extends Component { minimumWidths.numberProperty )} className={'tableColumn'} + headerRenderer={renderSortableHeader} /> Z} @@ -325,6 +354,7 @@ class InstancesList extends Component { minimumWidths.numberProperty )} className={'tableColumn'} + headerRenderer={renderSortableHeader} /> { minimumWidths.numberProperty )} className={'tableColumn'} + headerRenderer={renderSortableHeader} /> { dataKey="layer" width={Math.max(width * 0.2, minimumWidths.layerName)} className={'tableColumn'} + headerRenderer={renderSortableHeader} /> ( + + + +)); diff --git a/newIDE/app/src/UI/CustomSvgIcons/SortArrowUp.js b/newIDE/app/src/UI/CustomSvgIcons/SortArrowUp.js new file mode 100644 index 000000000000..e0a4eefc7a8c --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/SortArrowUp.js @@ -0,0 +1,11 @@ +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; + +export default React.memo(props => ( + + + +)); From 6509675fbb411fe9e774cc0425e0054b1e28dca6 Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Thu, 7 May 2026 15:35:16 +0200 Subject: [PATCH 05/11] Check fix --- .../app/src/InstancesEditor/InstancesList/index.js | 12 +++++++++++- newIDE/app/src/UI/Theme/Global/Table.css | 1 + 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index 3d0a9050a97b..c9fff5839669 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -67,7 +67,17 @@ const compareStrings = (x: string, y: string, direction: number): number => { return 0; }; -const renderSortableHeader = ({ dataKey, label, sortBy, sortDirection }) => { +const renderSortableHeader = ({ + dataKey, + label, + sortBy, + sortDirection, +}: { + dataKey: string, + label: React$Node, + sortBy: string, + sortDirection: string, +}) => { const isActive = dataKey === sortBy; return ( Date: Thu, 7 May 2026 16:26:11 +0200 Subject: [PATCH 06/11] Unify Instances List panel background colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reworks the visual appearance of the Instances List panel to remove inconsistent background colors and create a cohesive look with the rest of the panels: - Row backgrounds (odd and even) now use the primary window background color, removing the alternating stripe pattern - The column header row ("Object name, X, Y, Zā€¦") uses the toolbar surface color, visually grouping it with the search bar area - Adds a mosaic-editor-{panelName} class to mosaic windows, enabling per-panel CSS targeting - CSS rule for the Instances List panel body, keeping other panels unaffected --- newIDE/app/src/InstancesEditor/InstancesList/index.js | 6 ++++++ newIDE/app/src/UI/EditorMosaic/index.js | 1 + newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json | 4 ++-- newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json | 4 ++-- newIDE/app/src/UI/Theme/Global/Mosaic.css | 4 ++++ 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index c9fff5839669..b73217b27061 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -50,11 +50,13 @@ const styles = { flexDirection: 'column', alignItems: 'stretch', minWidth: 0, + backgroundColor: 'var(--theme-surface-toolbar-background-color)', }, tableContainer: { flex: 1, overflowX: 'auto', overflowY: 'hidden', + backgroundColor: 'var(--theme-surface-toolbar-background-color)', }, }; @@ -319,6 +321,10 @@ class InstancesList extends Component { height={height} className={`gd-table`} headerClassName={'tableHeaderColumn'} + headerStyle={{ + backgroundColor: + 'var(--theme-surface-toolbar-background-color)', + }} rowCount={this.renderedRows.length} rowGetter={this._rowGetter} rowHeight={32} diff --git a/newIDE/app/src/UI/EditorMosaic/index.js b/newIDE/app/src/UI/EditorMosaic/index.js index ef8bcc30bd56..c7fdafdf7ea5 100644 --- a/newIDE/app/src/UI/EditorMosaic/index.js +++ b/newIDE/app/src/UI/EditorMosaic/index.js @@ -514,6 +514,7 @@ const EditorMosaic: React.ComponentType<{ Date: Thu, 7 May 2026 16:44:16 +0200 Subject: [PATCH 07/11] Unify color instance selector Replacing old blue with branded purple to match the rest of the panels. --- newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json index f8c97fe810e7..9762d72df563 100644 --- a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json +++ b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json @@ -949,10 +949,12 @@ }, "selected": { "background-color": { - "value": "#4c92ff" + "value": "#ECE5FF", + "comment": "Palette/Purple/10" }, "color": { - "value": "#FFFFFF" + "value": "#1D1D26", + "comment": "Text/Primary" } } } From 0bea829f1bcc7d6c3dbb9a04af5d0b9ae76cdfbe Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Thu, 7 May 2026 16:58:26 +0200 Subject: [PATCH 08/11] Fixing color tokens Matching the text display (Light and Dark) to proper color tokens. --- .../InstancesEditor/InstancesList/index.js | 19 +++++++++++++------ .../src/UI/Theme/DefaultLightTheme/theme.json | 4 ++-- newIDE/app/src/UI/Theme/Global/Table.css | 3 +++ 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index b73217b27061..3c658aaebc6c 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -86,7 +86,7 @@ const renderSortableHeader = ({ style={{ color: isActive ? 'var(--theme-text-default-color)' - : 'var(--table-text-color-header)', + : 'var(--theme-text-secondary-color)', display: 'flex', alignItems: 'center', gap: 4, @@ -341,6 +341,13 @@ class InstancesList extends Component { width={Math.max(width * 0.35, minimumWidths.objectName)} className={'tableColumn'} headerRenderer={renderSortableHeader} + cellRenderer={({ cellData }) => ( + + {cellData} + + )} /> X} @@ -349,7 +356,7 @@ class InstancesList extends Component { width * 0.1, minimumWidths.numberProperty )} - className={'tableColumn'} + className={'tableColumn tableColumnSecondary'} headerRenderer={renderSortableHeader} /> { width * 0.1, minimumWidths.numberProperty )} - className={'tableColumn'} + className={'tableColumn tableColumnSecondary'} headerRenderer={renderSortableHeader} /> { width * 0.1, minimumWidths.numberProperty )} - className={'tableColumn'} + className={'tableColumn tableColumnSecondary'} headerRenderer={renderSortableHeader} /> { width * 0.1, minimumWidths.numberProperty )} - className={'tableColumn'} + className={'tableColumn tableColumnSecondary'} headerRenderer={renderSortableHeader} /> { } dataKey="layer" width={Math.max(width * 0.2, minimumWidths.layerName)} - className={'tableColumn'} + className={'tableColumn tableColumnSecondary'} headerRenderer={renderSortableHeader} /> Date: Thu, 7 May 2026 17:53:22 +0200 Subject: [PATCH 09/11] Fix code quality issues in Instances List visual redesign - Use --table-text-color-header for inactive sort column headers instead of --theme-text-secondary-color, which is too dark in light theme - Remove custom cellRenderer on Object name column that was overriding the selected-row text color and breaking row highlight consistency - Remove unused GDevelopThemeContext import and Consumer wrapper - Fix indentation left misaligned after Consumer removal --- .../InstancesEditor/InstancesList/index.js | 242 ++++++++---------- .../src/UI/Theme/DefaultLightTheme/theme.json | 4 +- newIDE/app/src/UI/Theme/Global/Mosaic.css | 2 +- newIDE/app/src/UI/Theme/Global/Table.css | 2 +- 4 files changed, 111 insertions(+), 139 deletions(-) diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index 3c658aaebc6c..9bf4e84b6c6d 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -9,7 +9,6 @@ import { } from 'react-virtualized'; import IconButton from '../../UI/IconButton'; import KeyboardShortcuts from '../../UI/KeyboardShortcuts'; -import GDevelopThemeContext from '../../UI/Theme/GDevelopThemeContext'; import CompactSearchBar from '../../UI/CompactSearchBar'; import RemoveCircle from '../../UI/CustomSvgIcons/RemoveCircle'; import Lock from '../../UI/CustomSvgIcons/Lock'; @@ -50,13 +49,13 @@ const styles = { flexDirection: 'column', alignItems: 'stretch', minWidth: 0, - backgroundColor: 'var(--theme-surface-toolbar-background-color)', + backgroundColor: 'var(--theme-surface-window-background-color)', }, tableContainer: { flex: 1, overflowX: 'auto', overflowY: 'hidden', - backgroundColor: 'var(--theme-surface-toolbar-background-color)', + backgroundColor: 'var(--table-row-odd-background-color)', }, }; @@ -76,7 +75,7 @@ const renderSortableHeader = ({ sortDirection, }: { dataKey: string, - label: React$Node, + label: React.Node, sortBy: string, sortDirection: string, }) => { @@ -86,7 +85,7 @@ const renderSortableHeader = ({ style={{ color: isActive ? 'var(--theme-text-default-color)' - : 'var(--theme-text-secondary-color)', + : 'var(--table-text-color-header)', display: 'flex', alignItems: 'center', gap: 4, @@ -290,139 +289,112 @@ class InstancesList extends Component { const tableKey = instances.ptr; return ( - - {gdevelopTheme => ( -
- - - - this.setState({ - searchText, - }) - } - onRequestSearch={this._selectFirstInstance} - placeholder={t`Search instances`} +
+ + + + this.setState({ + searchText, + }) + } + onRequestSearch={this._selectFirstInstance} + placeholder={t`Search instances`} + /> + + +
+ + {({ height, width }) => ( + (this.table = table)} + key={tableKey} + headerHeight={30} + height={height} + className={`gd-table`} + headerClassName={'tableHeaderColumn'} + headerStyle={{ + backgroundColor: 'var(--table-row-odd-background-color)', + }} + rowCount={this.renderedRows.length} + rowGetter={this._rowGetter} + rowHeight={32} + onRowClick={this._onRowClick} + rowClassName={this._rowClassName} + sort={this._sort} + sortBy={sortBy} + sortDirection={sortDirection} + width={Math.max(width, minimumWidths.table)} + > + Object name} + dataKey="name" + width={Math.max(width * 0.35, minimumWidths.objectName)} + className={'tableColumn'} + headerRenderer={renderSortableHeader} /> - - -
- - {({ height, width }) => ( - (this.table = table)} - key={tableKey} - headerHeight={30} - height={height} - className={`gd-table`} - headerClassName={'tableHeaderColumn'} - headerStyle={{ - backgroundColor: - 'var(--theme-surface-toolbar-background-color)', - }} - rowCount={this.renderedRows.length} - rowGetter={this._rowGetter} - rowHeight={32} - onRowClick={this._onRowClick} - rowClassName={this._rowClassName} - sort={this._sort} - sortBy={sortBy} - sortDirection={sortDirection} - width={Math.max(width, minimumWidths.table)} - > - Object name} - dataKey="name" - width={Math.max(width * 0.35, minimumWidths.objectName)} - className={'tableColumn'} - headerRenderer={renderSortableHeader} - cellRenderer={({ cellData }) => ( - - {cellData} - - )} - /> - X} - dataKey="x" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn tableColumnSecondary'} - headerRenderer={renderSortableHeader} - /> - Y} - dataKey="y" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn tableColumnSecondary'} - headerRenderer={renderSortableHeader} - /> - Z} - dataKey="zOrder" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn tableColumnSecondary'} - headerRenderer={renderSortableHeader} - /> - - } - dataKey="angle" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn tableColumnSecondary'} - headerRenderer={renderSortableHeader} - /> - - } - dataKey="layer" - width={Math.max(width * 0.2, minimumWidths.layerName)} - className={'tableColumn tableColumnSecondary'} - headerRenderer={renderSortableHeader} + X} + dataKey="x" + width={Math.max(width * 0.1, minimumWidths.numberProperty)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + Y} + dataKey="y" + width={Math.max(width * 0.1, minimumWidths.numberProperty)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + Z} + dataKey="zOrder" + width={Math.max(width * 0.1, minimumWidths.numberProperty)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + - + - - )} - -
-
- )} - + } + dataKey="layer" + width={Math.max(width * 0.2, minimumWidths.layerName)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + + + )} + +
+
); } } diff --git a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json index 053b276f57bc..07f671c2ce8f 100644 --- a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json +++ b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json @@ -908,8 +908,8 @@ "value": "#bbbbbb" }, "background-color": { - "value": "#FAFAFA", - "comment": "Palette/Grey/00" + "value": "#F5F5F7", + "comment": "Palette/Grey/10 - Background Primary" } }, "toolbar": { diff --git a/newIDE/app/src/UI/Theme/Global/Mosaic.css b/newIDE/app/src/UI/Theme/Global/Mosaic.css index 5f88a8db8010..cf512253d12d 100644 --- a/newIDE/app/src/UI/Theme/Global/Mosaic.css +++ b/newIDE/app/src/UI/Theme/Global/Mosaic.css @@ -28,7 +28,7 @@ } .mosaic-gd-theme .mosaic-editor-instances-list .mosaic-window-body { - background: var(--mosaic-toolbar-background-color) !important; + background: var(--theme-surface-window-background-color) !important; border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; } diff --git a/newIDE/app/src/UI/Theme/Global/Table.css b/newIDE/app/src/UI/Theme/Global/Table.css index 8be5341742d6..eca23531892f 100644 --- a/newIDE/app/src/UI/Theme/Global/Table.css +++ b/newIDE/app/src/UI/Theme/Global/Table.css @@ -33,7 +33,7 @@ } .gd-table .tableHeaderColumn { text-transform: none; - font-weight: 600; + font-weight: 400; font-size: 12px; color: var(--table-text-color-header); } From 360e53c67f348a0ee3983226e62cfe25d571e22a Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Tue, 12 May 2026 12:38:28 +0200 Subject: [PATCH 10/11] Adding hover effect Adding hover status to rows. --- newIDE/app/src/UI/Theme/Global/Table.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/newIDE/app/src/UI/Theme/Global/Table.css b/newIDE/app/src/UI/Theme/Global/Table.css index eca23531892f..a2d122f91304 100644 --- a/newIDE/app/src/UI/Theme/Global/Table.css +++ b/newIDE/app/src/UI/Theme/Global/Table.css @@ -31,6 +31,10 @@ background-color: var(--table-row-selected-background-color); /*OS X selection*/ color: var(--table-row-selected-color); } +.gd-table .tableEvenRow:hover, +.gd-table .tableOddRow:hover { + background-color: var(--theme-list-item-hover-background-color); +} .gd-table .tableHeaderColumn { text-transform: none; font-weight: 400; From a5d1914f2d02bc6a419b8669dafd395b1f239bb9 Mon Sep 17 00:00:00 2001 From: LuniMoon <103995399+LuniMoon@users.noreply.github.com> Date: Tue, 12 May 2026 12:51:45 +0200 Subject: [PATCH 11/11] Background color in Light Mode Tweaking background color in light mode to make "hover" state more visible. --- newIDE/app/src/UI/Theme/Global/Table.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/newIDE/app/src/UI/Theme/Global/Table.css b/newIDE/app/src/UI/Theme/Global/Table.css index a2d122f91304..d05dde841328 100644 --- a/newIDE/app/src/UI/Theme/Global/Table.css +++ b/newIDE/app/src/UI/Theme/Global/Table.css @@ -22,10 +22,10 @@ border-bottom: 1px solid var(--table-border-color); } .gd-table .tableOddRow { - background-color: var(--table-row-odd-background-color); + background-color: var(--theme-surface-canvas-background-color); } .gd-table .tableEvenRow { - background-color: var(--table-row-even-background-color); + background-color: var(--theme-surface-canvas-background-color); } .gd-table .tableSelectedRow { background-color: var(--table-row-selected-background-color); /*OS X selection*/