From 51e786c1f1f2c8bd9465e50d087e8adcb8c92d3f Mon Sep 17 00:00:00 2001 From: Zdroba <72391375+DariusZdroba@users.noreply.github.com> Date: Fri, 6 Dec 2024 16:57:09 +0200 Subject: [PATCH] refactor: remove unnecessary css (#560) * chore: removed unnecessary file and toggle code ignore * fix: lint * refactor: remove unneeded css and push to ls * chore: lint --- media/views/common/learn.scss | 25 ----- media/views/common/variables.scss | 2 - media/views/common/vscode.scss | 104 ------------------ media/views/common/webview.scss | 31 ------ .../featureSelection/featureSelection.scss | 19 ---- media/views/oss/suggestion/suggestion.scss | 18 --- .../snykCode/suggestion/suggestionLS.scss | 88 --------------- .../codeSuggestionWebviewProvider.ts | 2 +- 8 files changed, 1 insertion(+), 288 deletions(-) delete mode 100644 media/views/common/learn.scss delete mode 100644 media/views/common/variables.scss delete mode 100644 media/views/common/vscode.scss delete mode 100644 media/views/featureSelection/featureSelection.scss diff --git a/media/views/common/learn.scss b/media/views/common/learn.scss deleted file mode 100644 index 16ff34e50..000000000 --- a/media/views/common/learn.scss +++ /dev/null @@ -1,25 +0,0 @@ -.learn { - opacity: 0; - height: 0; - margin-top: 0; - color: var(--vscode-textLink-foreground); - font-size: 1.3rem; - - &.show { - margin-top: 6px; - opacity: 1; - height: auto; - transition-duration: 500ms; - transition-property: height, opacity, margin-top; - } - - &--link { - margin-left: 3px; - } - - &__code { - .learn--link { - color: var(--vscode-textLink-foreground); - } - } -} diff --git a/media/views/common/variables.scss b/media/views/common/variables.scss deleted file mode 100644 index 2ca88154b..000000000 --- a/media/views/common/variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$editor-background-color: rgba(0, 0, 0, 0.15); -$editor-font-color: #ccc; diff --git a/media/views/common/vscode.scss b/media/views/common/vscode.scss deleted file mode 100644 index 3f2edb61b..000000000 --- a/media/views/common/vscode.scss +++ /dev/null @@ -1,104 +0,0 @@ -/* - VS Code styles to reuse native views look and feel. Copied from: - https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/media/vscode.css -*/ - -:root { - --container-paddding: 20px; - --input-padding-vertical: 6px; - --input-padding-horizontal: 4px; - --input-margin-vertical: 4px; - --input-margin-horizontal: 0; - --button-padding-horizontal: 16px; - --button-padding-vertical: 6px; -} - -body { - padding: 0 var(--container-paddding); - color: var(--vscode-foreground); - font-weight: var(--vscode-font-weight); - font-family: var(--vscode-font-family); - background-color: var(--vscode-editor-background); -} - -ol, -ul { - padding-left: var(--container-paddding); -} - -body>*, -form>* { - margin-block-start: var(--input-margin-vertical); - margin-block-end: var(--input-margin-vertical); -} - -*:focus { - outline-color: var(--vscode-focusBorder) !important; -} - -p { - margin-top: 0; - margin-bottom: 2rem; -} - -a, -.link { - cursor: pointer; - color: var(--vscode-textLink-foreground); - fill: currentColor; -} - -a:hover, -a:active { - color: var(--vscode-textLink-activeForeground); -} - -code { - font-size: var(--vscode-editor-font-size); - font-family: var(--vscode-editor-font-family); -} - -button { - border: none; - padding: var(--button-padding-vertical) var(--button-padding-horizontal); - text-align: center; - outline: 1px solid transparent; - outline-offset: 2px !important; - color: var(--vscode-button-foreground); - background: var(--vscode-button-background); -} - -button:hover { - cursor: pointer; - background: var(--vscode-button-hoverBackground); -} - -button:focus { - outline-color: var(--vscode-focusBorder); -} - -button.secondary { - color: var(--vscode-button-secondaryForeground); - background: var(--vscode-button-secondaryBackground); -} - -button.secondary:hover { - background: var(--vscode-button-secondaryHoverBackground); -} - -input:not([type='checkbox']), -textarea { - display: block; - width: 100%; - border: none; - font-family: var(--vscode-font-family); - padding: var(--input-padding-vertical) var(--input-padding-horizontal); - color: var(--vscode-input-foreground); - outline-color: var(--vscode-input-border); - background-color: var(--vscode-input-background); -} - -input::placeholder, -textarea::placeholder { - color: var(--vscode-input-placeholderForeground); -} diff --git a/media/views/common/webview.scss b/media/views/common/webview.scss index f538de8d6..336d22eec 100644 --- a/media/views/common/webview.scss +++ b/media/views/common/webview.scss @@ -3,7 +3,6 @@ html { } body { - padding: 0; line-height: 1.5; } @@ -11,32 +10,6 @@ body * { box-sizing: border-box; } -h2, h3 { - margin-block-start: 0; - margin-block-end: 0.4rem; - text-transform: uppercase; -} - -a { - cursor: pointer; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -table { - width: 100%; - border-collapse: collapse; -} - -table td { - background: var(--vscode-editor-background); - border: 1px solid var(--vscode-button-border); - padding: 3px; -} - .font-light { opacity: 0.75; } @@ -66,10 +39,6 @@ table td { border-top: 1px solid rgba(255, 255, 255, 0.075); } -section { - padding: 20px; -} - .hidden { display: none !important; } diff --git a/media/views/featureSelection/featureSelection.scss b/media/views/featureSelection/featureSelection.scss deleted file mode 100644 index cc4cef76f..000000000 --- a/media/views/featureSelection/featureSelection.scss +++ /dev/null @@ -1,19 +0,0 @@ -body { - background-color: transparent; -} - -.welcome { - text-align: center; -} - -.avatar { - width: 62px; -} - -.checkbox { - display: block; -} - -button { - margin-block-start: 1em; -} diff --git a/media/views/oss/suggestion/suggestion.scss b/media/views/oss/suggestion/suggestion.scss index 882ffacc8..c282b4d5b 100644 --- a/media/views/oss/suggestion/suggestion.scss +++ b/media/views/oss/suggestion/suggestion.scss @@ -11,7 +11,6 @@ .vscode-light .dark-only { display: none; } - body { font-size: var(--vscode-editor-font-size); } @@ -20,23 +19,6 @@ h2 { font-size: 1.2rem; } -.delimiter { - border-right: 1px solid var(--vscode-input-border); -} - -.vulnerability-overview pre { - font-size: var(--vscode-editor-font-size); - font-family: var(--vscode-editor-font-family); - background-color: var(--vscode-editor-background); - border: 1px solid var(--vscode-input-border); -} - -.vulnerability-overview code { - color: var(--vscode-foreground); - font-size: var(--vscode-editor-font-size); - font-family: var(--vscode-editor-font-family); -} - /* High-contrast dark mode */ .vscode-high-contrast:not(.vscode-high-contrast-light) .vulnerability-overview code { color: var(--vscode-editor-background); diff --git a/media/views/snykCode/suggestion/suggestionLS.scss b/media/views/snykCode/suggestion/suggestionLS.scss index be802f0e0..3173b442e 100644 --- a/media/views/snykCode/suggestion/suggestionLS.scss +++ b/media/views/snykCode/suggestion/suggestionLS.scss @@ -1,76 +1,10 @@ -@import '../../common/vscode'; @import '../../common/webview'; -body { - position: relative; - display: inline-flex; - flex-direction: column; - width: 100%; - height: 100%; - margin: 0; -} - -.severity-title { - font-weight: 500; - line-height: 2.4rem; - text-transform: capitalize; -} - -.data-flow-clickable-row { - color: var(--vscode-textLink-foreground); -} - -.tab-item { - color: var(--vscode-panelTitle-inactiveForeground); - border-bottom: 1px solid transparent; -} - -.tab-item-icon path { - fill: var(--vscode-foreground); -} - -.tab-item.is-selected { - color: var(--vscode-foreground); - border-bottom: 3px solid var(--vscode-focusBorder); -} - -.ignore-details-header, -.data-flow-header, -.ai-fix-header, -.example-fixes-header { - text-transform: uppercase; -} - -.data-flow-number, -.data-flow-clickable-row, -.data-flow-delimiter, -.data-flow-text { - background-color: transparent; - border-color: transparent; - padding-top: 0px; - padding-bottom: 0px; -} .data-flow-text { font-family: "Courier New", Courier, monospace; } -.ignore-details-tab, -.fix-analysis-tab, -.vuln-overview-tab { - text-transform: uppercase; -} - -.example { - border: 1px solid var(--vscode-input-border); - background-color: var(--vscode-editor-background); -} - -.example-line-number, -.example-line > code { - color: var(--vscode-editor-foreground); -} - .example-line > code { font-family: "Courier New", Courier, monospace; } @@ -114,28 +48,6 @@ body { color: #fff; } -.ignore-action-container { - background-color: var(--vscode-editor-background); - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075)); - box-shadow: 0 -1px 3px rgba(0, 0, 0, .05); - border-top: 1px solid var(--vscode-input-border); -} - -.ignore-button.secondary { - border: 1px solid var(--vscode-textLink-foreground); - color: var(--vscode-textLink-foreground); -} - -.ignore-button.secondary:hover, -.ignore-button.secondary:active { - background: var(--vscode-button-hoverBackground); - border-color: var(--vscode-button-hoverBackground); - color: var(--vscode-button-foreground); -} - -.sn-fix-wrapper { - background-color: var(--vscode-editor-background); -} .vscode-dark .light-only, .vscode-high-contrast:not(.vscode-high-contrast-light) .light-only { diff --git a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts index 206a9d477..08e470f52 100644 --- a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts +++ b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts @@ -147,7 +147,7 @@ export class CodeSuggestionWebviewProvider html = html.replace('${ideScript}', ''); const nonce = getNonce(); html = html.replaceAll('${nonce}', nonce); - + html = html.replace('--default-font: ', '--default-font: var(--vscode-font-family) ,'); this.panel.webview.html = html; void this.postSuggestMessage({ type: 'set', args: this.mapToModel(issue) }); void this.postLearnLessonMessage(issue);