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

fix: theming fixes (#914)

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

12
apps/app/components/project/sidebar-list.tsx
View File

@ -198,15 +198,15 @@ export const ProjectSidebarList: FC = () => {
<Loader className="space-y-5"> <Loader className="space-y-5">
<div className="space-y-2"> <div className="space-y-2">
<Loader.Item height="30px" /> <Loader.Item height="30px" />
<Loader.Item height="15px" width="80%" light /> <Loader.Item height="15px" width="80%" />
<Loader.Item height="15px" width="80%" light /> <Loader.Item height="15px" width="80%" />
<Loader.Item height="15px" width="80%" light /> <Loader.Item height="15px" width="80%" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Loader.Item height="30px" /> <Loader.Item height="30px" />
<Loader.Item height="15px" width="80%" light /> <Loader.Item height="15px" width="80%" />
<Loader.Item height="15px" width="80%" light /> <Loader.Item height="15px" width="80%" />
<Loader.Item height="15px" width="80%" light /> <Loader.Item height="15px" width="80%" />
</div> </div>
</Loader> </Loader>
</div> </div>

2
apps/app/components/ui/datepicker.tsx
View File

@ -39,7 +39,7 @@ export const CustomDatePicker: React.FC<Props> = ({
? "block px-3 py-2 text-sm focus:outline-none" ? "block px-3 py-2 text-sm focus:outline-none"
: renderAs === "button" : renderAs === "button"
? `px-3 py-1 text-xs shadow-sm ${ ? `px-3 py-1 text-xs shadow-sm ${
disabled ? "" : "hover:bg-brand-surface-1" disabled ? "" : "hover:bg-brand-surface-2"
} duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent` } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
: "" : ""
} ${error ? "border-red-500 bg-red-100" : ""} ${ } ${error ? "border-red-500 bg-red-100" : ""} ${

8
apps/app/components/ui/loader.tsx
View File

@ -14,14 +14,10 @@ const Loader = ({ children, className = "" }: Props) => (
type ItemProps = { type ItemProps = {
height?: string; height?: string;
width?: string; width?: string;
light?: boolean;
}; };
const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto", light }) => ( const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
<div <div className="rounded-md bg-brand-surface-2" style={{ height: height, width: width }} />
className={`rounded-md ${light ? "bg-brand-surface-2" : "bg-gray-300"}`}
style={{ height: height, width: width }}
/>
); );
Loader.Item = Item; Loader.Item = Item;

4
apps/app/constants/issue.ts
View File

@ -72,7 +72,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
const updatedIssue = { const updatedIssue = {
...prevData[issueIndex], ...prevData[issueIndex],
...formData, ...formData,
assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees_list, assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
}; };
prevData.splice(issueIndex, 1, updatedIssue); prevData.splice(issueIndex, 1, updatedIssue);
@ -89,7 +89,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
const updatedIssue = { const updatedIssue = {
...oldGroup[issueIndex], ...oldGroup[issueIndex],
...formData, ...formData,
assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees_list, assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
}; };
if (selectedGroupBy !== Object.keys(formData)[0]) if (selectedGroupBy !== Object.keys(formData)[0])

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -219,9 +219,9 @@ const IssueDetailsPage: NextPage = () => {
<Loader className="flex h-full gap-5 p-5"> <Loader className="flex h-full gap-5 p-5">
<div className="basis-2/3 space-y-2"> <div className="basis-2/3 space-y-2">
<Loader.Item height="30px" width="40%" /> <Loader.Item height="30px" width="40%" />
<Loader.Item height="15px" width="60%" light /> <Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="60%" light /> <Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="40%" light /> <Loader.Item height="15px" width="40%" />
</div> </div>
<div className="basis-1/3 space-y-3"> <div className="basis-1/3 space-y-3">
<Loader.Item height="30px" /> <Loader.Item height="30px" />

22
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
View File

@ -173,7 +173,7 @@ const GeneralSettings: NextPage = () => {
/> />
) : ( ) : (
<Loader> <Loader>
<Loader.Item height="46px" width="46px" light /> <Loader.Item height="46px" width="46px" />
</Loader> </Loader>
)} )}
{projectDetails ? ( {projectDetails ? (
@ -189,7 +189,7 @@ const GeneralSettings: NextPage = () => {
/> />
) : ( ) : (
<Loader> <Loader>
<Loader.Item height="46px" width="225px" light /> <Loader.Item height="46px" width="225px" />
</Loader> </Loader>
)} )}
</div> </div>
@ -212,7 +212,7 @@ const GeneralSettings: NextPage = () => {
/> />
) : ( ) : (
<Loader className="w-full"> <Loader className="w-full">
<Loader.Item height="46px" width="full" light /> <Loader.Item height="46px" width="full" />
</Loader> </Loader>
)} )}
</div> </div>
@ -224,8 +224,8 @@ const GeneralSettings: NextPage = () => {
</div> </div>
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
{watch("cover_image") ? ( {watch("cover_image") ? (
<div className="w-full h-32 rounded border p-1"> <div className="h-32 w-full rounded border p-1">
<div className="w-full h-full relative rounded"> <div className="relative h-full w-full rounded">
<Image <Image
src={watch("cover_image")!} src={watch("cover_image")!}
alt={projectDetails?.name ?? "Cover image"} alt={projectDetails?.name ?? "Cover image"}
@ -233,7 +233,7 @@ const GeneralSettings: NextPage = () => {
layout="fill" layout="fill"
className="rounded" className="rounded"
/> />
<div className="absolute bottom-0 w-full flex justify-end"> <div className="absolute bottom-0 flex w-full justify-end">
<ImagePickerPopover <ImagePickerPopover
label={"Change cover"} label={"Change cover"}
onChange={(imageUrl) => { onChange={(imageUrl) => {
@ -246,7 +246,7 @@ const GeneralSettings: NextPage = () => {
</div> </div>
) : ( ) : (
<Loader className="w-full"> <Loader className="w-full">
<Loader.Item height="46px" width="full" light /> <Loader.Item height="46px" width="full" />
</Loader> </Loader>
)} )}
</div> </div>
@ -282,7 +282,7 @@ const GeneralSettings: NextPage = () => {
/> />
) : ( ) : (
<Loader> <Loader>
<Loader.Item height="46px" width="160px" light /> <Loader.Item height="46px" width="160px" />
</Loader> </Loader>
)} )}
</div> </div>
@ -318,7 +318,7 @@ const GeneralSettings: NextPage = () => {
/> />
) : ( ) : (
<Loader className="w-full"> <Loader className="w-full">
<Loader.Item height="46px" width="160px" light /> <Loader.Item height="46px" width="160px" />
</Loader> </Loader>
)} )}
</div> </div>
@ -330,7 +330,7 @@ const GeneralSettings: NextPage = () => {
</SecondaryButton> </SecondaryButton>
) : ( ) : (
<Loader className="mt-2 w-full"> <Loader className="mt-2 w-full">
<Loader.Item height="34px" width="100px" light /> <Loader.Item height="34px" width="100px" />
</Loader> </Loader>
)} )}
</div> </div>
@ -355,7 +355,7 @@ const GeneralSettings: NextPage = () => {
</div> </div>
) : ( ) : (
<Loader className="mt-2 w-full"> <Loader className="mt-2 w-full">
<Loader.Item height="46px" width="100px" light /> <Loader.Item height="46px" width="100px" />
</Loader> </Loader>
)} )}
</div> </div>

4
apps/app/styles/globals.css
View File

@ -44,14 +44,14 @@
[data-theme="dark"] { [data-theme="dark"] {
--color-bg-base: 25, 27, 27; --color-bg-base: 25, 27, 27;
--color-bg-surface-1: 31, 32, 35; --color-bg-surface-1: 29, 30, 32;
--color-bg-surface-2: 39, 42, 45; --color-bg-surface-2: 39, 42, 45;
--color-border: 46, 50, 52; --color-border: 46, 50, 52;
--color-bg-sidebar: 19, 20, 22; --color-bg-sidebar: 19, 20, 22;
--color-accent: 60, 133, 217; --color-accent: 60, 133, 217;
--color-text-base: 255, 255, 255; --color-text-base: 233, 244, 252;
--color-text-secondary: 142, 148, 146; --color-text-secondary: 142, 148, 146;
} }