style: workspace and profile setting revamp (#2193)
* chore: custom theme mode svg added * style: workspace settings ui revamp * style: project settings and image upload modal improvement * style: profile setting ui revamp * chore: settings ui improvement and bug fixes
This commit is contained in:
parent
9bfdcff44d
commit
ccffbe1b4e
40 changed files with 1299 additions and 1072 deletions
|
|
@ -90,14 +90,14 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="group" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
archived_at: {
|
||||
message: (activity) => {
|
||||
if (activity.new_value === "restore") return "restored the issue.";
|
||||
else return "archived the issue.";
|
||||
},
|
||||
icon: <Icon iconName="archive" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="archive" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
attachment: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -136,7 +136,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="attach_file" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="attach_file" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
blocking: {
|
||||
message: (activity) => {
|
||||
|
|
@ -224,7 +224,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="contrast" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="contrast" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
description: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -239,7 +239,7 @@ const activityDetails: {
|
|||
.
|
||||
</>
|
||||
),
|
||||
icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
estimate_point: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -271,14 +271,14 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="change_history" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
issue: {
|
||||
message: (activity) => {
|
||||
if (activity.verb === "created") return "created the issue.";
|
||||
else return "deleted an issue.";
|
||||
},
|
||||
icon: <Icon iconName="stack" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="stack" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
labels: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -327,7 +327,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="sell" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="sell" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
link: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -398,7 +398,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="link" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
modules: {
|
||||
message: (activity, showIssue, workspaceSlug) => {
|
||||
|
|
@ -448,7 +448,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="dataset" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="dataset" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
name: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -463,7 +463,7 @@ const activityDetails: {
|
|||
.
|
||||
</>
|
||||
),
|
||||
icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
parent: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -496,7 +496,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="supervised_user_circle" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="supervised_user_circle" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
priority: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -514,7 +514,7 @@ const activityDetails: {
|
|||
.
|
||||
</>
|
||||
),
|
||||
icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="signal_cellular_alt" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
start_date: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -548,7 +548,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
state: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -564,7 +564,7 @@ const activityDetails: {
|
|||
.
|
||||
</>
|
||||
),
|
||||
icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
|
||||
icon: <Squares2X2Icon className="h-6 w-6 text-custom-sidebar-200" aria-hidden="true" />,
|
||||
},
|
||||
target_date: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -598,7 +598,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
|
||||
icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useCallback, useState } from "react";
|
||||
|
||||
import NextImage from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// react-dropzone
|
||||
|
|
@ -12,7 +11,7 @@ import fileServices from "services/file.service";
|
|||
// hooks
|
||||
import useWorkspaceDetails from "hooks/use-workspace-details";
|
||||
// ui
|
||||
import { PrimaryButton, SecondaryButton } from "components/ui";
|
||||
import { DangerButton, PrimaryButton, SecondaryButton } from "components/ui";
|
||||
// icons
|
||||
import { UserCircleIcon } from "components/icons";
|
||||
|
||||
|
|
@ -21,6 +20,8 @@ type Props = {
|
|||
onClose: () => void;
|
||||
isOpen: boolean;
|
||||
onSuccess: (url: string) => void;
|
||||
isRemoving: boolean;
|
||||
handleDelete: () => void;
|
||||
userImage?: boolean;
|
||||
};
|
||||
|
||||
|
|
@ -29,6 +30,8 @@ export const ImageUploadModal: React.FC<Props> = ({
|
|||
onSuccess,
|
||||
isOpen,
|
||||
onClose,
|
||||
isRemoving,
|
||||
handleDelete,
|
||||
userImage,
|
||||
}) => {
|
||||
const [image, setImage] = useState<File | null>(null);
|
||||
|
|
@ -148,12 +151,10 @@ export const ImageUploadModal: React.FC<Props> = ({
|
|||
>
|
||||
Edit
|
||||
</button>
|
||||
<NextImage
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
<img
|
||||
src={image ? URL.createObjectURL(image) : value ? value : ""}
|
||||
alt="image"
|
||||
className="rounded-lg"
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -182,15 +183,22 @@ export const ImageUploadModal: React.FC<Props> = ({
|
|||
<p className="my-4 text-custom-text-200 text-sm">
|
||||
File formats supported- .jpeg, .jpg, .png, .webp, .svg
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={handleSubmit}
|
||||
disabled={!image}
|
||||
loading={isImageUploading}
|
||||
>
|
||||
{isImageUploading ? "Uploading..." : "Upload & Save"}
|
||||
</PrimaryButton>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<DangerButton onClick={handleDelete} outline disabled={!value}>
|
||||
{isRemoving ? "Removing..." : "Remove"}
|
||||
</DangerButton>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={handleSubmit}
|
||||
disabled={!image}
|
||||
loading={isImageUploading}
|
||||
>
|
||||
{isImageUploading ? "Uploading..." : "Upload & Save"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue