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>
{!!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>
)}

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

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

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

@ -181,7 +181,7 @@ const ResetPasswordPage: NextPage = () => {
)}
</div>
{!!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>
)}

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

@ -181,7 +181,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
)}
</div>
{!!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>
)}

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">
<h3 className="text-3xl font-bold text-onboarding-text-100">Create a workspace</h3>
<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>
</div>
<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 } }) => (
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<div className="relative flex items-center rounded-md">
<Input
id="name"
name="name"
@ -176,7 +176,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
placeholder="Enter workspace name..."
ref={ref}
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>
)}
@ -185,16 +185,16 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
</div>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug">
Workspace url
Workspace URL
</label>
<Controller
control={control}
name="slug"
render={({ field: { value, ref, onChange } }) => (
<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"
} `}
}`}
>
<span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
<Input
@ -213,7 +213,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
</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>}
{invalidSlug && (
<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>
)
}
buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
buttonClassName="!border-[0.5px] !border-onboarding-border-100 !shadow-none !rounded-md"
input
optionsClassName="w-full"
>

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

@ -134,7 +134,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
return (
<div>
<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
control={control}
name={`emails.${index}.email`}
@ -162,7 +162,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
)}
/>
</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
control={control}
name={`emails.${index}.role`}
@ -182,10 +182,10 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
type="button"
ref={buttonRef}
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
className={`text-xs ${
className={`text-sm ${
!getValues(`emails.${index}.role_active`)
? "text-onboarding-text-400"
: "text-onboarding-text-100"
@ -195,7 +195,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
</span>
<ChevronDown
className={`h-4 w-4 ${
className={`size-3 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "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>
</div>
<div className="flex gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
First name
@ -355,7 +355,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref}
hasError={Boolean(errors.first_name)}
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}
hasError={Boolean(errors.last_name)}
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,
}}
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
type={showPassword ? "text" : "password"}
name="password"
@ -414,7 +414,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref}
hasError={Boolean(errors.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)}
onBlur={() => setIsPasswordInputFocused(false)}
/>
@ -445,10 +445,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
control={control}
name="confirm_password"
rules={{
validate: (value) => value === password || "Password doesn't match",
validate: (value) => value === password || "Passwords don't match",
}}
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
type={showPassword ? "text" : "password"}
name="confirm_password"
@ -457,7 +457,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref}
hasError={Boolean(errors.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 ? (
<EyeOff
@ -548,7 +548,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
disabled={isButtonDisabled}
loading={isSubmitting}
>
{isSubmitting ? "Updating..." : "Continue"}
Continue
</Button>
</form>
</div>

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

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

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

@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
// layout
import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
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";
// local components
import { ProfilePreferenceSettingsSidebar } from "./sidebar";
@ -14,13 +14,13 @@ interface IProfilePreferenceSettingsLayout {
export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
const { children, header } = props;
const { theme: themeStore } = useApplication();
const { toggleSidebar } = useAppTheme();
return (
<ProfileSettingsLayout
header={
<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>
}
>

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

@ -195,7 +195,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
)}
</div>
{!!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>
)}
@ -216,5 +216,3 @@ ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
};
export default ResetPasswordPage;

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

@ -211,7 +211,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
</div>
{!!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>
)}