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:
Anmol Singh Bhatia 2023-09-15 15:03:32 +05:30 committed by GitHub
parent 9bfdcff44d
commit ccffbe1b4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 1299 additions and 1072 deletions

View file

@ -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" />,
},
};

View file

@ -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>