Skip to content

style: workspace and profile setting revamp #2193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 6 commits into from
Sep 15, 2023
Merged

style: workspace and profile setting revamp #2193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
05c7595
chore: custom theme mode svg added
anmolsinghbhatia Sep 15, 2023
7c52b5b
style: workspace settings ui revamp
anmolsinghbhatia Sep 15, 2023
2028b39
style: project settings and image upload modal improvement
anmolsinghbhatia Sep 15, 2023
462ecba
style: profile setting ui revamp
anmolsinghbhatia Sep 15, 2023
10d3f5f
Merge branch 'develop' of github.com:makeplane/plane into style/works…
anmolsinghbhatia Sep 15, 2023
c24058c
chore: settings ui improvement and bug fixes
anmolsinghbhatia Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions web/components/automation/auto-close-automation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha

{projectDetails?.close_in !== 0 && (
<div className="ml-12">
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
<div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200 p-2">
<div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
<div className="w-1/2 text-sm font-medium">
Auto-close issues that are inactive for
</div>
Expand Down Expand Up @@ -138,7 +138,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
</div>
</div>

<div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
<div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
<div className="w-1/2 text-sm font-medium">Auto-close Status</div>
<div className="w-1/2 ">
<CustomSearchSelect
Expand Down
32 changes: 16 additions & 16 deletions web/components/core/activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) => (
Expand All @@ -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) => {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) => (
Expand All @@ -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) => {
Expand Down Expand Up @@ -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) => (
Expand All @@ -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) => {
Expand Down Expand Up @@ -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) => (
Expand All @@ -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) => {
Expand Down Expand Up @@ -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" />,
},
};

Expand Down
38 changes: 23 additions & 15 deletions web/components/core/modals/image-upload-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useCallback, useState } from "react";

import NextImage from "next/image";
import { useRouter } from "next/router";

// react-dropzone
Expand All @@ -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";

Expand All @@ -21,6 +20,8 @@ type Props = {
onClose: () => void;
isOpen: boolean;
onSuccess: (url: string) => void;
isRemoving: boolean;
handleDelete: () => void;
userImage?: boolean;
};

Expand All @@ -29,6 +30,8 @@ export const ImageUploadModal: React.FC<Props> = ({
onSuccess,
isOpen,
onClose,
isRemoving,
handleDelete,
userImage,
}) => {
const [image, setImage] = useState<File | null>(null);
Expand Down Expand Up @@ -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"
/>
</>
) : (
Expand Down Expand Up @@ -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>
Expand Down
87 changes: 48 additions & 39 deletions web/components/exporter/guide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,32 +46,38 @@ const IntegrationGuide = () => {

return (
<>
<div className="h-full space-y-2">
<div className="h-full w-full">
<>
<div className="space-y-2">
<div>
{EXPORTERS_LIST.map((service) => (
<div
key={service.provider}
className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4"
className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
>
<div className="flex items-center gap-4 whitespace-nowrap">
<div className="relative h-10 w-10 flex-shrink-0">
<Image
src={service.logo}
layout="fill"
objectFit="cover"
alt={`${service.title} Logo`}
/>
</div>
<div className="w-full">
<h3>{service.title}</h3>
<p className="text-sm text-custom-text-200">{service.description}</p>
<div className="flex items-start justify-between gap-4 w-full">
<div className="flex item-center gap-2.5">
<div className="relative h-10 w-10 flex-shrink-0">
<Image
src={service.logo}
layout="fill"
objectFit="cover"
alt={`${service.title} Logo`}
/>
</div>
<div>
<h3 className="flex items-center gap-4 text-sm font-medium">
{service.title}
</h3>
<p className="text-sm text-custom-text-200 tracking-tight">
{service.description}
</p>
</div>
</div>
<div className="flex-shrink-0">
<Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
<a>
<PrimaryButton>
<span className="capitalize">{service.type}</span> now
<span className="capitalize">{service.type}</span>
</PrimaryButton>
</a>
</Link>
Expand All @@ -80,10 +86,11 @@ const IntegrationGuide = () => {
</div>
))}
</div>
<div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
<h3 className="mb-2 flex gap-2 text-lg font-medium justify-between">
<div className="flex gap-2">
<div className="">Previous Exports</div>
<div>
<div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-200">
<div className="flex gap-2 items-center">
<h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>

<button
type="button"
className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
Expand Down Expand Up @@ -128,27 +135,29 @@ const IntegrationGuide = () => {
<Icon iconName="keyboard_arrow_right" className="!text-lg" />
</button>
</div>
</h3>
{exporterServices && exporterServices?.results ? (
exporterServices?.results?.length > 0 ? (
<div className="space-y-2">
<div className="divide-y divide-custom-border-200">
{exporterServices?.results.map((service) => (
<SingleExport key={service.id} service={service} refreshing={refreshing} />
))}
</div>
<div className="flex flex-col">
{exporterServices && exporterServices?.results ? (
exporterServices?.results?.length > 0 ? (
<div>
<div className="divide-y divide-custom-border-200">
{exporterServices?.results.map((service) => (
<SingleExport key={service.id} service={service} refreshing={refreshing} />
))}
</div>
</div>
</div>
) : (
<p className="py-2 text-sm text-custom-text-200">No previous export available.</p>
)
) : (
<p className="py-2 text-sm text-custom-text-200">No previous export available.</p>
)
) : (
<Loader className="mt-6 grid grid-cols-1 gap-3">
<Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" />
</Loader>
)}
<Loader className="mt-6 grid grid-cols-1 gap-3">
<Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" />
</Loader>
)}
</div>
</div>
</>
{provider && (
Expand Down
2 changes: 1 addition & 1 deletion web/components/exporter/single-export.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
};

return (
<div className="flex items-center justify-between gap-2 py-3">
<div className="flex items-center justify-between gap-2 px-4 py-3">
<div>
<h4 className="flex items-center gap-2 text-sm">
<span>
Expand Down
Loading