[examples] Upgrade themed example for X v8 (#4893)

Author: bharatkashyap

examples/core/auth-nextjs-themed/.env

@@ -1,3 +1,2 @@
 
-AUTH_SECRET="cNU2IkgN6v9dVQ1EqbCe4Npqh0IbM6VEsMBpg69wiyU=" # Added by `npx auth`. Read more: https://cli.authjs.dev
-AUTH_URL="https://r3l69w-3000.csb.app"
+AUTH_SECRET="cNU2IkgN6v9dVQ1EqbCe4Npqh0IbM6VEsMBpg69wiyU=" # Added by `npx auth`. Read more: https://cli.authjs.dev

examples/core/auth-nextjs-themed/app/components/ChartUserByCountry.tsx

@@ -135,14 +135,12 @@ export default function ChartUserByCountry() {
                 innerRadius: 75,
                 outerRadius: 100,
                 paddingAngle: 0,
-                highlightScope: { faded: 'global', highlighted: 'item' },
+                highlightScope: { fade: 'global', highlight: 'item' },
               },
             ]}
             height={260}
             width={260}
-            slotProps={{
-              legend: { hidden: true },
-            }}
+            hideLegend
           >
             <PieCenterLabel primaryText="50K" secondaryText="Total" />
           </PieChart>

examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx

@@ -73,11 +73,7 @@ export default function PageViewsBarChart() {
           height={250}
           margin={{ left: 50, right: 0, top: 20, bottom: 20 }}
           grid={{ horizontal: true }}
-          slotProps={{
-            legend: {
-              hidden: true,
-            },
-          }}
+          hideLegend
         />
       </CardContent>
     </Card>

examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx

@@ -134,11 +134,7 @@ export default function SessionsChart() {
               fill: "url('#direct')",
             },
           }}
-          slotProps={{
-            legend: {
-              hidden: true,
-            },
-          }}
+          hideLegend
         >
           <AreaGradient color={theme.palette.primary.dark} id="organic" />
           <AreaGradient color={theme.palette.primary.main} id="referral" />

examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx

@@ -83,7 +83,7 @@ export default function StatCard({ title, value, interval, trend, data }: StatCa
           </Stack>
           <Box sx={{ width: '100%', height: 50 }}>
             <SparkLineChart
-              colors={[chartColor]}
+              color={chartColor}
               data={data}
               area
               showHighlight

examples/core/auth-nextjs-themed/app/components/StatCard.tsx

@@ -38,7 +38,7 @@ function renderSparklineCell(params: GridCellParams<SparkLineData, any>) {
         plotType="bar"
         showHighlight
         showTooltip
-        colors={['hsl(210, 98%, 42%)']}
+        color="hsl(210, 98%, 42%)"
         xAxis={{
           scaleType: 'band',
           data,

examples/core/auth-nextjs-themed/app/mocks/gridData.tsx

@@ -38,7 +38,7 @@ function renderSparklineCell(params: GridCellParams<SparkLineData, any>) {
         plotType="bar"
         showHighlight
         showTooltip
-        colors={['hsl(210, 98%, 42%)']}
+        color="hsl(210, 98%, 42%)"
         xAxis={{
           scaleType: 'band',
           data,

examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx

@@ -47,6 +47,9 @@ export const dataDisplayCustomizations: Components<Theme> = {
             [`& .${svgIconClasses.root}`]: {
               color: theme.palette.text.primary,
             },
+            [`& .${typographyClasses.root}`]: {
+              color: theme.palette.text.primary,
+            },
             '&:focus-visible': {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
             },