tooltip, spinner theme support

frontend/src/Theme/Spinner/index.js

@@ -1,13 +1,38 @@
-const Spinner = {
-  baseStyle: {
-    color: "primary.400",
-    thickness: "4px",
-    speed: "1.5s",
-    my: 8,
+const baseStyle = {
+  color: "primary.400",
+  thickness: "4px",
+  speed: "1.5s",
+  my: 8,
+};
+const variants = {
+  basic: { thickness: "4px", speed: "1.5s" },
+};
+
+const sizes = {
+  xs: {
+    "--spinner-size": "0.75rem",
   },
-  variants: {
-    basic: { thickness: "4px", speed: "1.5s" },
+  sm: {
+    "--spinner-size": "1rem",
+  },
+  md: {
+    "--spinner-size": "1.5rem",
+  },
+  lg: {
+    "--spinner-size": "2rem",
+  },
+  xl: {
+    "--spinner-size": "3rem",
   },
 };
 
-export default Spinner;
+const defaultProps = {
+  size: "md",
+};
+
+export default {
+  baseStyle,
+  sizes,
+  defaultProps,
+  variants,
+};

frontend/src/Theme/Tooltip/index.js

@@ -0,0 +1,46 @@
+import { mode } from "@chakra-ui/theme-tools";
+
+const baseStyle = (props) => {
+  const bg = mode("gray.700", "gray.300")(props);
+  return {
+    "--tooltip-bg": `colors.${bg}`,
+    px: "8px",
+    py: "2px",
+    bg: "var(--tooltip-bg)",
+    "--popper-arrow-bg": "var(--tooltip-bg)",
+    color: mode("whiteAlpha.900", "gray.900")(props),
+    borderRadius: "sm",
+    fontWeight: "medium",
+    fontSize: "sm",
+    boxShadow: "md",
+    maxW: "320px",
+    zIndex: "tooltip",
+  };
+};
+
+const variantOnboarding = (props) => {
+  const bg = mode("secondary.700", "secondary.300")(props);
+  return {
+    "--tooltip-bg": `colors.${bg}`,
+    px: "8px",
+    py: "2px",
+    bg: "var(--tooltip-bg)",
+    "--popper-arrow-bg": "var(--tooltip-bg)",
+    color: mode("whiteAlpha.900", "gray.900")(props),
+    borderRadius: "md",
+    fontWeight: "medium",
+    fontSize: "sm",
+    boxShadow: "md",
+    maxW: "320px",
+    zIndex: "tooltip",
+  };
+};
+
+const variants = {
+  onboarding: variantOnboarding,
+};
+
+export default {
+  baseStyle,
+  variants,
+};

frontend/src/Theme/theme.js

@@ -8,6 +8,8 @@ import NumberInput from "./NumberInput";
 import Badge from "./Badge";
 import Checkbox from "./Checkbox";
 import Table from "./Table";
+import Tooltip from "./Tooltip";
+import Spinner from "./Spinner";
 import { createBreakpoints } from "@chakra-ui/theme-tools";
 
 const breakpointsCustom = createBreakpoints({
@@ -53,6 +55,8 @@ const theme = extendTheme({
     Badge,
     Checkbox,
     Table,
+    Spinner,
+    Tooltip,
   },
 
   fonts: {