github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix minor UI bugs

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-04-30 14:58:49 +05:30
parent 0438a0ba2b
commit 0c4de6a7f4
11 changed files with 33 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
space/components/accounts/auth-forms/password.tsx
View File

@ -180,7 +180,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
)} )}
</div> </div>
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && ( {!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && (
<span className="text-sm text-red-500">Password doesn{"'"}t match</span> <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)} )}
</div> </div>
)} )}

2
space/components/accounts/onboarding-form.tsx
View File

@ -210,7 +210,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
disabled={isButtonDisabled} disabled={isButtonDisabled}
loading={isSubmitting} loading={isSubmitting}
> >
{isSubmitting ? "Updating..." : "Continue"} Continue
</Button> </Button>
</form> </form>
); );

2
space/pages/accounts/reset-password.tsx
View File

@ -181,7 +181,7 @@ const ResetPasswordPage: NextPage = () => {
)} )}
</div> </div>
{!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && ( {!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
<span className="text-sm text-red-500">Password doesn{"'"}t match</span> <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)} )}
</div> </div>
)} )}

2
web/components/account/auth-forms/password.tsx
View File

@ -181,7 +181,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
)} )}
</div> </div>
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && ( {!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && (
<span className="text-sm text-red-500">Password doesn{"'"}t match</span> <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)} )}
</div> </div>
)} )}

16
web/components/onboarding/create-workspace.tsx
View File

