init

src/theme/Provider.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import { CssBaseline } from '@mui/material';
+import getTheme from '@/theme/theme';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const ThemeProvider = (props: Props) => {
+    return (
+        <AppRouterCacheProvider options={{ key: 'mui' }}>
+            <MuiThemeProvider theme={getTheme()}>
+                <CssBaseline />
+                {props.children}
+            </MuiThemeProvider>
+        </AppRouterCacheProvider>
+    );
+};
+
+export default ThemeProvider;

src/theme/getButtonStyles.ts

@@ -0,0 +1,109 @@
+import { SxProps, Theme } from '@mui/material';
+
+export type ButtonColorVariant = 'blue' | 'blue-outlined' | 'gray' | 'icon-error';
+export const getButtonStyle = (color: ButtonColorVariant, iconButton: boolean, sx?: SxProps<Theme>): SxProps<Theme> => {
+    switch (color) {
+        case 'blue': {
+            return [
+                theme => ({
+                    backgroundColor: '#3489E4',
+                    color: '#fff',
+                    borderRadius: '8px',
+                    padding: iconButton ? '9px' : '10px 18px',
+
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    lineHeight: '24px',
+                    textTransform: 'capitalize',
+
+                    svg: {
+                        color: '#fff',
+                        width: iconButton ? '18px' : '24px',
+                        height: iconButton ? '18px' : '24px',
+                    },
+                    '&:hover': {
+                        backgroundColor: '#1976d2',
+                    },
+                    '&:active': {
+                        opacity: 0.8,
+                    },
+                    ...(sx instanceof Array ? {} : sx),
+                }),
+                ...(sx instanceof Array ? sx : []),
+            ];
+        }
+        case 'blue-outlined': {
+            return [
+                theme => ({
+                    backgroundColor: 'transparent',
+                    color: '#000',
+                    borderRadius: '8px',
+                    padding: iconButton ? '9px' : '10px 18px',
+                    border: '1px solid #3489E4',
+
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    lineHeight: '24px',
+                    textTransform: 'capitalize',
+
+                    svg: {
+                        color: '#fff',
+                        width: iconButton ? '18px' : '24px',
+                        height: iconButton ? '18px' : '24px',
+                    },
+                    '&:hover': {
+                        backgroundColor: '#1976d2',
+                        color: '#fff',
+                    },
+                    '&:active': {
+                        opacity: 0.8,
+                    },
+                    ...(sx instanceof Array ? {} : sx),
+                }),
+                ...(sx instanceof Array ? sx : []),
+            ];
+        }
+        case 'gray': {
+            return [
+                theme => ({
+                    backgroundColor: '#FFF',
+                    color: '#000',
+                    border: '2px solid #EDF1F7',
+                    borderRadius: '8px',
+                    padding: iconButton ? '9px' : '8px 16px',
+
+                    fontSize: '16px',
+                    fontWeight: 400,
+                    lineHeight: '20px',
+                    textTransform: 'capitalize',
+
+                    svg: {
+                        color: '#3489E4',
+                        width: '18px',
+                        height: '18px',
+                    },
+                    '&:hover': {
+                        backgroundColor: '#EDF1F7',
+                        color: '#000',
+                    },
+                    '&:active': {
+                        opacity: 0.8,
+                    },
+                    ...(sx instanceof Array ? {} : sx),
+                }),
+                ...(sx instanceof Array ? sx : []),
+            ];
+        }
+        case 'icon-error': {
+            return [
+                theme => ({
+                    backgroundColor: theme.palette.error.main,
+                    color: '#fff',
+
+                    ...(sx instanceof Array ? {} : sx),
+                }),
+                ...(sx instanceof Array ? sx : []),
+            ];
+        }
+    }
+};

src/theme/getStatusBoxStyles.ts

@@ -0,0 +1,49 @@
+import { BoxStatus } from '@/data/box/box.model';
+import { PartyStatus } from '@/data/party/party.model';
+
+export function getStatusColor(status: BoxStatus | PartyStatus) {
+    switch (status) {
+        case 'COLLECTING': {
+            return '#FD9C2B';
+        }
+        case 'ARRIVED': {
+            return '#08C1C1';
+        }
+        case 'ON_THE_WAY': {
+            return '#00bae7';
+        }
+        case 'READY_TO_INVOICE': {
+            return '#DF2F99';
+        }
+        case 'READY': {
+            return '#3489E4';
+        }
+        case 'DELIVERED': {
+            return '#3489E4';
+        }
+        case 'IN_CUSTOMS': {
+            return '#C9A26E';
+        }
+        default: {
+            return '#17D792';
+        }
+    }
+}
+
+export function getBoxStatusStyles(status: BoxStatus | PartyStatus) {
+    let color = getStatusColor(status);
+
+    return {
+        padding: '4px 8px',
+        color: '#FFF',
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '16px',
+        backgroundColor: color,
+        borderRadius: '4px',
+        display: 'inline-flex',
+        minWidth: 120,
+        justifyContent: 'center',
+    } as React.CSSProperties;
+}

