binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: quick add issue UI improvements in all the layouts (#2615)

Browse source 
* style: quick add issue UI improvements in all the layouts

* style: ui improvements

* style: quick add icon size

* chore: static sizes to tailwind classes

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Lakhan Baheti 2023-11-03 19:17:50 +05:30 • committed by GitHub
parent 79cad16aba
commit 0d2c399555
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
View file

@ -1,6 +1,5 @@
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import { Transition } from "@headlessui/react";
import { useForm } from "react-hook-form";
// store
@ -66,7 +65,7 @@ const Inputs = (props: any) => {
return (
<>
<h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
<h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
<input
type="text"
autoComplete="off"
@ -74,7 +73,7 @@ const Inputs = (props: any) => {
{...register("name", {
required: "Issue title is required.",
})}
className="w-full pr-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
className="w-full pr-2 py-1.5 rounded-md bg-transparent text-xs font-medium leading-5 text-custom-text-200 outline-none"
/>
</>
);
@ -181,15 +180,7 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
return (
<>
<Transition
show={isOpen}
enter="transition ease-in-out duration-200 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in-out duration-200 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{isOpen && (
<div
ref={ref}
className={`transition-all z-20 w-full ${
@ -198,21 +189,21 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
>
<form
onSubmit={handleSubmit(onSubmitHandler)}
className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
className="flex w-full px-2 border-[0.5px] border-custom-border-200 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs transition-opacity"
>
<Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
</form>
</div>
</Transition>
)}
{!isOpen && (
<div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
<button
type="button"
className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-1 py-1.5 rounded-md"
className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1.5 rounded-md"
onClick={() => setIsOpen(true)}
>
<PlusIcon className="h-4 w-4" />
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
</button>
</div>