From 59108472a2607b255c6b983377f43ad27de716d7 Mon Sep 17 00:00:00 2001 From: lohit Date: Wed, 20 Nov 2024 03:35:55 +0530 Subject: [PATCH] fix: codemirror styling updates (#3439) --- .../components/CodeEditor/StyledWrapper.js | 14 +++ .../RequestPane/QueryEditor/StyledWrapper.js | 8 ++ packages/bruno-app/src/globalStyles.js | 2 +- packages/bruno-app/src/styles/globals.css | 95 +++++++++++++++---- 4 files changed, 100 insertions(+), 19 deletions(-) diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js index 7eba2bc1f..edcee4cd9 100644 --- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js @@ -26,6 +26,12 @@ const StyledWrapper = styled.div` .CodeMirror-dialog { overflow: visible; + input { + background: transparent; + border: 1px solid #d3d6db; + outline: none; + border-radius: 0px; + } } #search-results-count { @@ -82,6 +88,14 @@ const StyledWrapper = styled.div` .CodeMirror-search-hint { display: inline; } + + .cm-s-default span.cm-property { + color: #1f61a0 !important; + } + + .cm-s-default span.cm-variable { + color: #397d13 !important; + } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js index 6ea15877d..57b8d4987 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js @@ -54,6 +54,14 @@ const StyledWrapper = styled.div` .CodeMirror-search-hint { display: inline; } + + .cm-s-default span.cm-property { + color: #1f61a0 !important; + } + + .cm-s-default span.cm-variable { + color: #397d13 !important; + } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js index 30f264ab1..c63f23c17 100644 --- a/packages/bruno-app/src/globalStyles.js +++ b/packages/bruno-app/src/globalStyles.js @@ -233,7 +233,7 @@ const GlobalStyle = createGlobalStyle` } .CodeMirror-hint-active { - background: #89f !important; + background: #08f !important; color: #fff !important; } `; diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css index cf132dcd9..c50d11824 100644 --- a/packages/bruno-app/src/styles/globals.css +++ b/packages/bruno-app/src/styles/globals.css @@ -23,18 +23,19 @@ --color-method-options: rgb(52 52 52); --color-method-head: rgb(52 52 52); } + :root,.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal { /* Required CSS variables after upgrading GraphiQL from v1.5.9 to v2.4.7 */ /* Colors */ - --color-primary: 320, 95%, 43% !important; - --color-secondary: 242, 51%, 61% !important; - --color-tertiary: 188, 100%, 36% !important; - --color-info: 208, 100%, 46% !important; - --color-success: 158, 60%, 42% !important; - --color-warning: 36, 100%, 41% !important; - --color-error: 13, 93%, 58% !important; - --color-neutral: 219, 28%, 32% !important; - --color-base: 219, 28%, 100% !important; + --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; /* Color alpha values */ --alpha-secondary: 0.76 !important; @@ -43,6 +44,59 @@ --alpha-background-medium: 0.1 !important; --alpha-background-light: 0.07 !important; + --font-family: Consolas,Inconsolata,Droid Sans Mono,Monaco,monospace; + --font-family-mono: 'Fira Code', monospace; + --font-size-hint: .75rem; + --font-size-inline-code: .8125rem; + --font-size-body: .8rem; + --font-size-h4: 1.125rem; + --font-size-h3: 1.375rem; + --font-size-h2: 1.8125rem; + --font-weight-regular: 400; + --font-weight-medium: 500; + --line-height: 1.5; + --px-2: 0px; + --px-4: 0px; + --px-6: 2px; + --px-8: 8px; + --px-10: 10px; + --px-12: 12px; + --px-16: 16px; + --px-20: 20px; + --px-24: 24px; + --border-radius-2: 0px !important; + --border-radius-4: 0px !important; + --border-radius-8: 0px !important; + --border-radius-12: 0px !important; + --popover-box-shadow: 0px 0px 1px #000 !important; + --popover-border: none; + --sidebar-width: 60px; + --toolbar-width: 40px; + --session-header-height: 51px +} + +/* Required CSS variables after upgrading GraphiQL from v1.5.9 to v2.4.7 */ +.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal { + /* General Colors */ + --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-base: 0, 0%, 100% !important; + --color-neutral: 0, 0%, 60% !important; + + /* Color alpha values */ + --alpha-secondary: 0.76 !important; + --alpha-tertiary: 0.5 !important; + --alpha-background-heavy: 0.15 !important; + --alpha-background-medium: 0.1 !important; + --alpha-background-light: 0.07 !important; + + --font-family: Consolas,Inconsolata,Droid Sans Mono,Monaco,monospace; + --font-family-mono: 'Fira Code', monospace; --font-size-hint: .75rem; --font-size-inline-code: .8125rem; --font-size-body: .9375rem; @@ -52,15 +106,15 @@ --font-weight-regular: 400; --font-weight-medium: 500; --line-height: 1.5; - --px-2: 2px; - --px-4: 4px; - --px-6: 6px; - --px-8: 8px; - --px-10: 10px; - --px-12: 12px; - --px-16: 16px; - --px-20: 20px; - --px-24: 24px; + --px-2: 2px !important; + --px-4: 4px !important; + --px-6: 6px !important; + --px-8: 8px !important; + --px-10: 10px !important; + --px-12: 12px !important; + --px-16: 16px !important; + --px-20: 20px !important; + --px-24: 24px !important; --border-radius-2: 2px !important; --border-radius-4: 2px !important; --border-radius-8: 2px !important; @@ -72,6 +126,11 @@ --session-header-height: 51px } +.CodeMirror-dialog { + --px-4: 0px !important; + --px-12: 2px !important; +} + html, body { margin: 0;