refactor: refactor containment

Co-authored-by: Mattia Simonato <[email protected]>
AmazeeLabs · May 15, 2024 · f59bba0 · f59bba0
1 parent 7ccb740
commit f59bba0
Show file tree

Hide file tree

Showing 12 changed files with 396 additions and 359 deletions.
diff --git a/packages/ui/src/components/Atoms/Container.css b/packages/ui/src/components/Atoms/Container.css
@@ -1,13 +1,13 @@
 .container-page {
-  @apply max-w-full px-[1.25rem] md:px-[3.75rem];
+  @apply max-w-full px-[1.25rem] md:px-[3.75rem] lg:px-[5rem];
 }
 
 .container-content {
-  @apply mx-auto max-w-3xl;
+  @apply mx-auto max-w-7xl;
 }
 
 .container-text {
-  @apply max-w-[40.75rem] xl:ml-[11rem] lg:ml-[7rem];
+  @apply max-w-3xl mx-auto;
 }
 
 .nested-container .container-page {

diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
@@ -6,49 +6,51 @@ import React from 'react';
 import { isTruthy } from '../../utils/isTruthy';
 import { useBreadcrumbs } from '../Routes/Menu';
 
-export function BreadCrumbs({ className }: { className?: string }) {
+export function BreadCrumbs() {
   const breadcrumbs = useBreadcrumbs();
 
   if (!breadcrumbs.length) {
     return null;
   }
 
   return (
-    <nav className={clsx('pt-5', className)} aria-label="Breadcrumb">
-      <ol className={'rounded-lg inline-block py-2.5'}>
-        {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
-          <li className="inline-flex items-center" key={id}>
-            {index > 0 ? (
-              <div aria-hidden="true">
-                <ChevronRightIcon className={'w-4 h-4 text-gray-400 mr-4'} />
-              </div>
-            ) : null}
-            <Link
-              href={target}
-              title={title}
-              className={clsx(
-                'inline-flex items-center text-sm font-medium hover:text-blue-600',
-                index === breadcrumbs?.length - 1
-                  ? 'pointer-events-none text-gray-500'
-                  : 'text-gray-700',
-              )}
-            >
-              {target === '/' && (
-                <svg
-                  className="w-4 h-4 mr-4"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
-                </svg>
-              )}
-              <span className="mr-4">{title}</span>
-            </Link>
-          </li>
-        ))}
-      </ol>
-    </nav>
+    <div className="container-page">
+      <nav className="pt-5 container-content" aria-label="Breadcrumb">
+        <ol className={'rounded-lg inline-block py-2.5'}>
+          {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
+            <li className="inline-flex items-center" key={id}>
+              {index > 0 ? (
+                <div aria-hidden="true">
+                  <ChevronRightIcon className={'w-4 h-4 text-gray-400 mr-4'} />
+                </div>
+              ) : null}
+              <Link
+                href={target}
+                title={title}
+                className={clsx(
+                  'inline-flex items-center text-sm font-medium hover:text-blue-600',
+                  index === breadcrumbs?.length - 1
+                    ? 'pointer-events-none text-gray-500'
+                    : 'text-gray-700',
+                )}
+              >
+                {target === '/' && (
+                  <svg
+                    className="w-4 h-4 mr-4"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
+                  </svg>
+                )}
+                <span className="mr-4">{title}</span>
+              </Link>
+            </li>
+          ))}
+        </ol>
+      </nav>
+    </div>
   );
 }
diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
@@ -21,11 +21,13 @@ export function Footer() {
   return (
     <footer
       id="footer"
-      className={'relative z-10 bg-gray-100 text-gray-500 p-4 lg:py-16'}
+      className={
+        'container-page relative z-10 bg-gray-100 text-gray-500 py-4 lg:py-16'
+      }
     >
       <h2 className={'sr-only'}>Footer</h2>
-      <div className="container mx-auto pb-8">
-        <div className="lg:px-6 flex flex-wrap justify-between">
+      <div className="pb-8 container-content">
+        <div className="flex flex-wrap justify-between">
           <div className={'w-full mb-8 md:mb-0 md:w-1/4'}>
             <a href="/" className={'mb-4 block'}>
               <svg