fix(dark-mode): Improvements to dark mode

ExpediaGroup · Apr 7, 2022 · 1055551 · 1055551
1 parent 74a2a74
commit 1055551
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/packages/frontend/src/components/icon-button-menu/icon-button-menu.tsx b/packages/frontend/src/components/icon-button-menu/icon-button-menu.tsx
@@ -58,7 +58,7 @@ const TooltipIcon = forwardRef(
 export const IconButtonMenu = ({
   'aria-label': ariaLabel,
   bg,
-  color = 'black',
+  color,
   children,
   icon,
   fontSize,

diff --git a/packages/frontend/src/components/like-button/like-button.tsx b/packages/frontend/src/components/like-button/like-button.tsx
@@ -46,7 +46,7 @@ export const LikeButton = ({ disabled, label, likeCount, liked, onLike, size }:
       icon={liked ? iconFactoryAs('heartFilled') : iconFactoryAs('heart')}
       number={likeCount}
       onClick={onClick}
-      color={liked ? 'aurora.100' : 'polar.600'}
+      color={liked ? 'aurora.100' : 'unset'}
       isLoading={saving}
       isDisabled={disabled || !loggedIn}
       size={size}

diff --git a/packages/frontend/src/pages/help-page/components/help-sidebar/help-sidebar.tsx b/packages/frontend/src/pages/help-page/components/help-sidebar/help-sidebar.tsx
@@ -95,7 +95,7 @@ const SidebarContent = ({ links }) => {
 
 export const HelpSidebar = ({ links, headerTitle, ...props }: Props & BoxProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const backgroundColor = useColorModeValue('nord.100', '#555');
+  const backgroundColor = useColorModeValue('nord.100', 'polar.100');
 
   return (
     <>

diff --git a/...ts/header/components/news-drawer/components/news-drawer-contents/news-drawer-contents.tsx b/...ts/header/components/news-drawer/components/news-drawer-contents/news-drawer-contents.tsx
@@ -34,7 +34,7 @@ import { appSlice } from '../../../../../../../../store/app.slice';
 import { NewsItem } from '../news-item/news-item';
 
 export const NewsDrawerContents = () => {
-  const backgroundColor = useColorModeValue('nord.100', '#555');
+  const backgroundColor = useColorModeValue('nord.100', 'polar.100');
 
   const toast = useToast();
   const dispatch = useDispatch();

diff --git a/packages/frontend/src/pages/main-page/main-page.tsx b/packages/frontend/src/pages/main-page/main-page.tsx
@@ -45,7 +45,7 @@ export const MainPage = () => {
 
   const { export: isExport, print: isPrint } = useSimpleSearchParams<{ export?: string; print?: string }>();
 
-  const backgroundColor = useColorModeValue('nord.100', '#555');
+  const backgroundColor = useColorModeValue('nord.100', 'polar.100');
 
   if (isExport !== undefined) {
     return (

diff --git a/packages/frontend/src/shared/icon-factory.tsx b/packages/frontend/src/shared/icon-factory.tsx
@@ -206,5 +206,5 @@ export const iconFactory = (key: string): IconType => {
 };
 
 export const iconFactoryAs = (key: string, props = {}): ReactElement => {
-  return <Icon as={iconFactory(key)} {...props} />;
+  return <Icon as={iconFactory(key)} {...props} sx={{ path: { stroke: 'unset' } }} />;
 };