From 9dd46a85822a0279ac73fadf77b21ea66a879011 Mon Sep 17 00:00:00 2001
From: Leticia de la Osa <deletidev@gmail.com>
Date: Thu, 23 May 2024 19:00:22 +0200
Subject: [PATCH] buttons groups

---
 src/pods/toolbar/toolbar.pod.module.css |  8 +++-
 src/pods/toolbar/toolbar.pod.tsx        | 60 +++++++++++++++++++------
 2 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/pods/toolbar/toolbar.pod.module.css b/src/pods/toolbar/toolbar.pod.module.css
index 96869890..d5ff8b5a 100644
--- a/src/pods/toolbar/toolbar.pod.module.css
+++ b/src/pods/toolbar/toolbar.pod.module.css
@@ -1,12 +1,18 @@
 .container {
   grid-area: toolbar;
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
   padding: 10px;
   background-color: var(--bg-toolbar);
   border: none;
   border-bottom: var(--border-toolbar);
 }
+.container ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
 @media screen and (min-device-width: 780px) and (max-device-width: 1090px) {
   .container {
     padding: var(--space-md) var(--space-xl);
diff --git a/src/pods/toolbar/toolbar.pod.tsx b/src/pods/toolbar/toolbar.pod.tsx
index 0a813c4d..d1709744 100644
--- a/src/pods/toolbar/toolbar.pod.tsx
+++ b/src/pods/toolbar/toolbar.pod.tsx
@@ -21,20 +21,52 @@ import classes from './toolbar.pod.module.css';
 export const ToolbarPod: React.FC = () => {
   return (
     <div className={classes.container}>
-      <NewButton />
-      <OpenButton />
-      <SaveButton />
-      <ZoomInButton />
-      <ZoomOutButton />
-      <AddCollection />
-      <RelationButton />
-      <UndoButton />
-      <RedoButton />
-      <ExportButton />
-      <DeleteButton />
-      <CanvasSettingButton />
-      <AboutButton />
-      <ThemeToggleButton darkLabel="Dark Mode" lightLabel="Light Mode" />
+      <ul>
+        <li>
+          <NewButton />
+        </li>
+        <li>
+          <OpenButton />
+        </li>
+        <li>
+          <SaveButton />
+        </li>
+        <li>
+          <ExportButton />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <ZoomInButton />
+        </li>
+        <li>
+          <ZoomOutButton />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <AddCollection />
+        </li>
+        <li>
+          <RelationButton />
+        </li>
+      </ul>
+      <ul>
+        <UndoButton />
+        <RedoButton />
+        <DeleteButton />
+      </ul>
+      <ul>
+        <li>
+          <CanvasSettingButton />
+        </li>
+        <li>
+          <AboutButton />
+        </li>
+        <li>
+          <ThemeToggleButton darkLabel="Dark Mode" lightLabel="Light Mode" />
+        </li>
+      </ul>
     </div>
   );
 };