diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/Components/Row.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/Components/Row.jsx index ca8396875b..4cc61fd1a4 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/Components/Row.jsx +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/Components/Row.jsx @@ -82,7 +82,7 @@ const Row = ({ label, value, level = 1, absolutePath }) => { }} className="json-viewer-action-icon" > - + diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/styles.scss b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/styles.scss index b44967c39d..4121cc0e4f 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/styles.scss +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/CustomJSONViewer/styles.scss @@ -50,7 +50,6 @@ .json-viewer-actions-container { display:none; margin-left: auto; - margin-right: 4px; height: 12px; width:40px; align-items: center; diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/DefaultCopyIcon.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/DefaultCopyIcon.jsx index 6d26f2676b..c71b8ad5c3 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/DefaultCopyIcon.jsx +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/DefaultCopyIcon.jsx @@ -1,11 +1,11 @@ import React from 'react'; -export const DefaultCopyIcon = ({ height = 12, width = 12 }) => ( +export const DefaultCopyIcon = ({ height = 12, width = 12, fill = '#6A727C' }) => ( @@ -13,7 +13,7 @@ export const DefaultCopyIcon = ({ height = 12, width = 12 }) => ( fillRule="evenodd" clipRule="evenodd" d="M19.3113 4.68871C18.5834 3.9609 17.4034 3.9609 16.6757 4.68871L15.8421 5.5223C15.4237 5.94071 14.7453 5.94071 14.3269 5.5223C13.9084 5.10389 13.9084 4.42549 14.3269 4.00707L15.1605 3.17348C16.7251 1.60884 19.2619 1.60884 20.8266 3.17348C22.3911 4.73811 22.3911 7.2749 20.8266 8.83954L19.9929 9.67313C19.5746 10.0916 18.8961 10.0916 18.4777 9.67313C18.0593 9.25471 18.0593 8.57633 18.4777 8.1579L19.3113 7.32431C20.0391 6.59651 20.0391 5.41651 19.3113 4.68871ZM17.406 6.59394C17.8244 7.01236 17.8244 7.69074 17.406 8.10917L15.1982 10.317C14.7798 10.7354 14.1014 10.7354 13.683 10.317C13.2645 9.89856 13.2645 9.22017 13.683 8.80174L15.8908 6.59394C16.3091 6.17551 16.9876 6.17551 17.406 6.59394ZM12.6651 7.184C13.0835 7.60241 13.0835 8.28081 12.6651 8.69923L11.8315 9.53283C11.1037 10.2606 11.1037 11.4406 11.8315 12.1684C12.5593 12.8962 13.7393 12.8962 14.4671 12.1684L15.3007 11.3348C15.7191 10.9164 16.3974 10.9164 16.8159 11.3348C17.2343 11.7533 17.2343 12.4316 16.8159 12.8501L15.9823 13.6837C14.4177 15.2483 11.8809 15.2483 10.3162 13.6837C8.75161 12.119 8.75161 9.58223 10.3162 8.0176L11.1498 7.184C11.5683 6.76559 12.2467 6.76559 12.6651 7.184ZM17.245 14.9463C14.983 17.2083 11.3156 17.2083 9.05356 14.9463C6.79156 12.6843 6.79156 9.01691 9.05356 6.7549L9.52276 6.28571H4.14286C2.95939 6.28571 2 7.2451 2 8.42857V19.8571C2 21.0406 2.95939 22 4.14286 22H15.5714C16.7549 22 17.7143 21.0406 17.7143 19.8571V14.4771L17.245 14.9463Z" - fill={'#C1C8CD'} + fill={'fill'} /> ); diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx index a2a4cebf80..6c5f1daad0 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/HiddenOptions.jsx @@ -54,7 +54,7 @@ export const HiddenOptions = (props) => { dispatchAction(data); }} > - + @@ -89,7 +89,7 @@ export const HiddenOptions = (props) => { }} className="option" > - + Copy path
{ }} className="option" > - + Copy value
@@ -120,7 +120,7 @@ export const HiddenOptions = (props) => { ...(showMenu && { backgroundColor: 'var(--button-outline-pressed, rgba(136, 144, 153, 0.18)' }), }} > - + diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx index 86dffbf180..bd7143ee9d 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx @@ -100,6 +100,8 @@ export const Node = (props) => { alignItems: 'center', color: level === 1 ? 'var(--text-placeholder, #6A727C)' : 'var(--text-default, #1B1F24)', fontWeight: level === 1 ? 500 : 400, + marginTop: level === 1 ? 4 : 0, + marginBottom: level === 1 ? 4 : 0, // borderLeft: level > 1 ? '1px solid var(--slate6, #D7DBDF)' : 'none', }} > @@ -136,12 +138,13 @@ export const Node = (props) => { /> -
+
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx index 6d6951279e..bb5c6c486f 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/TreeViewHeader.jsx @@ -55,7 +55,7 @@ export const TreeViewHeader = (props) => { }} className="option" > - + Copy path
{ }} className="option" > - + Copy value
{nodeSpecificActions?.map((actionOption, index) => { - const { name, icon, src, iconName, dispatchAction, width = 12, height = 12 } = actionOption; + const { name, icon, src, iconName, dispatchAction, width = 16, height = 16 } = actionOption; if (icon) { return (
@@ -85,7 +85,7 @@ export const TreeViewHeader = (props) => { }} className="option" > - + {name}
@@ -141,7 +141,7 @@ export const TreeViewHeader = (props) => { boxShadow: 'none', }} > - + diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js index 3b256afc2a..1c4685b585 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js @@ -67,7 +67,7 @@ const useCallbackActions = () => { name: 'Run Query', dispatchAction: handleRunQuery, icon: true, - src: 'assets/images/icons/editor/play.svg', + iconName: 'play01', width: 8, height: 8, enableInspectorTreeView: false, @@ -76,7 +76,7 @@ const useCallbackActions = () => { name: 'View query', dispatchAction: selectQuery, icon: true, - src: 'assets/images/icons/editor/file-code.svg', + iconName: 'file-code', width: 14, height: 14, enableInspectorTreeView: true, @@ -99,7 +99,7 @@ const useCallbackActions = () => { name: 'Go to component', dispatchAction: handleAutoScrollToComponent, icon: true, - iconName: 'select', + iconName: 'corners', enableInspectorTreeView: true, }, ...(!shouldFreeze diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index 03d5f363a9..2009a3097b 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -18938,7 +18938,7 @@ section.ai-message-prompt-input-wrapper { .node-expansion-icon { width:20px; height:20px; - margin-right: 2px; + margin-right: 4px; display: flex; align-items: center; justify-content: center; @@ -18977,7 +18977,6 @@ section.ai-message-prompt-input-wrapper { .node-content { display: flex; align-items: center; - padding: 0px 0px 0px 8px; height: 100%; width: 100%; @@ -19090,7 +19089,6 @@ section.ai-message-prompt-input-wrapper { height: 20px; width: 20px; border-radius: 4px; - margin-right:4px; flex-shrink: 0; &:hover { @@ -19118,7 +19116,7 @@ section.ai-message-prompt-input-wrapper { .copy-menu-options{ width: 144px; border: none; - background: transparent; + background-color: var(--background-surface-layer-01); border-radius: 10px; top: -5px !important; &.dark-theme { diff --git a/frontend/src/_ui/Icon/solidIcons/Corners.jsx b/frontend/src/_ui/Icon/solidIcons/Corners.jsx new file mode 100644 index 0000000000..72ca376981 --- /dev/null +++ b/frontend/src/_ui/Icon/solidIcons/Corners.jsx @@ -0,0 +1,25 @@ +import React from 'react'; + +const Corners = ({ style, fill = '#C1C8CD', width = '12', height = '13', className = '', viewBox = '0 0 12 13' }) => ( + + + + + +); + +export default Corners; diff --git a/frontend/src/_ui/Icon/solidIcons/FileCode.jsx b/frontend/src/_ui/Icon/solidIcons/FileCode.jsx new file mode 100644 index 0000000000..ed1f3268c9 --- /dev/null +++ b/frontend/src/_ui/Icon/solidIcons/FileCode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; + +const FileCode = ({ style, fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 12 12' }) => ( + + + + + +); + +export default FileCode; diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js index 5daa4b7c91..8b643b5b65 100644 --- a/frontend/src/_ui/Icon/solidIcons/index.js +++ b/frontend/src/_ui/Icon/solidIcons/index.js @@ -234,6 +234,8 @@ import NewTabSmall from './NewTabSmall.jsx'; import Code from './Code.jsx'; import WorkflowV3 from './WorkflowV3.jsx'; import WorkspaceV3 from './WorkspaceV3.jsx'; +import FileCode from './FileCode.jsx'; +import Corners from './Corners.jsx'; const Icon = (props) => { switch (props.name) { @@ -369,6 +371,8 @@ const Icon = (props) => { return ; case 'expand': return ; + case 'file-code': + return ; case 'file01': return ; case 'filedownload': @@ -531,6 +535,8 @@ const Icon = (props) => { return ; case 'comments': return ; + case 'corners': + return ; case 'share': return ; case 'shield':