From 157b9ca4a6c0383a2e1373741b8f207854466c29 Mon Sep 17 00:00:00 2001 From: Mounir Dhahri Date: Mon, 20 Jan 2025 18:34:49 +0100 Subject: [PATCH 1/3] fea: support dark mode --- src/elements/BackButton/BackButton.tsx | 6 ++-- src/elements/Button/colors.ts | 12 +++---- src/elements/Chip/Chip.tsx | 9 ++---- src/elements/Input/InputTitle.tsx | 12 ++----- src/elements/MenuItem/MenuItem.tsx | 2 +- src/elements/Screen/BottomView.tsx | 2 +- src/elements/Screen/Header.tsx | 4 +-- src/elements/Screen/ScreenBase.tsx | 4 +-- src/elements/SearchInput/SearchInput.tsx | 2 +- src/elements/Spacer/Spacer.stories.tsx | 12 +++---- src/elements/Switch/Switch.tsx | 8 +++-- src/elements/Tabs/TabsContainer.tsx | 8 ++--- src/elements/Text/Text.tsx | 2 +- src/storybook/decorators.tsx | 2 +- src/svgs/AddCircleFillIcon.tsx | 2 +- src/svgs/AddCircleIcon.tsx | 2 +- src/svgs/AddIcon.tsx | 2 +- src/svgs/AlertCircleFillIcon.tsx | 2 +- src/svgs/AlertIcon.tsx | 2 +- src/svgs/AppleIcon.tsx | 2 +- src/svgs/ArrowDownCircleIcon.tsx | 2 +- src/svgs/ArrowDownIcon.tsx | 2 +- src/svgs/ArrowLeftCircleIcon.tsx | 2 +- src/svgs/ArrowRightCircleIcon.tsx | 2 +- src/svgs/ArrowRightIcon.tsx | 2 +- src/svgs/ArrowUpCircleIcon.tsx | 2 +- src/svgs/ArrowUpIcon.tsx | 2 +- src/svgs/ArrowUpRightIcon.tsx | 2 +- src/svgs/ArtsyLogoWhiteIcon.tsx | 2 +- src/svgs/ArtsyMarkBlackIcon.tsx | 2 +- src/svgs/ArtsyMarkWhiteIcon.tsx | 2 +- src/svgs/ArtworkIcon.tsx | 2 +- src/svgs/AuctionIcon.tsx | 2 +- src/svgs/BellFillIcon.tsx | 2 +- src/svgs/BellIcon.tsx | 2 +- src/svgs/BlueChipIcon.tsx | 2 +- src/svgs/BoltCircleFill.tsx | 4 +-- src/svgs/BoltFill.tsx | 4 +-- src/svgs/BookmarkFill.tsx | 4 +-- src/svgs/BriefcaseIcon.tsx | 2 +- src/svgs/CertificateIcon.tsx | 4 +-- src/svgs/CheckCircleFillIcon.tsx | 2 +- src/svgs/CheckCircleIcon.tsx | 2 +- src/svgs/CheckIcon.tsx | 2 +- src/svgs/ClockFill.tsx | 4 +-- src/svgs/CloseCircleFillIcon.tsx | 2 +- src/svgs/CloseCircleIcon.tsx | 2 +- src/svgs/CloseIcon.tsx | 2 +- src/svgs/CollapseIcon.tsx | 2 +- src/svgs/DecreaseIcon.tsx | 2 +- src/svgs/DocumentIcon.tsx | 2 +- src/svgs/DownloadIcon.tsx | 2 +- src/svgs/EditIcon.tsx | 2 +- src/svgs/EmptyCheckCircleIcon.tsx | 2 +- src/svgs/EnterIcon.tsx | 2 +- src/svgs/EnvelopeIcon.tsx | 2 +- src/svgs/EstablishedIcon.tsx | 2 +- src/svgs/ExclamationMarkCircleFill.tsx | 4 +-- src/svgs/ExpandIcon.tsx | 2 +- src/svgs/EyeClosedIcon.tsx | 2 +- src/svgs/EyeOpenedIcon.tsx | 2 +- src/svgs/FacebookIcon.tsx | 2 +- src/svgs/FairIcon.tsx | 2 +- src/svgs/FilterIcon.tsx | 2 +- src/svgs/FireIcon.tsx | 2 +- src/svgs/FollowArtistFillIcon.tsx | 2 +- src/svgs/FollowArtistIcon.tsx | 2 +- src/svgs/FullWidthIcon.tsx | 2 +- src/svgs/GenomeIcon.tsx | 2 +- src/svgs/GraphIcon.tsx | 2 +- src/svgs/GridIcon.tsx | 2 +- src/svgs/GuaranteeIcon.tsx | 2 +- src/svgs/HeartFillIcon.tsx | 2 +- src/svgs/HeartIcon.tsx | 2 +- src/svgs/HideIcon.tsx | 2 +- src/svgs/HomeIcon.tsx | 2 +- src/svgs/ImageIcon.tsx | 2 +- src/svgs/ImageSetIcon.tsx | 2 +- src/svgs/IncreaseIcon.tsx | 2 +- src/svgs/InfoCircleIcon.tsx | 2 +- src/svgs/InstagramAppIcon.tsx | 2 +- src/svgs/InstitutionIcon.tsx | 2 +- src/svgs/LinkIcon.tsx | 2 +- src/svgs/LoaderIcon.tsx | 2 +- src/svgs/LockIcon.tsx | 2 +- src/svgs/LogoutIcon.tsx | 2 +- src/svgs/MagnifyingGlassIcon.tsx | 4 +-- src/svgs/MapPinIcon.tsx | 2 +- src/svgs/MenuIcon.tsx | 2 +- src/svgs/MessageIcon.tsx | 2 +- src/svgs/MessagesAppIcon.tsx | 2 +- src/svgs/MoneyCircleIcon.tsx | 2 +- src/svgs/MoneyFillIcon.tsx | 2 +- src/svgs/MoreIcon.tsx | 4 +-- src/svgs/MultiplePersonsIcon.tsx | 2 +- src/svgs/NewFillHeartIcon.tsx | 2 +- src/svgs/NewHeartIcon.tsx | 2 +- src/svgs/NoArtworkIcon.tsx | 2 +- src/svgs/NoImageIcon.tsx | 2 +- src/svgs/PageIcon.tsx | 2 +- src/svgs/Payment2Icon.tsx | 2 +- src/svgs/PaymentIcon.tsx | 2 +- src/svgs/PersonIcon.tsx | 2 +- src/svgs/PublicationIcon.tsx | 2 +- src/svgs/QuestionCircleIcon.tsx | 2 +- src/svgs/ReloadIcon.tsx | 2 +- src/svgs/SecureLockIcon.tsx | 2 +- src/svgs/SettingsIcon.tsx | 2 +- src/svgs/ShareIcon.tsx | 2 +- src/svgs/ShieldFilledIcon.tsx | 2 +- src/svgs/ShieldIcon.tsx | 2 +- src/svgs/StarCircleFill.tsx | 4 +-- src/svgs/StarCircleIcon.tsx | 2 +- src/svgs/Stopwatch.tsx | 4 +-- src/svgs/Tag2Icon.tsx | 2 +- src/svgs/TagIcon.tsx | 2 +- src/svgs/TimerIcon.tsx | 2 +- src/svgs/TopEmergingIcon.tsx | 2 +- src/svgs/TrashIcon.tsx | 4 +-- src/svgs/TrendingIcon.tsx | 4 +-- src/svgs/TriangleDown.tsx | 4 +-- src/svgs/TwitterIcon.tsx | 2 +- src/svgs/UserMultiIcon.tsx | 2 +- src/svgs/UserSingleIcon.tsx | 2 +- src/svgs/VerifiedIcon.tsx | 4 +-- src/svgs/VerifiedPersonIcon.tsx | 2 +- src/svgs/WhatsAppAppIcon.tsx | 2 +- src/svgs/WorldGlobeCircleIcon.tsx | 2 +- src/svgs/XCircleIcon.tsx | 4 +-- src/svgs/icons.stories.tsx | 2 +- src/tokens.ts | 40 +++++++++++++----------- src/utils/colors.stories.tsx | 4 +-- src/utils/space.stories.tsx | 2 +- 133 files changed, 193 insertions(+), 200 deletions(-) diff --git a/src/elements/BackButton/BackButton.tsx b/src/elements/BackButton/BackButton.tsx index bca6561e..937f26fc 100644 --- a/src/elements/BackButton/BackButton.tsx +++ b/src/elements/BackButton/BackButton.tsx @@ -14,7 +14,7 @@ export interface BackButtonProps { } export const BackButton: React.FC = ({ - color = "onBackgroundHigh", + color = "black100", hitSlop = DEFAULT_HIT_SLOP, onPress, showX = false, @@ -40,7 +40,7 @@ export const BackButton: React.FC = ({ } export const BackButtonWithBackground: React.FC = ({ - color = "onBackgroundHigh", + color = "black100", hitSlop = DEFAULT_HIT_SLOP, onPress, showX = false, @@ -49,7 +49,7 @@ export const BackButtonWithBackground: React.FC = ({ return ( = ({ image, title, subtitle, onPress }) => { } return ( - + {!!image && } {!!subtitle && ( diff --git a/src/elements/Input/InputTitle.tsx b/src/elements/Input/InputTitle.tsx index 6e5f783c..e775b6e6 100644 --- a/src/elements/Input/InputTitle.tsx +++ b/src/elements/Input/InputTitle.tsx @@ -13,20 +13,12 @@ export const InputTitle: React.FC<{ {title} {!!required && ( - + Required )} {!!optional && ( - + {" "} Optional diff --git a/src/elements/MenuItem/MenuItem.tsx b/src/elements/MenuItem/MenuItem.tsx index 22c0fcd5..e12fb530 100644 --- a/src/elements/MenuItem/MenuItem.tsx +++ b/src/elements/MenuItem/MenuItem.tsx @@ -34,7 +34,7 @@ export const MenuItem = ({ pr="15px" > - + {title} diff --git a/src/elements/Screen/BottomView.tsx b/src/elements/Screen/BottomView.tsx index 13c27be2..01c9da88 100644 --- a/src/elements/Screen/BottomView.tsx +++ b/src/elements/Screen/BottomView.tsx @@ -23,7 +23,7 @@ export const BottomView: React.FC = ({ children, darkMode }) => }} pointerEvents="none" /> - + {children} diff --git a/src/elements/Screen/Header.tsx b/src/elements/Screen/Header.tsx index d14150d1..370b3008 100644 --- a/src/elements/Screen/Header.tsx +++ b/src/elements/Screen/Header.tsx @@ -46,7 +46,7 @@ export const Header: React.FC = ({ flexDirection="row" px={2} zIndex={ZINDEX.header} - backgroundColor="background" + backgroundColor="white100" alignItems="center" > @@ -125,7 +125,7 @@ const Left: React.FC<{ <> {leftElements || ( - + )} diff --git a/src/elements/Screen/ScreenBase.tsx b/src/elements/Screen/ScreenBase.tsx index e1a5961b..648a044c 100644 --- a/src/elements/Screen/ScreenBase.tsx +++ b/src/elements/Screen/ScreenBase.tsx @@ -18,7 +18,7 @@ export const ScreenBase: React.FC = ({ @@ -40,7 +40,7 @@ const SafeAreaCover: React.FC<{ safeArea: boolean }> = ({ safeArea }) => { right={0} top={safeArea ? -insets.top : 0} height={insets.top} - backgroundColor="background" + backgroundColor="white100" /> ) } diff --git a/src/elements/SearchInput/SearchInput.tsx b/src/elements/SearchInput/SearchInput.tsx index 631426a2..1ef335f7 100644 --- a/src/elements/SearchInput/SearchInput.tsx +++ b/src/elements/SearchInput/SearchInput.tsx @@ -15,7 +15,7 @@ export const SearchInput = ({ return ( } + icon={} autoCorrect={false} enableClearButton={enableCancelButton} returnKeyType="search" diff --git a/src/elements/Spacer/Spacer.stories.tsx b/src/elements/Spacer/Spacer.stories.tsx index 3de06da8..cc533d71 100644 --- a/src/elements/Spacer/Spacer.stories.tsx +++ b/src/elements/Spacer/Spacer.stories.tsx @@ -18,11 +18,11 @@ const SpacerRow = (props: { x: NoUndefined }) => { return ( - + - + - + {typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size as any)}px`} @@ -52,11 +52,11 @@ const SpacerCol = (props: { y: SpacerProps["y"] }) => { return ( - + - + - + {typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size as any)}px`} diff --git a/src/elements/Switch/Switch.tsx b/src/elements/Switch/Switch.tsx index db17e317..fc954bb1 100644 --- a/src/elements/Switch/Switch.tsx +++ b/src/elements/Switch/Switch.tsx @@ -33,8 +33,12 @@ export interface SwitchProps extends CustomSwitchProps { export const Switch = ({ value, - thumbColorActive = Platform.OS === "ios" ? "white100" : "blue100", - thumbColorInactive = Platform.OS === "ios" ? "white100" : "black10", + // Regardless of the color scheme, the thumb and track colors are always white + // @ts-expect-error + thumbColorActive = Platform.OS === "ios" ? "white" : "blue100", + // Regardless of the color scheme, the thumb and track colors are always white + // @ts-expect-error + thumbColorInactive = Platform.OS === "ios" ? "white" : "black10", trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, diff --git a/src/elements/Tabs/TabsContainer.tsx b/src/elements/Tabs/TabsContainer.tsx index c3632d34..427898f7 100644 --- a/src/elements/Tabs/TabsContainer.tsx +++ b/src/elements/Tabs/TabsContainer.tsx @@ -49,7 +49,7 @@ export const TabsContainer: React.FC = ({ shadowOpacity: 0, shadowRadius: 0, elevation: 0, - backgroundColor: color("background"), + backgroundColor: color("white100"), }} initialTabName={initialTabName} containerStyle={{ @@ -85,11 +85,11 @@ export const TabsContainer: React.FC = ({ ) }} contentContainerStyle={{}} - activeColor={color("onBackground")} - inactiveColor={color("onBackgroundMedium")} + activeColor={color("black100")} + inactiveColor={color("black60")} labelStyle={{ marginHorizontal: 0 }} // removing the horizonal margin from the lib indicatorStyle={{ - backgroundColor: color("onBackground"), + backgroundColor: color("black100"), height: 1, // on android this line breaks the active indicator and it is not visible ...(isIOS && { bottom: -1 }), diff --git a/src/elements/Text/Text.tsx b/src/elements/Text/Text.tsx index 63c98332..4ef15aa4 100644 --- a/src/elements/Text/Text.tsx +++ b/src/elements/Text/Text.tsx @@ -34,7 +34,7 @@ export const Text = forwardRef( { variant = "sm", italic = false, - color = "onBackgroundHigh", + color = "black100", caps = false, weight = "regular", underline = false, diff --git a/src/storybook/decorators.tsx b/src/storybook/decorators.tsx index 7a71e768..f4e38107 100644 --- a/src/storybook/decorators.tsx +++ b/src/storybook/decorators.tsx @@ -46,7 +46,7 @@ export const useDarkModeSwitcher: DecoratorFunction = (story) => { - + Dark mode: {mode} {mode === "system" && "(" + systemMode + ")"} diff --git a/src/svgs/AddCircleFillIcon.tsx b/src/svgs/AddCircleFillIcon.tsx index 4b840039..b5e308fa 100644 --- a/src/svgs/AddCircleFillIcon.tsx +++ b/src/svgs/AddCircleFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const AddCircleFillIcon = ({ fill, ...restProps }: IconProps) => { +export const AddCircleFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/AddCircleIcon.tsx b/src/svgs/AddCircleIcon.tsx index 99fad346..7ae0e02c 100644 --- a/src/svgs/AddCircleIcon.tsx +++ b/src/svgs/AddCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const AddCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const AddCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/AddIcon.tsx b/src/svgs/AddIcon.tsx index 01e59923..15d9d800 100644 --- a/src/svgs/AddIcon.tsx +++ b/src/svgs/AddIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const AddIcon = ({ fill, ...restProps }: IconProps) => { +export const AddIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/AlertCircleFillIcon.tsx b/src/svgs/AlertCircleFillIcon.tsx index c421e169..3fe8b1bf 100644 --- a/src/svgs/AlertCircleFillIcon.tsx +++ b/src/svgs/AlertCircleFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const AlertCircleFillIcon = ({ fill, ...restProps }: IconProps) => { +export const AlertCircleFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/AlertIcon.tsx b/src/svgs/AlertIcon.tsx index 0556b91d..83ea5d4b 100644 --- a/src/svgs/AlertIcon.tsx +++ b/src/svgs/AlertIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const AlertIcon = ({ fill, ...restProps }: IconProps) => { +export const AlertIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/AppleIcon.tsx b/src/svgs/AppleIcon.tsx index 746a7abf..e48e8531 100644 --- a/src/svgs/AppleIcon.tsx +++ b/src/svgs/AppleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const AppleIcon = ({ fill, ...restProps }: IconProps) => { +export const AppleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowDownCircleIcon.tsx b/src/svgs/ArrowDownCircleIcon.tsx index 795151d4..abd83275 100644 --- a/src/svgs/ArrowDownCircleIcon.tsx +++ b/src/svgs/ArrowDownCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowDownCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowDownCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowDownIcon.tsx b/src/svgs/ArrowDownIcon.tsx index e6272d10..1e01c13a 100644 --- a/src/svgs/ArrowDownIcon.tsx +++ b/src/svgs/ArrowDownIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowDownIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowDownIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowLeftCircleIcon.tsx b/src/svgs/ArrowLeftCircleIcon.tsx index 7431e795..e8ef2d1c 100644 --- a/src/svgs/ArrowLeftCircleIcon.tsx +++ b/src/svgs/ArrowLeftCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowLeftCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowLeftCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowRightCircleIcon.tsx b/src/svgs/ArrowRightCircleIcon.tsx index 81f33a17..a0eeaadc 100644 --- a/src/svgs/ArrowRightCircleIcon.tsx +++ b/src/svgs/ArrowRightCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowRightCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowRightCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowRightIcon.tsx b/src/svgs/ArrowRightIcon.tsx index 6b27a7a9..e0cda905 100644 --- a/src/svgs/ArrowRightIcon.tsx +++ b/src/svgs/ArrowRightIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowRightIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowRightIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowUpCircleIcon.tsx b/src/svgs/ArrowUpCircleIcon.tsx index 8652a73a..042d2af2 100644 --- a/src/svgs/ArrowUpCircleIcon.tsx +++ b/src/svgs/ArrowUpCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowUpCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowUpCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowUpIcon.tsx b/src/svgs/ArrowUpIcon.tsx index eb325281..532b45b8 100644 --- a/src/svgs/ArrowUpIcon.tsx +++ b/src/svgs/ArrowUpIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowUpIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowUpIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArrowUpRightIcon.tsx b/src/svgs/ArrowUpRightIcon.tsx index 0b40a359..8ff85256 100644 --- a/src/svgs/ArrowUpRightIcon.tsx +++ b/src/svgs/ArrowUpRightIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArrowUpRightIcon = ({ fill, ...restProps }: IconProps) => { +export const ArrowUpRightIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArtsyLogoWhiteIcon.tsx b/src/svgs/ArtsyLogoWhiteIcon.tsx index 9e26bd82..540fedec 100644 --- a/src/svgs/ArtsyLogoWhiteIcon.tsx +++ b/src/svgs/ArtsyLogoWhiteIcon.tsx @@ -1,6 +1,6 @@ import { G, Icon, IconProps, Path } from "./Icon" -export const ArtsyLogoWhiteIcon = ({ fill, ...restProps }: IconProps) => { +export const ArtsyLogoWhiteIcon = ({ fill = "black100", ...restProps }: IconProps) => { return ( diff --git a/src/svgs/ArtsyMarkBlackIcon.tsx b/src/svgs/ArtsyMarkBlackIcon.tsx index 7b259326..648ae2b2 100644 --- a/src/svgs/ArtsyMarkBlackIcon.tsx +++ b/src/svgs/ArtsyMarkBlackIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArtsyMarkBlackIcon = ({ fill, ...restProps }: IconProps) => { +export const ArtsyMarkBlackIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ArtsyMarkWhiteIcon.tsx b/src/svgs/ArtsyMarkWhiteIcon.tsx index 9552f54b..e2d0516c 100644 --- a/src/svgs/ArtsyMarkWhiteIcon.tsx +++ b/src/svgs/ArtsyMarkWhiteIcon.tsx @@ -1,6 +1,6 @@ import { G, Icon, IconProps, Path } from "./Icon" -export const ArtsyMarkWhiteIcon = ({ fill, ...restProps }: IconProps) => { +export const ArtsyMarkWhiteIcon = ({ fill = "black100", ...restProps }: IconProps) => { return ( diff --git a/src/svgs/ArtworkIcon.tsx b/src/svgs/ArtworkIcon.tsx index 34d24443..e8fad5d5 100644 --- a/src/svgs/ArtworkIcon.tsx +++ b/src/svgs/ArtworkIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ArtworkIcon = ({ fill, ...restProps }: IconProps) => { +export const ArtworkIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/AuctionIcon.tsx b/src/svgs/AuctionIcon.tsx index b58e6314..df974076 100644 --- a/src/svgs/AuctionIcon.tsx +++ b/src/svgs/AuctionIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const AuctionIcon = ({ fill, ...restProps }: IconProps) => { +export const AuctionIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/BellFillIcon.tsx b/src/svgs/BellFillIcon.tsx index c9fca4e6..4f45baf4 100644 --- a/src/svgs/BellFillIcon.tsx +++ b/src/svgs/BellFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const BellFillIcon = ({ fill, ...restProps }: IconProps) => { +export const BellFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/BellIcon.tsx b/src/svgs/BellIcon.tsx index 8cc94d96..ab51d138 100644 --- a/src/svgs/BellIcon.tsx +++ b/src/svgs/BellIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const BellIcon = ({ fill, ...restProps }: IconProps) => { +export const BellIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/BlueChipIcon.tsx b/src/svgs/BlueChipIcon.tsx index e9607914..cba84601 100644 --- a/src/svgs/BlueChipIcon.tsx +++ b/src/svgs/BlueChipIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const BlueChipIcon = ({ fill, ...restProps }: IconProps) => { +export const BlueChipIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/BoltCircleFill.tsx b/src/svgs/BoltCircleFill.tsx index 83486f9f..a4dbffc5 100644 --- a/src/svgs/BoltCircleFill.tsx +++ b/src/svgs/BoltCircleFill.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Mask, Path, Rect } from "./Icon" import { useColor } from "../utils/hooks" -export const BoltCircleFill = ({ fill, ...restProps }: IconProps) => { +export const BoltCircleFill = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( @@ -12,7 +12,7 @@ export const BoltCircleFill = ({ fill, ...restProps }: IconProps) => { y="0" width="20" height="20" - fill="black" + fill={color("black100")} > { +export const BoltFill = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( ) diff --git a/src/svgs/BookmarkFill.tsx b/src/svgs/BookmarkFill.tsx index 79f1ef76..08a76a63 100644 --- a/src/svgs/BookmarkFill.tsx +++ b/src/svgs/BookmarkFill.tsx @@ -1,13 +1,13 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const BookmarkFill = ({ fill, ...restProps }: IconProps) => { +export const BookmarkFill = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( ) diff --git a/src/svgs/BriefcaseIcon.tsx b/src/svgs/BriefcaseIcon.tsx index 5a2dc895..12633faa 100644 --- a/src/svgs/BriefcaseIcon.tsx +++ b/src/svgs/BriefcaseIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const BriefcaseIcon = ({ fill, ...restProps }: IconProps) => { +export const BriefcaseIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/CertificateIcon.tsx b/src/svgs/CertificateIcon.tsx index 6f79f1d2..a0d6fba5 100644 --- a/src/svgs/CertificateIcon.tsx +++ b/src/svgs/CertificateIcon.tsx @@ -1,13 +1,13 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CertificateIcon = ({ fill, ...restProps }: IconProps) => { +export const CertificateIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/CheckCircleFillIcon.tsx b/src/svgs/CheckCircleFillIcon.tsx index 7b1dd1b5..3f63251e 100644 --- a/src/svgs/CheckCircleFillIcon.tsx +++ b/src/svgs/CheckCircleFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CheckCircleFillIcon = ({ fill, ...restProps }: IconProps) => { +export const CheckCircleFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/CheckCircleIcon.tsx b/src/svgs/CheckCircleIcon.tsx index 7c7eee18..9af36dc7 100644 --- a/src/svgs/CheckCircleIcon.tsx +++ b/src/svgs/CheckCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CheckCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const CheckCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/CheckIcon.tsx b/src/svgs/CheckIcon.tsx index 84f0f5af..08641987 100644 --- a/src/svgs/CheckIcon.tsx +++ b/src/svgs/CheckIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CheckIcon = ({ fill, ...restProps }: IconProps) => { +export const CheckIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ClockFill.tsx b/src/svgs/ClockFill.tsx index 4912ea0f..870b9a58 100644 --- a/src/svgs/ClockFill.tsx +++ b/src/svgs/ClockFill.tsx @@ -1,13 +1,13 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ClockFill = ({ fill, ...restProps }: IconProps) => { +export const ClockFill = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( ) diff --git a/src/svgs/CloseCircleFillIcon.tsx b/src/svgs/CloseCircleFillIcon.tsx index 4cd84e51..14d28477 100644 --- a/src/svgs/CloseCircleFillIcon.tsx +++ b/src/svgs/CloseCircleFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CloseCircleFillIcon = ({ fill, ...restProps }: IconProps) => { +export const CloseCircleFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/CloseCircleIcon.tsx b/src/svgs/CloseCircleIcon.tsx index 165a73c6..be5238d9 100644 --- a/src/svgs/CloseCircleIcon.tsx +++ b/src/svgs/CloseCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CloseCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const CloseCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/CloseIcon.tsx b/src/svgs/CloseIcon.tsx index ec4e18f0..f9568ebe 100644 --- a/src/svgs/CloseIcon.tsx +++ b/src/svgs/CloseIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CloseIcon = ({ fill, ...restProps }: IconProps) => { +export const CloseIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/CollapseIcon.tsx b/src/svgs/CollapseIcon.tsx index 84fab55c..0ba9bb76 100644 --- a/src/svgs/CollapseIcon.tsx +++ b/src/svgs/CollapseIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const CollapseIcon = ({ fill, ...restProps }: IconProps) => { +export const CollapseIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/DecreaseIcon.tsx b/src/svgs/DecreaseIcon.tsx index 5714cc8a..7ba9c1d5 100644 --- a/src/svgs/DecreaseIcon.tsx +++ b/src/svgs/DecreaseIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const DecreaseIcon = ({ fill, ...restProps }: IconProps) => { +export const DecreaseIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/DocumentIcon.tsx b/src/svgs/DocumentIcon.tsx index eab84f18..161d2087 100644 --- a/src/svgs/DocumentIcon.tsx +++ b/src/svgs/DocumentIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const DocumentIcon = ({ fill, ...restProps }: IconProps) => { +export const DocumentIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/DownloadIcon.tsx b/src/svgs/DownloadIcon.tsx index 5ffbfe11..7092fd76 100644 --- a/src/svgs/DownloadIcon.tsx +++ b/src/svgs/DownloadIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const DownloadIcon = ({ fill, ...restProps }: IconProps) => { +export const DownloadIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/EditIcon.tsx b/src/svgs/EditIcon.tsx index bfb63a63..5582136f 100644 --- a/src/svgs/EditIcon.tsx +++ b/src/svgs/EditIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const EditIcon = ({ fill, ...restProps }: IconProps) => { +export const EditIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/EmptyCheckCircleIcon.tsx b/src/svgs/EmptyCheckCircleIcon.tsx index 33d5fa15..a33fd924 100644 --- a/src/svgs/EmptyCheckCircleIcon.tsx +++ b/src/svgs/EmptyCheckCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const EmptyCheckCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const EmptyCheckCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/EnterIcon.tsx b/src/svgs/EnterIcon.tsx index 0ade021f..0ebaff72 100644 --- a/src/svgs/EnterIcon.tsx +++ b/src/svgs/EnterIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const EnterIcon = ({ fill, ...restProps }: IconProps) => { +export const EnterIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/EnvelopeIcon.tsx b/src/svgs/EnvelopeIcon.tsx index 5bc963bf..53b46eb5 100644 --- a/src/svgs/EnvelopeIcon.tsx +++ b/src/svgs/EnvelopeIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const EnvelopeIcon = ({ fill, ...restProps }: IconProps) => { +export const EnvelopeIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/EstablishedIcon.tsx b/src/svgs/EstablishedIcon.tsx index ff88ff2d..fcc79dae 100644 --- a/src/svgs/EstablishedIcon.tsx +++ b/src/svgs/EstablishedIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const EstablishedIcon = ({ fill, ...restProps }: IconProps) => { +export const EstablishedIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ExclamationMarkCircleFill.tsx b/src/svgs/ExclamationMarkCircleFill.tsx index 4594e308..b9a5400a 100644 --- a/src/svgs/ExclamationMarkCircleFill.tsx +++ b/src/svgs/ExclamationMarkCircleFill.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ExclamationMarkCircleFill = ({ fill, ...restProps }: IconProps) => { +export const ExclamationMarkCircleFill = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( @@ -9,7 +9,7 @@ export const ExclamationMarkCircleFill = ({ fill, ...restProps }: IconProps) => fill-rule="evenodd" clip-rule="evenodd" d="M9 16.5C12.866 16.5 16 13.366 16 9.5C16 5.63401 12.866 2.5 9 2.5C5.13401 2.5 2 5.63401 2 9.5C2 13.366 5.13401 16.5 9 16.5ZM9 5.75C9.41421 5.75 9.75 6.08579 9.75 6.5V9.5C9.75 9.91421 9.41421 10.25 9 10.25C8.58579 10.25 8.25 9.91421 8.25 9.5V6.5C8.25 6.08579 8.58579 5.75 9 5.75ZM8.25 12.5C8.25 12.0858 8.58579 11.75 9 11.75H9.00542C9.41963 11.75 9.75542 12.0858 9.75542 12.5C9.75542 12.9142 9.41963 13.25 9.00542 13.25H9C8.58579 13.25 8.25 12.9142 8.25 12.5Z" - fill={color(fill ?? "onBackgroundMedium")} + fill={color(fill ?? "black100")} fillRule="evenodd" /> diff --git a/src/svgs/ExpandIcon.tsx b/src/svgs/ExpandIcon.tsx index 1a70134f..6908538f 100644 --- a/src/svgs/ExpandIcon.tsx +++ b/src/svgs/ExpandIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ExpandIcon = ({ fill, ...restProps }: IconProps) => { +export const ExpandIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/EyeClosedIcon.tsx b/src/svgs/EyeClosedIcon.tsx index 7e48503d..92cf0304 100644 --- a/src/svgs/EyeClosedIcon.tsx +++ b/src/svgs/EyeClosedIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const EyeClosedIcon = ({ fill, ...restProps }: IconProps) => { +export const EyeClosedIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/EyeOpenedIcon.tsx b/src/svgs/EyeOpenedIcon.tsx index 50b9eee2..db2ffa68 100644 --- a/src/svgs/EyeOpenedIcon.tsx +++ b/src/svgs/EyeOpenedIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const EyeOpenedIcon = ({ fill, ...restProps }: IconProps) => { +export const EyeOpenedIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/FacebookIcon.tsx b/src/svgs/FacebookIcon.tsx index 2d3abc09..df994885 100644 --- a/src/svgs/FacebookIcon.tsx +++ b/src/svgs/FacebookIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const FacebookIcon = ({ fill, ...restProps }: IconProps) => { +export const FacebookIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/FairIcon.tsx b/src/svgs/FairIcon.tsx index 943b5c21..e504bcb7 100644 --- a/src/svgs/FairIcon.tsx +++ b/src/svgs/FairIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const FairIcon = ({ fill, ...restProps }: IconProps) => { +export const FairIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/FilterIcon.tsx b/src/svgs/FilterIcon.tsx index 5706e9dd..ec43a433 100644 --- a/src/svgs/FilterIcon.tsx +++ b/src/svgs/FilterIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const FilterIcon = ({ fill, ...restProps }: IconProps) => { +export const FilterIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/FireIcon.tsx b/src/svgs/FireIcon.tsx index c674d9a5..d4acdfdd 100644 --- a/src/svgs/FireIcon.tsx +++ b/src/svgs/FireIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const FireIcon = ({ fill, ...restProps }: IconProps) => { +export const FireIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/FollowArtistFillIcon.tsx b/src/svgs/FollowArtistFillIcon.tsx index 7983b4cf..869d6274 100644 --- a/src/svgs/FollowArtistFillIcon.tsx +++ b/src/svgs/FollowArtistFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const FollowArtistFillIcon = ({ fill, ...restProps }: IconProps) => { +export const FollowArtistFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/FollowArtistIcon.tsx b/src/svgs/FollowArtistIcon.tsx index e3b02677..3588224e 100644 --- a/src/svgs/FollowArtistIcon.tsx +++ b/src/svgs/FollowArtistIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const FollowArtistIcon = ({ fill, ...restProps }: IconProps) => { +export const FollowArtistIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/FullWidthIcon.tsx b/src/svgs/FullWidthIcon.tsx index 15dff3e2..c010d2eb 100644 --- a/src/svgs/FullWidthIcon.tsx +++ b/src/svgs/FullWidthIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const FullWidthIcon = ({ fill, ...restProps }: IconProps) => { +export const FullWidthIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/GenomeIcon.tsx b/src/svgs/GenomeIcon.tsx index d6818f49..275752ea 100644 --- a/src/svgs/GenomeIcon.tsx +++ b/src/svgs/GenomeIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const GenomeIcon = ({ fill, ...restProps }: IconProps) => { +export const GenomeIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/GraphIcon.tsx b/src/svgs/GraphIcon.tsx index 45d0c7ce..3566c8fb 100644 --- a/src/svgs/GraphIcon.tsx +++ b/src/svgs/GraphIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const GraphIcon = ({ fill, ...restProps }: IconProps) => { +export const GraphIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/GridIcon.tsx b/src/svgs/GridIcon.tsx index bc3ae8dd..49d1a5f0 100644 --- a/src/svgs/GridIcon.tsx +++ b/src/svgs/GridIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const GridIcon = ({ fill, ...restProps }: IconProps) => { +export const GridIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/GuaranteeIcon.tsx b/src/svgs/GuaranteeIcon.tsx index 12673d98..ba21e09e 100644 --- a/src/svgs/GuaranteeIcon.tsx +++ b/src/svgs/GuaranteeIcon.tsx @@ -2,7 +2,7 @@ import { ClipPath, Defs, G } from "react-native-svg" import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const GuaranteeIcon = ({ fill, ...restProps }: IconProps) => { +export const GuaranteeIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/HeartFillIcon.tsx b/src/svgs/HeartFillIcon.tsx index c5712f49..04e8d307 100644 --- a/src/svgs/HeartFillIcon.tsx +++ b/src/svgs/HeartFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const HeartFillIcon = ({ fill, ...restProps }: IconProps) => { +export const HeartFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/HeartIcon.tsx b/src/svgs/HeartIcon.tsx index 0d62e641..5a4844f3 100644 --- a/src/svgs/HeartIcon.tsx +++ b/src/svgs/HeartIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const HeartIcon = ({ fill, ...restProps }: IconProps) => { +export const HeartIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/HideIcon.tsx b/src/svgs/HideIcon.tsx index ec578b2d..bb43b658 100644 --- a/src/svgs/HideIcon.tsx +++ b/src/svgs/HideIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const HideIcon = ({ fill, ...restProps }: IconProps) => { +export const HideIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/HomeIcon.tsx b/src/svgs/HomeIcon.tsx index bae8ea6d..7b6be232 100644 --- a/src/svgs/HomeIcon.tsx +++ b/src/svgs/HomeIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const HomeIcon = ({ fill, ...restProps }: IconProps) => { +export const HomeIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ImageIcon.tsx b/src/svgs/ImageIcon.tsx index 7a97b24d..31285713 100644 --- a/src/svgs/ImageIcon.tsx +++ b/src/svgs/ImageIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ImageIcon = ({ fill, ...restProps }: IconProps) => { +export const ImageIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ImageSetIcon.tsx b/src/svgs/ImageSetIcon.tsx index 0429c40a..a5f3b794 100644 --- a/src/svgs/ImageSetIcon.tsx +++ b/src/svgs/ImageSetIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ImageSetIcon = ({ fill, ...restProps }: IconProps) => { +export const ImageSetIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/IncreaseIcon.tsx b/src/svgs/IncreaseIcon.tsx index dc17798f..685f1eca 100644 --- a/src/svgs/IncreaseIcon.tsx +++ b/src/svgs/IncreaseIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const IncreaseIcon = ({ fill, ...restProps }: IconProps) => { +export const IncreaseIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/InfoCircleIcon.tsx b/src/svgs/InfoCircleIcon.tsx index 88376fad..52bdfc45 100644 --- a/src/svgs/InfoCircleIcon.tsx +++ b/src/svgs/InfoCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const InfoCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const InfoCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/InstagramAppIcon.tsx b/src/svgs/InstagramAppIcon.tsx index 21c0f5a0..72d93732 100644 --- a/src/svgs/InstagramAppIcon.tsx +++ b/src/svgs/InstagramAppIcon.tsx @@ -1,6 +1,6 @@ import { Defs, Icon, IconProps, Path, RadialGradient, Stop } from "./Icon" -export const InstagramAppIcon = ({ fill, ...restProps }: IconProps) => ( +export const InstagramAppIcon = ({ fill = "black100", ...restProps }: IconProps) => ( { +export const InstitutionIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/LinkIcon.tsx b/src/svgs/LinkIcon.tsx index df1ed97b..46213b18 100644 --- a/src/svgs/LinkIcon.tsx +++ b/src/svgs/LinkIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const LinkIcon = ({ fill, ...restProps }: IconProps) => { +export const LinkIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/LoaderIcon.tsx b/src/svgs/LoaderIcon.tsx index 6233a327..f40df299 100644 --- a/src/svgs/LoaderIcon.tsx +++ b/src/svgs/LoaderIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const LoaderIcon = ({ fill, ...restProps }: IconProps) => { +export const LoaderIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/LockIcon.tsx b/src/svgs/LockIcon.tsx index aa03f3d3..4f3915a7 100644 --- a/src/svgs/LockIcon.tsx +++ b/src/svgs/LockIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const LockIcon = ({ fill, ...restProps }: IconProps) => { +export const LockIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/LogoutIcon.tsx b/src/svgs/LogoutIcon.tsx index 132809dc..ab44c64f 100644 --- a/src/svgs/LogoutIcon.tsx +++ b/src/svgs/LogoutIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const LogoutIcon = ({ fill, ...restProps }: IconProps) => { +export const LogoutIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MagnifyingGlassIcon.tsx b/src/svgs/MagnifyingGlassIcon.tsx index cc215333..f093dcc2 100644 --- a/src/svgs/MagnifyingGlassIcon.tsx +++ b/src/svgs/MagnifyingGlassIcon.tsx @@ -1,14 +1,14 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const MagnifyingGlassIcon = ({ fill, ...restProps }: IconProps) => { +export const MagnifyingGlassIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MapPinIcon.tsx b/src/svgs/MapPinIcon.tsx index fe88aa27..38a257ef 100644 --- a/src/svgs/MapPinIcon.tsx +++ b/src/svgs/MapPinIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const MapPinIcon = ({ fill, ...restProps }: IconProps) => { +export const MapPinIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MenuIcon.tsx b/src/svgs/MenuIcon.tsx index da172446..1cac9203 100644 --- a/src/svgs/MenuIcon.tsx +++ b/src/svgs/MenuIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const MenuIcon = ({ fill, ...restProps }: IconProps) => { +export const MenuIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MessageIcon.tsx b/src/svgs/MessageIcon.tsx index c37851a4..59b1e73e 100644 --- a/src/svgs/MessageIcon.tsx +++ b/src/svgs/MessageIcon.tsx @@ -2,7 +2,7 @@ import { Path } from "react-native-svg" import { Icon, IconProps } from "./Icon" import { useColor } from "../utils/hooks" -export const MessageIcon = ({ fill, ...restProps }: IconProps) => { +export const MessageIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MessagesAppIcon.tsx b/src/svgs/MessagesAppIcon.tsx index 48d89bb0..06812964 100644 --- a/src/svgs/MessagesAppIcon.tsx +++ b/src/svgs/MessagesAppIcon.tsx @@ -1,6 +1,6 @@ import { Defs, Icon, IconProps, LinearGradient, Path, Stop } from "./Icon" -export const MessagesAppIcon = ({ fill, ...restProps }: IconProps) => { +export const MessagesAppIcon = ({ fill = "black100", ...restProps }: IconProps) => { return ( { +export const MoneyCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MoneyFillIcon.tsx b/src/svgs/MoneyFillIcon.tsx index 5a518540..ba6f96f3 100644 --- a/src/svgs/MoneyFillIcon.tsx +++ b/src/svgs/MoneyFillIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const MoneyFillIcon = ({ fill, ...restProps }: IconProps) => { +export const MoneyFillIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MoreIcon.tsx b/src/svgs/MoreIcon.tsx index 3b3d0853..e4e60aa8 100644 --- a/src/svgs/MoreIcon.tsx +++ b/src/svgs/MoreIcon.tsx @@ -1,13 +1,13 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const MoreIcon = ({ fill, ...restProps }: IconProps) => { +export const MoreIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/MultiplePersonsIcon.tsx b/src/svgs/MultiplePersonsIcon.tsx index bbf9ddf0..89259d38 100644 --- a/src/svgs/MultiplePersonsIcon.tsx +++ b/src/svgs/MultiplePersonsIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const MultiplePersonsIcon = ({ fill, ...restProps }: IconProps) => { +export const MultiplePersonsIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/NewFillHeartIcon.tsx b/src/svgs/NewFillHeartIcon.tsx index dd2838de..3a628a92 100644 --- a/src/svgs/NewFillHeartIcon.tsx +++ b/src/svgs/NewFillHeartIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const NewFillHeartIcon = ({ fill, ...restProps }: IconProps) => { +export const NewFillHeartIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/NewHeartIcon.tsx b/src/svgs/NewHeartIcon.tsx index 73b11014..f944c57e 100644 --- a/src/svgs/NewHeartIcon.tsx +++ b/src/svgs/NewHeartIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const NewHeartIcon = ({ fill, ...restProps }: IconProps) => { +export const NewHeartIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/NoArtworkIcon.tsx b/src/svgs/NoArtworkIcon.tsx index c21249b9..9de20f5a 100644 --- a/src/svgs/NoArtworkIcon.tsx +++ b/src/svgs/NoArtworkIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const NoArtworkIcon = ({ fill, ...restProps }: IconProps) => { +export const NoArtworkIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/NoImageIcon.tsx b/src/svgs/NoImageIcon.tsx index e8c17f85..7d7abd6d 100644 --- a/src/svgs/NoImageIcon.tsx +++ b/src/svgs/NoImageIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const NoImageIcon = ({ fill, ...restProps }: IconProps) => { +export const NoImageIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/PageIcon.tsx b/src/svgs/PageIcon.tsx index 50df9902..be3676d6 100644 --- a/src/svgs/PageIcon.tsx +++ b/src/svgs/PageIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const PageIcon = ({ fill, ...restProps }: IconProps) => { +export const PageIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/Payment2Icon.tsx b/src/svgs/Payment2Icon.tsx index 8b16c624..da20c341 100644 --- a/src/svgs/Payment2Icon.tsx +++ b/src/svgs/Payment2Icon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const Payment2Icon = ({ fill, ...restProps }: IconProps) => { +export const Payment2Icon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/PaymentIcon.tsx b/src/svgs/PaymentIcon.tsx index 2e45d217..2f33d6e8 100644 --- a/src/svgs/PaymentIcon.tsx +++ b/src/svgs/PaymentIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const PaymentIcon = ({ fill, ...restProps }: IconProps) => { +export const PaymentIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/PersonIcon.tsx b/src/svgs/PersonIcon.tsx index 1525ba3d..972df07f 100644 --- a/src/svgs/PersonIcon.tsx +++ b/src/svgs/PersonIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const PersonIcon = ({ fill, ...restProps }: IconProps) => { +export const PersonIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/PublicationIcon.tsx b/src/svgs/PublicationIcon.tsx index 2cd797d7..825d7e2a 100644 --- a/src/svgs/PublicationIcon.tsx +++ b/src/svgs/PublicationIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const PublicationIcon = ({ fill, ...restProps }: IconProps) => { +export const PublicationIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/QuestionCircleIcon.tsx b/src/svgs/QuestionCircleIcon.tsx index 603f4779..a18cc96d 100644 --- a/src/svgs/QuestionCircleIcon.tsx +++ b/src/svgs/QuestionCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const QuestionCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const QuestionCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ReloadIcon.tsx b/src/svgs/ReloadIcon.tsx index 8b42fe8a..9de3f156 100644 --- a/src/svgs/ReloadIcon.tsx +++ b/src/svgs/ReloadIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ReloadIcon = ({ fill, ...restProps }: IconProps) => { +export const ReloadIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/SecureLockIcon.tsx b/src/svgs/SecureLockIcon.tsx index 753faf50..3b88fbcd 100644 --- a/src/svgs/SecureLockIcon.tsx +++ b/src/svgs/SecureLockIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const SecureLockIcon = ({ fill, ...restProps }: IconProps) => { +export const SecureLockIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/SettingsIcon.tsx b/src/svgs/SettingsIcon.tsx index 92788cbb..5ffbe6d7 100644 --- a/src/svgs/SettingsIcon.tsx +++ b/src/svgs/SettingsIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const SettingsIcon = ({ fill, ...restProps }: IconProps) => { +export const SettingsIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ShareIcon.tsx b/src/svgs/ShareIcon.tsx index 64b352bb..0c829901 100644 --- a/src/svgs/ShareIcon.tsx +++ b/src/svgs/ShareIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ShareIcon = ({ fill, ...restProps }: IconProps) => { +export const ShareIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ShieldFilledIcon.tsx b/src/svgs/ShieldFilledIcon.tsx index 66c9f1a6..39779f3c 100644 --- a/src/svgs/ShieldFilledIcon.tsx +++ b/src/svgs/ShieldFilledIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const ShieldFilledIcon = ({ fill, ...restProps }: IconProps) => { +export const ShieldFilledIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/ShieldIcon.tsx b/src/svgs/ShieldIcon.tsx index e2469fbb..7e28d6f6 100644 --- a/src/svgs/ShieldIcon.tsx +++ b/src/svgs/ShieldIcon.tsx @@ -9,7 +9,7 @@ type ShieldIconProps = IconProps & { export const ShieldIcon = ({ checkColor = "blue100", - shieldColor = "onBackground", + shieldColor = "black100", width = 22, height = 22, fill, diff --git a/src/svgs/StarCircleFill.tsx b/src/svgs/StarCircleFill.tsx index 94fc3123..e7c3de65 100644 --- a/src/svgs/StarCircleFill.tsx +++ b/src/svgs/StarCircleFill.tsx @@ -1,7 +1,7 @@ import { Icon, Circle, IconProps, Mask, Path, Rect } from "./Icon" import { useColor } from "../utils/hooks" -export const StarCircleFill = ({ fill, ...restProps }: IconProps) => { +export const StarCircleFill = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( @@ -12,7 +12,7 @@ export const StarCircleFill = ({ fill, ...restProps }: IconProps) => { y="0" width="20" height="20" - fill="black" + fill={color("black100")} > { +export const StarCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/Stopwatch.tsx b/src/svgs/Stopwatch.tsx index d1695e87..0ddc206f 100644 --- a/src/svgs/Stopwatch.tsx +++ b/src/svgs/Stopwatch.tsx @@ -1,13 +1,13 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const Stopwatch = ({ fill, ...restProps }: IconProps) => { +export const Stopwatch = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( ) diff --git a/src/svgs/Tag2Icon.tsx b/src/svgs/Tag2Icon.tsx index c518e426..4ccbc7b1 100644 --- a/src/svgs/Tag2Icon.tsx +++ b/src/svgs/Tag2Icon.tsx @@ -2,7 +2,7 @@ import { ClipPath, Defs } from "react-native-svg" import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const Tag2Icon = ({ fill, ...restProps }: IconProps) => { +export const Tag2Icon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/TagIcon.tsx b/src/svgs/TagIcon.tsx index c370779d..a4f304ae 100644 --- a/src/svgs/TagIcon.tsx +++ b/src/svgs/TagIcon.tsx @@ -1,7 +1,7 @@ import { Circle, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const TagIcon = ({ fill, ...restProps }: IconProps) => { +export const TagIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/TimerIcon.tsx b/src/svgs/TimerIcon.tsx index 3ec5f1be..b0f9d58c 100644 --- a/src/svgs/TimerIcon.tsx +++ b/src/svgs/TimerIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const TimerIcon = ({ fill, ...restProps }: IconProps) => { +export const TimerIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/TopEmergingIcon.tsx b/src/svgs/TopEmergingIcon.tsx index c3856232..50866af3 100644 --- a/src/svgs/TopEmergingIcon.tsx +++ b/src/svgs/TopEmergingIcon.tsx @@ -1,7 +1,7 @@ import { G, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const TopEmergingIcon = ({ fill, ...restProps }: IconProps) => { +export const TopEmergingIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/TrashIcon.tsx b/src/svgs/TrashIcon.tsx index 50b1fe4f..77f1af0c 100644 --- a/src/svgs/TrashIcon.tsx +++ b/src/svgs/TrashIcon.tsx @@ -1,10 +1,10 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const TrashIcon = ({ fill, ...restprops }: IconProps) => { +export const TrashIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( - + { +export const TrendingIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( - + { +export const TriangleDown = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( @@ -9,7 +9,7 @@ export const TriangleDown = ({ fill, ...restProps }: IconProps) => { fillRule="evenodd" clip-rule="evenodd" d="M5.5 6L0 0L11 0L5.5 6Z" - fill={color(fill) ?? "black"} + fill={color(fill) ?? color("black100")} /> ) diff --git a/src/svgs/TwitterIcon.tsx b/src/svgs/TwitterIcon.tsx index c58ff758..0a795a69 100644 --- a/src/svgs/TwitterIcon.tsx +++ b/src/svgs/TwitterIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const TwitterIcon = ({ fill, ...restProps }: IconProps) => { +export const TwitterIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/UserMultiIcon.tsx b/src/svgs/UserMultiIcon.tsx index 3ae08155..b3a4ae3d 100644 --- a/src/svgs/UserMultiIcon.tsx +++ b/src/svgs/UserMultiIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const UserMultiIcon = ({ fill, ...restProps }: IconProps) => { +export const UserMultiIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/UserSingleIcon.tsx b/src/svgs/UserSingleIcon.tsx index 2e192c5a..cc00d3c2 100644 --- a/src/svgs/UserSingleIcon.tsx +++ b/src/svgs/UserSingleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const UserSingleIcon = ({ fill, ...restProps }: IconProps) => { +export const UserSingleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/VerifiedIcon.tsx b/src/svgs/VerifiedIcon.tsx index e33da27b..e657cabc 100644 --- a/src/svgs/VerifiedIcon.tsx +++ b/src/svgs/VerifiedIcon.tsx @@ -1,14 +1,14 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const VerifiedIcon = ({ fill, ...restProps }: IconProps) => { +export const VerifiedIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( ) diff --git a/src/svgs/VerifiedPersonIcon.tsx b/src/svgs/VerifiedPersonIcon.tsx index 6aac44a5..1dd23eb1 100644 --- a/src/svgs/VerifiedPersonIcon.tsx +++ b/src/svgs/VerifiedPersonIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const VerifiedPersonIcon = ({ fill, ...restProps }: IconProps) => { +export const VerifiedPersonIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/WhatsAppAppIcon.tsx b/src/svgs/WhatsAppAppIcon.tsx index 1e00b10f..6b876cad 100644 --- a/src/svgs/WhatsAppAppIcon.tsx +++ b/src/svgs/WhatsAppAppIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path, Rect } from "./Icon" import { Flex } from "../elements/Flex" -export const WhatsAppAppIcon = ({ fill, ...restProps }: IconProps) => ( +export const WhatsAppAppIcon = ({ fill = "black100", ...restProps }: IconProps) => ( diff --git a/src/svgs/WorldGlobeCircleIcon.tsx b/src/svgs/WorldGlobeCircleIcon.tsx index c308af46..5cc93525 100644 --- a/src/svgs/WorldGlobeCircleIcon.tsx +++ b/src/svgs/WorldGlobeCircleIcon.tsx @@ -1,7 +1,7 @@ import { Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const WorldGlobeCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const WorldGlobeCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( diff --git a/src/svgs/XCircleIcon.tsx b/src/svgs/XCircleIcon.tsx index 497f3577..03575a79 100644 --- a/src/svgs/XCircleIcon.tsx +++ b/src/svgs/XCircleIcon.tsx @@ -1,11 +1,11 @@ import { Circle, Icon, IconProps, Path } from "./Icon" import { useColor } from "../utils/hooks" -export const XCircleIcon = ({ fill, ...restProps }: IconProps) => { +export const XCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => { const color = useColor() return ( - + ( const name = icon[0] return ( - + {name} diff --git a/src/tokens.ts b/src/tokens.ts index 3b32b40f..4ba3f8ad 100644 --- a/src/tokens.ts +++ b/src/tokens.ts @@ -6,6 +6,7 @@ import { THEME } from "@artsy/palette-tokens" import { SpacingUnit as SpacingUnitNumbers } from "@artsy/palette-tokens/dist/themes/v3" +import { THEME_DARK } from "@artsy/palette-tokens/dist/themes/v3Dark" import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3" import { Color, ColorDSValue, ColorLayerName, SpacingUnit } from "./types" import { @@ -109,27 +110,28 @@ const v3light: ThemeWithDarkModeType = { const v3dark: ThemeWithDarkModeType = { ...v3, colors: { - ...v3.colors, - background: colors.black100, - onBackground: colors.white100, - onBackgroundHigh: colors.white100, - onBackgroundMedium: colors.black30, - onBackgroundLow: colors.black60, + ...THEME_DARK.colors, + devpurple: "rgb(136, 82, 237)", + background: THEME_DARK.colors.black100, + onBackground: THEME_DARK.colors.white100, + onBackgroundHigh: THEME_DARK.colors.white100, + onBackgroundMedium: THEME_DARK.colors.black30, + onBackgroundLow: THEME_DARK.colors.black60, surface: "#333", - onSurface: colors.white100, - onSurfaceHigh: colors.white100, - onSurfaceMedium: colors.black60, + onSurface: THEME_DARK.colors.white100, + onSurfaceHigh: THEME_DARK.colors.white100, + onSurfaceMedium: THEME_DARK.colors.black60, onSurfaceLow: "#555", - primary: colors.white100, - onPrimaryHigh: colors.black100, - onPrimaryMedium: colors.black60, - onPrimaryLow: colors.black60, - secondary: colors.black60, - onSecondaryHigh: colors.white100, - onSecondaryMedium: colors.black5, - onSecondaryLow: colors.black5, - brand: colors.blue100, - onBrand: colors.white100, + primary: THEME_DARK.colors.white100, + onPrimaryHigh: THEME_DARK.colors.black100, + onPrimaryMedium: THEME_DARK.colors.black60, + onPrimaryLow: THEME_DARK.colors.black60, + secondary: THEME_DARK.colors.black60, + onSecondaryHigh: THEME_DARK.colors.white100, + onSecondaryMedium: THEME_DARK.colors.black5, + onSecondaryLow: THEME_DARK.colors.black5, + brand: THEME_DARK.colors.blue100, + onBrand: THEME_DARK.colors.white100, }, } diff --git a/src/utils/colors.stories.tsx b/src/utils/colors.stories.tsx index 486c36e8..90e49629 100644 --- a/src/utils/colors.stories.tsx +++ b/src/utils/colors.stories.tsx @@ -94,8 +94,8 @@ export const All = () => ( - - + + diff --git a/src/utils/space.stories.tsx b/src/utils/space.stories.tsx index 4a076760..e8abf6de 100644 --- a/src/utils/space.stories.tsx +++ b/src/utils/space.stories.tsx @@ -9,7 +9,7 @@ const SpaceLine = ({ space: theSpace }: { space: SpacingUnitDSValueNumber }) => return ( - {`${theSpace} ${bullet} ${space(theSpace as any)}px`} + {`${theSpace} ${bullet} ${space(theSpace as any)}px`} ) } From 5396fdd78d05c4a00b9c3e2388796f3b38bf70c4 Mon Sep 17 00:00:00 2001 From: Mounir Dhahri Date: Tue, 21 Jan 2025 17:45:16 +0100 Subject: [PATCH 2/3] fea: support dark mode: update tokens and background --- src/elements/Screen/Body.tsx | 2 +- src/elements/Screen/BottomView.tsx | 2 +- src/elements/Screen/FloatingHeader.tsx | 1 + src/elements/Screen/Header.tsx | 2 +- src/elements/Screen/ScreenBase.tsx | 8 +------- src/elements/Screen/StickySubHeader.tsx | 2 +- src/elements/Tabs/TabFlashList.tsx | 3 +++ src/elements/Tabs/TabFlatList.tsx | 3 +++ src/elements/Tabs/TabMasonry.tsx | 3 +++ src/elements/Tabs/TabScrollView.tsx | 3 +++ src/elements/Tabs/TabsContainer.tsx | 2 +- src/svgs/Icon.tsx | 2 +- src/tokens.ts | 8 +++++++- 13 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/elements/Screen/Body.tsx b/src/elements/Screen/Body.tsx index afc12e8c..c05b505b 100644 --- a/src/elements/Screen/Body.tsx +++ b/src/elements/Screen/Body.tsx @@ -24,7 +24,7 @@ export const Body: React.FC = ({ ? {} : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" })} > - + {scroll ? {children} : children} diff --git a/src/elements/Screen/BottomView.tsx b/src/elements/Screen/BottomView.tsx index 01c9da88..13c27be2 100644 --- a/src/elements/Screen/BottomView.tsx +++ b/src/elements/Screen/BottomView.tsx @@ -23,7 +23,7 @@ export const BottomView: React.FC = ({ children, darkMode }) => }} pointerEvents="none" /> - + {children} diff --git a/src/elements/Screen/FloatingHeader.tsx b/src/elements/Screen/FloatingHeader.tsx index 9096ffd7..6e4d819c 100644 --- a/src/elements/Screen/FloatingHeader.tsx +++ b/src/elements/Screen/FloatingHeader.tsx @@ -28,6 +28,7 @@ export const FloatingHeader: React.FC = ({ py={1} flexDirection="row" alignItems="center" + backgroundColor="background" {...flexProps} > diff --git a/src/elements/Screen/Header.tsx b/src/elements/Screen/Header.tsx index 370b3008..2daf24b4 100644 --- a/src/elements/Screen/Header.tsx +++ b/src/elements/Screen/Header.tsx @@ -46,7 +46,7 @@ export const Header: React.FC = ({ flexDirection="row" px={2} zIndex={ZINDEX.header} - backgroundColor="white100" + backgroundColor="background" alignItems="center" > diff --git a/src/elements/Screen/ScreenBase.tsx b/src/elements/Screen/ScreenBase.tsx index 648a044c..f39125c9 100644 --- a/src/elements/Screen/ScreenBase.tsx +++ b/src/elements/Screen/ScreenBase.tsx @@ -16,12 +16,7 @@ export const ScreenBase: React.FC = ({ return ( - + {children} @@ -40,7 +35,6 @@ const SafeAreaCover: React.FC<{ safeArea: boolean }> = ({ safeArea }) => { right={0} top={safeArea ? -insets.top : 0} height={insets.top} - backgroundColor="white100" /> ) } diff --git a/src/elements/Screen/StickySubHeader.tsx b/src/elements/Screen/StickySubHeader.tsx index ea50ec6f..135b8e94 100644 --- a/src/elements/Screen/StickySubHeader.tsx +++ b/src/elements/Screen/StickySubHeader.tsx @@ -68,7 +68,7 @@ export const StickySubHeader: React.FC = ({ handleLayout(event)} position="absolute" - backgroundColor="white100" + backgroundColor="background" zIndex={-1000} style={sharedStyles} > diff --git a/src/elements/Tabs/TabFlashList.tsx b/src/elements/Tabs/TabFlashList.tsx index 612468b1..58ad8ab3 100644 --- a/src/elements/Tabs/TabFlashList.tsx +++ b/src/elements/Tabs/TabFlashList.tsx @@ -1,12 +1,14 @@ import { FlashListProps } from "@shopify/flash-list" import { Tabs } from "react-native-collapsible-tab-view" import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll" +import { useColor } from "../../utils/hooks" import { useSpace } from "../../utils/hooks/useSpace" export function TabFlashList(props: FlashListProps) { useListenForTabContentScroll() const space = useSpace() + const color = useColor() const contentContainerStyle = (props.contentContainerStyle ?? {}) as object @@ -14,6 +16,7 @@ export function TabFlashList(props: FlashListProps) { (props: FlatListProps) { useListenForTabContentScroll() const space = useSpace() + const color = useColor() const contentContainerStyle = (props.contentContainerStyle ?? {}) as object @@ -14,6 +16,7 @@ export function TabFlatList(props: FlatListProps) { ( @@ -12,6 +13,7 @@ export function TabMasonry( useListenForTabContentScroll() const space = useSpace() + const color = useColor() const contentContainerStyle = (props.contentContainerStyle ?? {}) as object @@ -19,6 +21,7 @@ export function TabMasonry( = (props) => { useListenForTabContentScroll() const space = useSpace() + const color = useColor() const contentContainerStyle = (props.contentContainerStyle ?? {}) as object @@ -18,6 +20,7 @@ export const TabScrollView: React.FC = (props) => { accessibilityTraits={undefined} contentContainerStyle={{ marginHorizontal: space(2), + backgroundColor: color("background"), ...contentContainerStyle, }} {...props} diff --git a/src/elements/Tabs/TabsContainer.tsx b/src/elements/Tabs/TabsContainer.tsx index 427898f7..3a3fc88d 100644 --- a/src/elements/Tabs/TabsContainer.tsx +++ b/src/elements/Tabs/TabsContainer.tsx @@ -49,7 +49,7 @@ export const TabsContainer: React.FC = ({ shadowOpacity: 0, shadowRadius: 0, elevation: 0, - backgroundColor: color("white100"), + backgroundColor: color("background"), }} initialTabName={initialTabName} containerStyle={{ diff --git a/src/svgs/Icon.tsx b/src/svgs/Icon.tsx index d31bee44..39f9cff2 100644 --- a/src/svgs/Icon.tsx +++ b/src/svgs/Icon.tsx @@ -54,7 +54,7 @@ export const Icon = styled(ScaledSvg)` Icon.defaultProps = { // @ts-ignore - fill: "black", + fill: "black100", height: DEFAULT_SIZE, width: DEFAULT_SIZE, } diff --git a/src/tokens.ts b/src/tokens.ts index 4ba3f8ad..7ebf184e 100644 --- a/src/tokens.ts +++ b/src/tokens.ts @@ -111,8 +111,14 @@ const v3dark: ThemeWithDarkModeType = { ...v3, colors: { ...THEME_DARK.colors, + black10: v3.colors.black60, + black30: v3.colors.black60, + black60: v3.colors.black30, + blue100: "#5E6EFF", + red100: "#E44738", + green100: "#16C193", devpurple: "rgb(136, 82, 237)", - background: THEME_DARK.colors.black100, + background: "#121212", onBackground: THEME_DARK.colors.white100, onBackgroundHigh: THEME_DARK.colors.white100, onBackgroundMedium: THEME_DARK.colors.black30, From 14bbd97ebbe7c8d227d4a2a74a21081da9370ee9 Mon Sep 17 00:00:00 2001 From: Mounir Dhahri Date: Wed, 22 Jan 2025 16:22:12 +0100 Subject: [PATCH 3/3] chore: improve colours --- src/elements/Input/Input.tsx | 1084 +++++++++-------- src/elements/Input/helpers.ts | 173 +-- src/elements/Message/Message.tsx | 8 +- src/elements/Screen/ScreenBase.tsx | 8 +- src/elements/SearchInput/RoundSearchInput.tsx | 2 + src/elements/SearchInput/SearchInput.tsx | 6 + src/tokens.ts | 5 +- 7 files changed, 665 insertions(+), 621 deletions(-) diff --git a/src/elements/Input/Input.tsx b/src/elements/Input/Input.tsx index f61a152c..aae63b3b 100644 --- a/src/elements/Input/Input.tsx +++ b/src/elements/Input/Input.tsx @@ -7,6 +7,7 @@ import isString from "lodash/isString" import { RefObject, forwardRef, + memo, useCallback, useEffect, useImperativeHandle, @@ -26,7 +27,13 @@ import { } from "react-native" import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated" import styled from "styled-components" -import { INPUT_VARIANTS, InputState, InputVariant, getInputState, getInputVariant } from "./helpers" +import { + getInputVariants, + InputState, + InputVariant, + getInputState, + getInputVariant, +} from "./helpers" import { maskValue, unmaskText } from "./maskValue" import { EyeClosedIcon, EyeOpenedIcon, TriangleDown, XCircleIcon } from "../../svgs" import { useTheme } from "../../utils/hooks" @@ -126,610 +133,621 @@ export interface InputRef { clear: () => void } -export const Input = forwardRef( - ( - { - addClearListener = false, - defaultValue, - disabled = false, - enableClearButton = false, - fixedRightPlaceholder, - hintText = "What's this?", - icon, - leftComponentWidth = LEFT_COMPONENT_WIDTH, - mask, - selectComponentWidth = SELECT_COMPONENT_WIDTH, - loading = false, - onBlur, - onChangeText, - onClear, - onFocus, - onSelectTap, - placeholder, - secureTextEntry = false, - style: styleProp = {}, - unit, - value: propValue, - selectDisplayLabel, - ...props - }, - ref - ) => { - const { color, theme, space } = useTheme() - - const [focused, setIsFocused] = useState(false) - const [delayedFocused, setDelayedFocused] = useState(false) - - const [value, setValue] = useState( - maskValue({ - currentValue: propValue ?? defaultValue, - mask: mask, - }) - ) +export const Input = memo( + forwardRef( + ( + { + addClearListener = false, + defaultValue, + disabled = false, + enableClearButton = false, + fixedRightPlaceholder, + hintText = "What's this?", + icon, + leftComponentWidth = LEFT_COMPONENT_WIDTH, + mask, + selectComponentWidth = SELECT_COMPONENT_WIDTH, + loading = false, + onBlur, + onChangeText, + onClear, + onFocus, + onSelectTap, + placeholder, + secureTextEntry = false, + style: styleProp = {}, + unit, + value: propValue, + selectDisplayLabel, + ...props + }, + ref + ) => { + const { color, theme, space } = useTheme() + + const [focused, setIsFocused] = useState(false) + const [delayedFocused, setDelayedFocused] = useState(false) + + const [value, setValue] = useState( + maskValue({ + currentValue: propValue ?? defaultValue, + mask: mask, + }) + ) - const [showPassword, setShowPassword] = useState(!secureTextEntry) + const [showPassword, setShowPassword] = useState(!secureTextEntry) - const [inputWidth, setInputWidth] = useState(0) - const placeholderWidths = useRef([]) + const [inputWidth, setInputWidth] = useState(0) + const placeholderWidths = useRef([]) - const rightComponentRef = useRef(null) - const inputRef = useRef() + const rightComponentRef = useRef(null) + const inputRef = useRef() - const variant: InputVariant = getInputVariant({ - hasError: !!props.error, - disabled: disabled, - }) + const variant: InputVariant = getInputVariant({ + hasError: !!props.error, + disabled: disabled, + }) - const hasLeftComponent = useMemo( - () => !!unit || !!icon || !!onSelectTap, - [unit, icon, onSelectTap] - ) + const hasLeftComponent = useMemo( + () => !!unit || !!icon || !!onSelectTap, + [unit, icon, onSelectTap] + ) - const animatedState = useSharedValue( - getInputState({ - isFocused: !!focused, - value: value, - }) - ) + const animatedState = useSharedValue( + getInputState({ + isFocused: !!focused, + value: value, + }) + ) - useImperativeHandle(ref, () => inputRef.current as InputRef) + useImperativeHandle(ref, () => inputRef.current as InputRef) - useEffect(() => { - // If the prop value changes, update the local state - // This optimisation is not needed if no propValue has been specified - if (propValue !== undefined && propValue !== value) { - setValue(maskValue({ currentValue: propValue || "", mask })) - } - }, [propValue, value, mask]) + useEffect(() => { + // If the prop value changes, update the local state + // This optimisation is not needed if no propValue has been specified + if (propValue !== undefined && propValue !== value) { + setValue(maskValue({ currentValue: propValue || "", mask })) + } + }, [propValue, value, mask]) - useEffect(() => { - // If the mask value changes, update the value state to be formatted again - setValue(maskValue({ currentValue: value, mask })) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [mask]) + useEffect(() => { + // If the mask value changes, update the value state to be formatted again + setValue(maskValue({ currentValue: value, mask })) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mask]) - const fontFamily = theme.fonts.sans.regular + const fontFamily = theme.fonts.sans.regular - useEffect(() => { - /* to make the font work for secure text inputs, + useEffect(() => { + /* to make the font work for secure text inputs, see https://github.com/facebook/react-native/issues/30123#issuecomment-711076098 */ - inputRef.current?.setNativeProps({ - style: { fontFamily }, - }) - }, [fontFamily]) + inputRef.current?.setNativeProps({ + style: { fontFamily }, + }) + }, [fontFamily]) + + useEffect(() => { + // We don't need to delay hiding the placeholder + if (!focused && delayedFocused) { + setDelayedFocused(false) + } - useEffect(() => { - // We don't need to delay hiding the placeholder - if (!focused && delayedFocused) { - setDelayedFocused(false) - } + let delayFocusedTimeout: NodeJS.Timeout - let delayFocusedTimeout: NodeJS.Timeout + // We only want to show the placeholder after we're sure the title animation has finished + if (!delayedFocused && focused) { + delayFocusedTimeout = setTimeout(() => { + setDelayedFocused(focused) + }, 200) + } - // We only want to show the placeholder after we're sure the title animation has finished - if (!delayedFocused && focused) { - delayFocusedTimeout = setTimeout(() => { - setDelayedFocused(focused) - }, 200) - } + return () => { + if (delayFocusedTimeout) { + clearTimeout(delayFocusedTimeout) + } + } + }, [focused, delayedFocused]) + + const handleChangeText = useCallback( + (text: string) => { + if (mask) { + const newText = + maskValue({ currentValue: text, mask: mask, previousValue: value }) || "" + setValue(newText) + onChangeText?.(newText, unmaskText(text)) + } else { + setValue(text) + onChangeText?.(text) + } + }, + [onChangeText, value, mask] + ) - return () => { - if (delayFocusedTimeout) { - clearTimeout(delayFocusedTimeout) + const handleClear = useCallback(() => { + LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 200 }) + inputRef.current?.clear() + handleChangeText("") + onClear?.() + }, [onClear, handleChangeText]) + + useEffect(() => { + if (!addClearListener) { + return } - } - }, [focused, delayedFocused]) - - const handleChangeText = useCallback( - (text: string) => { - if (mask) { - const newText = maskValue({ currentValue: text, mask: mask, previousValue: value }) || "" - setValue(newText) - onChangeText?.(newText, unmaskText(text)) - } else { - setValue(text) - onChangeText?.(text) + + inputEvents.addListener("clear", handleClear) + + return () => { + inputEvents.removeListener("clear", handleClear) } - }, - [onChangeText, value, mask] - ) - - const handleClear = useCallback(() => { - LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 200 }) - inputRef.current?.clear() - handleChangeText("") - onClear?.() - }, [onClear, handleChangeText]) - - useEffect(() => { - if (!addClearListener) { - return - } + }, [addClearListener, handleClear]) - inputEvents.addListener("clear", handleClear) + const { width: rightComponentWidth = 0 } = useMeasure({ ref: rightComponentRef }) - return () => { - inputEvents.removeListener("clear", handleClear) - } - }, [addClearListener, handleClear]) + const textInputPaddingLeft = useMemo(() => { + if (!hasLeftComponent) { + return HORIZONTAL_PADDING + } - const { width: rightComponentWidth = 0 } = useMeasure({ ref: rightComponentRef }) + if (onSelectTap) { + return selectComponentWidth + HORIZONTAL_PADDING + } - const textInputPaddingLeft = useMemo(() => { - if (!hasLeftComponent) { - return HORIZONTAL_PADDING - } + return leftComponentWidth + }, [hasLeftComponent, leftComponentWidth, onSelectTap, selectComponentWidth]) + + const styles = useMemo(() => { + return { + fontFamily: fontFamily, + fontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), + minHeight: props.multiline ? MULTILINE_INPUT_MIN_HEIGHT : INPUT_MIN_HEIGHT, + maxHeight: props.multiline ? MULTILINE_INPUT_MAX_HEIGHT : undefined, + height: props.multiline ? MULTILINE_INPUT_MIN_HEIGHT : undefined, + borderWidth: 1, + paddingRight: rightComponentWidth + HORIZONTAL_PADDING, + paddingLeft: textInputPaddingLeft, + ...(styleProp as {}), + } + }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]) + + const labelStyles = useMemo(() => { + return { + // this is neeeded too make sure the label is on top of the input + backgroundColor: color("background"), + marginRight: space(0.5), + zIndex: 100, + fontFamily: fontFamily, + } + }, [fontFamily, space, color]) + + const inputVariants = getInputVariants(theme) + + useEffect(() => { + const inputState = getInputState({ + isFocused: !!focused, + value: value, + }) + animatedState.set(() => inputState) + }, [value, focused, animatedState]) + + const textInputAnimatedStyles = useAnimatedStyle(() => { + return { + borderColor: withTiming(inputVariants[variant][animatedState.get()].inputBorderColor), + color: withTiming(inputVariants[variant][animatedState.get()].inputTextColor), + } + }) - if (onSelectTap) { - return selectComponentWidth + HORIZONTAL_PADDING - } + const labelAnimatedStyles = useAnimatedStyle(() => { + const hasValue = !!value - return leftComponentWidth - }, [hasLeftComponent, leftComponentWidth, onSelectTap, selectComponentWidth]) - - const styles = useMemo(() => { - return { - fontFamily: fontFamily, - fontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), - minHeight: props.multiline ? MULTILINE_INPUT_MIN_HEIGHT : INPUT_MIN_HEIGHT, - maxHeight: props.multiline ? MULTILINE_INPUT_MAX_HEIGHT : undefined, - height: props.multiline ? MULTILINE_INPUT_MIN_HEIGHT : undefined, - borderWidth: 1, - paddingRight: rightComponentWidth + HORIZONTAL_PADDING, - paddingLeft: textInputPaddingLeft, - ...(styleProp as {}), - } - }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]) - - const labelStyles = useMemo(() => { - return { - // this is neeeded too make sure the label is on top of the input - backgroundColor: "white", - marginRight: space(0.5), - zIndex: 100, - fontFamily: fontFamily, - } - }, [fontFamily, space]) + // Only add a margin if the input has a left component and it is not focused and has no value + const marginLeft = + textInputPaddingLeft && !focused && !hasValue + ? textInputPaddingLeft - 3 + : HORIZONTAL_PADDING - useEffect(() => { - const inputState = getInputState({ - isFocused: !!focused, - value: value, + return { + color: withTiming(inputVariants[variant][animatedState.get()].labelColor), + top: withTiming(inputVariants[variant][animatedState.get()].labelTop), + fontSize: withTiming(inputVariants[variant][animatedState.get()].labelFontSize), + marginLeft: withTiming(marginLeft), + } }) - animatedState.set(() => inputState) - }, [value, focused, animatedState]) - const textInputAnimatedStyles = useAnimatedStyle(() => { - return { - borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.get()].inputBorderColor), - color: withTiming(INPUT_VARIANTS[variant][animatedState.get()].inputTextColor), - } - }) - - const labelAnimatedStyles = useAnimatedStyle(() => { - const hasValue = !!value - - // Only add a margin if the input has a left component and it is not focused and has no value - const marginLeft = - textInputPaddingLeft && !focused && !hasValue - ? textInputPaddingLeft - 3 - : HORIZONTAL_PADDING - - return { - color: withTiming(INPUT_VARIANTS[variant][animatedState.get()].labelColor), - top: withTiming(INPUT_VARIANTS[variant][animatedState.get()].labelTop), - fontSize: withTiming(INPUT_VARIANTS[variant][animatedState.get()].labelFontSize), - marginLeft: withTiming(marginLeft), - } - }) + const selectComponentStyles = useAnimatedStyle(() => { + return { + borderColor: withTiming(inputVariants[variant][animatedState.get()].inputBorderColor), + } + }) - const selectComponentStyles = useAnimatedStyle(() => { - return { - borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.get()].inputBorderColor), + const handleFocus = (e: NativeSyntheticEvent) => { + setIsFocused(true) + onFocus?.(e) } - }) - const handleFocus = (e: NativeSyntheticEvent) => { - setIsFocused(true) - onFocus?.(e) - } - - const handleBlur = (e: NativeSyntheticEvent) => { - setIsFocused(false) - onBlur?.(e) - } + const handleBlur = (e: NativeSyntheticEvent) => { + setIsFocused(false) + onBlur?.(e) + } - const hasTitle = !!props.title + const hasTitle = !!props.title - const renderLeftComponent = useCallback(() => { - const leftComponentSharedStyles: ViewProps["style"] = { - position: "absolute", - paddingHorizontal: HORIZONTAL_PADDING, - height: INPUT_MIN_HEIGHT, - top: hasTitle ? LABEL_HEIGHT : 0, - alignItems: "center", - zIndex: 100, - } + const renderLeftComponent = useCallback(() => { + const leftComponentSharedStyles: ViewProps["style"] = { + position: "absolute", + paddingHorizontal: HORIZONTAL_PADDING, + height: INPUT_MIN_HEIGHT, + top: hasTitle ? LABEL_HEIGHT : 0, + alignItems: "center", + zIndex: 100, + } - if (unit || icon) { - return ( - - {unit && ( - - {unit} - - )} - {icon} - - ) - } + if (unit || icon) { + return ( + + {unit && ( + + {unit} + + )} + {icon} + + ) + } - if (onSelectTap) { - return ( - - - {selectDisplayLabel} - - - - ) - } + + {selectDisplayLabel} + + + + ) + } - return null - }, [ - hasTitle, - unit, - icon, - onSelectTap, - leftComponentWidth, - disabled, - selectComponentWidth, - selectComponentStyles, - selectDisplayLabel, - ]) - - const renderRightComponent = useCallback(() => { - if (fixedRightPlaceholder) { - return ( - - {fixedRightPlaceholder} - - ) - } + return null + }, [ + hasTitle, + unit, + icon, + onSelectTap, + leftComponentWidth, + disabled, + selectComponentWidth, + selectComponentStyles, + selectDisplayLabel, + ]) + + const renderRightComponent = useCallback(() => { + if (fixedRightPlaceholder) { + return ( + + {fixedRightPlaceholder} + + ) + } - if (loading) { - return ( - - - - ) - } + if (loading) { + return ( + + + + ) + } - if (enableClearButton && value) { - return ( - - - - + + + + + ) + } + + if (secureTextEntry) { + return ( + + { + LayoutAnimation.configureNext({ + ...LayoutAnimation.Presets.easeInEaseOut, + duration: 200, + }) + setShowPassword(!showPassword) + }} + accessibilityLabel={showPassword ? "hide password button" : "show password button"} + hitSlop={{ bottom: 40, right: 40, left: 0, top: 40 }} + > + {!showPassword ? ( + + ) : ( + + )} + + + ) + } + + return null + }, [ + fixedRightPlaceholder, + loading, + enableClearButton, + value, + secureTextEntry, + hasTitle, + disabled, + color, + handleClear, + showPassword, + ]) + + const renderBottomComponent = useCallback(() => { + if (!!props.error) { + return ( + + {props.error} + + ) + } + + return ( + + {!!props.required || !!props.optional ? ( + + {!!props.required && "* Required"} + {!!props.optional && "* Optional"} + + ) : ( + // Adding this empty flex to make sure that the maxLength text is always on the right + + )} + {!!props.maxLength && !!props.showLimit && ( + + {(value || "").length} / {props.maxLength} + + )} ) - } + }, [props.error, props.maxLength, props.optional, props.required, props.showLimit, value]) + + const renderHint = useCallback(() => { + if (!props.onHintPress) { + return null + } - if (secureTextEntry) { return ( { - LayoutAnimation.configureNext({ - ...LayoutAnimation.Presets.easeInEaseOut, - duration: 200, - }) - setShowPassword(!showPassword) + onPress={props.onHintPress} + haptic="impactLight" + hitSlop={{ + top: 5, + right: 10, + bottom: 5, + left: 10, }} - accessibilityLabel={showPassword ? "hide password button" : "show password button"} - hitSlop={{ bottom: 40, right: 40, left: 0, top: 40 }} > - {!showPassword ? : } + + {hintText} + ) - } - - return null - }, [ - fixedRightPlaceholder, - loading, - enableClearButton, - value, - secureTextEntry, - hasTitle, - disabled, - color, - handleClear, - showPassword, - ]) - - const renderBottomComponent = useCallback(() => { - if (!!props.error) { - return ( - - {props.error} - - ) - } - - return ( - - {!!props.required || !!props.optional ? ( - - {!!props.required && "* Required"} - {!!props.optional && "* Optional"} - - ) : ( - // Adding this empty flex to make sure that the maxLength text is always on the right - - )} - {!!props.maxLength && !!props.showLimit && ( - - {(value || "").length} / {props.maxLength} - - )} - - ) - }, [props.error, props.maxLength, props.optional, props.required, props.showLimit, value]) - - const renderHint = useCallback(() => { - if (!props.onHintPress) { - return null - } + }, [hintText, props.onHintPress, space]) - return ( - - - - {hintText} - - - - ) - }, [hintText, props.onHintPress, space]) + const getPlatformSpecificPlaceholder = useCallback(() => { + if (!placeholder) { + return "" + } - const getPlatformSpecificPlaceholder = useCallback(() => { - if (!placeholder) { - return "" - } + if (Platform.OS === "ios") { + return isArray(placeholder) ? placeholder[0] : placeholder + } - if (Platform.OS === "ios") { - return isArray(placeholder) ? placeholder[0] : placeholder - } + // if it's android and we only have one string, return that string + if (isString(placeholder)) { + return placeholder + } + // otherwise, find a placeholder that has longest width that fits in the inputtext + const longestFittingStringIndex = placeholderWidths.current.findIndex( + (placeholderWidth) => { + return placeholderWidth <= inputWidth + } + ) + if (longestFittingStringIndex > -1) { + return placeholder[longestFittingStringIndex] + } - // if it's android and we only have one string, return that string - if (isString(placeholder)) { - return placeholder - } - // otherwise, find a placeholder that has longest width that fits in the inputtext - const longestFittingStringIndex = placeholderWidths.current.findIndex((placeholderWidth) => { - return placeholderWidth <= inputWidth - }) - if (longestFittingStringIndex > -1) { - return placeholder[longestFittingStringIndex] - } + // otherwise just return the shortest placeholder + return placeholder[placeholder.length - 1] + }, [inputWidth, placeholder]) - // otherwise just return the shortest placeholder - return placeholder[placeholder.length - 1] - }, [inputWidth, placeholder]) + const getPlaceholder = useCallback(() => { + // Show placeholder always if there is no title + // This is because we won't have a title animation + if (!props.title) { + return getPlatformSpecificPlaceholder() + } - const getPlaceholder = useCallback(() => { - // Show placeholder always if there is no title - // This is because we won't have a title animation - if (!props.title) { - return getPlatformSpecificPlaceholder() - } + // On blur, we want to show the placeholder immediately + if (delayedFocused) { + return getPlatformSpecificPlaceholder() + } - // On blur, we want to show the placeholder immediately - if (delayedFocused) { - return getPlatformSpecificPlaceholder() - } + // On focus, we want to show the placeholder after the title animation has finished + return "" + }, [delayedFocused, getPlatformSpecificPlaceholder, props.title]) - // On focus, we want to show the placeholder after the title animation has finished - return "" - }, [delayedFocused, getPlatformSpecificPlaceholder, props.title]) + const renderAnimatedTitle = useCallback(() => { + if (!props.title) { + return null + } - const renderAnimatedTitle = useCallback(() => { - if (!props.title) { - return null - } + return ( + + + {" "} + {props.title}{" "} + + + ) + }, [labelStyles, labelAnimatedStyles, props.title]) - return ( - - - {" "} - {props.title}{" "} - - - ) - }, [labelStyles, labelAnimatedStyles, props.title]) + const renderAndroidPlaceholderMeasuringHack = useCallback(() => { + if (Platform.OS === "ios" || !isArray(placeholder)) { + return null + } - const renderAndroidPlaceholderMeasuringHack = useCallback(() => { - if (Platform.OS === "ios" || !isArray(placeholder)) { - return null - } + // Do not render the hack if we have already measured the placeholder + if (placeholderWidths.current.length > 0) { + return null + } - // Do not render the hack if we have already measured the placeholder - if (placeholderWidths.current.length > 0) { - return null - } + return ( + + {placeholder.map((placeholderString, index) => ( + { + placeholderWidths.current[index] = event.nativeEvent.layout.width + }} + numberOfLines={1} + style={{ + ...styles, + }} + > + {placeholderString} + + ))} + + ) + }, [placeholder, styles]) return ( - - {placeholder.map((placeholderString, index) => ( - { - placeholderWidths.current[index] = event.nativeEvent.layout.width - }} - numberOfLines={1} - style={{ - ...styles, - }} - > - {placeholderString} - - ))} + + {renderAndroidPlaceholderMeasuringHack()} + + {renderHint()} + + {renderAnimatedTitle()} + + { + setInputWidth(event.nativeEvent.layout.width) + }} + scrollEnabled={props.multiline} + editable={!disabled} + textAlignVertical={props.multiline ? "top" : "center"} + ref={inputRef as RefObject} + placeholderTextColor={color("black60")} + placeholder={getPlaceholder()} + defaultValue={defaultValue} + secureTextEntry={!showPassword} + {...props} + /> + + {renderRightComponent()} + + {renderLeftComponent()} + + {/* Contains error and other data we display below the textinput */} + {renderBottomComponent()} ) - }, [placeholder, styles]) - - return ( - - {renderAndroidPlaceholderMeasuringHack()} - - {renderHint()} - - {renderAnimatedTitle()} - - { - setInputWidth(event.nativeEvent.layout.width) - }} - scrollEnabled={props.multiline} - editable={!disabled} - textAlignVertical={props.multiline ? "top" : "center"} - ref={inputRef as RefObject} - placeholderTextColor={color("black60")} - placeholder={getPlaceholder()} - defaultValue={defaultValue} - secureTextEntry={!showPassword} - {...props} - /> - - {renderRightComponent()} - - {renderLeftComponent()} - - {/* Contains error and other data we display below the textinput */} - {renderBottomComponent()} - - ) - } + } + ) ) const StyledInput = styled(TextInput)` diff --git a/src/elements/Input/helpers.ts b/src/elements/Input/helpers.ts index 86d52735..6a0c7c63 100644 --- a/src/elements/Input/helpers.ts +++ b/src/elements/Input/helpers.ts @@ -1,4 +1,5 @@ import { THEME } from "@artsy/palette-tokens" +import { ThemeType, ThemeWithDarkModeType } from "../../tokens" export const SHRINKED_LABEL_TOP = 13 export const EXPANDED_LABEL_TOP = 40 @@ -27,96 +28,104 @@ export type VariantState = { } } -const DEFAULT_VARIANT_STATES: VariantState = { - // Unfocused input with no value - untouched: { - inputBorderColor: THEME.colors.black30, - labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), - labelColor: THEME.colors.black60, - labelTop: EXPANDED_LABEL_TOP, - inputTextColor: THEME.colors.black100, - }, - // Unfocused input with value - touched: { - inputBorderColor: THEME.colors.black60, - labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), - labelColor: THEME.colors.black60, - labelTop: SHRINKED_LABEL_TOP, - inputTextColor: THEME.colors.black100, - }, - // Focused input with or without value - focused: { - inputBorderColor: THEME.colors.blue100, - labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), - labelColor: THEME.colors.blue100, - labelTop: SHRINKED_LABEL_TOP, - inputTextColor: THEME.colors.black100, - }, +const getDefaultVariantStates = (theme: ThemeType | ThemeWithDarkModeType): VariantState => { + return { + // Unfocused input with no value + untouched: { + inputBorderColor: theme.colors.black30, + labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), + labelColor: theme.colors.black60, + labelTop: EXPANDED_LABEL_TOP, + inputTextColor: theme.colors.black100, + }, + // Unfocused input with value + touched: { + inputBorderColor: theme.colors.black60, + labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), + labelColor: theme.colors.black60, + labelTop: SHRINKED_LABEL_TOP, + inputTextColor: theme.colors.black100, + }, + // Focused input with or without value + focused: { + inputBorderColor: theme.colors.blue100, + labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), + labelColor: theme.colors.blue100, + labelTop: SHRINKED_LABEL_TOP, + inputTextColor: theme.colors.black100, + }, + } } -const ERROR_VARIANT_STATES: VariantState = { - // Unfocused error input with no value - untouched: { - inputBorderColor: THEME.colors.red100, - labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), - labelColor: THEME.colors.red100, - labelTop: EXPANDED_LABEL_TOP, - inputTextColor: THEME.colors.black100, - }, - // Unfocused error input with value - touched: { - inputBorderColor: THEME.colors.red100, - labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), - labelColor: THEME.colors.red100, - labelTop: SHRINKED_LABEL_TOP, - inputTextColor: THEME.colors.black100, - }, - // Focused error input with or without value - focused: { - inputBorderColor: THEME.colors.red100, - labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), - labelColor: THEME.colors.red100, - labelTop: SHRINKED_LABEL_TOP, - inputTextColor: THEME.colors.black100, - }, +const getErrorVariantStates = (theme: ThemeType | ThemeWithDarkModeType): VariantState => { + return { + // Unfocused error input with no value + untouched: { + inputBorderColor: theme.colors.red100, + labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), + labelColor: theme.colors.red100, + labelTop: EXPANDED_LABEL_TOP, + inputTextColor: theme.colors.black100, + }, + // Unfocused error input with value + touched: { + inputBorderColor: theme.colors.red100, + labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), + labelColor: theme.colors.red100, + labelTop: SHRINKED_LABEL_TOP, + inputTextColor: theme.colors.black100, + }, + // Focused error input with or without value + focused: { + inputBorderColor: theme.colors.red100, + labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), + labelColor: theme.colors.red100, + labelTop: SHRINKED_LABEL_TOP, + inputTextColor: theme.colors.black100, + }, + } } -const DISABLED_VARIANT_STATES: VariantState = { - // Unfocused disabled input with no value - untouched: { - inputBorderColor: THEME.colors.black30, - labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), - labelColor: THEME.colors.black30, - labelTop: EXPANDED_LABEL_TOP, - inputTextColor: THEME.colors.black30, - }, - // Unfocused disabled input with value - touched: { - inputBorderColor: THEME.colors.black30, - labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), - labelColor: THEME.colors.black30, - labelTop: SHRINKED_LABEL_TOP, - inputTextColor: THEME.colors.black30, - }, - // Focused disabled input with or without value - // Adding this just to satisfy typescript because a disabled input can't be focused - focused: { - inputBorderColor: THEME.colors.black30, - labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), - labelColor: THEME.colors.black30, - labelTop: SHRINKED_LABEL_TOP, - inputTextColor: THEME.colors.black30, - }, +const getDisabledVariantStates = (theme: ThemeType | ThemeWithDarkModeType): VariantState => { + return { + // Unfocused disabled input with no value + untouched: { + inputBorderColor: theme.colors.black30, + labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10), + labelColor: theme.colors.black30, + labelTop: EXPANDED_LABEL_TOP, + inputTextColor: theme.colors.black30, + }, + // Unfocused disabled input with value + touched: { + inputBorderColor: theme.colors.black30, + labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), + labelColor: theme.colors.black30, + labelTop: SHRINKED_LABEL_TOP, + inputTextColor: theme.colors.black30, + }, + // Focused disabled input with or without value + // Adding this just to satisfy typescript because a disabled input can't be focused + focused: { + inputBorderColor: theme.colors.black30, + labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10), + labelColor: theme.colors.black30, + labelTop: SHRINKED_LABEL_TOP, + inputTextColor: theme.colors.black30, + }, + } } -export const INPUT_VARIANTS = { - default: DEFAULT_VARIANT_STATES, - error: ERROR_VARIANT_STATES, - disabled: DISABLED_VARIANT_STATES, +export const getInputVariants = (theme: ThemeType | ThemeWithDarkModeType) => { + return { + default: getDefaultVariantStates(theme), + error: getErrorVariantStates(theme), + disabled: getDisabledVariantStates(theme), + } } -export type InputState = keyof typeof DEFAULT_VARIANT_STATES -export type InputVariant = keyof typeof INPUT_VARIANTS +export type InputState = keyof ReturnType +export type InputVariant = keyof ReturnType export const getInputState = ({ isFocused, diff --git a/src/elements/Message/Message.tsx b/src/elements/Message/Message.tsx index 303678f7..ec895449 100644 --- a/src/elements/Message/Message.tsx +++ b/src/elements/Message/Message.tsx @@ -80,13 +80,13 @@ export const Message: React.FC = ({ )} {!!title && ( - + {title} )} {!!text && ( - + {text} )} @@ -139,7 +139,9 @@ const colors: Record< info: { background: "blue10", title: "blue100", - text: "black100", + // The text should be black regardless of the theme + // @ts-expect-error + text: "black", icon: "black100", }, success: { diff --git a/src/elements/Screen/ScreenBase.tsx b/src/elements/Screen/ScreenBase.tsx index f39125c9..e1a5961b 100644 --- a/src/elements/Screen/ScreenBase.tsx +++ b/src/elements/Screen/ScreenBase.tsx @@ -16,7 +16,12 @@ export const ScreenBase: React.FC = ({ return ( - + {children} @@ -35,6 +40,7 @@ const SafeAreaCover: React.FC<{ safeArea: boolean }> = ({ safeArea }) => { right={0} top={safeArea ? -insets.top : 0} height={insets.top} + backgroundColor="background" /> ) } diff --git a/src/elements/SearchInput/RoundSearchInput.tsx b/src/elements/SearchInput/RoundSearchInput.tsx index 440cbaa5..8eb238c9 100644 --- a/src/elements/SearchInput/RoundSearchInput.tsx +++ b/src/elements/SearchInput/RoundSearchInput.tsx @@ -41,6 +41,7 @@ export const RoundSearchInput: React.FC = ({ ...rest }) => { const theme = useTheme() + const ref = useRef(null) const [inputWidth, setInputWidth] = useState(0) const placeholderWidths = useRef([]) @@ -83,6 +84,7 @@ export const RoundSearchInput: React.FC = ({ fontFamily: theme.theme.fonts.sans.regular, fontSize: 16, lineHeight: 20, + color: color("black100"), } }, []) diff --git a/src/elements/SearchInput/SearchInput.tsx b/src/elements/SearchInput/SearchInput.tsx index 1ef335f7..d316b193 100644 --- a/src/elements/SearchInput/SearchInput.tsx +++ b/src/elements/SearchInput/SearchInput.tsx @@ -1,4 +1,5 @@ import { MagnifyingGlassIcon } from "../../svgs" +import { useColor } from "../../utils/hooks" import { Flex } from "../Flex" import { Input, InputProps } from "../Input" @@ -12,6 +13,8 @@ export const SearchInput = ({ onClear, ...props }: SearchInputProps) => { + const color = useColor() + return ( { onClear?.() }} + style={{ + color: color("black100"), + }} onChangeText={onChangeText} {...props} onFocus={(e) => { diff --git a/src/tokens.ts b/src/tokens.ts index 7ebf184e..c52d811d 100644 --- a/src/tokens.ts +++ b/src/tokens.ts @@ -114,9 +114,10 @@ const v3dark: ThemeWithDarkModeType = { black10: v3.colors.black60, black30: v3.colors.black60, black60: v3.colors.black30, - blue100: "#5E6EFF", + blue100: "#0F77FF", + blue10: "#E6E7F5", red100: "#E44738", - green100: "#16C193", + green100: "#019F73", devpurple: "rgb(136, 82, 237)", background: "#121212", onBackground: THEME_DARK.colors.white100,