Merge pull request #1103 from the-hideout/use-mui-controls

Use MUI Switch and Slider controls

Author: Razzmatazzz

package-lock.json

@@ -33,7 +33,7 @@
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@mui/lab": "^7.0.0-beta.12",
-    "@mui/material": "^7.0.1",
+    "@mui/material": "^7.1.1",
     "@mui/x-tree-view": "^8.5.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@tanstack/react-query": "^5.79.0",
@@ -54,7 +54,6 @@
     "leaflet-fullscreen": "^1.0.2",
     "lodash.debounce": "^4.0.8",
     "lz-string": "^1.5.0",
-    "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
     "react-countdown": "^2.3.6",
@@ -71,7 +70,6 @@
     "react-select": "^5.10.1",
     "react-simple-image-viewer": "1.2.2",
     "react-spinners": "^0.17.0",
-    "react-switch": "^7.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-table": "^7.8.0",
     "react-zoom-pan-pinch": "^3.7.0",

package.json

@@ -271,14 +271,6 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
     opacity: 0.4;
 }
 
-.rc-slider-mark-text {
-    color: rgb( from var(--color-gold-one) r g b / 0.8) !important;
-}
-
-.rc-slider-mark-text-active {
-    color: rgb( from var(--color-gold-one) r g b/ 1) !important;
-}
-
 /* Global reuseable styles, specific to the Tarkov.Dev style */
 .information-section {
     background: rgb( from var(--color-black) r g b / 0.1);

src/App.css

@@ -5,8 +5,10 @@ import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import CookieConsent from "react-cookie-consent";
 import { ErrorBoundary } from "react-error-boundary";
+import { ThemeProvider } from '@mui/material/styles';
 
 import './App.css';
+import theme from './modules/mui-theme.mjs';
 
 import i18n from './i18n.js';
 import loadPolyfills from './modules/polyfills.js';
@@ -332,6 +334,7 @@ function App() {
     const alternateLangs = supportedLanguages.filter(lang => lang !== i18n.language);
 
     return (
+        <ThemeProvider theme={theme}>
         <div className="App">
             <Helmet htmlAttributes={{ lang: i18n.language }}>
                 <meta property="og:locale" content={i18n.language} key="meta-locale" />
@@ -970,6 +973,7 @@ function App() {
             </ErrorBoundary>
             <Footer />
         </div>
+        </ThemeProvider>
     );
 }
 

src/App.js

@@ -70,10 +70,6 @@
     flex-grow: 1;
 }
 
-.single-filter-label {
-    margin-right: 10px;
-}
-
 .filter-input-wrapper {
     display: flex;
     align-items: center;
@@ -103,7 +99,7 @@
     color: var(--color-gunmetal-dark);
 }
 
-.rc-slider {
+.filter-slider-wrapper .MuiSlider-root {
     margin-left: 20px;
 }