From 40b5d85a547bc4ef5c410f06ba963528f62332ef Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Mon, 23 Oct 2023 17:09:52 -0400
Subject: [PATCH] fix(directory): style fix

---
 directory/src/component/dropdown.jsx              | 2 +-
 directory/src/component/scss/dropdown.module.scss | 9 +++++----
 directory/src/routes/Root.jsx                     | 2 +-
 directory/src/scss/root/header.module.scss        | 2 ++
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx
index b6ca5e7..ae663f6 100644
--- a/directory/src/component/dropdown.jsx
+++ b/directory/src/component/dropdown.jsx
@@ -13,7 +13,7 @@ export default function Dropdown(props) {
   }
 
   const onMouseEnter = useCallback((item) => {
-    document.documentElement.style.setProperty('--cursor-color', item.color);
+    document.documentElement.style.setProperty('--cursor-color', item.color ? item.color : 'var(--text-color)');
   }, [])
 
   const onMouseLeave = useCallback(() => {
diff --git a/directory/src/component/scss/dropdown.module.scss b/directory/src/component/scss/dropdown.module.scss
index 38757ea..2644c3b 100644
--- a/directory/src/component/scss/dropdown.module.scss
+++ b/directory/src/component/scss/dropdown.module.scss
@@ -17,6 +17,8 @@
     flex-direction: row;
     align-items: center;
     color: var(--text-color);
+    height: 2em;
+    min-width: 2em;
 
     &:hover {
       .popup {
@@ -34,7 +36,7 @@
       max-height: 61.8vh;
       max-width: 61.8vw;
       z-index: -1;
-      top: 2em;
+      top: 2.5em;
       right: 0;
       transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
       overflow: auto;
@@ -65,7 +67,7 @@
     border-bottom: 0.15em solid var(--text-color);
     border-right: 0.15em solid var(--text-color);
     border-top: 0.15em solid var(--text-color);
-    transform: translateY(-0.2em) rotate(-45deg);
+    transform: translateY(-0.7em) rotate(-45deg);
   }
 
   .menu {
@@ -77,9 +79,8 @@
     max-height: 61.8vh;
     max-width: 61.8vw;
     z-index: -1;
-    top: 2em;
+    top: 2.5em;
     right: 0;
-    gap: 0.5rem;
     display: flex;
     align-items: stretch;
     flex-direction: column;
diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx
index 519df95..fbcf3df 100644
--- a/directory/src/routes/Root.jsx
+++ b/directory/src/routes/Root.jsx
@@ -319,7 +319,7 @@ function HeaderButton() {
         iconStyle={{
           borderWidth: '0.15em',
           width: '1em',
-          transform: 'translateY(0.1rem) translateX(0.1rem) rotate(-45deg)',
+          transform: 'translateY(-0.4rem) translateX(-0.7rem) rotate(-45deg)',
           height: '1em',
         }}
         left={true}
diff --git a/directory/src/scss/root/header.module.scss b/directory/src/scss/root/header.module.scss
index a87933f..7ec5266 100644
--- a/directory/src/scss/root/header.module.scss
+++ b/directory/src/scss/root/header.module.scss
@@ -17,6 +17,8 @@
   .fast-navigate {
     pointer-events: auto;
     margin-left: 0.6rem;
+    height: 2rem;
+    width: 2rem;
   }
 
   .dropdown {