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 && (
<p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
<p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>
)}
</div>
{!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 ${
router.asPath.includes(item.href)
? "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" : ""}`}
>
<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 Link from "next/link";
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
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
@ -90,15 +90,19 @@ export const WorkspaceSidebarDropdown = observer(() => {
};
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.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
className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${
sidebarCollapsed ? "justify-center" : ""
className={`flex items-center gap-x-2 rounded p-1 truncate ${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 !== "" ? (
<img
src={activeWorkspace.logo}
@ -111,10 +115,18 @@ export const WorkspaceSidebarDropdown = observer(() => {
</div>
{!sidebarCollapsed && (
<h4 className="text-custom-text-100 truncate">
<h4 className="text-custom-text-100 font-medium text-base truncate">
{activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
</h4>
)}
{!sidebarCollapsed && (
<ChevronDown
className={`h-4 w-4 mx-1 flex-shrink-0 ${
open ? "rotate-180" : ""
} text-custom-sidebar-text-400 duration-300`}
/>
)}
</div>
</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"
>
<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 !== "" ? (
<img
src={workspace.logo}
@ -223,6 +239,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
{!sidebarCollapsed && (
@ -231,7 +249,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
<Avatar
name={currentUser?.display_name}
src={currentUser?.avatar}
size={30}
size={24}
shape="square"
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 ${
isSidebarCollapsed
? "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
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" : ""
}`}
onClick={() => commandPaletteStore.toggleCreateIssueModal(true)}
@ -92,10 +92,10 @@ export const WorkspaceSidebarQuickAction = observer(() => {
</div>
<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
? "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)}
>