rafaelcaricio/actual
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

a11y: update cleared state display for clarity

Browse source 
Create new CircleEmpty svg and set uncleared state to use new icon.

Add 'cursor: pointer' to the cleared field to aid in action awareness.
This commit is contained in:
Rick Cuddy 2022-10-11 22:19:01 +11:00
parent d98b8c1d73
commit 603179dda1
3 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/desktop-client/src/components/accounts/TransactionsTable.js
View file

@ -336,7 +336,7 @@ function StatusCell({
? colors.y5
: selected
? colors.b7
: colors.n6
: colors.n7
};
function onSelect() {
@ -362,7 +362,8 @@ function StatusCell({
':focus': {
border: '1px solid ' + props.color,
boxShadow: `0 1px 2px ${props.color}`
}
},
cursor: isClearedField ? 'pointer' : 'default'
},
isChild && { visibility: 'hidden' }

8
packages/desktop-client/src/components/schedules/StatusBadge.js
View file

@ -6,6 +6,7 @@ import { colors } from 'loot-design/src/style';
import AlertTriangle from 'loot-design/src/svg/v2/AlertTriangle';
import CalendarIcon from 'loot-design/src/svg/v2/Calendar';
import CheckCircle1 from 'loot-design/src/svg/v2/CheckCircle1';
import CheckCircleHollow from 'loot-design/src/svg/v2/CheckCircleHollow';
import EditSkull1 from 'loot-design/src/svg/v2/EditSkull1';
import FavoriteStar from 'loot-design/src/svg/v2/FavoriteStar';
import ValidationCheck from 'loot-design/src/svg/v2/ValidationCheck';
@ -49,10 +50,15 @@ export function getStatusProps(status) {
backgroundColor = colors.n11;
Icon = CalendarIcon;
break;
case 'cleared':
color = colors.g5;
backgroundColor = colors.n11;
Icon = CheckCircle1;
break;
default:
color = colors.n1;
backgroundColor = colors.n11;
Icon = CheckCircle1;
Icon = CheckCircleHollow;
break;
}

19
packages/loot-design/src/svg/v2/CheckCircleHollow.js Normal file
View file

@ -0,0 +1,19 @@
import React from 'react';
const SvgCheckCircleHollow = props => (
<svg
{...props}
viewBox="0 0 24 24"
style={{
color: '#242134',
...props.style
}}
>
<path
d="M 12 0 C 1.3084197 0 -4.0435475 12.925204 3.515625 20.484375 C 11.074797 28.043547 24 22.69158 24 12 C 23.992285 5.3757944 18.624205 0.0077147446 12 0 z M 12.009766 1.9882812 C 17.531104 1.9947115 22.005288 6.4688953 22.011719 11.990234 C 22.011719 20.90177 11.238144 25.363144 4.9375 19.0625 C -1.3631434 12.761856 3.0982293 1.9882812 12.009766 1.9882812 z M 18.244141 6.5761719 A 1 1 0 0 0 17.316406 7.0175781 L 11.089844 15.46875 L 7.0136719 12.207031 A 1.0004882 1.0004882 0 1 0 5.7636719 13.769531 L 10.652344 17.677734 A 1.011 1.011 0 0 0 12.082031 17.488281 L 18.927734 8.1992188 A 1 1 0 0 0 18.244141 6.5761719 z "
fill="currentColor"
/>
</svg>
);
export default SvgCheckCircleHollow;