@ -141,7 +141,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
<div className="text-center space-y-1 py-4 mx-auto"> <div className="text-center space-y-1 py-4 mx-auto">
<h3 className="text-3xl font-bold text-onboarding-text-100">Create a workspace</h3> <h3 className="text-3xl font-bold text-onboarding-text-100">Create a workspace</h3>
<p className="font-medium text-onboarding-text-400"> <p className="font-medium text-onboarding-text-400">
To start using plane, you need to create or join a workspace To start using Plane, you need to create or join a workspace.
</p> </p>
</div> </div>
<form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}> <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
@ -162,7 +162,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
}, },
}} }}
render={({ field: { value, ref, onChange } }) => ( render={({ field: { value, ref, onChange } }) => (
<div className="relative flex items-center rounded-md bg-onboarding-background-200"> <div className="relative flex items-center rounded-md">
<Input <Input
id="name" id="name"
name="name" name="name"
@ -176,7 +176,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
placeholder="Enter workspace name..." placeholder="Enter workspace name..."
ref={ref} ref={ref}
hasError={Boolean(errors.name)} hasError={Boolean(errors.name)}
className="w-full border-onboarding-border-100 text-base placeholder:text-base placeholder:text-custom-text-400/50" className="w-full border-onboarding-border-100 placeholder:text-custom-text-400"
/> />
</div> </div>
)} )}
@ -185,16 +185,16 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug">
Workspace url Workspace URL
</label> </label>
<Controller <Controller
control={control} control={control}
name="slug" name="slug"
render={({ field: { value, ref, onChange } }) => ( render={({ field: { value, ref, onChange } }) => (
<div <div
className={`relative flex items-center rounded-md border bg-onboarding-background-200 px-3 ${ className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
invalidSlug ? "border-red-500" : "border-onboarding-border-100" invalidSlug ? "border-red-500" : "border-onboarding-border-100"
} `} }`}
> >
<span className="whitespace-nowrap text-sm">{window && window.location.host}/</span> <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
<Input <Input
@ -213,7 +213,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
</div> </div>
)} )}
/> />
<p className="text-sm text-onboarding-text-300">You can only edit the slug of the url</p> <p className="text-sm text-onboarding-text-300">You can only edit the slug of the URL</p>
{slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>} {slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>}
{invalidSlug && ( {invalidSlug && (
<span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span> <span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span>
@ -238,7 +238,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
<span className="text-custom-text-400">Select organization size</span> <span className="text-custom-text-400">Select organization size</span>
) )
} }
buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none" buttonClassName="!border-[0.5px] !border-onboarding-border-100 !shadow-none !rounded-md"
input input
optionsClassName="w-full" optionsClassName="w-full"
> >

10
web/components/onboarding/invite-members.tsx
View File

@ -134,7 +134,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
return ( return (
<div> <div>
<div className="group relative grid grid-cols-10 gap-4"> <div className="group relative grid grid-cols-10 gap-4">
<div className="col-span-6 ml-8 rounded-md bg-onboarding-background-200"> <div className="col-span-6 ml-8">
<Controller <Controller
control={control} control={control}
name={`emails.${index}.email`} name={`emails.${index}.email`}
@ -162,7 +162,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
)} )}
/> />
</div> </div>
<div className="col-span-4 mr-8 flex items-center rounded-md border border-onboarding-border-100 bg-onboarding-background-200"> <div className="col-span-4 mr-8">
<Controller <Controller
control={control} control={control}
name={`emails.${index}.role`} name={`emails.${index}.role`}
@ -182,10 +182,10 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
type="button" type="button"
ref={buttonRef} ref={buttonRef}
onClick={() => setIsDropdownOpen((prev) => !prev)} onClick={() => setIsDropdownOpen((prev) => !prev)}
className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-xs duration-300" className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-onboarding-border-100"
> >
<span <span
className={`text-xs ${ className={`text-sm ${
!getValues(`emails.${index}.role_active`) !getValues(`emails.${index}.role_active`)
? "text-onboarding-text-400" ? "text-onboarding-text-400"
: "text-onboarding-text-100" : "text-onboarding-text-100"
@ -195,7 +195,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
</span> </span>
<ChevronDown <ChevronDown
className={`h-4 w-4 ${ className={`size-3 ${
!getValues(`emails.${index}.role_active`) !getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400" ? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100" : "stroke-onboarding-text-100"

18
web/components/onboarding/profile-setup.tsx
View File

@ -329,7 +329,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
)} )}
</button> </button>
</div> </div>
<div className="flex gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
First name First name
@ -355,7 +355,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.first_name)} hasError={Boolean(errors.first_name)}
placeholder="RWilbur" placeholder="RWilbur"
className="w-full border-onboarding-border-100 focus:border-custom-primary-100" className="w-full border-onboarding-border-100"
/> />
)} )}
/> />
@ -385,7 +385,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.last_name)} hasError={Boolean(errors.last_name)}
placeholder="Wright" placeholder="Wright"
className="w-full border-onboarding-border-100 focus:border-custom-primary-100" className="w-full border-onboarding-border-100"
/> />
)} )}
/> />
@ -405,7 +405,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
required: isSignUpUsingMagicCode ? "Password is required" : false, required: isSignUpUsingMagicCode ? "Password is required" : false,
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md bg-onboarding-background-200"> <div className="relative flex items-center rounded-md">
<Input <Input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
name="password" name="password"
@ -414,7 +414,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.password)} hasError={Boolean(errors.password)}
placeholder="New password..." placeholder="New password..."
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" className="w-full border-[0.5px] border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsPasswordInputFocused(true)} onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)} onBlur={() => setIsPasswordInputFocused(false)}
/> />
@ -445,10 +445,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
control={control} control={control}
name="confirm_password" name="confirm_password"
rules={{ rules={{
validate: (value) => value === password || "Password doesn't match", validate: (value) => value === password || "Passwords don't match",
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md bg-onboarding-background-200"> <div className="relative flex items-center rounded-md">
<Input <Input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
name="confirm_password" name="confirm_password"
@ -457,7 +457,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.password)} hasError={Boolean(errors.password)}
placeholder="Confirm password..." placeholder="Confirm password..."
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/> />
{showPassword ? ( {showPassword ? (
<EyeOff <EyeOff
@ -548,7 +548,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
disabled={isButtonDisabled} disabled={isButtonDisabled}
loading={isSubmitting} loading={isSubmitting}
> >
{isSubmitting ? "Updating..." : "Continue"} Continue
</Button> </Button>
</form> </form>
</div> </div>

6
web/components/project/projects-mobile-header.tsx
View File

@ -5,7 +5,7 @@ import { ChevronDown, ListFilter } from "lucide-react";
// types // types
import { TProjectFilters } from "@plane/types"; import { TProjectFilters } from "@plane/types";
// hooks // hooks
import { useApplication, useMember, useProjectFilter } from "@/hooks/store"; import { useAppRouter, useMember, useProjectFilter } from "@/hooks/store";
// components // components
import { FiltersDropdown } from "../issues"; import { FiltersDropdown } from "../issues";
import { ProjectFiltersSelection, ProjectOrderByDropdown } from "./dropdowns"; import { ProjectFiltersSelection, ProjectOrderByDropdown } from "./dropdowns";
@ -18,9 +18,7 @@ const ProjectsMobileHeader = observer(() => {
updateFilters, updateFilters,
} = useProjectFilter(); } = useProjectFilter();
const { const { workspaceSlug } = useAppRouter();
router: { workspaceSlug },
} = useApplication();
const { const {
workspace: { workspaceMemberIds }, workspace: { workspaceMemberIds },

6
web/layouts/settings-layout/profile/preferences/layout.tsx
View File

@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
// layout // layout
import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle"; import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header"; import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header";
import { useApplication } from "@/hooks/store"; import { useAppTheme } from "@/hooks/store";
import { ProfileSettingsLayout } from "@/layouts/settings-layout"; import { ProfileSettingsLayout } from "@/layouts/settings-layout";
// local components // local components
import { ProfilePreferenceSettingsSidebar } from "./sidebar"; import { ProfilePreferenceSettingsSidebar } from "./sidebar";
@ -14,13 +14,13 @@ interface IProfilePreferenceSettingsLayout {
export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => { export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
const { children, header } = props; const { children, header } = props;
const { theme: themeStore } = useApplication(); const { toggleSidebar } = useAppTheme();
return ( return (
<ProfileSettingsLayout <ProfileSettingsLayout
header={ header={
<div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4"> <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
<SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} /> <SidebarHamburgerToggle onClick={toggleSidebar} />
</div> </div>
} }
> >

4
web/pages/accounts/reset-password.tsx
View File

@ -195,7 +195,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
)} )}
</div> </div>
{!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && ( {!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
<span className="text-sm text-red-500">Password doesn{"'"}t match</span> <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)} )}
</div> </div>
)} )}
@ -216,5 +216,3 @@ ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
}; };
export default ResetPasswordPage; export default ResetPasswordPage;

2
web/pages/accounts/set-password.tsx
View File

@ -211,7 +211,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
</div> </div>
{!!passwordFormData.confirm_password && {!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password && ( passwordFormData.password !== passwordFormData.confirm_password && (
<span className="text-sm text-red-500">Password doesn{"'"}t match</span> <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)} )}
</div> </div>
)} )}