Skip to content

Commit

Permalink
style: pages theming (#912)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryan610
aaryan610 authored Apr 20, 2023
1 parent 9129a6c commit f2701a1
Show file tree
Hide file tree
Showing 19 changed files with 167 additions and 169 deletions.
8 changes: 5 additions & 3 deletions apps/app/components/core/board-view/single-board.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const SingleBoard: React.FC<Props> = ({
{(provided, snapshot) => (
<div
className={`relative h-full overflow-y-auto p-1 ${
snapshot.isDraggingOver ? "bg-brand-accent bg-opacity-50" : ""
snapshot.isDraggingOver ? "bg-brand-base/20" : ""
} ${!isCollapsed ? "hidden" : "block"}`}
ref={provided.innerRef}
{...provided.droppableProps}
Expand All @@ -96,10 +96,12 @@ export const SingleBoard: React.FC<Props> = ({
<div
className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden"
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs`}
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
>
This board is ordered by{" "}
{replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
{replaceUnderscoreIfSnakeCase(
orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
)}
</div>
</>
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/core/board-view/single-issue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
</a>
</ContextMenu>
<div
className={`mb-3 rounded bg-brand-surface-1 shadow ${
className={`mb-3 rounded bg-brand-base shadow ${
snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
}`}
ref={provided.innerRef}
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/core/issues-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,8 +436,8 @@ export const IssuesView: React.FC<Props> = ({
<div
className={`${
trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
} fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500 bg-red-100 p-3 text-xs font-medium italic text-red-500 ${
snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
} fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-red-500/20 p-3 text-xs font-medium italic text-red-500 ${
snapshot.isDraggingOver ? "bg-red-500/100 text-white" : ""
} duration-200`}
ref={provided.innerRef}
{...provided.droppableProps}
Expand Down
13 changes: 6 additions & 7 deletions apps/app/components/core/list-view/single-issue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ import {
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
} from "constants/fetch-keys";
import { DIVIDER } from "@blueprintjs/core/lib/esm/common/classes";

type Props = {
type?: string;
Expand Down Expand Up @@ -217,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a>
</ContextMenu>
<div
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base bg-brand-surface-1 last:border-b-0"
className="flex items-center justify-between gap-2 border-b border-brand-base px-4 py-2.5 last:border-b-0"
onContextMenu={(e) => {
e.preventDefault();
setContextMenu(true);
Expand Down Expand Up @@ -269,7 +268,7 @@ export const SingleListIssue: React.FC<Props> = ({
/>
)}
{properties.sub_issue_count && (
<div className="flex items-center gap-1 rounded-md border border-brand-base text-brand-secondary px-3 py-1 text-xs shadow-sm">
<div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1 text-xs text-brand-secondary shadow-sm">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div>
)}
Expand All @@ -278,7 +277,7 @@ export const SingleListIssue: React.FC<Props> = ({
{issue.label_details.map((label) => (
<span
key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base text-brand-secondary px-2 py-0.5 text-xs"
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
>
<span
className="h-1.5 w-1.5 rounded-full"
Expand Down Expand Up @@ -310,7 +309,7 @@ export const SingleListIssue: React.FC<Props> = ({
/>
)}
{properties.link && (
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex items-center gap-1 text-gray-500">
<LinkIcon className="h-3.5 w-3.5 text-gray-500" />
Expand All @@ -320,10 +319,10 @@ export const SingleListIssue: React.FC<Props> = ({
</div>
)}
{properties.attachment_count && (
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex items-center gap-1 text-gray-500">
<PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
{issue.attachment_count}
</div>
</Tooltip>
Expand Down
4 changes: 1 addition & 3 deletions apps/app/components/core/list-view/single-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,9 +211,7 @@ export const SingleList: React.FC<Props> = ({
/>
))
) : (
<p className="bg-brand-surface-1 px-4 py-2.5 text-sm text-brand-secondary">
No issues.
</p>
<p className="px-4 py-2.5 text-sm text-brand-secondary">No issues.</p>
)
) : (
<div className="flex h-full w-full items-center justify-center">Loading...</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/app/components/issues/activity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
activityItem.field !== "link" &&
activityItem.field !== "estimate"
) {
value = <span className="text-gray-600">created this issue.</span>;
value = <span className="text-brand-secondary">created this issue.</span>;
} else if (activityItem.field === "state") {
value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
} else if (activityItem.field === "labels") {
Expand Down Expand Up @@ -302,7 +302,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div className="relative pb-1">
{issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
<span
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-1"
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-base"
aria-hidden="true"
/>
) : null}
Expand All @@ -311,7 +311,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div>
<div className="relative px-1.5">
<div className="mt-1.5">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-base ring-white">
{activityItem.field ? (
activityDetails[activityItem.field as keyof typeof activityDetails]
?.icon
Expand Down
12 changes: 6 additions & 6 deletions apps/app/components/issues/view-select/priority.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,18 @@ export const ViewPrioritySelect: React.FC<Props> = ({
customButton={
<button
type="button"
className={`grid h-6 w-6 place-items-center rounded border border-brand-base ${
className={`grid h-6 w-6 place-items-center rounded border ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center shadow-sm ${
issue.priority === "urgent"
? "text-red-600"
? "border-red-500/20 bg-red-500/20 text-red-500"
: issue.priority === "high"
? "text-orange-500"
? "border-orange-500/20 bg-orange-500/20 text-orange-500"
: issue.priority === "medium"
? "text-yellow-500"
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
: issue.priority === "low"
? "bg-green-100 text-green-500"
: ""
? "border-green-500/20 bg-green-500/20 text-green-500"
: "border-brand-base"
}`}
>
<Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
Expand Down
152 changes: 75 additions & 77 deletions apps/app/components/pages/create-update-block-inline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,89 +230,87 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
}, [createPageBlock, updatePageBlock, data, handleSubmit]);

return (
<div>
<form
className="divide-y rounded-[10px] border shadow"
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
>
<div className="pt-2">
<div className="flex justify-between">
<Input
id="name"
name="name"
placeholder="Title"
register={register}
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
autoComplete="off"
maxLength={255}
/>
</div>
<div className="page-block-section relative -mt-2 text-gray-500">
<Controller
name="description"
control={control}
render={({ field: { value } }) => (
<RemirrorRichTextEditor
value={
!value || (typeof value === "object" && Object.keys(value).length === 0)
? watch("description_html")
: value
}
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
placeholder="Write something..."
customClassName="text-sm"
noBorder
borderOnFocus={false}
/>
<form
className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
>
<div className="pt-2">
<div className="flex justify-between">
<Input
id="name"
name="name"
placeholder="Title"
register={register}
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
autoComplete="off"
maxLength={255}
/>
</div>
<div className="page-block-section relative -mt-2 text-brand-secondary">
<Controller
name="description"
control={control}
render={({ field: { value } }) => (
<RemirrorRichTextEditor
value={
!value || (typeof value === "object" && Object.keys(value).length === 0)
? watch("description_html")
: value
}
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
placeholder="Write something..."
customClassName="text-sm"
noBorder
borderOnFocus={false}
/>
)}
/>
<div className="m-2 mt-6 flex">
<button
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
>
{iAmFeelingLucky ? (
"Generating response..."
) : (
<>
<SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
</>
)}
/>
<div className="m-2 mt-6 ml-2 flex">
</button>
{data && (
<button
type="button"
className={`flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100 ${
iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
onClick={() => {
onClose();
setGptAssistantModal();
}}
>
{iAmFeelingLucky ? (
"Generating response..."
) : (
<>
<SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
</>
)}
<SparklesIcon className="h-4 w-4" />
AI
</button>
{data && (
<button
type="button"
className="-mr-2 ml-4 flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100"
onClick={() => {
onClose();
setGptAssistantModal();
}}
>
<SparklesIcon className="h-4 w-4" />
AI
</button>
)}
</div>
)}
</div>
</div>
<div className="flex items-center justify-end gap-2 p-4">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
{data
? isSubmitting
? "Updating..."
: "Update block"
: isSubmitting
? "Adding..."
: "Add block"}
</PrimaryButton>
</div>
</form>
</div>
</div>
<div className="flex items-center justify-end gap-2 p-4">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
{data
? isSubmitting
? "Updating..."
: "Update block"
: isSubmitting
? "Adding..."
: "Add block"}
</PrimaryButton>
</div>
</form>
);
};
Loading

1 comment on commit f2701a1

@vercel
Copy link

@vercel vercel bot commented on f2701a1 Apr 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev.vercel.app
plane-dev-git-develop-caravel.vercel.app
plane-dev-caravel.vercel.app

Please sign in to comment.