Refactor: update placeholder text for filter name and replace label colors with project colors in ProjectModal

This commit is contained in:
Mo Tarbin
2026-02-02 19:32:25 -05:00
parent 27210317fd
commit c3431b0921
3 changed files with 9 additions and 19 deletions

View File

@@ -489,7 +489,7 @@ const AdvancedFilterBuilder = ({
Filter Name Filter Name
</Typography> </Typography>
<Input <Input
placeholder='e.g., High Priority Tasks for Team' placeholder='e.g. Important Tasks due soon, Tasks for John, etc.'
value={filterName} value={filterName}
onChange={e => { onChange={e => {
setFilterName(e.target.value) setFilterName(e.target.value)

View File

@@ -13,7 +13,7 @@ import {
} from '@mui/joy' } from '@mui/joy'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal' import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import LABEL_COLORS, { import PROJECT_COLORS, {
getTextColorFromBackgroundColor, getTextColorFromBackgroundColor,
} from '../../../utils/Colors' } from '../../../utils/Colors'
import PROJECT_ICONS, { getIconComponent } from '../../../utils/ProjectIcons' import PROJECT_ICONS, { getIconComponent } from '../../../utils/ProjectIcons'
@@ -27,7 +27,7 @@ const ProjectModal = ({ isOpen, onClose, onSave, project }) => {
const { ResponsiveModal } = useResponsiveModal() const { ResponsiveModal } = useResponsiveModal()
const [projectName, setProjectName] = useState('') const [projectName, setProjectName] = useState('')
const [projectDescription, setProjectDescription] = useState('') const [projectDescription, setProjectDescription] = useState('')
const [projectColor, setProjectColor] = useState(LABEL_COLORS[0].value) const [projectColor, setProjectColor] = useState(PROJECT_COLORS[0].value)
const [projectIcon, setProjectIcon] = useState(PROJECT_ICONS[0].value) const [projectIcon, setProjectIcon] = useState(PROJECT_ICONS[0].value)
const [error, setError] = useState('') const [error, setError] = useState('')
const [isIconPickerOpen, setIsIconPickerOpen] = useState(false) const [isIconPickerOpen, setIsIconPickerOpen] = useState(false)
@@ -42,13 +42,13 @@ const ProjectModal = ({ isOpen, onClose, onSave, project }) => {
// Editing existing project // Editing existing project
setProjectName(project.name || '') setProjectName(project.name || '')
setProjectDescription(project.description || '') setProjectDescription(project.description || '')
setProjectColor(project.color || LABEL_COLORS[0].value) setProjectColor(project.color || PROJECT_COLORS[0].value)
setProjectIcon(project.icon || PROJECT_ICONS[0].value) setProjectIcon(project.icon || PROJECT_ICONS[0].value)
} else { } else {
// Creating new project // Creating new project
setProjectName('') setProjectName('')
setProjectDescription('') setProjectDescription('')
setProjectColor(LABEL_COLORS[0].value) setProjectColor(PROJECT_COLORS[0].value)
setProjectIcon(PROJECT_ICONS[0].value) setProjectIcon(PROJECT_ICONS[0].value)
} }
setError('') setError('')
@@ -240,7 +240,7 @@ const ProjectModal = ({ isOpen, onClose, onSave, project }) => {
</Typography> </Typography>
)} )}
> >
{LABEL_COLORS.map(color => ( {PROJECT_COLORS.map(color => (
<Option key={color.value} value={color.value}> <Option key={color.value} value={color.value}>
<Box className='flex items-center justify-between'> <Box className='flex items-center justify-between'>
<Box <Box

View File

@@ -1,13 +1,5 @@
import { Add, EditNotifications } from '@mui/icons-material' import { Add, EditNotifications } from '@mui/icons-material'
import { import { Box, Button, Input, Option, Select, Typography } from '@mui/joy'
Avatar,
Box,
Button,
Input,
Option,
Select,
Typography,
} from '@mui/joy'
import { FormControl } from '@mui/material' import { FormControl } from '@mui/material'
import * as chrono from 'chrono-node' import * as chrono from 'chrono-node'
import moment from 'moment' import moment from 'moment'
@@ -15,9 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
import { useResponsiveModal } from '../../hooks/useResponsiveModal' import { useResponsiveModal } from '../../hooks/useResponsiveModal'
import { useCreateChore } from '../../queries/ChoreQueries' import { useCreateChore } from '../../queries/ChoreQueries'
import { useCircleMembers, useUserProfile } from '../../queries/UserQueries' import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
import { isPlusAccount } from '../../utils/Helpers' import { isPlusAccount } from '../../utils/Helpers'
import { getIconComponent } from '../../utils/ProjectIcons'
import { useLabels } from '../Labels/LabelQueries' import { useLabels } from '../Labels/LabelQueries'
import { useProjects } from '../Projects/ProjectQueries' import { useProjects } from '../Projects/ProjectQueries'
import { import {
@@ -870,7 +860,7 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
</FormControl> </FormControl>
)} )}
</Box> </Box>
{projects.length >= 1 && ( {/* {projects.length >= 1 && (
<FormControl> <FormControl>
<Typography level='body-sm'>Project</Typography> <Typography level='body-sm'>Project</Typography>
<Select <Select
@@ -938,7 +928,7 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
))} ))}
</Select> </Select>
</FormControl> </FormControl>
)} )} */}
<Box <Box
sx={{ sx={{
marginTop: 2, marginTop: 2,