fix: code editor search box styling

This commit is contained in:
lohxt1 2024-10-30 16:54:55 +05:30
parent e8530a1022
commit 425c90b6eb
3 changed files with 24 additions and 17 deletions

View File

@ -75,6 +75,10 @@ const StyledWrapper = styled.div`
.cm-variable-invalid {
color: red;
}
.graphiql-container .CodeMirror-search-hint {
display: block;
}
`;
export default StyledWrapper;

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}

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;