feat: Improve issue panels and overall UI/UX

CHANGELOG.md

@@ -1,7 +1,16 @@
 # Snyk Security - Code and Open Source Dependencies Changelog
 
-## [1.23.2]
+## [1.25.1]
+
+### Changed
+
+- Improved UI: updated issue details panels, used vscode colors where possible, new meta section for Code
+- Optimized messages in the UI
+
+## [1.24.1]
+
 ### Fixed
+
 - Removed false positives feature flag
 - View management: show accurate information during startup of the plugin
 

media/views/common/learn.scss

@@ -2,6 +2,8 @@
   opacity: 0;
   height: 0;
   margin-top: 0;
+  color: var(--vscode-textLink-foreground);
+  font-size: 1.3rem;
 
   &.show {
     margin-top: 6px;
@@ -17,7 +19,7 @@
 
   &__code {
     .learn--link {
-      color: var(--vscode-foreground);
+      color: var(--vscode-textLink-foreground);
     }
   }
 }

media/views/common/suggestionHeader.scss

@@ -7,10 +7,11 @@
 }
 
 .suggestion .suggestion-text {
-  margin-bottom: 1rem;
-  margin-top: 0.2em;
-  font-size: 1.6rem;
-  line-height: 1.6;
+  padding: 0.4rem 0;
+  margin-bottom: 0.8rem;
+  font-size: 1.8rem;
+  font-weight: 500;
+  line-height: 2.4rem;
 }
 
 .severity {
@@ -29,12 +30,13 @@
 
 .icon {
   vertical-align: middle;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .identifiers {
-  font-size: 1em;
+  font-size: 1.3rem;
+  line-height: 2rem;
 }
 
 .vscode-dark .light-only {

media/views/common/webview.scss

@@ -5,42 +5,60 @@ html {
 
 body {
   padding: 0;
-  font-size: 1.4rem;
   line-height: 1.5;
 }
 
 body * {
   box-sizing: border-box;
 }
 
-h2 {
-  font-size: 1em;
+h2, h3 {
+  font-size: 1.1rem;
   margin-block-start: 0;
+  margin-block-end: 0.4rem;
+  font-weight: 700;
+  text-transform: uppercase;
 }
 
 a {
   cursor: pointer;
-  color: #7c74f2;
   text-decoration: none;
 }
 
 a:hover {
-  color: #7c74f2;
   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;
 }
 
 .vscode-light {
-  background-color: rgba(0, 0, 0, 0.05);
   border-right: 1px solid rgba(0, 0, 0, 0.05);
+  padding: 0;
+}
+
+.suggestion--header {
+  background-image: linear-gradient(0, transparent, var(--vscode-tab-activeBackground));
 }
 
 .vscode-dark {
   background-color: rgba(255, 255, 255, 0.075);
-  border-right: 1px solid rgba(255, 255, 255, 0.075);
+}
+
+.vscode-light {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .vscode-light .delimiter-top {

media/views/oss/suggestion/suggestion.scss

@@ -6,7 +6,11 @@
 }
 
 .delimiter {
-  margin: 0 0.2em 0 0.2em;
+  width: 0;
+  height: 1.3rem;
+  margin: 0 0.8rem 0 0.8rem;
+  border-right:1px solid var(--vscode-input-border);
+  line-height: 1rem;
 }
 
 .summary .summary-item {
@@ -15,13 +19,33 @@
 }
 
 .summary .label {
-  flex: 30%;
+  width: 160px;
 }
 
 .summary .content {
   flex: 70%;
 }
 
-.path {
-  margin-bottom: 0.75em;
+.summary .remediation {
+  margin-bottom: 1.6rem
 }
+
+.summary .detailed-path:last-child .remediation {
+  margin-bottom: 0
+}
+
+.vulnerability-overview pre {
+  padding: 8px 16px;
+  overflow-x: auto;
+  border-radius: 4px;
+  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);
+}