style: app sidebar revamp (#1120)

* style: app sidebar, sidebar workspace dropdown and help section styling

* style: consistent  padding and spacing

* feat: material icon global component

* style: icons updated and tooltip added

* style: project list spacing and project name truncate

* style: sidebar padding and theming

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

apps/app/components/ui/custom-menu.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Menu, Transition } from "@headlessui/react";
 // icons
 import { ChevronDownIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+import { Icon } from "./icon";
 
 type Props = {
   children: React.ReactNode;
@@ -61,8 +62,9 @@ const CustomMenu = ({
                 type="button"
                 className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 outline-none"
               >
-                <EllipsisHorizontalIcon
-                  className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
+                <Icon
+                  iconName="more_horiz"
+                  className={`${verticalEllipsis ? "rotate-90" : ""} text-brand-secondary`}
                 />
               </Menu.Button>
             ) : (