fix: a few more chart layout tweaks

1) slightly narrower left strip
2) inverse colors
3) revert to patternfly4 light as the default theme
4) a bit less padding in the chart tiles
5) in light themes, use a drop shadow for the chart tiles

Author: starpit

plugins/plugin-client-default/config.d/style.json

@@ -1,3 +1,3 @@
 {
-  "defaultTheme": "PatternFly4 Dark"
+  "defaultTheme": "PatternFly4 Light"
 }

plugins/plugin-client-default/notebooks/dashboard.md

@@ -3,6 +3,7 @@ layout:
     1:
         position: default
         maximized: true
+        inverseColors: true
     2:
         position: default
         maximized: true

plugins/plugin-codeflare/src/components/Chart.tsx

@@ -73,8 +73,8 @@ export default class BaseChart extends React.PureComponent<Props> {
   }
 
   public static readonly padding = {
-    bottom: BaseChart.fontSize * 3,
-    top: BaseChart.fontSize * 5,
+    bottom: BaseChart.fontSize * 1.5,
+    top: BaseChart.fontSize * 4,
     left: BaseChart.fontSize * 4.5,
     right: BaseChart.fontSize * 4.5,
   }
@@ -252,7 +252,7 @@ export default class BaseChart extends React.PureComponent<Props> {
     return (
       <ChartLabel
         x={BaseChart.titlePosition.x.left}
-        y={BaseChart.fontSize * 1.5}
+        y={BaseChart.fontSize / 2}
         style={BaseChart.titleStyle()}
         text={chart.title}
       />

plugins/plugin-codeflare/web/scss/components/Dashboard/Charts.scss

@@ -29,3 +29,9 @@
 @include ChartContainer {
   background-color: var(--color-base00);
 }
+
+body[kui-theme-style="light"] {
+  @include ChartContainer {
+    filter: drop-shadow(1px 1px 2px var(--color-base02));
+  }
+}

plugins/plugin-codeflare/web/scss/components/Dashboard/_index.scss

@@ -30,14 +30,16 @@
 
 @include TopLevelTab {
   @include Split(3) {
-    @include Rows(5);
-    @include Columns(12);
+    @include Rows(7);
+    @include Columns(13);
     grid-template-areas:
-      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3"
-      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3"
-      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3"
-      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2"
-      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2";
+      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"
+      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"
+      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"
+      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2"
+      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2"
+      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2"
+      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2";
   }
 }