update some shared components

src/ui/shared-components/ContentBox.js

@@ -0,0 +1,20 @@
+// src/components/WrapperBox.jsx
+import React from 'react';
+import { Box } from '@mui/material';
+import { styled } from '@mui/system';
+
+const ContentBoxStyled = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.custom.lightGreyTransparent,
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(2),
+}));
+
+const ContentBox = ({ children, sx, ...props }) => {
+    return (
+        <ContentBoxStyled sx={sx} {...props}>
+            {children}
+        </ContentBoxStyled>
+    );
+};
+
+export default ContentBox;

src/ui/shared-components/LayoutBoxes.js

@@ -0,0 +1,15 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/system';
+
+export const HBox = styled(Box)(({ theme, gap = 2 }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(gap),
+}));
+
+export const VBox = styled(Box)(({ theme, gap = 1, alignItems = 'center' }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems,
+    gap: theme.spacing(gap),
+}));