andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

state+components: reimplement 'isDark' as a selector

Browse Source 
We now have a consolidated source of truth for whether the UI should us
dark mode to accomodate a light icon color. This is a recoil selector
that derives from iconColorAtom.

In addition, we renamed styleQueryAtom -> iconStyleAtom for consistency.
This commit is contained in:
rektdeckard
2020-09-09 20:00:58 -04:00
parent 3cfbb34713
commit 361cacdabd
6 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/IconGrid/IconGrid.tsx
View File

@@ -2,27 +2,26 @@ import React, { useRef, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { motion, useAnimation } from "framer-motion";
import { useWindowSize } from "react-use";
import TinyColor from "tinycolor2";
import { IconContext, Warning } from "phosphor-react";
import {
styleQueryAtom,
iconStyleAtom,
iconSizeAtom,
iconColorAtom,
searchQueryAtom,
} from "../../state/atoms";
import { filteredQueryResultsSelector } from "../../state/selectors";
import { filteredQueryResultsSelector, isDarkThemeSelector } from "../../state/selectors";
import GridItem from "./IconGridItem";
import "./IconGrid.css";
type IconGridProps = {};
const IconGridAnimated: React.FC<IconGridProps> = () => {
const weight = useRecoilValue(styleQueryAtom);
const IconGrid: React.FC<IconGridProps> = () => {
const weight = useRecoilValue(iconStyleAtom);
const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom);
const query = useRecoilValue(searchQueryAtom);
const isDark = TinyColor(color).isLight();
const isDark = useRecoilValue(isDarkThemeSelector);
const { width } = useWindowSize();
const spans = Math.floor(Math.min(width - 32, 1120) / 168);
@@ -77,4 +76,4 @@ const IconGridAnimated: React.FC<IconGridProps> = () => {
);
};
export default IconGridAnimated;
export default IconGrid;