From 408734d49fd89fbd47d29527c03927e49c834f30 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sat, 24 Feb 2024 19:33:13 +0330
Subject: [PATCH] feat: add dividers to menu items

---
 src/components/menu/divider/divider.module.css | 5 +++++
 src/components/menu/divider/divider.tsx        | 5 +++++
 src/components/menu/divider/index.ts           | 1 +
 src/components/menu/item/item.module.css       | 5 +++--
 src/components/menu/menu.module.css            | 2 +-
 src/components/menu/menu.tsx                   | 3 +++
 6 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/menu/divider/divider.module.css
 create mode 100644 src/components/menu/divider/divider.tsx
 create mode 100644 src/components/menu/divider/index.ts

diff --git a/src/components/menu/divider/divider.module.css b/src/components/menu/divider/divider.module.css
new file mode 100644
index 0000000..9139b3a
--- /dev/null
+++ b/src/components/menu/divider/divider.module.css
@@ -0,0 +1,5 @@
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-neutral-200);
+}
diff --git a/src/components/menu/divider/divider.tsx b/src/components/menu/divider/divider.tsx
new file mode 100644
index 0000000..d74403a
--- /dev/null
+++ b/src/components/menu/divider/divider.tsx
@@ -0,0 +1,5 @@
+import styles from './divider.module.css';
+
+export function Divider() {
+  return <div className={styles.divider} />;
+}
diff --git a/src/components/menu/divider/index.ts b/src/components/menu/divider/index.ts
new file mode 100644
index 0000000..0dd50b5
--- /dev/null
+++ b/src/components/menu/divider/index.ts
@@ -0,0 +1 @@
+export { Divider } from './divider';
diff --git a/src/components/menu/item/item.module.css b/src/components/menu/item/item.module.css
index 45ffb8a..e01851b 100644
--- a/src/components/menu/item/item.module.css
+++ b/src/components/menu/item/item.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  height: 50px;
+  height: 40px;
   padding: 0 12px;
   font-size: var(--font-sm);
   font-weight: 500;
@@ -14,7 +14,7 @@
   text-decoration: none;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid transparent;
   border-radius: 4px;
   outline: none;
   transition: 0.2s;
@@ -27,6 +27,7 @@
   &:not(:disabled):hover {
     color: var(--color-foreground);
     background-color: var(--color-neutral-200);
+    border: 1px solid var(--color-neutral-300);
   }
 
   & .icon {
diff --git a/src/components/menu/menu.module.css b/src/components/menu/menu.module.css
index cf92a45..af985f1 100644
--- a/src/components/menu/menu.module.css
+++ b/src/components/menu/menu.module.css
@@ -2,7 +2,7 @@
   position: fixed;
   right: 20px;
   bottom: 20px;
-  z-index: 5;
+  z-index: 15;
 
   & .menuButton {
     display: flex;
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 95880fb..b14ee3b 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -15,6 +15,7 @@ import {
 } from '@floating-ui/react';
 
 import { ShuffleItem, ShareItem, DonateItem, NotepadItem } from './items';
+import { Divider } from './divider';
 import { ShareLinkModal } from '@/components/modals/share-link';
 import { Notepad } from '@/components/toolbox';
 
@@ -78,7 +79,9 @@ export function Menu() {
                 >
                   <ShareItem open={() => setShowShareLink(true)} />
                   <ShuffleItem />
+                  <Divider />
                   <NotepadItem open={() => setShowNotepad(true)} />
+                  <Divider />
                   <DonateItem />
                 </motion.div>
               </div>