4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Max S 2024-07-17 11:56:49 +02:00
commit bf05a00e96
7 changed files with 64 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/front/Components/DesignSystem/Button/classes.module.scss
View File

@ -9,7 +9,7 @@
align-items: center; align-items: center;
background: transparent; background: transparent;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: var(--font-text-weight-regular, 400);
white-space: nowrap; white-space: nowrap;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
@ -26,18 +26,18 @@
&[variant="primary"] { &[variant="primary"] {
color: var(--color-primary-500); color: var(--color-primary-500);
background: var(--color-primary-500); border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
border-color: var(--color-primary-500); background: var(--button-contained-primary-default-background, #005bcb);
&:hover { &:hover {
background: var(--color-primary-700); border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0));
border-color: var(--color-primary-700); background: var(--button-contained-primary-hovered-background, #0040a4);
} }
&:focus, &:focus,
&:active { &:active {
background: var(--color-primary-800); border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0));
border-color: var(--color-primary-800); background: var(--button-contained-primary-pressed-background, #013391);
} }
&[styleType="outlined"] { &[styleType="outlined"] {

4
src/front/Components/DesignSystem/CircleProgress/classes.module.scss
View File

@ -12,12 +12,12 @@
.circleBackground { .circleBackground {
fill: none; fill: none;
stroke: var(--background-elevation-2); stroke: var(--progress-circle-background);
} }
.circleProgress { .circleProgress {
fill: none; fill: none;
stroke: var(--color-secondary-500); stroke: var(--progress-circle-contrast);
transition: stroke-dashoffset 0.35s; transition: stroke-dashoffset 0.35s;
} }
} }

4
src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss
View File

@ -15,7 +15,7 @@
svg { svg {
cursor: pointer; cursor: pointer;
min-width: 21px; min-width: 21px;
fill: var(--color-neutral-600); fill: var(--table-header-contrast);
} }
} }
@ -36,7 +36,7 @@
.row { .row {
&:hover { &:hover {
background-color: var(--background-elevation-1); background-color: var(--table-background-hovered);
} }
} }
} }

7
src/front/Components/DesignSystem/Table/MuiTable/index.tsx
View File

