From 2ac4fd93b183e7f1e04c4605f2bc8fae0f4a5ed8 Mon Sep 17 00:00:00 2001
From: Mounir <mounir.abdous@nventive.com>
Date: Wed, 7 Aug 2024 10:12:22 -0400
Subject: [PATCH] chore: css optimization

---
 .../src/app/components/tableRow/TableRow.tsx  |   2 +-
 .../cookieConsent/cookieModal/CookieModal.tsx | 183 +++++++++---------
 .../cookieModal/cookie-modal.scss             |  17 --
 frontend/src/styles/_export.scss              |  17 ++
 frontend/src/styles/_globals.scss             |  10 +-
 frontend/src/styles/_variables.scss           |   5 -
 6 files changed, 120 insertions(+), 114 deletions(-)
 delete mode 100644 frontend/src/app/containers/cookieConsent/cookieModal/cookie-modal.scss

diff --git a/frontend/src/app/components/tableRow/TableRow.tsx b/frontend/src/app/components/tableRow/TableRow.tsx
index db71974..600372c 100644
--- a/frontend/src/app/components/tableRow/TableRow.tsx
+++ b/frontend/src/app/components/tableRow/TableRow.tsx
@@ -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) => (
diff --git a/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx b/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx
index 333095d..88a09bc 100644
--- a/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx
+++ b/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx
@@ -19,7 +19,6 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import "./cookie-modal.scss";
 
 interface ICookieModal {
   open: boolean;
@@ -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>
diff --git a/frontend/src/app/containers/cookieConsent/cookieModal/cookie-modal.scss b/frontend/src/app/containers/cookieConsent/cookieModal/cookie-modal.scss
deleted file mode 100644
index 2bbff58..0000000
--- a/frontend/src/app/containers/cookieConsent/cookieModal/cookie-modal.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.cookie-modal {
-  margin: get-spacing(lg);
-
-  &__title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: get-spacing(md);
-  }
-
-  &__buttons {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: get-spacing(sm);
-  }
-}
diff --git a/frontend/src/styles/_export.scss b/frontend/src/styles/_export.scss
index 4b04632..e4545b0 100755
--- a/frontend/src/styles/_export.scss
+++ b/frontend/src/styles/_export.scss
@@ -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} {
@@ -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} {
diff --git a/frontend/src/styles/_globals.scss b/frontend/src/styles/_globals.scss
index 940cb25..e36f039 100755
--- a/frontend/src/styles/_globals.scss
+++ b/frontend/src/styles/_globals.scss
@@ -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 {
diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss
index 2f8df71..98b02a8 100755
--- a/frontend/src/styles/_variables.scss
+++ b/frontend/src/styles/_variables.scss
@@ -132,8 +132,3 @@ $direction: (
   x: left right,
   y: top bottom,
 );
-
-$property: (
-  m: margin,
-  p: padding,
-);