jonas/donetick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: update color and background properties in multiple views for consistency

Browse Source
This commit is contained in:
Mo Tarbin
2026-02-08 16:33:32 -05:00
parent b31bcc2a9c
commit 0beb876cb4
7 changed files with 127 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/Chores/ChoreListView.jsx
View File

@@ -89,7 +89,7 @@ const ChoreListView = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -108,7 +108,8 @@ const ChoreListView = ({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'var(--joy-palette-neutral-100)', bgcolor: 'neutral.softBg',
color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
opacity: 0.5, opacity: 0.5,
@@ -138,7 +139,7 @@ const ChoreListView = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'success.softBg', bgcolor: 'success.softBg',
color: 'success.600', color: 'success.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -165,7 +166,7 @@ const ChoreListView = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'warning.softBg', bgcolor: 'warning.softBg',
color: 'warning.600', color: 'warning.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -184,7 +185,8 @@ const ChoreListView = ({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'var(--joy-palette-neutral-100)', bgcolor: 'neutral.softBg',
color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -205,7 +207,7 @@ const ChoreListView = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'warning.softBg', bgcolor: 'warning.softBg',
color: 'warning.600', color: 'warning.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -226,7 +228,7 @@ const ChoreListView = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}

7
src/views/Filters/FilterView.jsx
View File

@@ -438,7 +438,7 @@ const FilterView = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'warning.softBg', bgcolor: 'warning.softBg',
color: 'warning.600', color: 'warning.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -460,7 +460,8 @@ const FilterView = () => {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'var(--joy-palette-neutral-100)', bgcolor: 'neutral.softBg',
color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -481,7 +482,7 @@ const FilterView = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}

37
src/views/History/ChoreHistory.jsx
View File

@@ -1,12 +1,12 @@
import { import {
Analytics, Analytics,
Checklist, Checklist,
EventBusy, EventBusy,
Group, Group,
History, History,
Star, Star,
Timelapse, Timelapse,
TrendingUp, TrendingUp,
} from '@mui/icons-material' } from '@mui/icons-material'
import DeleteIcon from '@mui/icons-material/Delete' import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit' import EditIcon from '@mui/icons-material/Edit'
@@ -15,18 +15,18 @@ import moment from 'moment'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom' import { Link, useParams } from 'react-router-dom'
import { import {
Type as ListType, Type as ListType,
SwipeableList, SwipeableList,
SwipeableListItem, SwipeableListItem,
SwipeAction, SwipeAction,
TrailingActions, TrailingActions,
} from 'react-swipeable-list' } from 'react-swipeable-list'
import 'react-swipeable-list/dist/styles.css' import 'react-swipeable-list/dist/styles.css'
import useConfirmationModal from '../../hooks/useConfirmationModal' import useConfirmationModal from '../../hooks/useConfirmationModal'
import { import {
useChoreHistory, useChoreHistory,
useDeleteChoreHistory, useDeleteChoreHistory,
useUpdateChoreHistory, useUpdateChoreHistory,
} from '../../queries/ChoreQueries' } from '../../queries/ChoreQueries'
import { useCircleMembers } from '../../queries/UserQueries' import { useCircleMembers } from '../../queries/UserQueries'
import { ChoreHistoryStatus } from '../../utils/Chores' import { ChoreHistoryStatus } from '../../utils/Chores'
@@ -314,7 +314,8 @@ const ChoreHistory = () => {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'var(--joy-palette-neutral-100)', bgcolor: 'neutral.softBg',
color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
width: '100%', width: '100%',
@@ -334,7 +335,7 @@ const ChoreHistory = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}

31
src/views/Labels/LabelView.jsx
View File

@@ -1,14 +1,14 @@
import DeleteIcon from '@mui/icons-material/Delete' import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit' import EditIcon from '@mui/icons-material/Edit'
import { import {
Avatar, Avatar,
Box, Box,
Chip, Chip,
CircularProgress, CircularProgress,
Container, Container,
IconButton, IconButton,
Stack, Stack,
Typography, Typography,
} from '@mui/joy' } from '@mui/joy'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import LabelModal from '../Modals/Inputs/LabelModal' import LabelModal from '../Modals/Inputs/LabelModal'
@@ -16,11 +16,11 @@ import LabelModal from '../Modals/Inputs/LabelModal'
import { Add } from '@mui/icons-material' import { Add } from '@mui/icons-material'
import { useQueryClient } from '@tanstack/react-query' import { useQueryClient } from '@tanstack/react-query'
import { import {
Type as ListType, Type as ListType,
SwipeableList, SwipeableList,
SwipeableListItem, SwipeableListItem,
SwipeAction, SwipeAction,
TrailingActions, TrailingActions,
} from 'react-swipeable-list' } from 'react-swipeable-list'
import 'react-swipeable-list/dist/styles.css' import 'react-swipeable-list/dist/styles.css'
import { useUserProfile } from '../../queries/UserQueries' import { useUserProfile } from '../../queries/UserQueries'
@@ -276,7 +276,8 @@ const LabelView = () => {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'var(--joy-palette-neutral-100)', bgcolor: 'neutral.softBg',
color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -295,7 +296,7 @@ const LabelView = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}

31
src/views/Projects/ProjectView.jsx
View File

@@ -1,14 +1,14 @@
import DeleteIcon from '@mui/icons-material/Delete' import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit' import EditIcon from '@mui/icons-material/Edit'
import { import {
Avatar, Avatar,
Box, Box,
Chip, Chip,
CircularProgress, CircularProgress,
Container, Container,
IconButton, IconButton,
Stack, Stack,
Typography, Typography,
} from '@mui/joy' } from '@mui/joy'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
@@ -17,11 +17,11 @@ import ProjectModal from '../Modals/Inputs/ProjectModal'
import { Add, Task } from '@mui/icons-material' import { Add, Task } from '@mui/icons-material'
import { useQueryClient } from '@tanstack/react-query' import { useQueryClient } from '@tanstack/react-query'
import { import {
Type as ListType, Type as ListType,
SwipeableList, SwipeableList,
SwipeableListItem, SwipeableListItem,
SwipeAction, SwipeAction,
TrailingActions, TrailingActions,
} from 'react-swipeable-list' } from 'react-swipeable-list'
import 'react-swipeable-list/dist/styles.css' import 'react-swipeable-list/dist/styles.css'
import { useChores } from '../../queries/ChoreQueries' import { useChores } from '../../queries/ChoreQueries'
@@ -389,7 +389,8 @@ const ProjectView = () => {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'var(--joy-palette-neutral-100)', bgcolor: 'neutral.softBg',
color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -410,7 +411,7 @@ const ProjectView = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}

57
src/views/Things/ThingsView.jsx
View File

@@ -1,39 +1,39 @@
import { import {
Add, Add,
Delete, Delete,
Edit, Edit,
Flip, Flip,
PlusOne, PlusOne,
ToggleOff, ToggleOff,
ToggleOn, ToggleOn,
Widgets, Widgets,
} from '@mui/icons-material' } from '@mui/icons-material'
import { import {
Avatar, Avatar,
Box, Box,
Chip, Chip,
Container, Container,
IconButton, IconButton,
Stack, Stack,
Typography, Typography,
} from '@mui/joy' } from '@mui/joy'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { import {
Type as ListType, Type as ListType,
SwipeableList, SwipeableList,
SwipeableListItem, SwipeableListItem,
SwipeAction, SwipeAction,
TrailingActions, TrailingActions,
} from 'react-swipeable-list' } from 'react-swipeable-list'
import 'react-swipeable-list/dist/styles.css' import 'react-swipeable-list/dist/styles.css'
import { useNotification } from '../../service/NotificationProvider' import { useNotification } from '../../service/NotificationProvider'
import { import {
CreateThing, CreateThing,
DeleteThing, DeleteThing,
GetThings, GetThings,
SaveThing, SaveThing,
UpdateThingState, UpdateThingState,
} from '../../utils/Fetcher' } from '../../utils/Fetcher'
import { getSafeBottomStyles } from '../../utils/SafeAreaUtils' import { getSafeBottomStyles } from '../../utils/SafeAreaUtils'
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
@@ -413,7 +413,7 @@ const ThingsView = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'success.softBg', bgcolor: 'success.softBg',
color: 'success.600', color: 'success.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -439,7 +439,8 @@ const ThingsView = () => {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'var(--joy-palette-neutral-100)', bgcolor: 'neutral.softBg',
color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -458,7 +459,7 @@ const ThingsView = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}

