Skip to content

Commit

Permalink
Dark mode filters/rules/transactions (actualbudget#1436)
Browse files Browse the repository at this point in the history
  • Loading branch information
carkom authored Aug 7, 2023
1 parent e4c27d7 commit 27a31c7
Show file tree
Hide file tree
Showing 20 changed files with 472 additions and 353 deletions.
75 changes: 43 additions & 32 deletions packages/desktop-client/src/components/ManageRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import useSelected, {
SelectedProvider,
} from '../hooks/useSelected';
import ArrowRight from '../icons/v0/RightArrow2';
import { colors } from '../style';
import { theme } from '../style';

import Button from './common/Button';
import ExternalLink from './common/ExternalLink';
Expand All @@ -40,6 +40,9 @@ import Text from './common/Text';
import View from './common/View';
import { SelectCell, Row, Field, Cell, CellButton, TableHeader } from './table';

let valueStyle = {
color: theme.pageTextPositive,
};
let SchedulesQuery = liveQueryContext(q('schedules').select('*'));

export function Value({
Expand Down Expand Up @@ -133,11 +136,11 @@ export function Value({

if (Array.isArray(value)) {
if (value.length === 0) {
return <Text style={{ color: colors.p4 }}>(empty)</Text>;
return <Text style={valueStyle}>(empty)</Text>;
} else if (value.length === 1) {
return (
<Text>
[<Text style={{ color: colors.p4 }}>{formatValue(value[0])}</Text>]
[<Text style={valueStyle}>{formatValue(value[0])}</Text>]
</Text>
);
}
Expand All @@ -148,10 +151,10 @@ export function Value({
}
let numHidden = value.length - displayed.length;
return (
<Text style={{ color: colors.n3 }}>
<Text style={{ color: theme.tableText }}>
[
{displayed.map((v, i) => {
let text = <Text style={{ color: colors.p4 }}>{formatValue(v)}</Text>;
let text = <Text style={valueStyle}>{formatValue(v)}</Text>;
let spacing;
if (inline) {
spacing = i !== 0 ? ' ' : '';
Expand All @@ -174,9 +177,9 @@ export function Value({
);
})}
{numHidden > 0 && (
<Text style={{ color: colors.p4 }}>
<Text style={valueStyle}>
&nbsp;&nbsp;
<LinkButton onClick={onExpand} style={{ color: colors.p4 }}>
<LinkButton onClick={onExpand} style={valueStyle}>
{numHidden} more items...
</LinkButton>
{!inline && <br />}
Expand All @@ -189,12 +192,12 @@ export function Value({
// An "in between" type
return (
<Text>
<Text style={{ color: colors.p4 }}>{formatValue(value.num1)}</Text> and{' '}
<Text style={{ color: colors.p4 }}>{formatValue(value.num2)}</Text>
<Text style={valueStyle}>{formatValue(value.num1)}</Text> and{' '}
<Text style={valueStyle}>{formatValue(value.num2)}</Text>
</Text>
);
} else {
return <Text style={{ color: colors.p4 }}>{formatValue(value)}</Text>;
return <Text style={valueStyle}>{formatValue(value)}</Text>;
}
}

Expand All @@ -213,7 +216,8 @@ function ConditionExpression({
{
display: 'block',
maxWidth: '100%',
backgroundColor: colors.n10,
color: theme.altPillText,
backgroundColor: theme.altPillBackground,
borderRadius: 4,
padding: '3px 5px',
whiteSpace: 'nowrap',
Expand All @@ -223,9 +227,9 @@ function ConditionExpression({
style,
]}
>
{prefix && <Text style={{ color: colors.n3 }}>{prefix} </Text>}
<Text style={{ color: colors.p4 }}>{mapField(field, options)}</Text>{' '}
<Text style={{ color: colors.n3 }}>{friendlyOp(op)}</Text>{' '}
{prefix && <Text>{prefix} </Text>}
<Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
<Text>{friendlyOp(op)}</Text>{' '}
<Value value={value} field={field} inline={inline} />
</View>
);
Expand Down Expand Up @@ -261,7 +265,8 @@ function ActionExpression({ field, op, value, options, style }) {
{
display: 'block',
maxWidth: '100%',
backgroundColor: colors.n10,
color: theme.altPillText,
backgroundColor: theme.altPillBackground,
borderRadius: 4,
padding: '3px 5px',
whiteSpace: 'nowrap',
Expand All @@ -273,15 +278,14 @@ function ActionExpression({ field, op, value, options, style }) {
>
{op === 'set' ? (
<>
<Text style={{ color: colors.n3 }}>{friendlyOp(op)}</Text>{' '}
<Text style={{ color: colors.p4 }}>{mapField(field, options)}</Text>{' '}
<Text style={{ color: colors.n3 }}>to </Text>
<Text>{friendlyOp(op)}</Text>{' '}
<Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
<Text>to </Text>
<Value value={value} field={field} />
</>
) : op === 'link-schedule' ? (
<>
<Text style={{ color: colors.n3 }}>{friendlyOp(op)}</Text>{' '}
<ScheduleValue value={value} />
<Text>{friendlyOp(op)}</Text> <ScheduleValue value={value} />
</>
) : null}
</View>
Expand All @@ -290,17 +294,22 @@ function ActionExpression({ field, op, value, options, style }) {

let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
let dispatchSelected = useSelectedDispatch();
let borderColor = selected ? colors.b8 : colors.border;
let borderColor = selected ? theme.tableBorderSelected : 'none';
let backgroundFocus = hovered;

return (
<Row
height="auto"
borderColor={borderColor}
backgroundColor={
selected ? colors.selected : backgroundFocus ? colors.hover : 'white'
}
style={{ fontSize: 13, zIndex: selected ? 101 : 'auto' }}
style={{
fontSize: 13,
zIndex: selected ? 101 : 'auto',
borderColor,
backgroundColor: selected
? theme.tableRowBackgroundHighlight
: backgroundFocus
? theme.tableRowBackgroundHover
: theme.tableBackground,
}}
collapsed="true"
onMouseEnter={() => onHover && onHover(rule.id)}
onMouseLeave={() => onHover && onHover(null)}
Expand All @@ -314,14 +323,14 @@ let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
selected={selected}
/>

<Cell name="stage" width={50} plain style={{ color: colors.n5 }}>
<Cell name="stage" width={50} plain style={{ color: theme.tableText }}>
{rule.stage && (
<View
style={{
alignSelf: 'flex-start',
margin: 5,
backgroundColor: colors.b10,
color: colors.b1,
backgroundColor: theme.pillBackgroundSelected,
color: theme.pillTextSelected,
borderRadius: 4,
padding: '3px 5px',
}}
Expand Down Expand Up @@ -352,7 +361,9 @@ let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
</View>

<Text>
<ArrowRight color={colors.n4} style={{ width: 12, height: 12 }} />
<ArrowRight
style={{ width: 12, height: 12, color: theme.tableText }}
/>
</Text>

<View
Expand Down Expand Up @@ -705,7 +716,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
>
<View
style={{
color: colors.n4,
color: theme.pageTextLight,
flexDirection: 'row',
alignItems: 'center',
width: '50%',
Expand Down Expand Up @@ -750,7 +761,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
style={{
paddingBlock: 15,
paddingInline: isModal ? 13 : 0,
borderTop: isModal && '1px solid ' + colors.border,
borderTop: isModal && '1px solid ' + theme.pillBorder,
flexShrink: 0,
}}
>
Expand Down
5 changes: 3 additions & 2 deletions packages/desktop-client/src/components/common/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ import { type HTMLPropsWithStyle } from '../../types/utils';

export const defaultInputStyle = {
outline: 0,
backgroundColor: 'white',
backgroundColor: theme.tableBackground,
color: theme.formInputText,
margin: 0,
padding: 5,
borderRadius: 4,
border: '1px solid #d0d0d0',
border: '1px solid ' + theme.formInputBorder,
};

type InputProps = HTMLPropsWithStyle<HTMLInputElement> & {
Expand Down
20 changes: 14 additions & 6 deletions packages/desktop-client/src/components/common/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
useState,
} from 'react';

import { colors } from '../../style';
import { theme } from '../../style';

import Text from './Text';
import View from './View';
Expand All @@ -16,7 +16,11 @@ type KeybindingProps = {
};

function Keybinding({ keyName }: KeybindingProps) {
return <Text style={{ fontSize: 10, color: colors.n6 }}>{keyName}</Text>;
return (
<Text style={{ fontSize: 10, color: theme.menuKeybindingText }}>
{keyName}
</Text>
);
}

type MenuItem = {
Expand Down Expand Up @@ -106,15 +110,15 @@ export default function Menu({
if (item === Menu.line) {
return (
<View key={idx} style={{ margin: '3px 0px' }}>
<View style={{ borderTop: '1px solid ' + colors.n10 }} />
<View style={{ borderTop: '1px solid ' + theme.menuBorder }} />
</View>
);
} else if (item.type === Menu.label) {
return (
<Text
key={item.name}
style={{
color: colors.n6,
color: theme.altMenuItemTextHeader,
fontSize: 11,
lineHeight: '1em',
textTransform: 'uppercase',
Expand Down Expand Up @@ -145,10 +149,14 @@ export default function Menu({
: -3,
flexDirection: 'row',
alignItems: 'center',
color: theme.menuItemText,
},
item.disabled && { color: colors.n7 },
item.disabled && { color: theme.buttonBareDisabledText },
!item.disabled &&
hoveredIndex === idx && { backgroundColor: colors.n10 },
hoveredIndex === idx && {
backgroundColor: theme.menuItemBackgroundHover,
color: theme.menuItemTextHover,
},
]}
onMouseEnter={() => setHoveredIndex(idx)}
onMouseLeave={() => setHoveredIndex(null)}
Expand Down
13 changes: 7 additions & 6 deletions packages/desktop-client/src/components/common/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import hotkeys from 'hotkeys-js';

import AnimatedLoading from '../../icons/AnimatedLoading';
import Delete from '../../icons/v0/Delete';
import { styles, colors } from '../../style';
import { styles, theme } from '../../style';
import tokens from '../../tokens';

import Button from './Button';
Expand Down Expand Up @@ -124,7 +124,9 @@ const Modal = ({
minWidth: '100%',
minHeight: 0,
borderRadius: 4,
backgroundColor: 'white',
//border: '1px solid ' + theme.modalBorder,
color: theme.pageText,
backgroundColor: theme.modalBackground,
opacity: isHidden ? 0 : 1,
[`@media (min-width: ${tokens.breakpoint_small})`]: {
minWidth: tokens.breakpoint_small,
Expand All @@ -146,7 +148,6 @@ const Modal = ({
{showTitle && (
<View
style={{
color: colors.n2,
flex: 1,
alignSelf: 'center',
textAlign: 'center',
Expand Down Expand Up @@ -193,7 +194,7 @@ const Modal = ({
style={{ padding: '10px 10px' }}
aria-label="Close"
>
<Delete width={10} />
<Delete width={10} style={{ color: 'inherit' }} />
</Button>
)}
</View>
Expand All @@ -211,15 +212,15 @@ const Modal = ({
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, .6)',
backgroundColor: theme.pageBackground,
alignItems: 'center',
justifyContent: 'center',
zIndex: 1000,
}}
>
<AnimatedLoading
style={{ width: 20, height: 20 }}
color={colors.n1}
color={theme.pageText}
/>
</View>
)}
Expand Down
Loading

0 comments on commit 27a31c7

Please sign in to comment.