Merge pull request #3960 from bluewave-labs/feat/scrollbar-style

feat: scrollbar styling

client/src/Utils/Theme/Palette.ts

@@ -85,6 +85,10 @@ export const lightPalette = {
 	sidebar: {
 		accent: colors.brandGreen,
 	},
+	scrollbar: {
+		track: colors.rule200,
+		thumb: colors.brandGreen,
+	},
 	rowStatus: {
 		running: colors.green200,
 		paused: colors.yellow200,
@@ -137,6 +141,10 @@ export const darkPalette = {
 	sidebar: {
 		accent: colors.brandGreenLight,
 	},
+	scrollbar: {
+		track: colors.ruleDark,
+		thumb: colors.brandGreen,
+	},
 	rowStatus: {
 		running: alpha(colors.brandGreen, 0.18),
 		paused: alpha(colors.orange500, 0.18),

client/src/Utils/Theme/Theme.ts

@@ -3,6 +3,7 @@ import { lightPalette, darkPalette, typographyLevels } from "@/Utils/Theme/Palet
 
 import type { Theme } from "@mui/material/styles";
 import type {} from "@mui/material/styles";
+import { SCROLLBAR_SIZE } from "@/Utils/Theme/constants";
 
 declare module "@mui/material/styles" {
 	interface TypographyVariants {
@@ -20,6 +21,7 @@ declare module "@mui/material/styles" {
 	}
 	interface Palette {
 		sidebar: { accent: string };
+		scrollbar: { track: string; thumb: string };
 		rowStatus: { running: string; paused: string };
 		chart: {
 			phases: {
@@ -34,6 +36,7 @@ declare module "@mui/material/styles" {
 	}
 	interface PaletteOptions {
 		sidebar?: { accent: string };
+		scrollbar?: { track: string; thumb: string };
 		rowStatus?: { running: string; paused: string };
 		chart?: {
 			phases: {
@@ -112,6 +115,27 @@ export const theme = (mode: string, palette: any) =>
 		},
 
 		components: {
+			MuiCssBaseline: {
+				styleOverrides: (theme) => ({
+					"*": {
+						scrollbarWidth: "auto",
+						scrollbarColor: `${theme.palette.scrollbar.thumb} ${theme.palette.scrollbar.track}`,
+					},
+					"*::-webkit-scrollbar": {
+						width: SCROLLBAR_SIZE,
+						height: SCROLLBAR_SIZE,
+					},
+					"*::-webkit-scrollbar-track": {
+						background: theme.palette.scrollbar.track,
+						borderRadius: theme.shape.borderRadius,
+					},
+					"*::-webkit-scrollbar-thumb": {
+						background: theme.palette.scrollbar.thumb,
+						borderRadius: theme.shape.borderRadius,
+					},
+					"*::-webkit-scrollbar-button": { display: "none" },
+				}),
+			},
 			MuiTouchRipple: {
 				styleOverrides: {
 					root: {

client/src/Utils/Theme/constants.ts

@@ -19,7 +19,7 @@ export const LAYOUT = {
 } as const;
 
 export const INPUT_BASE_HEIGHT = 32; // Height for inputs/controls
-
+export const SCROLLBAR_SIZE = 16;
 export const HOVER = {
 	DARKEN: 0.06, // This is a coefficient for darkening function
 	ROW: 0.025, // Overlay alpha for hoverable rows and cards