extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-21 15:33:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3393 from lohxt1/fix/codeeditor-search-box

Browse Source 
fix: code editor styling fixes -- search box, folding marker
This commit is contained in:
lohit 2024-10-30 18:02:39 +05:30 committed by GitHub
commit fe2b45f9ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,9 @@ const StyledWrapper = styled.div`
.CodeMirror-foldmarker {
text-shadow: none;
color: ${(props) => props.theme.textLink};
background: none;
padding: 0;
margin: 0;
}
.CodeMirror-overlayscroll-horizontal div,
@ -75,6 +78,10 @@ const StyledWrapper = styled.div`
.cm-variable-invalid {
color: red;
}
.graphiql-container .CodeMirror-search-hint {
display: block;
}
`;
export default StyledWrapper;

2
packages/bruno-app/src/components/CodeEditor/index.js
View File

@ -339,7 +339,7 @@ export default class CodeEditor extends React.Component {
}
return (
<StyledWrapper
className="h-full w-full flex flex-col relative"
className="h-full w-full flex flex-col relative graphiql-container"
aria-label="Code Editor"
font={this.props.font}
fontSize={this.props.fontSize}

35
packages/bruno-app/src/styles/globals.css
View File

@ -23,23 +23,26 @@
--color-method-options: rgb(52 52 52);
--color-method-head: rgb(52 52 52);
}
*,.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal {
:root,.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal {
/* Required CSS variables after upgrading GraphiQL from v1.5.9 to v2.4.7 */
--color-primary: 0, 0%, 0% !important;
--color-secondary: 0, 0%, 0% !important;
--color-tertiary: 0, 0%, 0% !important;
--color-info: 0, 0%, 0% !important;
--color-success: 0, 0%, 0% !important;
--color-warning: 0, 0%, 0% !important;
--color-error: 0, 0%, 0% !important;
--color-neutral: 0, 0%, 0% !important;
--color-base: 0, 0%, 100% !important;
--alpha-secondary: .76;
--alpha-tertiary: .5;
--alpha-background-heavy: .15;
--alpha-background-medium: .1;
--alpha-background-light: .07;
/* Colors */
--color-primary: 320, 95%, 43%;
--color-secondary: 242, 51%, 61%;
--color-tertiary: 188, 100%, 36%;
--color-info: 208, 100%, 46%;
--color-success: 158, 60%, 42%;
--color-warning: 36, 100%, 41%;
--color-error: 13, 93%, 58%;
--color-neutral: 219, 28%, 32%;
--color-base: 219, 28%, 100%;
/* Color alpha values */
--alpha-secondary: 0.76;
--alpha-tertiary: 0.5;
--alpha-background-heavy: 0.15;
--alpha-background-medium: 0.1;
--alpha-background-light: 0.07;
--font-size-hint: .75rem;
--font-size-inline-code: .8125rem;
--font-size-body: .9375rem;