more styling touchups

dashboard/package-lock.json

@@ -103,6 +103,7 @@
         "@types/react-modal": "^3.10.6",
         "@types/react-router": "^5.1.8",
         "@types/react-router-dom": "^5.1.5",
+        "@types/react-syntax-highlighter": "^15.5.6",
         "@types/react-table": "^7.7.1",
         "@types/semver": "^7.3.5",
         "@types/styled-components": "^5.1.3",
@@ -2657,6 +2658,15 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.6.tgz",
+      "integrity": "sha512-i7wFuLbIAFlabTeD2I1cLjEOrG/xdMa/rpx2zwzAoGHuXJDhSqp9BSfDlMHSh9JSuNfxHk9eEmMX6D55GiyjGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-table": {
       "version": "7.7.8",
       "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.8.tgz",
@@ -16133,6 +16143,15 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-syntax-highlighter": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.6.tgz",
+      "integrity": "sha512-i7wFuLbIAFlabTeD2I1cLjEOrG/xdMa/rpx2zwzAoGHuXJDhSqp9BSfDlMHSh9JSuNfxHk9eEmMX6D55GiyjGg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-table": {
       "version": "7.7.8",
       "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.8.tgz",

dashboard/package.json

@@ -105,6 +105,7 @@
     "@types/react-modal": "^3.10.6",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5",
+    "@types/react-syntax-highlighter": "^15.5.6",
     "@types/react-table": "^7.7.1",
     "@types/semver": "^7.3.5",
     "@types/styled-components": "^5.1.3",

dashboard/src/main/home/cluster-dashboard/expanded-chart/ValuesYaml.tsx

@@ -9,7 +9,7 @@ import { Context } from "shared/Context";
 
 import YamlEditor from "components/YamlEditor";
 import SaveButton from "components/SaveButton";
-import ReactDiffViewer from "react-diff-viewer";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
 import { readableDate } from "shared/string_utils";
 
 type PropsType = {
@@ -116,6 +116,8 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
             useDarkTheme
             leftTitle={compareVersionPrecedesCurrentVersion ? `Version ${compareChart.version.toString()} (Deployed ${readableDate(compareChart.info.last_deployed)})` : `Version ${currentChart.version.toString()} (Deployed ${readableDate(currentChart.info.last_deployed)})`}
             rightTitle={compareVersionPrecedesCurrentVersion ? `Version ${currentChart.version.toString()} (Deployed ${readableDate(currentChart.info.last_deployed)})` : `Version ${compareChart.version.toString()} (Deployed ${readableDate(compareChart.info.last_deployed)})`}
+            styles={DiffViewerStyles}
+            compareMethod={DiffMethod.TRIMMED_LINES}
           />
           :
           <StyledValuesYaml>
@@ -174,3 +176,18 @@ const StyledValuesYaml = styled.div`
     }
   }
 `;
+
+const DiffViewerStyles = {
+  variables: {
+    dark: {
+      diffViewerBackground: "#1b1d26",
+      gutterBackground: "#1b1d26",
+      emptyLineBackground: "#1b1d26",
+      diffViewerColor: '#f05671',
+      diffViewerTitleBackground: '#2c2c2c',
+      diffViewerTitleColor: 'white',
+    }
+  },
+
+
+}