buttons groups

Lemoncode · May 23, 2024 · 9dd46a8 · 9dd46a8
1 parent 58f1ed7
commit 9dd46a8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 15 deletions.
diff --git 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
@@ -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>
   );
 };