Update thumbnail and description, and some stray tweaks

zanivan · May 28, 2024 · d1f6991 · d1f6991
1 parent 97be390
commit d1f6991
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 10 deletions.
diff --git a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js
@@ -10,6 +10,12 @@ import { brand, getDesignTokens, gray, green, red } from './themePrimitives';
 export default function getDashboardTheme(mode) {
   return {
     ...getDesignTokens(mode),
+    mixins: {
+      MuiDataGrid: {
+        // Headers, and top & bottom fixed rows
+        containerBackground: mode === 'dark' ? 'hsl(0, 0%, 0%)' : 'hsl(0, 0%, 100%)',
+      },
+    },
     components: {
       MuiButtonBase: {
         defaultProps: {
@@ -1031,7 +1037,7 @@ export default function getDashboardTheme(mode) {
               },
             },
             '&.even': {
-              background: alpha(theme.palette.grey[100], 0.4),
+              background: alpha(theme.palette.grey[200], 0.3),
               '&:hover': {
                 background: alpha(theme.palette.primary.main, 0.1),
               },
@@ -1043,6 +1049,7 @@ export default function getDashboardTheme(mode) {
               },
             },
             ...theme.applyStyles('dark', {
+              backgroundColor: theme.palette.grey[900],
               '&.Mui-selected': {
                 background: theme.palette.grey[800],
               },

diff --git a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx
@@ -17,7 +17,7 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
     mixins: {
       MuiDataGrid: {
         // Headers, and top & bottom fixed rows
-        containerBackground: mode === 'dark' ? gray[800] : 'hsl(0, 0%, 100%)',
+        containerBackground: mode === 'dark' ? 'hsl(0, 0%, 0%)' : 'hsl(0, 0%, 100%)',
       },
     },
     components: {
@@ -1013,7 +1013,6 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: theme.palette.divider,
-            // background: theme.palette.background.paper,
           }),
           menu: ({ theme }) => ({
             borderRadius: theme.shape.borderRadius,
@@ -1032,7 +1031,6 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
           }),
           row: ({ theme }) => ({
             borderBottom: `1px solid ${theme.palette.divider}`,
-            backgroundColor: theme.palette.background.paper,
             '&:hover': {
               background: alpha(theme.palette.primary.main, 0.1),
             },
@@ -1043,7 +1041,7 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
               },
             },
             '&.even': {
-              background: alpha(theme.palette.grey[100], 0.4),
+              background: alpha(theme.palette.grey[200], 0.3),
               '&:hover': {
                 background: alpha(theme.palette.primary.main, 0.1),
               },
@@ -1055,6 +1053,7 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
               },
             },
             ...theme.applyStyles('dark', {
+              backgroundColor: theme.palette.grey[900],
               '&.Mui-selected': {
                 background: theme.palette.grey[800],
               },

diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/themePrimitives.js
@@ -129,8 +129,8 @@ export const getDesignTokens = (mode) => ({
     },
     divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
     background: {
-      default: gray[100],
-      paper: 'hsl(0, 0%, 100%)',
+      default: gray[50],
+      paper: gray[100],
       ...(mode === 'dark' && { default: gray[900], paper: gray[800] }),
     },
     text: {

diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts
@@ -152,8 +152,8 @@ export const getDesignTokens = (mode: PaletteMode) => ({
     },
     divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
     background: {
-      default: gray[100],
-      paper: 'hsl(0, 0%, 100%)',
+      default: gray[50],
+      paper: gray[100],
       ...(mode === 'dark' && { default: gray[900], paper: gray[800] }),
     },
     text: {

diff --git a/docs/public/static/images/templates/dashboard-dark.png b/docs/public/static/images/templates/dashboard-dark.png
diff --git a/docs/public/static/images/templates/dashboard-light.png b/docs/public/static/images/templates/dashboard-light.png
diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json
@@ -94,7 +94,7 @@
   "copySource": "Copy the source",
   "copySourceLinkJS": "Copy link to JavaScript source",
   "copySourceLinkTS": "Copy link to TypeScript source",
-  "dashboardDescr": "Contains a taskbar and a mini variant drawer. The chart is courtesy of Recharts.",
+  "dashboardDescr": "A collection of charts and complex components in a responsive dashboard layout.",
   "dashboardTitle": "Dashboard",
   "decreaseSpacing": "decrease spacing",
   "demoToolbarLabel": "demo source",