thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: views theming (#920)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-21 16:30:16 +05:30 committed by GitHub
parent cfd7e1d154
commit 06ad0d0f7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/pages/single-page-list-item.tsx
View File

@ -69,7 +69,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<li> <li>
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a> <a>
<div className="relative rounded p-4 text-brand-secondary hover:bg-brand-base"> <div className="relative rounded p-4 text-brand-secondary hover:bg-brand-surface-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<DocumentTextIcon className="h-4 w-4" /> <DocumentTextIcon className="h-4 w-4" />

16
apps/app/components/views/single-view-item.tsx
View File

@ -83,18 +83,18 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
}; };
return ( return (
<li> <div className="first:rounded-t-[10px] last:rounded-b-[10px] hover:bg-brand-surface-2">
<Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
<a> <a>
<div className="relative rounded p-4 hover:bg-gray-100"> <div className="relative rounded p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<StackedLayersIcon height={18} width={18} /> <StackedLayersIcon height={18} width={18} />
<p className="mr-2 truncate text-sm font-medium">{truncateText(view.name, 75)}</p> <p className="mr-2 truncate text-sm">{truncateText(view.name, 75)}</p>
</div> </div>
<div className="ml-2 flex flex-shrink-0"> <div className="ml-2 flex flex-shrink-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<p className="text-xs bg-gray-300 text-gray-600 py-0.5 px-2 rounded-full"> <p className="rounded-full bg-brand-surface-2 py-0.5 px-2 text-xs text-brand-secondary">
{Object.keys(view.query_data) {Object.keys(view.query_data)
.map((key: string) => .map((key: string) =>
view.query_data[key as keyof typeof view.query_data] !== null view.query_data[key as keyof typeof view.query_data] !== null
@ -109,7 +109,9 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
view.updated_at view.updated_at
)} ${renderShortDate(view.updated_at)}`} )} ${renderShortDate(view.updated_at)}`}
> >
<p className="text-sm text-gray-400">{renderShortTime(view.updated_at)}</p> <p className="text-sm text-brand-secondary">
{renderShortTime(view.updated_at)}
</p>
</Tooltip> </Tooltip>
{view.is_favorite ? ( {view.is_favorite ? (
<button <button
@ -164,13 +166,13 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
</div> </div>
</div> </div>
{view?.description && ( {view?.description && (
<p className="text-sm text-gray-400 font-normal leading-5 px-[27px]"> <p className="px-[27px] text-sm font-normal leading-5 text-brand-secondary">
{view.description} {view.description}
</p> </p>
)} )}
</div> </div>
</a> </a>
</Link> </Link>
</li> </div>
); );
}; };

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
View File

@ -99,7 +99,7 @@ const ProjectViews: NextPage = () => {
views.length > 0 ? ( views.length > 0 ? (
<div className="space-y-5"> <div className="space-y-5">
<h3 className="text-3xl font-semibold text-brand-base">Views</h3> <h3 className="text-3xl font-semibold text-brand-base">Views</h3>
<div className="rounded-[10px] border border-brand-base"> <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
{views.map((view) => ( {views.map((view) => (
<SingleViewItem <SingleViewItem
key={view.id} key={view.id}