68
src/views/Timer/TimerDetails.jsx
View File

@@ -1,47 +1,47 @@
import { import {
AccessTime, AccessTime,
Add, Add,
BrowseGallery, BrowseGallery,
Delete, Delete,
Edit, Edit,
PauseCircle, PauseCircle,
Person, Person,
PlayArrow, PlayArrow,
} from '@mui/icons-material' } from '@mui/icons-material'
import DeleteIcon from '@mui/icons-material/Delete' import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit' import EditIcon from '@mui/icons-material/Edit'
import { import {
Alert, Alert,
Avatar, Avatar,
Box, Box,
Button, Button,
Card, Card,
CardContent, CardContent,
Chip, Chip,
Container, Container,
FormControl, FormControl,
FormHelperText, FormHelperText,
Grid, Grid,
IconButton, IconButton,
Input, Input,
Typography, Typography,
} from '@mui/joy' } from '@mui/joy'
import moment from 'moment' import moment from 'moment'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import { import {
Type as ListType, Type as ListType,
SwipeableList, SwipeableList,
SwipeableListItem, SwipeableListItem,
SwipeAction, SwipeAction,
TrailingActions, TrailingActions,
} from 'react-swipeable-list' } from 'react-swipeable-list'
import 'react-swipeable-list/dist/styles.css' import 'react-swipeable-list/dist/styles.css'
import { import {
useChoreTimer, useChoreTimer,
usePauseChore, usePauseChore,
useStartChore, useStartChore,
useUpdateTimeSession, useUpdateTimeSession,
} from '../../queries/TimeQueries' } from '../../queries/TimeQueries'
import { useCircleMembers } from '../../queries/UserQueries' import { useCircleMembers } from '../../queries/UserQueries'
import { useNotification } from '../../service/NotificationProvider' import { useNotification } from '../../service/NotificationProvider'
@@ -959,8 +959,8 @@ const TimerDetails = () => {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: bgcolor: 'neutral.softBg',
'var(--joy-palette-neutral-100)', color: 'neutral.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}
@@ -986,7 +986,7 @@ const TimerDetails = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
bgcolor: 'danger.softBg', bgcolor: 'danger.softBg',
color: 'danger.600', color: 'danger.700',
px: 3, px: 3,
height: '100%', height: '100%',
}} }}