diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index dd4fa2d..4b3bed6 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -33,6 +33,8 @@ module.exports = { "react-hooks/rules-of-hooks": ERROR, eqeqeq: ERROR, "@typescript-eslint/array-type": [WARNING, { default: "array-simple" }], + // With Pigment CSS, the SX property is now available on html elements + "react/no-unknown-property": ["error", { ignore: ["sx"] }], // "sort-keys": WARNING, }, settings: { @@ -43,7 +45,7 @@ module.exports = { parserOptions: { ecmaVersion: "latest", sourceType: "module", - project: ["./tsconfig.eslint.json"], + project: ["./tsconfig.eslint.json", "./src/material-ui-pigment-css.d.ts"], tsconfigRootDir: __dirname, }, }; diff --git a/frontend/package.json b/frontend/package.json index 55fb82e..108a408 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,10 +14,9 @@ "preview": "vite preview" }, "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", - "@mui/icons-material": "5.15.21", - "@mui/material": "^5.15.21", + "@mui/icons-material": "^6.1.0", + "@mui/material": "^6.1.0", + "@mui/material-pigment-css": "^6.1.0", "axios": "^1.7.4", "classnames": "^2.5.1", "dayjs": "^1.11.11", @@ -37,6 +36,7 @@ "zustand": "^4.5.4" }, "devDependencies": { + "@pigment-css/vite-plugin": "^0.0.23", "@types/classnames": "^2.3.1", "@types/node": "^20.14.9", "@types/qs": "^6.9.15", diff --git a/frontend/src/app/components/accordion/Accordion.tsx b/frontend/src/app/components/accordion/Accordion.tsx index 0e779e0..c357953 100644 --- a/frontend/src/app/components/accordion/Accordion.tsx +++ b/frontend/src/app/components/accordion/Accordion.tsx @@ -1,19 +1,15 @@ -import { - AccordionProps, - Accordion as MuiAccordion, - styled, -} from "@mui/material"; -import style from "@styles/style.module.scss"; +import { AccordionProps, Accordion as MuiAccordion } from "@mui/material"; +import { styled } from "@mui/material-pigment-css"; -const StyledMuiAccordion = styled(MuiAccordion)({ - border: `1px solid ${style["stone-veryLight"]}`, +const StyledMuiAccordion = styled(MuiAccordion)(({ theme }) => ({ + border: `1px solid ${theme.palette.grey[300]}`, "&:not(:last-child)": { borderBottom: 0, }, "&::before": { display: "none", }, -}); +})); export default function Accordion({ children, ...props }: AccordionProps) { return ( diff --git a/frontend/src/app/components/accordionSummary/AccordionSummary.tsx b/frontend/src/app/components/accordionSummary/AccordionSummary.tsx index fd0615e..4e91204 100644 --- a/frontend/src/app/components/accordionSummary/AccordionSummary.tsx +++ b/frontend/src/app/components/accordionSummary/AccordionSummary.tsx @@ -2,20 +2,19 @@ import CaretIcon from "@icons/CaretIcon"; import { AccordionSummaryProps, AccordionSummary as MuiAccordionSummary, - styled, } from "@mui/material"; -import style from "@styles/style.module.scss"; +import { styled } from "@mui/material-pigment-css"; -const StyledMuiAccordionSummary = styled(MuiAccordionSummary)({ +const StyledMuiAccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({ flexDirection: "row-reverse", "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": { transform: "rotate(90deg)", }, "& .MuiAccordionSummary-content": { - marginLeft: style["spacing-md"], + marginLeft: theme.spacing(1), alignItems: "center", }, -}); +})); export default function AccordionSummary({ children, diff --git a/frontend/src/app/components/button/Button.tsx b/frontend/src/app/components/button/Button.tsx index c34c9ef..d7abae9 100644 --- a/frontend/src/app/components/button/Button.tsx +++ b/frontend/src/app/components/button/Button.tsx @@ -1,10 +1,9 @@ -import { ButtonProps, Button as MuiButton, styled } from "@mui/material"; -import style from "@styles/style.module.scss"; - -const StyledMuiButton = styled(MuiButton)({ - borderRadius: style["border-radius-xs"], -}); +import { ButtonProps, Button as MuiButton } from "@mui/material"; +import { styled } from "@mui/material-pigment-css"; +const StyledMuiButton = styled(MuiButton)(({ theme }) => ({ + borderRadius: theme.customProperties.borderRadius.xs, +})); interface IButton extends ButtonProps { target?: string; } diff --git a/frontend/src/app/components/dialog/Dialog.tsx b/frontend/src/app/components/dialog/Dialog.tsx index 80da253..0a20a88 100644 --- a/frontend/src/app/components/dialog/Dialog.tsx +++ b/frontend/src/app/components/dialog/Dialog.tsx @@ -1,12 +1,12 @@ import Slide from "@components/slide/Slide"; -import { DialogProps, Dialog as MuiDialog, styled } from "@mui/material"; -import style from "@styles/style.module.scss"; +import { DialogProps, Dialog as MuiDialog } from "@mui/material"; +import { styled } from "@mui/material-pigment-css"; -const StyledMuiDialog = styled(MuiDialog)({ +const StyledMuiDialog = styled(MuiDialog)(({ theme }) => ({ "& .MuiDialog-paper": { - margin: style["spacing-md"], + margin: theme.spacing(2), }, -}); +})); export default function Dialog({ ...props }: DialogProps) { return ( diff --git a/frontend/src/app/components/errorHelperText/ErrorHelperText.tsx b/frontend/src/app/components/errorHelperText/ErrorHelperText.tsx index c05348a..b312da2 100644 --- a/frontend/src/app/components/errorHelperText/ErrorHelperText.tsx +++ b/frontend/src/app/components/errorHelperText/ErrorHelperText.tsx @@ -1,7 +1,7 @@ -import Typography from "@components/typography/Typography"; +import Typography from "@mui/material/Typography"; import { RefObject, useEffect, useRef, useState } from "react"; import { CSSTransition, TransitionGroup } from "react-transition-group"; -import "./error-helper-text.scss"; +import classes from "./error-helper-text.module.css"; interface IErrorBox { message: string; @@ -21,16 +21,23 @@ export default function ErrorHelperText({ message }: IErrorBox) { {activeMessage && ( -
- {activeMessage} +
({ + marginTop: theme.spacing(0), + marginLeft: theme.spacing(1), + color: theme.palette.error.main, + })} + > + {activeMessage}
)} diff --git a/frontend/src/app/components/errorHelperText/error-helper-text.module.css b/frontend/src/app/components/errorHelperText/error-helper-text.module.css new file mode 100644 index 0000000..b1531b0 --- /dev/null +++ b/frontend/src/app/components/errorHelperText/error-helper-text.module.css @@ -0,0 +1,21 @@ +.enter { + opacity: 0; +} + +.enter-active { + opacity: 1; + /* + The time here is found in the theme.customProperties.time property. + Ideally we should be getting this value dynamically, from the theme. + */ + transition: opacity 0.35s ease-in; +} + +.exit { + opacity: 1; +} + +.exit-active { + opacity: 0; + transition: opacity 0.35s ease-out; +} diff --git a/frontend/src/app/components/errorHelperText/error-helper-text.scss b/frontend/src/app/components/errorHelperText/error-helper-text.scss deleted file mode 100644 index e57170d..0000000 --- a/frontend/src/app/components/errorHelperText/error-helper-text.scss +++ /dev/null @@ -1,25 +0,0 @@ -.error-helper-text { - &__container { - color: get-color(basic, error); - margin-top: get-spacing(xxs); - margin-left: get-spacing(md); - } - - &__enter { - opacity: 0; - - &-active { - opacity: 1; - transition: opacity get-time(normal) ease-in; - } - } - - &__exit { - opacity: 1; - - &-active { - opacity: 0; - transition: opacity get-time(normal) ease-out; - } - } -} diff --git a/frontend/src/app/components/fieldHelperText/FieldHelperText.tsx b/frontend/src/app/components/fieldHelperText/FieldHelperText.tsx index c4e8190..73d2762 100644 --- a/frontend/src/app/components/fieldHelperText/FieldHelperText.tsx +++ b/frontend/src/app/components/fieldHelperText/FieldHelperText.tsx @@ -1,5 +1,5 @@ import ErrorHelperText from "@components/errorHelperText/ErrorHelperText"; -import Typography from "@components/typography/Typography"; +import Typography from "@mui/material/Typography"; import { useTranslation } from "react-i18next"; import { ValidationError } from "yup"; @@ -44,8 +44,8 @@ export default function FieldHelperText({ } return ( - + {helperText} - + ); } diff --git a/frontend/src/app/components/layout/Layout.tsx b/frontend/src/app/components/layout/Layout.tsx index 2fa1a4d..377555e 100644 --- a/frontend/src/app/components/layout/Layout.tsx +++ b/frontend/src/app/components/layout/Layout.tsx @@ -1,25 +1,74 @@ -import classnames from "classnames"; import { ReactNode } from "react"; -import "./layout.scss"; +import { styled } from "@mui/material-pigment-css"; interface ILayout { children: ReactNode; className?: string; } +const LayoutContainer = styled("main")(({ theme }) => ({ + width: "100%", + display: "flex", + flexDirection: "column", + flexGrow: 1, + padding: theme.spacing(2), + alignItems: "center", + backgroundColor: "#fafafb", // TODO: get this from theme + + [theme.breakpoints.up("md")]: { + padding: theme.spacing(4), + }, + + [theme.breakpoints.up("lg")]: { + padding: theme.spacing(6), + }, + + [theme.breakpoints.up("xl")]: { + padding: theme.spacing(8), + }, + + "> .content": { + maxWidth: "82.5rem", + width: "100%", + }, +})); + function Container({ children, className }: ILayout) { return ( -
-
{children}
-
+ +
{children}
+ ); } +const LayoutAuth = styled("main")(({ theme }) => ({ + width: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + backgroundColor: "#fafafb", // TODO: get this from theme + + [theme.breakpoints.up("xs")]: { + flex: "1 1 auto", + }, + + "> .content": { + maxWidth: "82.5rem", + width: "100%", + + [theme.breakpoints.up("xs")]: { + maxWidth: 442, + padding: theme.spacing(2), + }, + }, +})); + function Auth({ children, className }: ILayout) { return ( -
-
{children}
-
+ +
{children}
+ ); } diff --git a/frontend/src/app/components/layout/layout.scss b/frontend/src/app/components/layout/layout.scss deleted file mode 100644 index 6927ac3..0000000 --- a/frontend/src/app/components/layout/layout.scss +++ /dev/null @@ -1,53 +0,0 @@ -.layout { - &__container { - width: 100%; - display: flex; - flex-direction: column; - flex-grow: 1; - padding: get-spacing(md); - align-items: center; - background-color: get-color(basic, background); - - @media (min-width: get-media(md)) { - padding: get-spacing(lg); - } - - @media (min-width: get-media(lg)) { - padding: get-spacing(lg) 4rem; - } - - @media (min-width: get-media(xl)) { - padding: get-spacing(lg) 6rem; - } - - &-content { - max-width: 82.5rem; - width: 100%; - } - } - - &__auth { - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: get-color(basic, background); - - @media (min-width: get-media(xs)) { - flex: 1 1 auto; - } - - &-content { - width: 100%; - padding: get-spacing(md); - background-color: get-color(basic, brightest); - - @media (min-width: get-media(xs)) { - max-width: 442px; - border-radius: get-border-radius(md); - padding: get-spacing(xl); - } - } - } -} diff --git a/frontend/src/app/components/link/Link.tsx b/frontend/src/app/components/link/Link.tsx index 5ea65fd..f60faa7 100644 --- a/frontend/src/app/components/link/Link.tsx +++ b/frontend/src/app/components/link/Link.tsx @@ -1,13 +1,13 @@ import ExternalLinkOutlined from "@icons/ExternalLinkOutlined"; -import { LinkProps, Link as MuiLink, styled } from "@mui/material"; -import style from "@styles/style.module.scss"; +import { LinkProps, Link as MuiLink } from "@mui/material"; +import { styled } from "@mui/material-pigment-css"; -const StyledMuiLink = styled(MuiLink)({ +const StyledMuiLink = styled(MuiLink)(({ theme }) => ({ display: "flex", - color: style["primary-main"], + color: theme.palette.primary.main, textDecorationColor: "unset", cursor: "pointer", -}); +})); interface ILink extends LinkProps { external?: boolean; diff --git a/frontend/src/app/components/loading/Loading.tsx b/frontend/src/app/components/loading/Loading.tsx index 006d97d..1491c64 100755 --- a/frontend/src/app/components/loading/Loading.tsx +++ b/frontend/src/app/components/loading/Loading.tsx @@ -1,7 +1,7 @@ import Spinner from "@components/spinner/Spinner"; import { RefObject, useRef } from "react"; import { CSSTransition, TransitionGroup } from "react-transition-group"; -import "./loading.scss"; +import classes from "./loading.module.css"; interface ILoading { isLoading?: boolean; @@ -15,16 +15,23 @@ export default function Loading({ isLoading = true }: ILoading) { {isLoading && ( -
-
+
({ + backgroundColor: theme.palette.common.white, + zIndex: theme.zIndex.loading, + })} + > +
diff --git a/frontend/src/app/components/loading/loading.module.css b/frontend/src/app/components/loading/loading.module.css new file mode 100644 index 0000000..66af09c --- /dev/null +++ b/frontend/src/app/components/loading/loading.module.css @@ -0,0 +1,30 @@ +.loading { + display: flex; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.spinner { + margin: auto; +} + +.enter { + opacity: 0; +} + +.enter-active { + opacity: 1; + transition: opacity 0.5s ease-in; +} + +.exit { + opacity: 1; +} + +.enter-active { + opacity: 0; + transition: opacity 0.5s ease-out; +} diff --git a/frontend/src/app/components/loading/loading.scss b/frontend/src/app/components/loading/loading.scss deleted file mode 100644 index f84ae1b..0000000 --- a/frontend/src/app/components/loading/loading.scss +++ /dev/null @@ -1,32 +0,0 @@ -.loading { - display: flex; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: get-color(basic, brightest); - z-index: get-z(1000); - - &__enter { - opacity: 0; - - &-active { - opacity: 1; - transition: opacity get-time(slow) ease-in; - } - } - - &__exit { - opacity: 1; - - &-active { - opacity: 0; - transition: opacity get-time(slow) ease-out; - } - } - - &__spinner { - margin: auto; - } -} diff --git a/frontend/src/app/components/spinner/Spinner.tsx b/frontend/src/app/components/spinner/Spinner.tsx index 5c46a8e..229ac66 100755 --- a/frontend/src/app/components/spinner/Spinner.tsx +++ b/frontend/src/app/components/spinner/Spinner.tsx @@ -1,5 +1,15 @@ -import "./spinner.scss"; +import classes from "./spinner.module.css"; export default function Spinner() { - return ; + return ( + ({ + backgroundImage: `linear-gradient(${theme.palette.primary.main} 16px,transparent 0), + linear-gradient(${theme.palette.primary.main} 16px, transparent 0), + linear-gradient(${theme.palette.primary.main} 16px, transparent 0), + linear-gradient(${theme.palette.primary.dark} 16px, transparent 0)`, + })} + className={classes["spinner"]} + /> + ); } diff --git a/frontend/src/app/components/spinner/spinner.scss b/frontend/src/app/components/spinner/spinner.module.css similarity index 64% rename from frontend/src/app/components/spinner/spinner.scss rename to frontend/src/app/components/spinner/spinner.module.css index 8992d0a..d74fb71 100644 --- a/frontend/src/app/components/spinner/spinner.scss +++ b/frontend/src/app/components/spinner/spinner.module.css @@ -23,13 +23,6 @@ height: 64px; display: block; position: relative; - background-image: linear-gradient( - get-color(primary, dark) 16px, - transparent 0 - ), - linear-gradient(get-color(primary, main) 16px, transparent 0), - linear-gradient(get-color(primary, main) 16px, transparent 0), - linear-gradient(get-color(primary, dark) 16px, transparent 0); background-repeat: no-repeat; background-size: 16px 16px; background-position: diff --git a/frontend/src/app/components/switch/Switch.tsx b/frontend/src/app/components/switch/Switch.tsx index ede7422..0b66d26 100644 --- a/frontend/src/app/components/switch/Switch.tsx +++ b/frontend/src/app/components/switch/Switch.tsx @@ -1,12 +1,12 @@ -import { Switch as MuiSwitch, styled, SwitchProps } from "@mui/material"; -import style from "@styles/style.module.scss"; +import { Switch as MuiSwitch, SwitchProps } from "@mui/material"; +import { styled } from "@mui/material-pigment-css"; -const StyledMuiSwitch = styled(MuiSwitch)({ - padding: style["spacing-xs"], +const StyledMuiSwitch = styled(MuiSwitch)(({ theme }) => ({ transform: "scale(1.125)", + padding: theme.spacing("xs"), "& .MuiSwitch-track": { - borderRadius: style["border-radius-md"], + borderRadius: theme.customProperties.borderRadius.md, "&::before, &::after": { content: '""', @@ -32,7 +32,7 @@ const StyledMuiSwitch = styled(MuiSwitch)({ height: 16, margin: 2, }, -}); +})); export default function Switch({ ...props }: SwitchProps) { return ; diff --git a/frontend/src/app/components/tableRow/TableRow.tsx b/frontend/src/app/components/tableRow/TableRow.tsx index 1325809..b1efec8 100644 --- a/frontend/src/app/components/tableRow/TableRow.tsx +++ b/frontend/src/app/components/tableRow/TableRow.tsx @@ -1,21 +1,20 @@ import { TableRow as MuiTableRow, - styled, TableCell, TableRowProps, } from "@mui/material"; -import style from "@styles/style.module.scss"; +import { styled } from "@mui/material-pigment-css"; interface ITableRow extends TableRowProps { columns: string[]; } -const StyledMuiTableRow = styled(MuiTableRow)({ +const StyledMuiTableRow = styled(MuiTableRow)(({ theme }) => ({ "&:last-child td, &:last-child th": { border: 0 }, "&:nth-of-type(odd)": { - backgroundColor: style["basic-background"], + backgroundColor: theme.palette.background.default, }, -}); +})); export default function TableRow({ columns, ...props }: ITableRow) { return ( diff --git a/frontend/src/app/components/textField/TextField.tsx b/frontend/src/app/components/textField/TextField.tsx index a6a5118..a71e29f 100644 --- a/frontend/src/app/components/textField/TextField.tsx +++ b/frontend/src/app/components/textField/TextField.tsx @@ -1,18 +1,14 @@ -import { - TextField as MuiTextField, - TextFieldProps, - styled, -} from "@mui/material"; -import style from "@styles/style.module.scss"; +import { TextField as MuiTextField, TextFieldProps } from "@mui/material"; +import { styled } from "@mui/material-pigment-css"; import { ChangeEvent } from "react"; interface ITextField extends Omit { onChange: (value: string) => void; } -const StyledMuiTextField = styled(MuiTextField)({ - borderRadius: style["border-radius-sm"], -}); +const StyledMuiTextField = styled(MuiTextField)(({ theme }) => ({ + borderRadius: theme.customProperties.borderRadius.md, +})); export default function TextField({ onChange, value, ...props }: ITextField) { return ( diff --git a/frontend/src/app/components/typography/Typography.tsx b/frontend/src/app/components/typography/Typography.tsx deleted file mode 100644 index 5d2da7f..0000000 --- a/frontend/src/app/components/typography/Typography.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import classnames from "classnames"; -import { ReactNode } from "react"; -import "./typography.scss"; - -interface ITypography { - children: ReactNode; - className?: string; - as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"; -} - -function Heading1({ children, className, as: Component = "h1" }: ITypography) { - return ( - - {children} - - ); -} - -function Heading2({ children, className, as: Component = "h2" }: ITypography) { - return ( - - {children} - - ); -} - -function Heading3({ children, className, as: Component = "h3" }: ITypography) { - return ( - - {children} - - ); -} - -function Heading4({ children, className, as: Component = "h4" }: ITypography) { - return ( - - {children} - - ); -} - -function Heading5({ children, className, as: Component = "h5" }: ITypography) { - return ( - - {children} - - ); -} - -function Heading6({ children, className, as: Component = "h6" }: ITypography) { - return ( - - {children} - - ); -} - -function Caption({ children, className, as: Component = "p" }: ITypography) { - return ( - - {children} - - ); -} - -function Overline({ children, className, as: Component = "p" }: ITypography) { - return ( - - {children} - - ); -} - -function Subtitle1({ children, className, as: Component = "p" }: ITypography) { - return ( - - {children} - - ); -} - -function Subtitle2({ children, className, as: Component = "p" }: ITypography) { - return ( - - {children} - - ); -} - -function Body1({ children, className, as: Component = "p" }: ITypography) { - return ( - - {children} - - ); -} - -function Body2({ children, className, as: Component = "p" }: ITypography) { - return ( - - {children} - - ); -} - -function ButtonSmall({ - children, - className, - as: Component = "span", -}: ITypography) { - return ( - - {children} - - ); -} - -function ButtonMedium({ - children, - className, - as: Component = "span", -}: ITypography) { - return ( - - {children} - - ); -} - -function ButtonLarge({ - children, - className, - as: Component = "span", -}: ITypography) { - return ( - - {children} - - ); -} - -const Typography = { - Heading1, - Heading2, - Heading3, - Heading4, - Heading5, - Heading6, - Caption, - Overline, - Subtitle1, - Subtitle2, - Body1, - Body2, - ButtonSmall, - ButtonMedium, - ButtonLarge, -}; - -export default Typography; diff --git a/frontend/src/app/components/typography/typography.scss b/frontend/src/app/components/typography/typography.scss deleted file mode 100644 index 6a1f98d..0000000 --- a/frontend/src/app/components/typography/typography.scss +++ /dev/null @@ -1,108 +0,0 @@ -.typography { - &__heading1 { - font-size: get-font-size(xtl); - line-height: get-line-height(xxl); - font-weight: get-font-weight(semi-bold); - letter-spacing: get-letter-spacing(xs); - color: get-color(basic, text); - } - - &__heading2 { - font-size: get-font-size(xxl); - line-height: get-line-height(xl); - font-weight: get-font-weight(bold); - letter-spacing: get-letter-spacing(sm); - color: get-color(basic, text); - } - - &__heading3 { - font-size: get-font-size(xl); - line-height: get-line-height(lg); - font-weight: get-font-weight(bold); - color: get-color(basic, text); - } - - &__heading4 { - font-size: get-font-size(lg); - line-height: get-line-height(md); - font-weight: get-font-weight(bold); - letter-spacing: get-letter-spacing(lg); - color: get-color(basic, text); - } - - &__heading5 { - font-size: get-font-size(md); - line-height: get-line-height(sm); - font-weight: get-font-weight(semi-bold); - color: get-color(basic, text); - } - - &__heading6 { - font-size: get-font-size(sm); - line-height: get-line-height(xs); - font-weight: get-font-weight(medium); - letter-spacing: get-letter-spacing(md); - color: get-color(basic, text); - } - - &__subtitle1 { - font-size: get-font-size(xs); - line-height: get-line-height(xs); - font-weight: get-font-weight(medium); - letter-spacing: get-letter-spacing(lg); - } - - &__subtitle2 { - font-size: get-font-size(xxs); - line-height: get-line-height(xxs); - font-weight: get-font-weight(medium); - letter-spacing: get-letter-spacing(md); - } - - &__body1 { - font-size: get-font-size(xs); - line-height: get-line-height(xs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(lg); - } - - &__body2 { - font-size: get-font-size(xxs); - line-height: get-line-height(xxs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(md); - } - - &__caption { - font-size: get-font-size(xts); - line-height: get-line-height(xxs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(xl); - } - - &__overline { - font-size: get-font-size(xts); - line-height: get-line-height(xxs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(xxl); - text-transform: uppercase; - } - - &__button-small { - font-size: get-font-size(xts); - line-height: get-line-height(xs); - font-weight: get-font-weight(semi-bold); - } - - &__button-medium { - font-size: get-font-size(xxs); - line-height: get-line-height(xs); - font-weight: get-font-weight(semi-bold); - } - - &__button-large { - font-size: get-font-size(xs); - line-height: get-line-height(xs); - font-weight: get-font-weight(semi-bold); - } -} diff --git a/frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx b/frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx index b8feda2..aabe4e4 100644 --- a/frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx +++ b/frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx @@ -1,7 +1,6 @@ import { ReactNode } from "react"; import { Highlight, themes } from "prism-react-renderer"; -import "./uikit-block.scss"; -import Typography from "@components/typography/Typography"; +import Typography from "@mui/material/Typography"; import Button from "@components/button/Button"; import { toast } from "react-toastify"; import { useTranslation } from "react-i18next"; @@ -27,13 +26,29 @@ export default function UikitBlock({ }; return ( -
- {title} +
({ + display: "flex", + flexDirection: "column", + gap: theme.spacing(1), + })} + > + {title} {children} {codeBlock && ( {({ style, tokens, getLineProps, getTokenProps }) => ( - 
+            
 ({
+                borderRadius: theme.customProperties.borderRadius.sm,
+                padding: theme.spacing(2),
+                position: "relative",
+              })}
+            >
               {tokens.map((line, i) => (
                 

                   {line.map((token, key) => (
@@ -42,7 +57,13 @@ export default function UikitBlock({
                 

               ))}
 
-              

+              
 ({
+                  top: theme.spacing(1),
+                  right: theme.spacing(1),
+                  position: "absolute",
+                })}
+              >
                 
-            

+            
           

-
+
); diff --git a/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.module.css b/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.module.css new file mode 100644 index 0000000..5390453 --- /dev/null +++ b/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.module.css @@ -0,0 +1,24 @@ +.cookie-banner { + width: 100%; + position: fixed; +} + +.container { + position: relative; + left: 50%; + width: 80%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; +} + +.actions { + display: flex; + align-items: center; +} + +.link { + display: flex; + justify-content: center; + white-space: nowrap; +} diff --git a/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.scss b/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.scss deleted file mode 100644 index 237fc85..0000000 --- a/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.scss +++ /dev/null @@ -1,73 +0,0 @@ -.cookie-banner { - width: 100%; - position: fixed; - bottom: get-spacing(md); - - &__container { - position: relative; - left: 50%; - width: 80%; - transform: translateX(-50%); - z-index: get-z(100); - padding: get-spacing(md); - gap: get-spacing(xxl); - display: flex; - justify-content: space-between; - background-color: get-color(basic, brightest); - border: 1px solid get-color(stone, light); - box-shadow: 0 0 10px -6px get-color(basic, darkest); - - @media (max-width: (get-media(xxs) - 1)) { - width: 90%; - } - - @media (max-width: (get-media(md) - 1)) { - flex-direction: column; - gap: get-spacing(lg); - padding: get-spacing(lg) get-spacing(md); - } - } - - &__description { - display: flex; - align-items: center; - } - - &__actions { - display: flex; - align-items: center; - gap: get-spacing(sm); - - @media (max-width: (get-media(lg) - 1)) { - flex-direction: column; - } - - &-link { - display: flex; - justify-content: center; - white-space: nowrap; - margin-top: get-spacing(xxs); - - @media (min-width: get-media(lg)) { - margin-top: 0; - margin-right: get-spacing(md); - } - } - - &-buttons { - display: flex; - white-space: nowrap; - gap: get-spacing(md); - - @media (max-width: (get-media(xs) - 1)) { - width: 100%; - flex-direction: column; - gap: get-spacing(xs); - } - - > * { - flex: 1; - } - } - } -} diff --git a/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx b/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx index 201c5d6..89a3dd6 100644 --- a/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx +++ b/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx @@ -7,7 +7,7 @@ import Link from "@components/link/Link"; import Switch from "@components/switch/Switch"; import Table from "@components/table/Table"; import TableRow from "@components/tableRow/TableRow"; -import Typography from "@components/typography/Typography"; +import Typography from "@mui/material/Typography"; import ICookieSection from "@containers/cookieConsent/interfaces/ICookieSection"; import CloseIcon from "@icons/CloseIcon"; import { @@ -68,34 +68,32 @@ export default function CookieModal({
- - {t("cookie_modal__title")} - + {t("cookie_modal__title")}
- + {t("cookie_modal__description_1")} - - + + {t("cookie_modal__description_2")} - + - + {t("cookie_consent__learn_more")} - +
- + {t("cookie_modal__description_3")} - +
{cookieTypes.map((cookieType, index) => ( @@ -105,9 +103,9 @@ export default function CookieModal({ onChange={handleExpand(index)} > - + {t(cookieType.title)} - + {cookieType.description.map((description, index) => ( - + {t(description)} - + ))} {cookieType.cookies && (
diff --git a/frontend/src/app/containers/debugBanner/DebugBanner.tsx b/frontend/src/app/containers/debugBanner/DebugBanner.tsx index 88f378e..6598590 100644 --- a/frontend/src/app/containers/debugBanner/DebugBanner.tsx +++ b/frontend/src/app/containers/debugBanner/DebugBanner.tsx @@ -5,7 +5,7 @@ import classNames from "classnames"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; -import "./debug-banner.scss"; +import classes from "./debug-banner.module.css"; const HIDE_BANNER_UNTIL_KEY = "hideBannerUntil"; const FOUR_HOURS = 4 * 60 * 60 * 1000; @@ -42,17 +42,20 @@ export default function DebugBanner() { } return ( -
+
({ + zIndex: theme.zIndex.debugBanner, + })} + className={classNames(classes["content"], { + [classes["local"]]: __ENV__ === "local", + [classes["dev"]]: __ENV__ === "dev", + [classes["qa"]]: __ENV__ === "qa", + [classes["uat"]]: __ENV__ === "uat", + [classes["staging"]]: __ENV__ === "staging", })} > -
+
{pages.map((page, i) => ( diff --git a/frontend/src/app/containers/debugBanner/debug-banner.module.css b/frontend/src/app/containers/debugBanner/debug-banner.module.css new file mode 100644 index 0000000..df5427b --- /dev/null +++ b/frontend/src/app/containers/debugBanner/debug-banner.module.css @@ -0,0 +1,31 @@ +.container { + position: fixed; + width: 100%; + bottom: 0; +} + +.content { + width: 100%; + display: flex; + justify-content: space-between; +} + +.local { + background-color: #d4e157; +} + +.dev { + background-color: #42a5f5; +} + +.qa { + background-color: #ffca28; +} + +.uat { + background-color: #7e57c2; +} + +.staging { + background-color: #8d6e63; +} diff --git a/frontend/src/app/containers/debugBanner/debug-banner.scss b/frontend/src/app/containers/debugBanner/debug-banner.scss deleted file mode 100644 index 0c6e20d..0000000 --- a/frontend/src/app/containers/debugBanner/debug-banner.scss +++ /dev/null @@ -1,34 +0,0 @@ -/* stylelint-disable color-no-hex */ -.debug-banner { - width: 100%; - display: flex; - justify-content: space-between; - gap: get-spacing(xs); - - &__container { - position: fixed; - width: 100%; - bottom: 0; - z-index: get-z(100); - } - - &__local { - background-color: #d4e157; - } - - &__dev { - background-color: #42a5f5; - } - - &__qa { - background-color: #ffca28; - } - - &__uat { - background-color: #7e57c2; - } - - &__staging { - background-color: #8d6e63; - } -} diff --git a/frontend/src/app/enums/EPermission.ts b/frontend/src/app/enums/EPermission.ts index 69e1f46..8e07d48 100644 --- a/frontend/src/app/enums/EPermission.ts +++ b/frontend/src/app/enums/EPermission.ts @@ -1,5 +1,6 @@ const enum EPermission { HomeRead = "HomeRead", + DashboardRead = "DashboardRead", UikitRead = "UikitRead", } diff --git a/frontend/src/app/icons/AddRounded.tsx b/frontend/src/app/icons/AddRounded.tsx index ea5395c..75454b2 100644 --- a/frontend/src/app/icons/AddRounded.tsx +++ b/frontend/src/app/icons/AddRounded.tsx @@ -1,9 +1,7 @@ -import style from "@styles/style.module.scss"; import IIcon from "./IIcon"; export default function AddRounded({ className, - color = style["basic-brightest"], width = 24, height = 24, alt = "Add Rounded", @@ -20,7 +18,9 @@ export default function AddRounded({ {alt} ({ + fill: theme.palette.common.white, + })} /> ); diff --git a/frontend/src/app/icons/CaretIcon.tsx b/frontend/src/app/icons/CaretIcon.tsx index 482297f..2abf125 100644 --- a/frontend/src/app/icons/CaretIcon.tsx +++ b/frontend/src/app/icons/CaretIcon.tsx @@ -1,9 +1,7 @@ -import style from "@styles/style.module.scss"; import IIcon from "./IIcon"; export default function CaretIcon({ className, - color = style["stone-dark"], width = 24, height = 24, alt = "Caret Icon", @@ -18,7 +16,12 @@ export default function CaretIcon({ xmlns="http://www.w3.org/2000/svg" > {alt} - + ({ + fill: theme.palette.grey[800], + })} + /> ); } diff --git a/frontend/src/app/icons/CloseIcon.tsx b/frontend/src/app/icons/CloseIcon.tsx index 73ec147..f6fd101 100644 --- a/frontend/src/app/icons/CloseIcon.tsx +++ b/frontend/src/app/icons/CloseIcon.tsx @@ -1,9 +1,7 @@ -import style from "@styles/style.module.scss"; import IIcon from "./IIcon"; export default function CloseIcon({ className, - color = style["stone-dark"], width = 24, height = 24, alt = "Close Icon", @@ -20,7 +18,9 @@ export default function CloseIcon({ {alt} ({ + fill: theme.palette.grey[800], + })} /> ); diff --git a/frontend/src/app/icons/CookieIcon.tsx b/frontend/src/app/icons/CookieIcon.tsx index 1ce77c5..e5258ca 100644 --- a/frontend/src/app/icons/CookieIcon.tsx +++ b/frontend/src/app/icons/CookieIcon.tsx @@ -1,9 +1,7 @@ -import style from "@styles/style.module.scss"; import IIcon from "./IIcon"; export default function CookieIcon({ className, - color = style["primary-main"], width = 24, height = 25, alt = "Cookie Icon", @@ -14,7 +12,9 @@ export default function CookieIcon({ width={width} height={height} viewBox="0 0 24 25" - fill={color} + sx={(theme) => ({ + fill: theme.palette.primary.main, + })} xmlns="http://www.w3.org/2000/svg" > {alt} diff --git a/frontend/src/app/icons/ExternalLinkOutlined.tsx b/frontend/src/app/icons/ExternalLinkOutlined.tsx index b916d10..1f9076a 100644 --- a/frontend/src/app/icons/ExternalLinkOutlined.tsx +++ b/frontend/src/app/icons/ExternalLinkOutlined.tsx @@ -1,9 +1,7 @@ -import style from "@styles/style.module.scss"; import IIcon from "./IIcon"; export default function ExternalLinkOutlined({ className, - color = style["primary-main"], width = 16, height = 16, alt = "External Link Outlined", @@ -20,7 +18,9 @@ export default function ExternalLinkOutlined({ {alt} ({ + fill: theme.palette.primary.main, + })} /> ); diff --git a/frontend/src/app/icons/LogoutRounded.tsx b/frontend/src/app/icons/LogoutRounded.tsx index 156d04c..796094b 100644 --- a/frontend/src/app/icons/LogoutRounded.tsx +++ b/frontend/src/app/icons/LogoutRounded.tsx @@ -1,9 +1,7 @@ -import style from "@styles/style.module.scss"; import IIcon from "./IIcon"; export default function LogoutRounded({ className, - color = style["basic-brightest"], width = 24, height = 24, alt = "Logout Rounded", @@ -20,11 +18,15 @@ export default function LogoutRounded({ {alt} ({ + fill: theme.palette.common.white, + })} /> ({ + fill: theme.palette.common.white, + })} /> ); diff --git a/frontend/src/app/pages/dashbaord/Dashboard.tsx b/frontend/src/app/pages/dashbaord/Dashboard.tsx new file mode 100644 index 0000000..a968fe7 --- /dev/null +++ b/frontend/src/app/pages/dashbaord/Dashboard.tsx @@ -0,0 +1,7 @@ +import Layout from "@components/layout/Layout"; + +function Home() { + return DASHBOARD; +} + +export default Home; diff --git a/frontend/src/app/pages/dashbaord/dashboard.route.tsx b/frontend/src/app/pages/dashbaord/dashboard.route.tsx new file mode 100755 index 0000000..5bb90e7 --- /dev/null +++ b/frontend/src/app/pages/dashbaord/dashboard.route.tsx @@ -0,0 +1,15 @@ +import en from "@assets/locales/en.json"; +import fr from "@assets/locales/fr.json"; +import { IRoute } from "@routes/interfaces/IRoute"; +import { lazy } from "react"; + +const dashboardRoute: IRoute = { + name: "dashboard__page_title", + component: lazy(() => import("./withAuthDashboard")), + paths: { + en: `/${en.locale__key}/${en.routes__dashboard}`, + fr: `/${fr.locale__key}/${fr.routes__dashboard}`, + }, +}; + +export default dashboardRoute; diff --git a/frontend/src/app/pages/dashbaord/withAuthDashboard.tsx b/frontend/src/app/pages/dashbaord/withAuthDashboard.tsx new file mode 100644 index 0000000..4cdd944 --- /dev/null +++ b/frontend/src/app/pages/dashbaord/withAuthDashboard.tsx @@ -0,0 +1,7 @@ +import EPermission from "@enums/EPermission"; +import withAuth from "@hocs/withAuth"; +import Dashboard from "@pages/dashbaord/Dashboard"; + +const withAuthDashboard = withAuth(Dashboard, EPermission.DashboardRead); + +export default withAuthDashboard; diff --git a/frontend/src/app/pages/home/Home.tsx b/frontend/src/app/pages/home/Home.tsx index eade898..a968ac9 100644 --- a/frontend/src/app/pages/home/Home.tsx +++ b/frontend/src/app/pages/home/Home.tsx @@ -2,7 +2,7 @@ import logo from "@assets/images/logo.png"; import reactLogo from "@assets/react.svg"; import Button from "@components/button/Button"; import Layout from "@components/layout/Layout"; -import Typography from "@components/typography/Typography"; +import Typography from "@mui/material/Typography"; import AddRounded from "@icons/AddRounded"; import LogoutRounded from "@icons/LogoutRounded"; import loginRoute from "@pages/login/login.route"; @@ -56,14 +56,17 @@ function Home() {
- {`${t("home__welcome")} ${user?.firstName} ${user?.lastName}`} + {`${t("home__welcome")} ${user?.firstName} ${user?.lastName}`} - + VERSION: {__VERSION_NUMBER__} - - + + API_URL: {__API_URL__} - +
diff --git a/frontend/src/app/pages/login/Login.tsx b/frontend/src/app/pages/login/Login.tsx index c9921fc..0837d47 100644 --- a/frontend/src/app/pages/login/Login.tsx +++ b/frontend/src/app/pages/login/Login.tsx @@ -1,13 +1,14 @@ -import Layout from "@components/layout/Layout"; import Link from "@components/link/Link"; import Loading from "@components/loading/Loading"; -import Typography from "@components/typography/Typography"; +import Typography from "@mui/material/Typography"; import LoginForm from "@forms/auth/loginForm/LoginForm"; import findRoute from "@routes/findRoute"; import i18n from "@shared/i18n"; import { useCallback, useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; +import Layout from "@components/layout/Layout"; +// import Container from "@mui/material-pigment-css/Container"; export default function Login() { const { t } = useTranslation(); @@ -22,29 +23,30 @@ export default function Login() { return ( <> +
- + {t("login__page_title")} - - + + User: oliviaw - - + + Password: oliviawpass - + - {t("login__more_user")} + {t("login__more_user")}
- {t("locale__switch")} + {t("locale__switch")} - + {`${t("global__version")}: ${__VERSION_NUMBER__}`} - +
diff --git a/frontend/src/app/pages/notFound/NotFound.tsx b/frontend/src/app/pages/notFound/NotFound.tsx index 1ba40f0..0da0742 100644 --- a/frontend/src/app/pages/notFound/NotFound.tsx +++ b/frontend/src/app/pages/notFound/NotFound.tsx @@ -1,26 +1,31 @@ import Button from "@components/button/Button"; -import Typography from "@components/typography/Typography"; +import Typography from "@mui/material/Typography"; import homeRoute from "@pages/home/home.route"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; -import "./not-found.scss"; +import classes from "./not-found.module.css"; export default function NotFound() { const [t] = useTranslation(); const navigate = useNavigate(); return ( -
-
- +
({ + padding: theme.spacing(4), + })} + className={classes["not-found"]} + > +
+ {t("not_found__title")} - - + + {t("not_found__description")} - - + + {t("not_found__description_secondary")} - +