Refactor input styles, implement 3D toggle state management, and enhance FileMenu with dropdown options

app/src/styles/components/input.scss

@@ -155,16 +155,6 @@
   }
 }
 
-.project-dropdowm-container {
-  position: relative;
-  height: 32px;
-
-  .project-name {
-    line-height: 32px;
-    height: 100%;
-  }
-}
-
 .regularDropdown-container {
   width: 100%;
   min-width: 80px;
@@ -655,4 +645,4 @@ input {
   .multi-email-invite-input.active {
     border: 1px solid var(--accent-color);
   }
-}
+}

app/src/styles/components/menu/menu.scss

@@ -1,25 +1,58 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
+.project-dropdowm-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  position: relative;
+  height: 32px;
+  .project-name {
+    line-height: 32px;
+    height: 100%;
+  }
+  .more-options-button {
+    @include flex-center;
+    border-radius: #{$border-radius-small};
+    height: 28px;
+    position: relative;
+    &:hover {
+      background: var(--highlight-accent-color);
+      path {
+        fill: var(--accent-color);
+      }
+    }
+  }
+  .more-options-button.active {
+    background: var(--highlight-accent-color);
+    path {
+      fill: var(--accent-color);
+    }
+  }
+}
+
 .menu-bar {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: 32px;
+  left: 0;
   z-index: 5;
   background-color: var(--background-color);
   color: var(--text-color);
   box-shadow: var(--box-shadow-light);
   border-radius: 8px;
+  border: 1px solid var(--border-color);
   .menu-buttons {
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 8px 4px;
+    padding: 4px;
     min-width: 178px;
 
     .menu-button-container {
       position: relative;
       height: 100%;
-      padding: 8px;
-
+      padding: 4px 8px 4px 12px;
+      border-radius: #{$border-radius-small};
       .menu-button {
         width: 100%;
         cursor: pointer;
@@ -32,7 +65,7 @@
         .dropdown-icon {
           margin-left: 5px;
           font-size: var(--font-size-small);
-          color: #666666;
+          rotate: -90deg;
         }
       }
 
@@ -46,20 +79,21 @@
         box-shadow: var(--box-shadow-light);
         border: 1px solid var(--background-color);
         z-index: 100;
-        padding: 5px 0;
-
+        padding: 4px;
         .menu-item-container {
           position: relative;
-
           .menu-item {
+            padding: 4px 8px 4px 12px;
+            border-radius: #{$border-radius-small};
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 8px 20px;
             cursor: pointer;
             white-space: nowrap;
             color: var(--text-color);
-
+            .dropdown-icon {
+              rotate: -90deg;
+            }
             &:hover {
               background-color: var(--highlight-accent-color);
               color: var(--highlight-accent-color);
@@ -92,19 +126,20 @@
             box-shadow: var(--box-shadow-light);
             border: 1px solid var(--background-color);
             z-index: 101;
-
+            padding: 4px;
             .submenu-item {
-              padding: 8px 20px;
-              cursor: pointer;
+              padding: 4px 8px 4px 12px;
+              border-radius: #{$border-radius-small};
               display: flex;
               justify-content: space-between;
+              align-items: center;
+              cursor: pointer;
+              white-space: nowrap;
               color: var(--text-color);
-
               &:hover {
-                background-color: var(--background-color-gray);
+                background-color: var(--highlight-accent-color);
                 color: var(--highlight-accent-color);
               }
-
               .shortcut {
                 color: var(--text-color);
               }
@@ -122,6 +157,7 @@
   .split {
     width: 100%;
     height: 1px;
-    background-color: #e0dfff;
+    background-color: var(--highlight-accent-color);
+    margin: 2px 0;
   }
 }