Fix an issue with the sidebar dropdown

frontend/components/Inbox/InboxItemDetail.tsx

@@ -170,7 +170,7 @@ const InboxItemDetail: React.FC<InboxItemDetailProps> = ({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between px-4 py-2 gap-2">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-4 py-2 gap-2">
         <div className="flex-1">
           <p className="text-base font-medium text-gray-900 dark:text-gray-300 break-words">
             {item.content}

frontend/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { UserIcon, Bars3Icon, PlusIcon, InboxIcon } from "@heroicons/react/24/solid";
+import { UserIcon, Bars3Icon, BoltIcon, InboxIcon } from "@heroicons/react/24/solid";
 import { useTranslation } from "react-i18next";
 import PomodoroTimer from "./Shared/PomodoroTimer";
 
@@ -123,12 +123,12 @@ const Navbar: React.FC<NavbarProps> = ({
         <div className="flex items-center space-x-4">
           <button
             onClick={() => openTaskModal('simplified')}
-            className="flex items-center bg-blue-500 hover:bg-blue-600 text-white rounded-full focus:outline-none transition-colors duration-200 px-3 py-2"
-            aria-label="Quick Capture"
-            title="Quick Capture"
+            className="flex items-center bg-blue-500 hover:bg-blue-600 text-white rounded-full focus:outline-none transition-all duration-200 px-2 py-2 md:px-3 md:py-2"
+            aria-label="Quick Inbox Capture"
+            title="Quick Inbox Capture"
           >
-            <PlusIcon className="h-4 w-4" />
-            <InboxIcon className="hidden md:inline-block ml-2 h-4 w-4" />
+            <BoltIcon className="h-4 w-4 text-white" />
+            <InboxIcon className="hidden md:inline-block ml-1.5 h-4 w-4 text-blue-200" />
           </button>
           {pomodoroEnabled && <PomodoroTimer />}
           

frontend/components/Project/ProjectDetails.tsx

@@ -8,7 +8,8 @@ import {
   FolderIcon,
   Squares2X2Icon,
   BookOpenIcon,
-  TagIcon
+  TagIcon,
+  ListBulletIcon
 } from "@heroicons/react/24/outline";
 import TaskList from "../Task/TaskList";
 import ProjectModal from "../Project/ProjectModal";
@@ -456,7 +457,10 @@ const ProjectDetails: React.FC = () => {
 
         {!showAutoSuggestForm && (
           <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{t('sidebar.tasks', 'Tasks')}</h3>
+            <div className="flex items-center">
+              <ListBulletIcon className="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" />
+              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{t('sidebar.tasks', 'Tasks')}</h3>
+            </div>
             {completedTasks.length > 0 && (
               <label className="flex items-center space-x-2 cursor-pointer">
                 <span className="text-sm text-gray-600 dark:text-gray-400">Show completed</span>

frontend/components/Sidebar/CreateNewDropdownButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   PlusCircleIcon,
   ChevronDownIcon,
@@ -26,11 +26,29 @@ const CreateNewDropdownButton: React.FC<CreateNewDropdownButtonProps> = ({
 }) => {
   const { t } = useTranslation();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const toggleDropdown = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isDropdownOpen]);
+
   const handleDropdownSelect = (type: string) => {
     switch (type) {
       case 'Task':
@@ -60,7 +78,7 @@ const CreateNewDropdownButton: React.FC<CreateNewDropdownButtonProps> = ({
 
   return (
     <div className="mb-8 px-4">
-      <div className="relative">
+      <div className="relative" ref={dropdownRef}>
         <button
           type="button"
           className="flex justify-between items-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none"