fix: theming fixes (#914)

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

View File

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

View File

@ -39,7 +39,7 @@ export const CustomDatePicker: React.FC<Props> = ({
? "block px-3 py-2 text-sm focus:outline-none"
: renderAs === "button"
? `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`
: ""
} ${error ? "border-red-500 bg-red-100" : ""} ${

View File

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

View File

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

View File

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

View File

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

View File

@ -44,14 +44,14 @@
[data-theme="dark"] {
--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-border: 46, 50, 52;
--color-bg-sidebar: 19, 20, 22;
--color-accent: 60, 133, 217;
--color-text-base: 255, 255, 255;
--color-text-base: 233, 244, 252;
--color-text-secondary: 142, 148, 146;
}