From 531aeb7247c2861ba02f66481dd9248abb63df38 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Mon, 31 Oct 2022 22:08:11 +0000
Subject: [PATCH 1/2] refactor: extend Overrides for MuiSkeleton

Looking at the types provided with `@material-ui/core`, it is indeed
missing `MuiSkeleton`. I'm not sure why. I found this issues upstream: https://github.com/mui/material-ui/issues/24959

I also tried upgrading the package to the latest - 4.12.4 I believe but
that didn't fix it either.

I resorted to extending the `Overrides` type based on what I saw in the
most recent version of the declaration file. This is a temporary fix but
opts back in to type safety instead of resorting to `@ts-ignore`.
---
 site/src/theme/overrides.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 344d8dacc0299..8c63102ac5fd6 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -1,9 +1,14 @@
-import { lighten, Theme } from "@material-ui/core/styles"
+import { lighten, Theme, StyleRules } from "@material-ui/core/styles"
 import { Overrides } from "@material-ui/core/styles/overrides"
+import { SkeletonClassKey } from "@material-ui/lab"
 import { colors } from "./colors"
 import { borderRadius, borderRadiusSm } from "./constants"
 
-export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
+type ExtendedOverrides = Overrides & {
+  MuiSkeleton: Partial<StyleRules<SkeletonClassKey>>;
+}
+
+export const getOverrides = ({ palette, breakpoints }: Theme): ExtendedOverrides => {
   return {
     MuiCssBaseline: {
       "@global": {
@@ -190,8 +195,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         marginTop: 8,
       },
     },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- The Mui types don't accept the MuiSkeleton but it works. I tried to extends the Overrides interface with no success.
-    // @ts-ignore
     MuiSkeleton: {
       root: {
         backgroundColor: palette.divider,

From 681e017e8e54dd2b48eeff153d07c77b2448a493 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Mon, 31 Oct 2022 22:21:29 +0000
Subject: [PATCH 2/2] formatting

---
 site/src/theme/overrides.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 8c63102ac5fd6..2cfb596270338 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -5,10 +5,13 @@ import { colors } from "./colors"
 import { borderRadius, borderRadiusSm } from "./constants"
 
 type ExtendedOverrides = Overrides & {
-  MuiSkeleton: Partial<StyleRules<SkeletonClassKey>>;
+  MuiSkeleton: Partial<StyleRules<SkeletonClassKey>>
 }
 
-export const getOverrides = ({ palette, breakpoints }: Theme): ExtendedOverrides => {
+export const getOverrides = ({
+  palette,
+  breakpoints,
+}: Theme): ExtendedOverrides => {
   return {
     MuiCssBaseline: {
       "@global": {