Skip to content

style: settings page redesigned #47

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
vihar merged 1 commit into from
Dec 19, 2022
Merged

style: settings page redesigned #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion apps/app/components/common/board-view/single-issue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const SingleIssue: React.FC<Props> = ({
>
<div className="group/card relative p-2 select-none">
{handleDeleteIssue && (
<div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1 z-10">
<div className="opacity-0 group-hover/card:opacity-100 absolute top-1.5 right-1.5 z-10">
<button
type="button"
className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 bg-white hover:bg-red-50 duration-300 outline-none"
Expand Down
0 ...ts/project/ConfirmProjectMemberRemove.tsx → ...project/confirm-project-member-remove.tsx
View file
Open in desktop
File renamed without changes.
0 ...ts/project/SendProjectInvitationModal.tsx → ...project/send-project-invitation-modal.tsx
View file
Open in desktop
File renamed without changes.
58 changes: 29 additions & 29 deletions apps/app/components/project/settings/control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,29 @@ const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
);
return (
<>
<section className="space-y-5">
<section className="space-y-8">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">Control</h3>
<p className="mt-1 text-sm text-gray-500">Set the control for the project.</p>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
<p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
</div>
<div className="flex justify-between gap-3">
<div className="w-full md:w-1/2">
<div className="grid grid-cols-2 gap-16">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Project Lead</h4>
<p className="text-sm text-gray-500 mb-3">Select the project leader.</p>
<Controller
control={control}
name="project_lead"
render={({ field: { onChange, value } }) => (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<Listbox.Label>
<div className="text-gray-500 mb-2">Project Lead</div>
</Listbox.Label>
<div className="relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{people?.find((person) => person.member.id === value)?.member
.first_name ?? "Select Lead"}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</span>
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Listbox.Button>

<Transition
Expand All @@ -68,14 +65,14 @@ const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
<Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
`${
active ? "text-white bg-theme" : "text-gray-900"
} cursor-default select-none relative py-2 pl-3 pr-9`
active ? "bg-indigo-50" : ""
} text-gray-900 cursor-default select-none relative px-3 py-2`
}
value={person.member.id}
>
Expand All @@ -86,7 +83,9 @@ const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
selected ? "font-semibold" : "font-normal"
} block truncate`}
>
{person.member.first_name}
{person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</span>

{selected ? (
Expand All @@ -111,26 +110,25 @@ const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
)}
/>
</div>
<div className="w-full md:w-1/2">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Default Assignee</h4>
<p className="text-sm text-gray-500 mb-3">
Select the default assignee for the project.
</p>
<Controller
control={control}
name="default_assignee"
render={({ field: { value, onChange } }) => (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<Listbox.Label>
<div className="text-gray-500 mb-2">Default Assignee</div>
</Listbox.Label>
<div className="relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{people?.find((p) => p.member.id === value)?.member.first_name ??
"Select Default Assignee"}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</span>
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Listbox.Button>

<Transition
Expand All @@ -140,14 +138,14 @@ const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
<Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
`${
active ? "text-white bg-theme" : "text-gray-900"
} cursor-default select-none relative py-2 pl-3 pr-9`
active ? "bg-indigo-50" : ""
} text-gray-900 cursor-default select-none relative px-3 py-2`
}
value={person.member.id}
>
Expand All @@ -158,7 +156,9 @@ const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
selected ? "font-semibold" : "font-normal"
} block truncate`}
>
{person.member.first_name}
{person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</span>

{selected ? (
Expand All @@ -184,7 +184,7 @@ const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
/>
</div>
</div>
<div className="flex justify-end">
<div>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Updating Project..." : "Update Project"}
</Button>
Expand Down
103 changes: 55 additions & 48 deletions apps/app/components/project/settings/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,68 +45,70 @@ const GeneralSettings: React.FC<Props> = ({

return (
<>
<section className="space-y-5">
<section className="space-y-8">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">General</h3>
<p className="mt-1 text-sm text-gray-500">
<h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
<p className="mt-4 text-sm text-gray-500">
This information will be displayed to every member of the project.
</p>
</div>
<div className="grid grid-cols-10 gap-3 items-center">
<div className="col-span-1">
<div>
<label htmlFor="icon" className="text-gray-500 mb-2">
Icon
</label>
<div className="grid grid-cols-2 gap-16">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Icon & Name</h4>
<p className="text-sm text-gray-500 mb-3">Select an icon and a name for the project.</p>
<div className="flex gap-2">
<Controller
control={control}
name="icon"
render={({ field: { value, onChange } }) => (
<EmojiIconPicker
label={value ? String.fromCodePoint(parseInt(value)) : "Select Icon"}
label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
value={value}
onChange={onChange}
/>
)}
/>
<Input
id="name"
name="name"
error={errors.name}
register={register}
placeholder="Project Name"
size="lg"
className="w-auto"
validations={{
required: "Name is required",
}}
/>
</div>
</div>
<div className="col-span-5">
<Input
id="name"
name="name"
error={errors.name}
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Description</h4>
<p className="text-sm text-gray-500 mb-3">Give a description to the project.</p>
<TextArea
id="description"
name="description"
error={errors.description}
register={register}
placeholder="Project Name"
label="Name"
placeholder="Enter project description"
validations={{
required: "Name is required",
}}
/>
</div>
<div className="col-span-2">
<Select
name="network"
id="network"
options={Object.keys(NETWORK_CHOICES).map((key) => ({
value: key,
label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
}))}
label="Network"
register={register}
validations={{
required: "Network is required",
required: "Description is required",
}}
/>
</div>
<div className="col-span-2">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Identifier</h4>
<p className="text-sm text-gray-500 mb-3">
Create a 1-6 characters{"'"} identifier for the project.
</p>
<Input
id="identifier"
name="identifier"
error={errors.identifier}
register={register}
placeholder="Enter identifier"
label="Identifier"
className="w-40"
size="lg"
onChange={(e: any) => {
if (!activeWorkspace || !e.target.value) return;
checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
Expand All @@ -124,21 +126,26 @@ const GeneralSettings: React.FC<Props> = ({
}}
/>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Network</h4>
<p className="text-sm text-gray-500 mb-3">Select privacy type for the project.</p>
<Select
name="network"
id="network"
options={Object.keys(NETWORK_CHOICES).map((key) => ({
value: key,
label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
}))}
size="lg"
register={register}
validations={{
required: "Network is required",
}}
className="w-40"
/>
</div>
</div>
<div>
<TextArea
id="description"
name="description"
error={errors.description}
register={register}
label="Description"
placeholder="Enter project description"
validations={{
required: "Description is required",
}}
/>
</div>
<div className="flex justify-end">
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Updating Project..." : "Update Project"}
</Button>
Expand Down
20 changes: 7 additions & 13 deletions apps/app/components/project/settings/labels/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,11 @@ import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
// headless ui
import { Popover, Transition, Menu } from "@headlessui/react";
import { Popover, Transition } from "@headlessui/react";
// ui
import { Button, CustomMenu, Input, Spinner } from "ui";
import { Button, Input, Spinner } from "ui";
// icons
import {
ChevronDownIcon,
EllipsisHorizontalIcon,
PencilIcon,
PlusIcon,
RectangleGroupIcon,
} from "@heroicons/react/24/outline";
import { PlusIcon } from "@heroicons/react/24/outline";
// types
import { IIssueLabels } from "types";
// fetch-keys
Expand Down Expand Up @@ -109,11 +103,11 @@ const LabelsSettings: React.FC = () => {

return (
<>
<section className="space-y-5">
<div className="flex items-center justify-between">
<section className="space-y-8">
<div className="md:w-2/3 flex justify-between items-center gap-2">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
<p className="mt-1 text-sm text-gray-500">Manage the labels of this project.</p>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
<p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
</div>
<Button
theme="secondary"
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/project/settings/labels/single-label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const defaultValues: Partial<IIssueLabels> = {
};

const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLabelDelete }) => {
const [newLabelForm, setNewLabelForm] = useState(true);
const [newLabelForm, setNewLabelForm] = useState(false);

const {
register,
Expand Down Expand Up @@ -54,7 +54,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
<h6 className="text-sm">{label.name}</h6>
</div>
<CustomMenu ellipsis>
<CustomMenu.MenuItem>Convert to group</CustomMenu.MenuItem>
{/* <CustomMenu.MenuItem>Convert to group</CustomMenu.MenuItem> */}
<CustomMenu.MenuItem
onClick={() => {
editLabel(label);
Expand Down
Loading