fix(webtools): fixed linting issues, and themes

Author: nikhilverma360

web-devtools/.eslintrc.json

@@ -14,6 +14,7 @@
     }
   },
   "extends": [
+    "next/core-web-vitals",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
@@ -43,7 +44,16 @@
     },
     "import/resolver": {
       "typescript": {
+        "alwaysTryTypes": true,
         "project": "./tsconfig.json"
+      },
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
       }
     }
   },

web-devtools/src/components/LightButton.tsx

@@ -4,17 +4,12 @@ import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 
 const StyledButton = styled(Button)`
-  background-color: ${({ theme }) => theme.klerosUIComponentsPrimaryBackground};
   .button-text {
     font-weight: 400;
   }
   .button-svg {
     fill: ${({ theme }) => theme.klerosUIComponentsSecondaryPurple};
   }
-  :focus,
-  :hover {
-    background-color: ${({ theme }) => theme.klerosUIComponentsSecondaryBackground};
-  }
 `;
 
 interface ILightButton {

web-devtools/src/context/StyledComponentsProvider.tsx

@@ -2,15 +2,15 @@
 import React from "react";
 import { ThemeProvider } from "styled-components";
 
-import { darkTheme } from "@kleros/ui-components-library";
+import { theme } from "styles/Theme";
 
 import { GlobalStyle } from "styles/global-style";
 
 const StyledComponentsProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
   return (
-    <ThemeProvider theme={darkTheme}>
+    <ThemeProvider theme={theme}>
       <GlobalStyle />
       {children}
     </ThemeProvider>

web-devtools/src/styles/Theme.tsx

@@ -1,14 +1,46 @@
-import React from "react";
-import { ThemeProvider } from "styled-components";
+import { DefaultTheme } from "styled-components";
 
 import { darkTheme } from "@kleros/ui-components-library";
 
-const theme = {
+declare module "styled-components" {
+  export interface DefaultTheme {
+    klerosUIComponentsPrimaryPurple: string;
+    klerosUIComponentsSecondaryPurple: string;
+    klerosUIComponentsMediumPurple: string;
+    klerosUIComponentsLightPurple: string;
+    klerosUIComponentsPrimaryBlue: string;
+    klerosUIComponentsSecondaryBlue: string;
+    klerosUIComponentsMediumBlue: string;
+    klerosUIComponentsLightBlue: string;
+    klerosUIComponentsPrimaryText: string;
+    klerosUIComponentsSecondaryText: string;
+    klerosUIComponentsStroke: string;
+    klerosUIComponentsLightGrey: string;
+    klerosUIComponentsWhiteBackground: string;
+    klerosUIComponentsLightBackground: string;
+    klerosUIComponentsDefaultShadow: string;
+    klerosUIComponentsHoveredShadow: string;
+    klerosUIComponentsSuccess: string;
+    klerosUIComponentsSuccessLight: string;
+    klerosUIComponentsWarning: string;
+    klerosUIComponentsWarningLight: string;
+    klerosUIComponentsError: string;
+    klerosUIComponentsErrorLight: string;
+    klerosUIComponentsTint: string;
+    klerosUIComponentsTintMedium: string;
+    klerosUIComponentsTintPurple: string;
+    klerosUIComponentsTransitionSpeed: string;
+    klerosUIComponentsSkeletonBackground: string;
+    klerosUIComponentsSkeletonHighlight: string;
+    klerosUIComponentsVioletPurple: string;
+    klerosUIComponentsLavenderPurple: string;
+  }
+}
+
+export const theme: DefaultTheme = {
   ...darkTheme,
+  klerosUIComponentsSkeletonBackground: "#EBEBEB",
+  klerosUIComponentsSkeletonHighlight: "#F5F5F5",
+  klerosUIComponentsVioletPurple: "#6A1DCD",
+  klerosUIComponentsLavenderPurple: "#BB72FF",
 };
-
-const Theme = ({ children }: Readonly<{ children: React.ReactNode }>) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
-);
-
-export default Theme;