initial commit

front/src/styles/theme/components/avatar.js

@@ -0,0 +1,3 @@
+export const MuiAvatar = {
+  styleOverrides: { root: { fontSize: '14px', fontWeight: 600, letterSpacing: 0 } },
+};

front/src/styles/theme/components/button.js

@@ -0,0 +1,11 @@
+export const MuiButton = {
+    styleOverrides: {
+        root: {borderRadius: '12px', textTransform: 'none'},
+        sizeSmall: {padding: '6px 16px'},
+        sizeMedium: {padding: '8px 20px'},
+        sizeLarge: {padding: '11px 24px'},
+        textSizeSmall: {padding: '7px 12px'},
+        textSizeMedium: {padding: '9px 16px'},
+        textSizeLarge: {padding: '12px 16px'},
+    },
+};

front/src/styles/theme/components/card-content.js

@@ -0,0 +1,3 @@
+export const MuiCardContent = {
+    styleOverrides: {root: {padding: '32px 24px', '&:last-child': {paddingBottom: '32px'}}},
+};

front/src/styles/theme/components/card-header.js

@@ -0,0 +1,4 @@
+export const MuiCardHeader = {
+    defaultProps: {titleTypographyProps: {variant: 'h6'}, subheaderTypographyProps: {variant: 'body2'}},
+    styleOverrides: {root: {padding: '32px 24px 16px'}},
+};

front/src/styles/theme/components/card.js

@@ -0,0 +1,17 @@
+import {paperClasses} from '@mui/material/Paper';
+
+export const MuiCard = {
+    styleOverrides: {
+        root: ({theme}) => {
+            return {
+                borderRadius: '20px',
+                [`&.${paperClasses.elevation1}`]: {
+                    boxShadow:
+                        theme.palette.mode === 'dark'
+                            ? '0 5px 22px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.12)'
+                            : '0 5px 22px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.06)',
+                },
+            };
+        },
+    },
+};

front/src/styles/theme/components/components.js

@@ -0,0 +1,25 @@
+import {MuiAvatar} from './avatar';
+import {MuiButton} from "./button";
+import {MuiCard} from "./card";
+import {MuiCardContent} from "./card-content";
+import {MuiCardHeader} from "./card-header";
+import {MuiLink} from "./link";
+import {MuiStack} from "./stack";
+import {MuiTab} from "./tab";
+import {MuiTableBody} from "./table-body";
+import {MuiTableCell} from "./table-cell";
+import {MuiTableHead} from "./table-head";
+
+export const components = {
+    MuiAvatar,
+    MuiButton,
+    MuiCard,
+    MuiCardContent,
+    MuiCardHeader,
+    MuiLink,
+    MuiStack,
+    MuiTab,
+    MuiTableBody,
+    MuiTableCell,
+    MuiTableHead,
+};

front/src/styles/theme/components/link.js

@@ -0,0 +1,8 @@
+export const MuiLink = {
+    defaultProps: {underline: 'hover'},
+    styleOverrides: {
+        root: {
+            color: 'var(--mui-palette-text-primary)'
+        }
+    }
+};

front/src/styles/theme/components/stack.js

@@ -0,0 +1 @@
+export const MuiStack = {defaultProps: {useFlexGap: true}};

front/src/styles/theme/components/tab.js

@@ -0,0 +1,14 @@
+export const MuiTab = {
+    styleOverrides: {
+        root: {
+            fontSize: '14px',
+            fontWeight: 500,
+            lineHeight: 1.71,
+            minWidth: 'auto',
+            paddingLeft: 0,
+            paddingRight: 0,
+            textTransform: 'none',
+            '& + &': {marginLeft: '24px'},
+        },
+    },
+};

front/src/styles/theme/components/table-body.js

@@ -0,0 +1,10 @@
+import {tableCellClasses} from '@mui/material/TableCell';
+import {tableRowClasses} from '@mui/material/TableRow';
+
+export const MuiTableBody = {
+    styleOverrides: {
+        root: {
+            [`& .${tableRowClasses.root}:last-child`]: {[`& .${tableCellClasses.root}`]: {'--TableCell-borderWidth': 0}},
+        },
+    },
+};

front/src/styles/theme/components/table-cell.js

@@ -0,0 +1,6 @@
+export const MuiTableCell = {
+    styleOverrides: {
+        root: {borderBottom: 'var(--TableCell-borderWidth, 1px) solid var(--mui-palette-TableCell-border)'},
+        paddingCheckbox: {padding: '0 0 0 24px'},
+    },
+};

front/src/styles/theme/components/table-head.js

@@ -0,0 +1,13 @@
+import {tableCellClasses} from '@mui/material/TableCell';
+
+export const MuiTableHead = {
+    styleOverrides: {
+        root: {
+            [`& .${tableCellClasses.root}`]: {
+                backgroundColor: 'var(--mui-palette-background-level1)',
+                color: 'var(--mui-palette-text-secondary)',
+                lineHeight: 1,
+            },
+        },
+    },
+};