feat: improve the CSS for the OSS suggestion panel [IDE-285] (#570)

snyk · Jul 10, 2024 · e7f5205 · e7f5205
1 parent ab77918
commit e7f5205
Showing 1 changed file with 72 additions and 10 deletions.
diff --git a/infrastructure/oss/template/details.html b/infrastructure/oss/template/details.html
@@ -23,6 +23,46 @@
         content="default-src 'self' ${cspSource}; style-src 'self' 'nonce-${nonce}' ${cspSource}; script-src 'nonce-${nonce}' ${cspSource};">
 
   <style nonce="${nonce}">
+    :root {
+      --default-font: "SF Pro Text", "Segoe UI", "Ubuntu", Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #595a5c;
+    }
+
+    body {
+      font-family: var(--default-font);
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    h2 {
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+
+    section {
+      padding: 0px 20px 5px 20px;
+    }
+
+    .styled-link {
+      text-decoration: none;
+    }
+
+    .styled-link:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
     .suggestion {
       position: relative;
       display: flex;
@@ -32,7 +72,6 @@
     }
 
     .suggestion .suggestion-text {
-      padding: 0.4rem 0;
       margin-bottom: 0.8rem;
       font-size: 1.8rem;
       font-weight: 500;
@@ -59,25 +98,48 @@
       height: 16px;
     }
 
-    .identifiers {
-      font-size: 1.3rem;
-      line-height: 2rem;
+    .clickable:hover {
+      cursor: pointer;
+    }
+
+    .delimiter {
+      width: 0;
+      height: 1.3rem;
+      margin: 0 0.8rem 0 0.8rem;
+      line-height: 1rem;
+    }
+
+    .summary .summary-item {
+      display: flex;
+      margin: 0.3em 0 0.3em 0;
+    }
+
+    .summary .label {
+      width: 160px;
+    }
+
+    .summary .content {
+      flex: 70%;
+    }
+
+    .summary .remediation {
+      margin-bottom: 1.6rem
     }
 
-    /*TODO: move to vscode*/
-    .vscode-dark .light-only {
-      display: none;
+    .summary .detailed-path:last-child .remediation {
+      margin-bottom: 0
     }
 
-    .vscode-light .dark-only {
-      display: none;
+    .vulnerability-overview pre {
+      padding: 8px 16px;
+      overflow-x: auto;
+      border-radius: 4px;
     }
 
     .learn {
       opacity: 0;
       height: 0;
       margin-top: 0;
-      font-size: 1.3rem;
     }
 
     .learn.show {