src/theme/index.ts

@@ -0,0 +1 @@
+export { default as ThemeProvider } from './Provider';

src/theme/theme.ts

@@ -0,0 +1,149 @@
+'use client';
+
+import { Theme } from '@mui/material';
+import createTheme from '@mui/material/styles/createTheme';
+import { Inter } from 'next/font/google';
+
+export const inter = Inter({
+    weight: ['300', '400', '500', '700'],
+    subsets: ['latin', 'cyrillic'],
+    display: 'swap',
+    fallback: ['Arial', 'sans-serif'],
+});
+
+const theme_colors = {
+    primary: '#222',
+    secondary: '#666',
+
+    white: '#fff',
+
+    backgroundWhite: '#fff',
+    backgroundPage: '#fff',
+
+    fontFamily: 'sans-serif',
+};
+
+export const typographyFont = {
+    fontFamily: `"Inter", ${inter.style.fontFamily}, "Arial", sans-serif`,
+    src: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap',
+};
+
+const defaultTheme = createTheme();
+
+const getTheme = (): Theme => {
+    return {
+        ...defaultTheme,
+        components: {
+            MuiCssBaseline: {
+                styleOverrides(theme) {
+                    return {
+                        ...(typographyFont.src && {
+                            '@font-face': {
+                                fontFamily: typographyFont.fontFamily,
+                                src: `url(${typographyFont.src})`,
+                            },
+                        }),
+                        html: {
+                            boxSizing: 'border-box',
+                            scrollBehavior: 'smooth',
+                            fontSize: '16px',
+                        },
+                        body: {
+                            minHeight: '100vh',
+                            backgroundColor: theme_colors.backgroundPage,
+                            fontFamily: typographyFont.fontFamily,
+                        },
+                        '*, *::after, *::before': {
+                            boxSizing: 'inherit',
+                        },
+                        // '*:focus-visible': {
+                        //     outline: '2px dashed #479aff',
+                        //     outlineOffset: '3px',
+                        // },
+                        '.visually-hidden': {
+                            position: 'absolute',
+                            width: '1px',
+                            height: '1px',
+                            margin: '-1px',
+                            border: 0,
+                            padding: 0,
+                            clip: 'rect(0 0 0 0)',
+                            overflow: 'hidden',
+                        },
+                        '.no-select': {
+                            webkitTouchCallout: 'none',
+                            webkitUserSelect: 'none',
+                            khtmlUserSelect: 'none',
+                            mozUserSelect: 'none',
+                            msUserSelect: 'none',
+                            userSelect: 'none',
+                        },
+                        '.ellipsis': {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitLineClamp: 1,
+                            WebkitBoxOrient: 'vertical',
+                        },
+                        '.ellipsis2': {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                        },
+                        '.uppercase': {
+                            textTransform: 'uppercase',
+                        },
+                        '.pointer': {
+                            cursor: 'pointer',
+                        },
+                        // NOTE: SCROLL
+                        '::-webkit-scrollbar': {
+                            width: '5px',
+                        },
+                        /* Track */
+                        '::-webkit-scrollbar-track': {
+                            background: '#EDF1F7',
+                        },
+                        /* Handle */
+                        '::-webkit-scrollbar-thumb': {
+                            background: '#3489E4',
+                            borderRadius: '4px',
+                        },
+                        /* Handle on hover */
+                        '::-webkit-scrollbar-thumb:hover': {
+                            background: '#3b3b3b',
+                        },
+
+                        '@keyframes spin': {
+                            '0%': {
+                                transform: 'rotate(0deg)',
+                            },
+                            '100%': {
+                                transform: 'rotate(360deg)',
+                            },
+                        },
+                    };
+                },
+            },
+            MuiTypography: {
+                styleOverrides: {},
+            },
+            MuiButton: {
+                defaultProps: {
+                    variant: 'contained',
+                    disableRipple: true,
+                    disableElevation: true,
+                },
+            },
+            MuiIconButton: {
+                defaultProps: {
+                    disableRipple: true,
+                },
+            },
+        },
+    };
+};
+
+export default getTheme;