[WEB-4488] feat: brand revamp (#7544)
* chore: empty state asset and theme improvement (#7542) * chore: empty state asset and theme improvement * chore: upgrade modal improvement and code refactor * feat: onboarding revamp and theme changes (#7541) * refactor: consolidate password strength indicator into shared UI package * chore: remove old password strength meter implementations * chore: update package dependencies for password strength refactor * chore: code refactor * chore: brand logo added * chore: terms and conditions refactor * chore: auth form refactor * chore: oauth enhancements and refactor * chore: plane new logos added * chore: auth input form field added to ui package * chore: password input component added * chore: web auth refactor * chore: update brand colors and remove onboarding-specific styles * chore: clean up unused assets * chore: profile menu text overflow * chore: theme related changes * chore: logo spinner updated * chore: onboarding constant and types updated * chore: theme changes and code refactor * feat: onboarding flow revamp * fix: build error and code refactoring * chore: code refactor * fix: build error * chore: consent option added to onboarding and code refactor * fix: build fix * chore: code refactor * chore: auth screen revamp and code refactor * chore: onboarding enhancements * chore: code refactor * chore: onboarding logic improvement * chore: code refactor * fix: onboarding pre release improvements * chore: color token updated * chore: color token updated * chore: auth screen line height and size improvements * chore: input height updated * chore: n-progress theme updated * chore: theme and logo enhancements * chore: space auth and code refactor * chore: update new brand empty states (#7543) * [WEB-4585]chore: branding updates (#7540) * chore: updated logo, og image, and loaders * chore: updated branding colors * chore: tour modal logo * chore: updated logo spinner size * chore: updated email templates logos and colors * chore: code refactor * fix: removed conditional hook render * fix: space app loader --------- Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
6450793d72
commit
51e146f8ca
345 changed files with 5158 additions and 2515 deletions
|
|
@ -2,4 +2,5 @@ export * from "./input";
|
|||
export * from "./textarea";
|
||||
export * from "./input-color-picker";
|
||||
export * from "./checkbox";
|
||||
export * from "./root";
|
||||
export * from "./password";
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
|
|||
*/
|
||||
export const getFragmentColor = (fragmentIndex: number, activeFragments: number): string => {
|
||||
if (fragmentIndex >= activeFragments) {
|
||||
return "bg-custom-background-90";
|
||||
return "bg-custom-background-80";
|
||||
}
|
||||
|
||||
switch (activeFragments) {
|
||||
|
|
@ -60,6 +60,6 @@ export const getFragmentColor = (fragmentIndex: number, activeFragments: number)
|
|||
case 3:
|
||||
return "bg-green-500";
|
||||
default:
|
||||
return "bg-custom-background-90";
|
||||
return "bg-custom-background-80";
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export * from "./indicator";
|
||||
export * from "./helper";
|
||||
export * from "./password-input";
|
||||
69
packages/ui/src/form-fields/password/password-input.tsx
Normal file
69
packages/ui/src/form-fields/password/password-input.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import { Eye, EyeClosed } from "lucide-react";
|
||||
import React, { useState } from "react";
|
||||
import { cn } from "@plane/utils";
|
||||
import { Tooltip } from "../../tooltip";
|
||||
|
||||
interface PasswordInputProps {
|
||||
id: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
showToggle?: boolean;
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
export const PasswordInput: React.FC<PasswordInputProps> = ({
|
||||
id,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Enter your password",
|
||||
className,
|
||||
showToggle = true,
|
||||
error = false,
|
||||
}) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
return (
|
||||
<div className="relative">
|
||||
<input
|
||||
id={id}
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={cn(
|
||||
"w-full px-3 py-2 pr-10 text-custom-text-200 border rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
|
||||
{
|
||||
"border-custom-border-300": !error,
|
||||
"border-red-500": error,
|
||||
},
|
||||
className
|
||||
)}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
{showToggle && (
|
||||
<Tooltip tooltipContent={showPassword ? "Hide password" : "Show password"} position="top">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center text-custom-text-200 hover:text-custom-text-100 transition-colors duration-200"
|
||||
>
|
||||
<div className="relative w-4 h-4">
|
||||
<Eye
|
||||
className={cn(
|
||||
"absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
|
||||
showPassword ? "opacity-0 scale-75 rotate-12" : "opacity-100 scale-100 rotate-0"
|
||||
)}
|
||||
/>
|
||||
<EyeClosed
|
||||
className={cn(
|
||||
"absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
|
||||
showPassword ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-75 -rotate-12"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
56
packages/ui/src/form-fields/root.tsx
Normal file
56
packages/ui/src/form-fields/root.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import React from "react";
|
||||
import { cn } from "@plane/utils";
|
||||
|
||||
// Reusable Label Component
|
||||
interface LabelProps {
|
||||
htmlFor: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Label: React.FC<LabelProps> = ({ htmlFor, children, className }) => (
|
||||
<label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
|
||||
// Reusable Form Field Component
|
||||
interface FormFieldProps {
|
||||
label: string;
|
||||
htmlFor: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
optional?: boolean;
|
||||
}
|
||||
|
||||
export const FormField: React.FC<FormFieldProps> = ({ label, htmlFor, children, className, optional = false }) => (
|
||||
<div className={cn("flex flex-col gap-1.5", className)}>
|
||||
<Label htmlFor={htmlFor}>
|
||||
{label}
|
||||
{optional && <span className="text-custom-text-400 text-sm"> (optional)</span>}
|
||||
</Label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Reusable Validation Message Component
|
||||
interface ValidationMessageProps {
|
||||
type: "error" | "success";
|
||||
message: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ValidationMessage: React.FC<ValidationMessageProps> = ({ type, message, className }) => (
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm",
|
||||
{
|
||||
"text-red-500": type === "error",
|
||||
"text-green-500": type === "success",
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
{message}
|
||||
</p>
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue