forked from github/plane
fix: bug fixes and ui improvement (#2674)
* chore: peekoverview edit permission updated * chore: tab index added in create project modal * chore: project card improvement * style: avatar component improvement * chore: create issue modal improvement * style: global style sidebar border variable name fix
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
b372ccfdb3
commit
d8c96536f0
@ -57,7 +57,10 @@ export const AvatarGroup: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<div className={`flex ${sizeInfo.spacing}`}>
|
||||
{avatarsWithUpdatedProps.map((avatar, index) => (
|
||||
<div key={index} className="ring-1 ring-custom-border-200 rounded-full">
|
||||
<div
|
||||
key={index}
|
||||
className="ring-1 ring-custom-background-100 rounded-full"
|
||||
>
|
||||
{avatar}
|
||||
</div>
|
||||
))}
|
||||
@ -69,7 +72,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
|
||||
<div
|
||||
className={`${
|
||||
!isAValidNumber(size) ? sizeInfo.avatarSize : ""
|
||||
} ring-1 ring-custom-border-200 bg-custom-primary-500 text-white rounded-full grid place-items-center text-[9px]`}
|
||||
} ring-1 ring-custom-background-100 bg-custom-primary-10 text-custom-primary-100 rounded-full grid place-items-center text-[9px]`}
|
||||
style={
|
||||
isAValidNumber(size)
|
||||
? {
|
||||
|
||||
@ -199,9 +199,9 @@
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
|
||||
--color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
|
||||
// store
|
||||
const { user: userStore } = useMobxStore();
|
||||
const { currentProjectRole } = userStore;
|
||||
const isAllowed = [5, 10].includes(currentProjectRole || 0);
|
||||
const isAllowed = [15, 20].includes(currentProjectRole || 0);
|
||||
// states
|
||||
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
|
||||
const [characterLimit, setCharacterLimit] = useState(false);
|
||||
|
||||
@ -324,7 +324,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-3xl">
|
||||
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-4xl">
|
||||
<IssueForm
|
||||
handleFormSubmit={handleFormSubmit}
|
||||
initialData={data ?? prePopulateData}
|
||||
|
||||
@ -211,7 +211,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant="link-primary"
|
||||
className="!p-0"
|
||||
className="!p-0 font-semibold"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
@ -261,6 +261,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
name="name"
|
||||
type="text"
|
||||
value={value}
|
||||
tabIndex={1}
|
||||
onChange={handleNameChange(onChange)}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Project Title"
|
||||
@ -293,6 +294,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
name="identifier"
|
||||
type="text"
|
||||
value={value}
|
||||
tabIndex={2}
|
||||
onChange={handleIdentifierChange(onChange)}
|
||||
hasError={Boolean(errors.identifier)}
|
||||
placeholder="Identifier"
|
||||
@ -311,6 +313,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
id="description"
|
||||
name="description"
|
||||
value={value}
|
||||
tabIndex={3}
|
||||
placeholder="Description..."
|
||||
onChange={onChange}
|
||||
className="text-sm !h-24"
|
||||
@ -322,7 +325,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex-shrink-0" tabIndex={4}>
|
||||
<Controller
|
||||
name="network"
|
||||
control={control}
|
||||
@ -359,7 +362,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex-shrink-0" tabIndex={5}>
|
||||
<Controller
|
||||
name="project_lead_member"
|
||||
control={control}
|
||||
@ -377,10 +380,10 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-5">
|
||||
<Button variant="neutral-primary" onClick={handleClose}>
|
||||
<Button variant="neutral-primary" onClick={handleClose} tabIndex={6}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
|
||||
<Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
|
||||
{isSubmitting ? "Creating..." : "Create Project"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -211,9 +211,9 @@
|
||||
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
|
||||
|
||||
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
|
||||
--color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
|
||||
--color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
|
||||
--color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user