💄 Update the navigation bar/app grid (#688)

💄 Update the navigation bar/app grid (#688)

tdrive/frontend/src/app/components/auto-complete/auto-complete.tsx

@@ -367,7 +367,7 @@ export default class AutoComplete extends Component<Props, State> {
           {!this.props.hideResult && this.state.currentList.length > 0 ? (
             <div
               className={
-                'menu-list as_frame bg-white text-black dark:bg-zinc-800 dark:text-white rounded-lg inline ' +
+                'menu-list as_frame bg-white text-black dark:bg-zinc-900 dark:text-white rounded-lg inline ' +
                 (this.state.focused && this.state.currentList.length ? 'fade_in ' : '') +
                 this.state.resultPosition
               }

tdrive/frontend/src/app/components/menus/menu-component.jsx

@@ -57,7 +57,7 @@ export default class MenuComponent extends React.Component {
       <div
         ref={node => (this.original_menu = node)}
         className={
-          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-800 dark:text-white rounded-lg ' : '') + this.props.animationClass
+          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass
         }
       >
         {(this.props.menu || [])
@@ -81,7 +81,12 @@ export default class MenuComponent extends React.Component {
                     this.hoverMenu(item.ref, item);
                   }}
                 >
-                  {item.text}
+                  {item.icon && (
+                    <div className="icon">
+                      {typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon}
+                    </div>
+                  )}
+                  <div className="text">{item.text}</div>
                 </div>
               );
             } else if (item.type == 'react-element') {

tdrive/frontend/src/app/components/menus/menu.scss

@@ -45,13 +45,17 @@
     font-size: 12px;
     font-weight: 500;
     margin: 8px 16px;
-    color: var(--grey-dark);
+    display: flex;
+
+    .icon {
+      color: var(--grey-dark);
+    }
   }
 
   .menu-custom {
     font-size: 12px;
     font-weight: 500;
-    margin: 8px 8px;
+    margin: 0.875rem 0.625rem;
     padding: 0 8px;
 
     .menu-cancel-margin,

tdrive/frontend/src/app/components/menus/menus-body-layer.jsx

@@ -188,8 +188,8 @@ export default class MenusBodyLayer extends React.Component {
                     zIndex: 1050,
                     position: 'absolute',
                     transform: item.positionType === 'bottom' ? '' : 'translateY(-50%)',
-                    left: item.position.x,
-                    top: item.position.y,
+                    left: item.position.x - 140,
+                    top: item.position.y + 2,
                     marginTop: item.position.marginTop,
                     marginLeft: item.position.marginLeft,
                   }}