Design enhancements

package.json

@@ -16,6 +16,7 @@
 		"@apache-arrow/ts": "^14.0.2",
 		"@emotion/react": "^11.11.1",
 		"@mantine/carousel": "^7.5.1",
+		"@mantine/charts": "^7.5.3",
 		"@mantine/code-highlight": "^7.5.1",
 		"@mantine/core": "^7.5.1",
 		"@mantine/dates": "^7.5.1",

src/api/axios.ts

@@ -16,15 +16,15 @@ instance.interceptors.request.use(
 
 instance.interceptors.response.use(
 	(response) => {
-	  return response;
+		return response;
 	},
 	(error) => {
 		const status = error.status || (error.response ? error.response.status : 0);
-		if (status === 403 || status === 401) {
+		if (status === 401) {
 			signOutHandler();
 		}
 		return Promise.reject(error);
-	}
-  );
+	},
+);
 
 export const Axios = () => instance;

src/components/Button/Button.module.css

@@ -20,3 +20,36 @@
     background-color: #545BEB; 
     color: #FFFFFF;
 }
+
+.iconBtn {
+    background: #fff;
+	padding: 0;
+	width: 36px;
+	color: #211F1F;
+	border: 1px #e9ecef solid;
+    border-radius: rem(8px);
+    margin-right: 0.675rem;
+
+    &.iconBtnActive {
+        color: white;
+        background-color: var(--mantine-color-brandPrimary-4);
+    }
+}
+
+
+
+.iconBtnIcon {
+    color: var(--mantine-color-brandPrimary-6);
+}
+
+.iconBtnLabel {
+    font-size: 0.8rem;
+}
+
+.iconBtn:hover {
+    background-color: #E0E0E0;
+    &.iconBtnActive {
+        color: white;
+        background-color: var(--mantine-color-brandPrimary-4);
+    }
+}

src/components/Button/IconButton.tsx

@@ -0,0 +1,28 @@
+import { Button, Tooltip } from '@mantine/core';
+import type { FC, ReactNode } from 'react';
+import classes from './Button.module.css'
+import React from 'react';
+
+type IconButtonProps = {
+	onClick?: () => void;
+	renderIcon: () => ReactNode;
+	icon?: ReactNode;
+	active?: boolean;
+	tooltipLabel?: string;
+}
+
+const IconButton: FC<IconButtonProps> = (props) => {
+	const { renderIcon, tooltipLabel } = props;
+	const Wrapper = tooltipLabel ? Tooltip : React.Fragment
+	return (
+		<Wrapper label={tooltipLabel}>
+			<Button
+				className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
+				onClick={props.onClick && props.onClick}>
+				{renderIcon()}
+			</Button>
+		</Wrapper>
+	);
+};
+
+export default IconButton;