github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: sidebar UI improvements (#2735)

Browse Source 
* updated font weight and color as per designs.
* removed background color from workspace with logo.
* updated dropdown design.
This commit is contained in:
Prateek Shourya 2023-11-09 17:01:48 +05:30 committed by GitHub
parent d733a53ea6
commit 8832d8e00e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 150 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/project/sidebar-list-item.tsx
View File

@ -187,7 +187,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
)} )}
{!isCollapsed && ( {!isCollapsed && (
<p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p> <p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>
)} )}
</div> </div>
{!isCollapsed && ( {!isCollapsed && (
@ -322,7 +322,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${ className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
router.asPath.includes(item.href) router.asPath.includes(item.href)
? "bg-custom-primary-100/10 text-custom-primary-100" ? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80" : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${isCollapsed ? "justify-center" : ""}`} } ${isCollapsed ? "justify-center" : ""}`}
> >
<item.Icon className="h-4 w-4 stroke-[1.5]" /> <item.Icon className="h-4 w-4 stroke-[1.5]" />

36
web/components/workspace/sidebar-dropdown.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Link from "next/link"; import Link from "next/link";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react"; import { Check, ChevronDown, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// hooks // hooks
@ -90,15 +90,19 @@ export const WorkspaceSidebarDropdown = observer(() => {
}; };
return ( return (
<div className="flex items-center gap-2 px-4 pt-4"> <div className="flex items-center gap-x-8 gap-y-2 px-4 pt-4">
<Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate"> <Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate">
<Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full h-full truncate"> {({ open }) => (
<>
<Menu.Button className="text-custom-sidebar-text-200 rounded-md hover:bg-custom-sidebar-background-80 text-sm font-medium focus:outline-none w-full h-full truncate">
<div <div
className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${ className={`flex items-center gap-x-2 rounded p-1 truncate ${sidebarCollapsed ? "justify-center" : ""}`}
sidebarCollapsed ? "justify-center" : "" >
<div
className={`relative grid h-6 w-6 place-items-center uppercase flex-shrink-0 ${
!activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
}`} }`}
> >
<div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white flex-shrink-0">
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
<img <img
src={activeWorkspace.logo} src={activeWorkspace.logo}
@ -111,10 +115,18 @@ export const WorkspaceSidebarDropdown = observer(() => {
</div> </div>
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<h4 className="text-custom-text-100 truncate"> <h4 className="text-custom-text-100 font-medium text-base truncate">
{activeWorkspace?.name ? activeWorkspace.name : "Loading..."} {activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
</h4> </h4>
)} )}
{!sidebarCollapsed && (
<ChevronDown
className={`h-4 w-4 mx-1 flex-shrink-0 ${
open ? "rotate-180" : ""
} text-custom-sidebar-text-400 duration-300`}
/>
)}
</div> </div>
</Menu.Button> </Menu.Button>
@ -145,7 +157,11 @@ export const WorkspaceSidebarDropdown = observer(() => {
className="flex w-full items-center justify-between gap-1 p-1 rounded-md text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80" className="flex w-full items-center justify-between gap-1 p-1 rounded-md text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
> >
<div className="flex items-center justify-start gap-2.5 truncate"> <div className="flex items-center justify-start gap-2.5 truncate">
<span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white flex-shrink-0"> <span
className={`relative flex h-6 w-6 items-center justify-center p-2 text-xs uppercase flex-shrink-0 ${
!workspace?.logo && "rounded bg-custom-primary-500 text-white"
}`}
>
{workspace?.logo && workspace.logo !== "" ? ( {workspace?.logo && workspace.logo !== "" ? (
<img <img
src={workspace.logo} src={workspace.logo}
@ -223,6 +239,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
</div> </div>
</Menu.Items> </Menu.Items>
</Transition> </Transition>
</>
)}
</Menu> </Menu>
{!sidebarCollapsed && ( {!sidebarCollapsed && (
@ -231,7 +249,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
<Avatar <Avatar
name={currentUser?.display_name} name={currentUser?.display_name}
src={currentUser?.avatar} src={currentUser?.avatar}
size={30} size={24}
shape="square" shape="square"
className="!text-base" className="!text-base"
/> />

8
web/components/workspace/sidebar-quick-action.tsx
View File

@ -42,12 +42,12 @@ export const WorkspaceSidebarQuickAction = observer(() => {
className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${ className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${
isSidebarCollapsed isSidebarCollapsed
? "px-2 hover:bg-custom-sidebar-background-80" ? "px-2 hover:bg-custom-sidebar-background-80"
: "px-3 shadow border-[0.5px] border-custom-border-300" : "px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
}`} }`}
> >
<button <button
type="button" type="button"
className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 ${ className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none ${
isSidebarCollapsed ? "justify-center" : "" isSidebarCollapsed ? "justify-center" : ""
}`} }`}
onClick={() => commandPaletteStore.toggleCreateIssueModal(true)} onClick={() => commandPaletteStore.toggleCreateIssueModal(true)}
@ -92,10 +92,10 @@ export const WorkspaceSidebarQuickAction = observer(() => {
</div> </div>
<button <button
className={`flex items-center justify-center rounded flex-shrink-0 p-2 ${ className={`flex items-center justify-center rounded flex-shrink-0 p-2 outline-none ${
isSidebarCollapsed isSidebarCollapsed
? "hover:bg-custom-sidebar-background-80" ? "hover:bg-custom-sidebar-background-80"
: "shadow border-[0.5px] border-custom-border-300" : "shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
}`} }`}
onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)} onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)}
> >