Merge pull request #585 from neo4j-labs/task/fixDarkThemeMore

Other Theme Fixes

Author: BennuFire

docs/modules/ROOT/pages/user-guide/reports/pie-chart.adoc

@@ -73,13 +73,13 @@ slice.
 |Margin Left (px) |number |50 |The margin in pixels on the left side of
 the visualization.
 
-|Margin Right (px) |number |24 |The margin in pixels on the right side
+|Margin Right (px) |number |50 |The margin in pixels on the right side
 of the visualization.
 
-|Margin Top (px) |number |24 |The margin in pixels on the top side of
+|Margin Top (px) |number |50 |The margin in pixels on the top side of
 the visualization.
 
-|Margin Bottom (px) |number |40 |The margin in pixels on the bottom side
+|Margin Bottom (px) |number |50 |The margin in pixels on the bottom side
 of the visualization.
 
 |Hide Selections |on/off |off |If enabled, hides the property selector

src/card/settings/CardSettings.tsx

@@ -91,7 +91,11 @@ const NeoCardSettings = ({
   );
 
   return (
-    <div className={`card-view n-bg-palette-neutral-bg-weak ${expanded ? 'expanded' : ''} n-overflow-y-auto n-h-full`}>
+    <div
+      className={`card-view n-bg-palette-neutral-bg-weak n-text-palette-neutral-text-default ${
+        expanded ? 'expanded' : ''
+      } n-overflow-y-auto n-h-full`}
+    >
       {cardSettingsHeader}
       <ReportItemContainer style={{ height: reportHeight }} className='-n-mt-2'>
         {cardSettingsContent}

src/card/view/CardView.tsx

@@ -213,7 +213,9 @@ const NeoCardView = ({
 
   return (
     <div
-      className={`card-view n-bg-palette-neutral-bg-weak ${expanded ? 'expanded' : ''}`}
+      className={`card-view n-bg-palette-neutral-bg-weak n-text-palette-neutral-text-default ${
+        expanded ? 'expanded' : ''
+      }`}
       style={settings && settings.backgroundColor ? { backgroundColor: settings.backgroundColor } : {}}
     >
       {reportHeader}

src/card/view/CardViewHeader.tsx

@@ -71,6 +71,9 @@ const NeoCardViewHeader = ({
       text: {
         primary: 'rgb(var(--palette-neutral-text))',
       },
+      action: {
+        disabled: 'rgb(var(--palette-neutral-text-weak))',
+      },
     },
   });
 
@@ -103,7 +106,7 @@ const NeoCardViewHeader = ({
                 onBlur={() => {
                   setEditing(false);
                 }}
-                className={'n-text-palette-neutral-text-default no-underline large'}
+                className={'no-underline large'}
                 label=''
                 disabled={!editable}
                 placeholder='Report name...'
@@ -117,6 +120,11 @@ const NeoCardViewHeader = ({
                 size={'small'}
                 style={{ paddingTop: '0px important!' }}
                 variant={'standard'}
+                sx={{
+                  '& .MuiInputBase-input.Mui-disabled': {
+                    WebkitTextFillColor: 'inherit',
+                  },
+                }}
               />
             </td>
           </tr>

src/chart/Utils.ts

@@ -121,14 +121,14 @@ export const themeNivo = {
   textColor: 'rgb(var(--palette-neutral-text-default))',
   text: { fill: 'rgb(var(--palette-neutral-text-default))' },
   axis: {
-    ticks: { text: { fill: 'rgb(var(--palette-light-neutral-text-default))' } },
+    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
     legend: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
   },
   legends: {
-    text: { fill: 'rgb(var(--palette-neutral-text-weak))' },
-    title: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
-    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
-    hidden: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
+    text: { fill: 'rgb(var(--palette-neutral-text-default))' },
+    title: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
+    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
+    hidden: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
   },
   markers: {
     text: { fill: 'rgb(var(--palette-neutral-text-default))' },

src/chart/pie/PieChart.tsx

@@ -73,10 +73,10 @@ const NeoPieChart = (props: ChartProps) => {
   const settings = props.settings ? props.settings : {};
   const legendHeight = 20;
   // TODO to retrieve all defaults from the ReportConfig.ts file instead of hardcoding them in the file
-  const marginRight = settings.marginRight ? settings.marginRight : 24;
-  const marginLeft = settings.marginLeft ? settings.marginLeft : 24;
-  const marginTop = settings.marginTop ? settings.marginTop : 24;
-  const marginBottom = settings.marginBottom ? settings.marginBottom : 40;
+  const marginRight = settings.marginRight ? settings.marginRight : 50;
+  const marginLeft = settings.marginLeft ? settings.marginLeft : 50;
+  const marginTop = settings.marginTop ? settings.marginTop : 50;
+  const marginBottom = settings.marginBottom ? settings.marginBottom : 50;
   const sortByValue = settings.sortByValue ? settings.sortByValue : false;
   const enableArcLabels = settings.enableArcLabels !== undefined ? settings.enableArcLabels : true;
   const enableArcLinkLabels = settings.enableArcLinkLabels !== undefined ? settings.enableArcLinkLabels : true;

src/config/ReportConfig.tsx

@@ -606,22 +606,22 @@ export const REPORT_TYPES = {
       marginLeft: {
         label: 'Margin Left (px)',
         type: SELECTION_TYPES.NUMBER,
-        default: 24,
+        default: 50,
       },
       marginRight: {
         label: 'Margin Right (px)',
         type: SELECTION_TYPES.NUMBER,
-        default: 24,
+        default: 50,
       },
       marginTop: {
         label: 'Margin Top (px)',
         type: SELECTION_TYPES.NUMBER,
-        default: 24,
+        default: 50,
       },
       marginBottom: {
         label: 'Margin Bottom (px)',
         type: SELECTION_TYPES.NUMBER,
-        default: 40,
+        default: 50,
       },
       refreshButtonEnabled: {
         label: 'Refreshable',