Bulk of design overhaul

src/GameOptions/ui/OptionsSlider.tsx

@@ -0,0 +1,36 @@
+import { Slider, Tooltip, Typography, Box } from "@mui/material";
+import React from "react";
+
+interface IProps {
+  value: any;
+  callback: (event: any, newValue: number | number[]) => void;
+  step: number;
+  min: number;
+  max: number;
+  tooltip: React.ReactElement;
+  label: string;
+}
+
+export const OptionsSlider = (props: IProps): React.ReactElement => {
+  return (
+    <Box>
+      <Tooltip title={<Typography>{props.tooltip}</Typography>}>
+        <Typography>{props.label}</Typography>
+      </Tooltip>
+      <Slider
+        value={props.value}
+        onChange={props.callback}
+        step={props.step}
+        min={props.min}
+        max={props.max}
+        valueLabelDisplay="auto"
+        sx={{
+          "& .MuiSlider-thumb": {
+            height: "12px",
+            width: "12px",
+          },
+        }}
+      />
+    </Box>
+  );
+};