rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-01 00:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: update CodeMirror bracket highlighting in StyledWrapper components (#7596)

Browse Source 
- Enhanced the styling for matching and non-matching brackets in CodeMirror across multiple StyledWrapper components.
- Updated background and text colors to align with the theme for better visibility and user experience.
This commit is contained in:
Abhishek S Lal
2026-03-27 18:13:08 +05:30
committed by GitHub
parent bbf3cb8dd3
commit 708e88241f
3 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
View File

@@ -61,6 +61,17 @@ const StyledWrapper = styled.div`
.cm-variable-invalid {
color: ${(props) => props.theme.codemirror.variable.invalid};
}
.CodeMirror-matchingbracket {
background: ${(props) => props.theme.status.success.background} !important;
text-decoration: unset;
}
.CodeMirror-nonmatchingbracket {
color: ${(props) => props.theme.colors.text.danger} !important;
background: ${(props) => props.theme.status.danger.background} !important;
text-decoration: unset;
}
`;
export default StyledWrapper;

10
packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
View File

@@ -151,8 +151,14 @@ const StyledWrapper = styled.div`
//matching bracket fix
.CodeMirror-matchingbracket {
background: #5cc0b48c !important;
text-decoration:unset;
background: ${(props) => props.theme.status.success.background} !important;
text-decoration: unset;
}
.CodeMirror-nonmatchingbracket {
color: ${(props) => props.theme.colors.text.danger} !important;
background: ${(props) => props.theme.status.danger.background} !important;
text-decoration: unset;
}
.cm-search-line-highlight {

11
packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
View File

@@ -67,6 +67,17 @@ const StyledWrapper = styled.div`
}
.CodeMirror-matchingbracket {
background: ${(props) => props.theme.status.success.background} !important;
text-decoration: unset;
}
.CodeMirror-nonmatchingbracket {
color: ${(props) => props.theme.colors.text.danger} !important;
background: ${(props) => props.theme.status.danger.background} !important;
text-decoration: unset;
}
.CodeMirror-search-hint {
display: inline;
}