Do not crash if color is not defined

thaapasa · Mar 3, 2024 · 16d21f4 · 16d21f4
1 parent 79cb7e5
commit 16d21f4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/client/ui/Colors.ts b/src/client/ui/Colors.ts
@@ -1,5 +1,5 @@
 import { amber, grey, lime, teal } from '@mui/material/colors';
-import { SimplePaletteColorOptions, styled } from '@mui/material/styles';
+import { getLuminance, SimplePaletteColorOptions, styled } from '@mui/material/styles';
 
 import { Money, MoneyLike } from 'shared/util';
 
@@ -119,3 +119,11 @@ export function classNameForMoney(m?: MoneyLike): 'positive' | 'negative' | 'uni
 export const unused = styled('div')`
   width: 100%;
 `;
+
+export function getLuminanceSafe(color: string): number {
+  try {
+    return getLuminance(color);
+  } catch (e) {
+    return 0;
+  }
+}
diff --git a/src/client/ui/grouping/GroupedExpenseIcon.tsx b/src/client/ui/grouping/GroupedExpenseIcon.tsx
@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
-import { colors, getLuminance } from '@mui/material';
+import { colors } from '@mui/material';
 import * as React from 'react';
 
 import { ExpenseGroupingRef } from 'shared/types';
 
+import { getLuminanceSafe } from '../Colors';
 import { Bookmark } from '../icons/Bookmark';
 
 type GroupedExpenseIconProps = {
@@ -20,7 +21,7 @@ export const GroupedExpenseIcon: React.FC<GroupedExpenseIconProps> = ({
   className,
 }) => {
   const color = grouping.color ?? colors.blue[300];
-  const luminance = getLuminance(color);
+  const luminance = getLuminanceSafe(color);
 
   return (
     <IconContainer title={grouping.title} onClick={onClick} className={className}>