thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: custom theme input placeholder improvement (#4472)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-16 04:39:26 +05:30 committed by GitHub
parent 68faced79d
commit 3bfe0950eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/components/core/theme/custom-theme-selector.tsx
View File

@ -9,7 +9,6 @@ import { Button, InputColorPicker, setPromiseToast } from "@plane/ui";
import { useUserProfile } from "@/hooks/store"; import { useUserProfile } from "@/hooks/store";
const inputRules = { const inputRules = {
required: "Background color is required",
minLength: { minLength: {
value: 7, value: 7,
message: "Enter a valid hex code of 6 characters", message: "Enter a valid hex code of 6 characters",
@ -96,14 +95,14 @@ export const CustomThemeSelector: React.FC = observer(() => {
<Controller <Controller
control={control} control={control}
name="background" name="background"
rules={inputRules} rules={{ ...inputRules, required: "Background color is required" }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<InputColorPicker <InputColorPicker
name="background" name="background"
value={value} value={value}
onChange={(val) => handleValueChange(val, onChange)} onChange={(val) => handleValueChange(val, onChange)}
placeholder="#0d101b" placeholder="#0d101b"
className="w-full" className="w-full placeholder:text-custom-text-400/60"
style={{ style={{
backgroundColor: watch("background"), backgroundColor: watch("background"),
color: watch("text"), color: watch("text"),
@ -122,14 +121,14 @@ export const CustomThemeSelector: React.FC = observer(() => {
<Controller <Controller
control={control} control={control}
name="text" name="text"
rules={inputRules} rules={{ ...inputRules, required: "Text color is required" }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<InputColorPicker <InputColorPicker
name="text" name="text"
value={value} value={value}
onChange={(val) => handleValueChange(val, onChange)} onChange={(val) => handleValueChange(val, onChange)}
placeholder="#c5c5c5" placeholder="#c5c5c5"
className="w-full" className="w-full placeholder:text-custom-text-400/60"
style={{ style={{
backgroundColor: watch("text"), backgroundColor: watch("text"),
color: watch("background"), color: watch("background"),
@ -148,14 +147,14 @@ export const CustomThemeSelector: React.FC = observer(() => {
<Controller <Controller
control={control} control={control}
name="primary" name="primary"
rules={inputRules} rules={{ ...inputRules, required: "Primary color is required" }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<InputColorPicker <InputColorPicker
name="primary" name="primary"
value={value} value={value}
onChange={(val) => handleValueChange(val, onChange)} onChange={(val) => handleValueChange(val, onChange)}
placeholder="#3f76ff" placeholder="#3f76ff"
className="w-full" className="w-full placeholder:text-custom-text-400/60"
style={{ style={{
backgroundColor: watch("primary"), backgroundColor: watch("primary"),
color: watch("text"), color: watch("text"),
@ -174,14 +173,14 @@ export const CustomThemeSelector: React.FC = observer(() => {
<Controller <Controller
control={control} control={control}
name="sidebarBackground" name="sidebarBackground"
rules={inputRules} rules={{ ...inputRules, required: "Sidebar background color is required" }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<InputColorPicker <InputColorPicker
name="sidebarBackground" name="sidebarBackground"
value={value} value={value}
onChange={(val) => handleValueChange(val, onChange)} onChange={(val) => handleValueChange(val, onChange)}
placeholder="#0d101b" placeholder="#0d101b"
className="w-full" className="w-full placeholder:text-custom-text-400/60"
style={{ style={{
backgroundColor: watch("sidebarBackground"), backgroundColor: watch("sidebarBackground"),
color: watch("sidebarText"), color: watch("sidebarText"),
@ -202,14 +201,14 @@ export const CustomThemeSelector: React.FC = observer(() => {
<Controller <Controller
control={control} control={control}
name="sidebarText" name="sidebarText"
rules={inputRules} rules={{ ...inputRules, required: "Sidebar text color is required" }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<InputColorPicker <InputColorPicker
name="sidebarText" name="sidebarText"
value={value} value={value}
onChange={(val) => handleValueChange(val, onChange)} onChange={(val) => handleValueChange(val, onChange)}
placeholder="#c5c5c5" placeholder="#c5c5c5"
className="w-full" className="w-full placeholder:text-custom-text-400/60"
style={{ style={{
backgroundColor: watch("sidebarText"), backgroundColor: watch("sidebarText"),
color: watch("sidebarBackground"), color: watch("sidebarBackground"),