@ -51,10 +51,11 @@ export default function MuiTable(props: IProps) {
return ( return (
<InfiniteScroll orientation="vertical" onNext={props.onNext} offset={0}> <InfiniteScroll orientation="vertical" onNext={props.onNext} offset={0}>
<TableContainer className={classes["root"]} sx={{ maxHeight: "80vh", overflowY: "auto", overflowX: "hidden" }}> <TableContainer
className={classes["root"]}
sx={{ maxHeight: "80vh", overflowY: "auto", overflowX: "hidden", backgroundColor: "var(--table-background-default)" }}>
<Table aria-label="simple table" sx={{ border: "0" }}> <Table aria-label="simple table" sx={{ border: "0" }}>
<TableHead <TableHead sx={{ position: "sticky", top: "0", borderBottom: "1px solid var(--table-header-border)" }}>
sx={{ position: "sticky", top: "0", borderBottom: "1px solid var(--color-neutral-200)" }}>
<TableRow> <TableRow>
{props.header.map((column) => ( {props.header.map((column) => (
<TableCell key={column.key} align={"left"} sx={{ border: 0, padding: "4px 8px" }}> <TableCell key={column.key} align={"left"} sx={{ border: 0, padding: "4px 8px" }}>

14
src/front/Components/DesignSystem/Tag/classes.module.scss
View File

@ -9,18 +9,18 @@
justify-content: center; justify-content: center;
&.info { &.info {
background-color: var(--color-info-50); background-color: var(--tag-info-background);
} }
&.success { &.success {
background-color: var(--color-success-50); background-color: var(--tag-success-background);
}
&.error {
background-color: var(--color-error-50);
} }
&.warning { &.warning {
background-color: var(--color-warning-50); background-color: var(--tag-warning-background);
}
&.error {
background-color: var(--tag-error-background);
} }
} }

10
src/front/Components/LayoutTemplates/DefaultTemplate/classes.module.scss
View File

@ -1,19 +1,19 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
margin: var(--root-margin); margin: auto;
max-width: var(--root-max-width); max-width: 1440px;
min-width: 100%; min-width: 100%;
&.padding { &.padding {
padding: var(--root-padding); padding: var(--spacing-10) var(--spacing-3);
@media screen and (max-width: $screen-m) { @media screen and (max-width: $screen-m) {
padding: 0 24px; padding: 0 var(--spacing-3);
} }
@media screen and (max-width: $screen-s) { @media screen and (max-width: $screen-s) {
padding: 0 16px; padding: 0 var(--spacing-2);
} }
} }
} }

74
src/front/Themes/variables.scss
View File

@ -83,41 +83,41 @@
--color-warning-900: #7a340e; --color-warning-900: #7a340e;
--color-warning-950: #461a02; --color-warning-950: #461a02;
/* number */ /* number */
--radius-xs: 0.125rem; --radius-xs: 2px;
--radius-sm: 0.25rem; --radius-sm: 4px;
--radius-md: 0.5rem; --radius-md: 8px;
--radius-lg: 1rem; --radius-lg: 16px;
--radius-xl: 1.5rem; --radius-xl: 24px;
--radius-2xl: 2rem; --radius-2xl: 32px;
--radius-3xl: 22.5rem; --radius-3xl: 360px;
--font-text-weight-light: 18.75rem; --font-text-weight-light: 300;
--font-text-weight-regular: 25rem; --font-text-weight-regular: 400;
--font-text-weight-semibold: 37.5rem; --font-text-weight-semibold: 600;
--font-text-weight-bold: 43.75rem; --font-text-weight-bold: 700;
--font-title-weight-light: 18.75rem; --font-title-weight-light: 300;
--font-title-weight-regular: 25rem; --font-title-weight-regular: 400;
--font-title-weight-semibold: 37.5rem; --font-title-weight-semibold: 600;
--font-title-weight-bold: 43.75rem; --font-title-weight-bold: 700;
--spacing-0-25: 0.125rem; --spacing-0-25: 2px;
--spacing-0-5: 0.25rem; --spacing-0-5: 4px;
--spacing-0-75: 0.375rem; --spacing-0-75: 6px;
--spacing-1: 0.5rem; --spacing-1: 8px;
--spacing-1-5: 0.75rem; --spacing-1-5: 12px;
--spacing-2: 1rem; --spacing-2: 16px;
--spacing-3: 1.5rem; --spacing-3: 24px;
--spacing-4: 2rem; --spacing-4: 32px;
--spacing-5: 2.5rem; --spacing-5: 40px;
--spacing-6: 3rem; --spacing-6: 48px;
--spacing-7: 3.5rem; --spacing-7: 56px;
--spacing-8: 4rem; --spacing-8: 64px;
--spacing-9: 4.5rem; --spacing-9: 72px;
--spacing-10: 5rem; --spacing-10: 80px;
--spacing-11: 5.5rem; --spacing-11: 88px;
--spacing-12: 6rem; --spacing-12: 96px;
--spacing-13: 6.5rem; --spacing-13: 104px;
--spacing-14: 7rem; --spacing-14: 112px;
--spacing-15: 7.5rem; --spacing-15: 120px;
--spacing-16: 8rem; --spacing-16: 128px;
/* string */ /* string */
--font-text-family: Poppins; --font-text-family: Poppins;
--font-title-family: Poppins; --font-title-family: Poppins;
@ -566,11 +566,11 @@
--navigation-radius: var(--radius-none); --navigation-radius: var(--radius-none);
--notification-radius: var(--radius-minimal); --notification-radius: var(--radius-minimal);
--opacity-disabled: 1.875rem; --opacity-disabled: 1.875rem;
--radius-none: 0rem; --radius-none: 0px;
--radius-minimal: var(--radius-md); --radius-minimal: var(--radius-md);
--radius-rounded: var(--radius-lg); --radius-rounded: var(--radius-lg);
--radius-full: var(--radius-3xl); --radius-full: var(--radius-3xl);
--spacing-none: 0rem; --spacing-none: 0px;
--spacing-xs: var(--spacing-0-5); --spacing-xs: var(--spacing-0-5);
--spacing-sm: var(--spacing-1); --spacing-sm: var(--spacing-1);
--spacing-md: var(--spacing-2); --spacing-md: var(--spacing-2);