Skip to content

Commit

Permalink
chore: css optimization
Browse files Browse the repository at this point in the history
  • Loading branch information
@MounirAbdousNventive
MounirAbdousNventive committed Aug 7, 2024
1 parent 1c2508c commit 2ac4fd9
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 114 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/components/tableRow/TableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const StyledMuiTableRow = styled(MuiTableRow)({
},
});

export default function TableRowRow({ columns, ...props }: ITableRow) {
export default function TableRow({ columns, ...props }: ITableRow) {
return (
<StyledMuiTableRow {...props}>
{columns.map((column, index) => (
Expand Down
183 changes: 94 additions & 89 deletions frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
useState,
} from "react";
import { useTranslation } from "react-i18next";
import "./cookie-modal.scss";

interface ICookieModal {
open: boolean;
Expand Down Expand Up @@ -66,97 +65,103 @@ export default function CookieModal({

return (
<Dialog open={open} onClose={closeModal} maxWidth="xs">
<div className="cookie-modal">
<div className="cookie-modal__title">
<Typography.Heading5 as="h1">
{t("cookie_modal__title")}
</Typography.Heading5>
<IconButton aria-label={t("global__close")} onClick={closeModal}>
<CloseIcon />
</IconButton>
<div className="m-lg">
<div className="flex-column gap-md">
<div className="flex align-center justify-between">
<Typography.Heading5 as="h1">
{t("cookie_modal__title")}
</Typography.Heading5>
<IconButton aria-label={t("global__close")} onClick={closeModal}>
<CloseIcon />
</IconButton>
</div>
<Typography.Body1>
{t("cookie_modal__description_1")}
</Typography.Body1>
<Typography.Body1>
{t("cookie_modal__description_2")}
</Typography.Body1>
<Link
className="mr-a"
href={t("cookie_consent_link")}
underline="always"
target="_blank"
rel="noreferrer"
>
<Typography.Body2>
{t("cookie_consent__learn_more")}
</Typography.Body2>
</Link>
</div>
<Typography.Body1 className="mb-md">
{t("cookie_modal__description_1")}
</Typography.Body1>
<Typography.Body1 className="mb-md">
{t("cookie_modal__description_2")}
</Typography.Body1>
<Link
className="mb-md"
href={t("cookie_consent_link")}
underline="always"
target="_blank"
rel="noreferrer"
>
<Typography.Body2>{t("cookie_consent__learn_more")}</Typography.Body2>
</Link>
<Typography.Body2 className="mb-lg">
{t("cookie_modal__description_3")}
</Typography.Body2>
<div className="flex-column gap-lg">
<Typography.Body2>
{t("cookie_modal__description_3")}
</Typography.Body2>

<div className="mb-lg">
{cookieTypes.map((cookieType, index) => (
<Accordion
key={index}
expanded={expandedSection === index}
onChange={handleExpand(index)}
>
<AccordionSummary>
<Typography.Heading6 className="mr-a" as="h2">
{t(cookieType.title)}
</Typography.Heading6>
<Switch
checked={
cookieType.required ||
cookiePreferences.includes(cookieType.id)
}
onClick={(event) =>
handleCookieTypeClick(event, cookieType.id)
}
disabled={cookieType.required}
/>
</AccordionSummary>
{cookieType.description.map((description, index) => (
<Typography.Body2 key={index} className="mx-md mb-md">
{t(description)}
</Typography.Body2>
))}
{cookieType.cookies && (
<div className="m-md">
<Table
columnTitles={[
t("cookie_modal__cookie_name"),
t("cookie_modal__cookie_description"),
t("cookie_modal__cookie_duration"),
]}
>
{cookieType.cookies.map((cookie, index) => (
<TableRow
key={index}
columns={[
cookie.name,
cookie.description,
cookie.duration,
]}
/>
))}
</Table>
</div>
)}
</Accordion>
))}
</div>
<div>
{cookieTypes.map((cookieType, index) => (
<Accordion
key={index}
expanded={expandedSection === index}
onChange={handleExpand(index)}
>
<AccordionSummary>
<Typography.Heading6 className="mr-a" as="h2">
{t(cookieType.title)}
</Typography.Heading6>
<Switch
checked={
cookieType.required ||
cookiePreferences.includes(cookieType.id)
}
onClick={(event) =>
handleCookieTypeClick(event, cookieType.id)
}
disabled={cookieType.required}
/>
</AccordionSummary>
{cookieType.description.map((description, index) => (
<Typography.Body2 key={index} className="mx-md mb-md">
{t(description)}
</Typography.Body2>
))}
{cookieType.cookies && (
<div className="m-md">
<Table
columnTitles={[
t("cookie_modal__cookie_name"),
t("cookie_modal__cookie_description"),
t("cookie_modal__cookie_duration"),
]}
>
{cookieType.cookies.map((cookie, index) => (
<TableRow
key={index}
columns={[
cookie.name,
cookie.description,
cookie.duration,
]}
/>
))}
</Table>
</div>
)}
</Accordion>
))}
</div>

<div className="cookie-modal__buttons">
<Button variant="outlined" onClick={closeModal}>
{t("global__close")}
</Button>
<Button variant="contained" onClick={handleAcceptSelection}>
{t("cookie_modal__allow_selection")}
</Button>
<Button variant="contained" onClick={handleAcceptAll}>
{t("cookie_modal__allow_all")}
</Button>
<div className="flex-column justify-center gap-sm">
<Button variant="outlined" onClick={closeModal}>
{t("global__close")}
</Button>
<Button variant="contained" onClick={handleAcceptSelection}>
{t("cookie_modal__allow_selection")}
</Button>
<Button variant="contained" onClick={handleAcceptAll}>
{t("cookie_modal__allow_all")}
</Button>
</div>
</div>
</div>
</Dialog>
Expand Down
17 changes: 0 additions & 17 deletions frontend/src/app/containers/cookieConsent/cookieModal/cookie-modal.scss
View file

This file was deleted.

17 changes: 17 additions & 0 deletions frontend/src/styles/_export.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@
= Exports =
============================================ */

$property: (
gap: gap,
);

$property-with-direction: (
m: margin,
p: padding,
);

@each $colorKey, $colorValue in $color {
@each $colorSubkey, $colorSubvalue in $colorValue {
#body .color-#{$colorKey}-#{$colorSubkey} {
Expand All @@ -11,6 +20,14 @@
}

@each $propertyKey, $propertyValue in $property {
@each $spacingKey, $spacingValue in $spacing {
#body .#{$propertyKey}-#{$spacingKey} {
#{$propertyValue}: $spacingValue;
}
}
}

@each $propertyKey, $propertyValue in $property-with-direction {
@each $spacingKey, $spacingValue in $spacing {
@each $directionKey, $directionValues in $direction {
#body .#{$propertyKey}#{$directionKey}-#{$spacingKey} {
Expand Down
10 changes: 8 additions & 2 deletions frontend/src/styles/_globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,14 @@ body {
align-items: center;
}

.justify-center {
justify-content: center;
.justify {
&-center {
justify-content: center;
}

&-between {
justify-content: space-between;
}
}

.text-center {
Expand Down
5 changes: 0 additions & 5 deletions frontend/src/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,3 @@ $direction: (
x: left right,
y: top bottom,
);

$property: (
m: margin,
p: padding,
);

0 comments on commit 2ac4fd9

Please sign in to comment.