From dc0e557d981ec4ab1c5633d0ee1d386d16451dc2 Mon Sep 17 00:00:00 2001 From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com> Date: Sun, 24 May 2026 16:10:13 +0300 Subject: [PATCH 1/3] fix(1022): Elements modal dark mode fix --- .../Flow/EdgeTypes/ApiElementsPanel.scss | 73 +++++++++++++++++-- .../Flow/EdgeTypes/ApiElementsPanel.tsx | 21 ++---- 2 files changed, 71 insertions(+), 23 deletions(-) diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss index 7cfd7a3a..0cc26866 100644 --- a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss +++ b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss @@ -1,10 +1,16 @@ -.api-elements-search::placeholder { - font-family: 'Roboto', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 24px; - color: #9799a4; +.api-elements-search { + background: #ffffff; + border: 1px solid #9799a4; + color: #09090b; + + &::placeholder { + font-family: 'Roboto', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #9799a4; + } } .api-elements-panel { @@ -12,6 +18,11 @@ border-collapse: separate; border-spacing: 0 4px; + thead th { + background: #f0f0f2; + border-bottom: 1px solid #d2d3d8; + } + tbody tr td { background: #e7f0f6; border-top: 1px solid #b9d2e5; @@ -34,4 +45,52 @@ background: #d4e6f1; } } + + .data-table__pagination-wrapper { + background: #ffffff; + box-shadow: 0px -1px 0px #5d6071; + } + + &__action-btn { + color: #555867; + } +} + +[data-theme='dark'] { + .api-elements-search { + background: var(--dark-bg-extra-light); + border-color: var(--dark-text-border); + color: var(--dark-text-primary); + + &::placeholder { + color: var(--dark-text-disabled); + } + } + + .api-elements-panel { + .data-table thead th { + background: var(--dark-bg-light); + border-bottom: 1px solid var(--dark-text-border); + color: var(--dark-text-primary); + } + + .data-table tbody tr td { + background: var(--dark-bg-secondary); + border-color: var(--dark-text-border); + color: var(--dark-text-secondary); + } + + .data-table tbody tr:hover td { + background: var(--dark-bg-light); + } + + .data-table__pagination-wrapper { + background: var(--dark-bg-highlight); + box-shadow: 0px -1px 0px var(--dark-text-border); + } + + &__action-btn { + color: var(--dark-text-secondary); + } + } } diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx index 0bfb5be0..e938f9ee 100644 --- a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx +++ b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx @@ -179,14 +179,11 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => minWidth: 0, height: 40, padding: '4px 8px', - background: '#FFFFFF', - border: '1px solid #9799A4', borderRadius: 4, fontFamily: "'Roboto', sans-serif", fontSize: 16, fontWeight: 400, lineHeight: '24px', - color: '#09090b', outline: 'none', boxSizing: 'border-box', }} @@ -225,14 +222,12 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => style={{ tableLayout: 'fixed', width: '100%', borderCollapse: 'separate', borderSpacing: '0 4px' }} > - + handleSort('name')} style={{ cursor: 'pointer', userSelect: 'none', - background: '#F0F0F2', - borderBottom: '1px solid #D2D3D8', }} > {' '} @@ -245,8 +240,6 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => userSelect: 'none', width: 90, textAlign: 'center', - background: '#F0F0F2', - borderBottom: '1px solid #D2D3D8', }} > {' '} @@ -259,15 +252,13 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => userSelect: 'none', width: 100, textAlign: 'center', - background: '#F0F0F2', - borderBottom: '1px solid #D2D3D8', whiteSpace: 'nowrap', }} > {' '} {t('apiRegistry.columns.schema')} - + @@ -339,6 +330,7 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => useToastStore.getState().error({ title: t('global.notificationError') }); }); }} + className="api-elements-panel__action-btn" style={{ background: 'none', border: 'none', @@ -346,7 +338,6 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => padding: 6, opacity: isTesting ? 0.4 : 1, lineHeight: 1, - color: '#555867', fontSize: 18, display: 'flex', }} @@ -360,13 +351,13 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => e.stopPropagation(); setEditingEndpoint(endpoint); }} + className="api-elements-panel__action-btn" style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 6, lineHeight: 1, - color: '#555867', fontSize: 18, display: 'flex', }} @@ -380,13 +371,13 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => e.stopPropagation(); setDeletingEndpoint(endpoint); }} + className="api-elements-panel__action-btn" style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 6, lineHeight: 1, - color: '#555867', fontSize: 18, display: 'flex', }} @@ -405,8 +396,6 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) =>
Date: Sun, 24 May 2026 16:27:20 +0300 Subject: [PATCH 2/3] fix(1022): Fixed border spacing in api elements --- GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss | 3 +-- GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss index 0cc26866..0a94264b 100644 --- a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss +++ b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss @@ -27,8 +27,7 @@ background: #e7f0f6; border-top: 1px solid #b9d2e5; border-bottom: 1px solid #b9d2e5 !important; - height: 40px; - padding: 0 10px; + padding: 8px 10px; } tbody tr td:first-child { diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx index e938f9ee..2d2d8b6c 100644 --- a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx +++ b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx @@ -219,7 +219,7 @@ const ApiElementsPanel: React.FC = ({ onAddToCanvas }) => > From 92460fb2a842cb50c37b4de540008a490a942755 Mon Sep 17 00:00:00 2001 From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com> Date: Sun, 24 May 2026 18:05:18 +0300 Subject: [PATCH 3/3] chore(1022): changed data table padding --- GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss index 0a94264b..3689ab3a 100644 --- a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss +++ b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss @@ -17,6 +17,7 @@ .data-table { border-collapse: separate; border-spacing: 0 4px; + padding: 0px 15px; thead th { background: #f0f0f2;