From f6e58fe609920c690d1e6211eeca1383195e7609 Mon Sep 17 00:00:00 2001 From: Robin Pyon Date: Wed, 26 Jul 2023 23:18:42 +0100 Subject: [PATCH] fix: display color scheme-specific styles --- src/components/AssetMetadata/index.tsx | 60 ++++--- src/components/Browser/index.tsx | 5 +- src/components/CardAsset/index.tsx | 87 +++++---- src/components/CardUpload/index.tsx | 13 +- src/components/Controls/index.tsx | 3 +- src/components/DialogAssetEdit/index.tsx | 6 +- src/components/FileIcon/index.tsx | 20 ++- src/components/FormFieldInputTags/index.tsx | 5 +- src/components/Image/index.tsx | 7 +- src/components/OrderSelect/index.tsx | 12 +- src/components/PickedBar/index.tsx | 9 +- src/components/SearchFacet/index.tsx | 20 ++- src/components/SearchFacetNumber/index.tsx | 30 ++-- src/components/SearchFacetSelect/index.tsx | 52 +++--- src/components/SearchFacetString/index.tsx | 5 +- src/components/SearchFacetTags/index.tsx | 12 +- src/components/SearchFacets/index.tsx | 16 +- src/components/SearchFacetsControl/index.tsx | 5 +- src/components/TableHeader/index.tsx | 31 ++-- src/components/TableRowAsset/index.tsx | 72 +++++--- src/components/TableRowUpload/index.tsx | 11 +- src/components/Tag/index.tsx | 4 +- src/components/TagView/index.tsx | 15 +- src/components/TagViewHeader/index.tsx | 10 +- src/components/TagsPanel/index.tsx | 3 +- src/styled/GlobalStyles/index.tsx | 5 +- src/styled/react-select/creatable.tsx | 177 +++++++++---------- src/styled/react-select/single.tsx | 172 +++++++++--------- src/utils/getSchemeColor.ts | 43 +++++ 29 files changed, 512 insertions(+), 398 deletions(-) create mode 100644 src/utils/getSchemeColor.ts diff --git a/src/components/AssetMetadata/index.tsx b/src/components/AssetMetadata/index.tsx index 3818457a..4ba76a94 100644 --- a/src/components/AssetMetadata/index.tsx +++ b/src/components/AssetMetadata/index.tsx @@ -63,32 +63,40 @@ const AssetMetadata = (props: Props) => { {/* EXIF */} - {exif && ( - <> - {/* Divider */} - - - - {exif.ISO && } - {exif.FNumber && } - {exif.FocalLength && } - {exif.ExposureTime && ( - - )} - {exif.DateTimeOriginal && ( - - )} - - - - )} + {exif && + (exif.DateTimeOriginal || + exif.FNumber || + exif.FocalLength || + exif.ExposureTime || + exif.ISO) && ( + <> + {/* Divider */} + + + + {exif.ISO && } + {exif.FNumber && } + {exif.FocalLength && } + {exif.ExposureTime && ( + + )} + {exif.DateTimeOriginal && ( + + )} + + + + )} {/* Asset actions */} diff --git a/src/components/Browser/index.tsx b/src/components/Browser/index.tsx index 334f3854..074ff2f8 100644 --- a/src/components/Browser/index.tsx +++ b/src/components/Browser/index.tsx @@ -4,7 +4,7 @@ import {Asset, Tag} from '@types' import groq from 'groq' import React, {useEffect, useState} from 'react' import {useDispatch} from 'react-redux' -import type {AssetSourceComponentProps, SanityDocument} from 'sanity' +import {useColorScheme, type AssetSourceComponentProps, type SanityDocument} from 'sanity' import {TAG_DOCUMENT_NAME} from '../../constants' import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext' import useVersionedClient from '../../hooks/useVersionedClient' @@ -132,6 +132,7 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose const Browser = (props: Props) => { const client = useVersionedClient() + const {scheme} = useColorScheme() return ( { document={props?.document} selectedAssets={props?.selectedAssets} > - + diff --git a/src/components/CardAsset/index.tsx b/src/components/CardAsset/index.tsx index c66c20ae..34a359ee 100644 --- a/src/components/CardAsset/index.tsx +++ b/src/components/CardAsset/index.tsx @@ -1,8 +1,18 @@ -import {hues} from '@sanity/color' import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons' -import {Box, Checkbox, Container, Flex, Spinner, Text, Tooltip} from '@sanity/ui' +import { + Box, + Checkbox, + Container, + Flex, + Spinner, + Text, + Theme, + ThemeColorSchemeKey, + Tooltip +} from '@sanity/ui' import React, {memo, MouseEvent, RefObject} from 'react' import {useDispatch} from 'react-redux' +import {useColorScheme} from 'sanity' import styled, {css} from 'styled-components' import {PANEL_HEIGHT} from '../../constants' import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext' @@ -14,6 +24,7 @@ import imageDprUrl from '../../utils/imageDprUrl' import {isFileAsset, isImageAsset} from '../../utils/typeGuards' import FileIcon from '../FileIcon' import Image from '../Image' +import {getSchemeColor} from '../../utils/getSchemeColor' type Props = { id: string @@ -24,47 +35,49 @@ const CardWrapper = styled(Flex)` box-sizing: border-box; height: 100%; overflow: hidden; - padding: 2px; position: relative; width: 100%; ` -const CardContainer = styled(Flex)<{picked?: boolean; updating?: boolean}>` - border: 1px solid transparent; - height: 100%; - pointer-events: ${props => (props.updating ? 'none' : 'auto')}; - position: relative; - transition: all 300ms; - user-select: none; - width: 100%; +const CardContainer = styled(Flex)<{picked?: boolean; theme: Theme; updating?: boolean}>( + ({picked, theme, updating}) => { + return css` + border: 1px solid transparent; + height: 100%; + pointer-events: ${updating ? 'none' : 'auto'}; + position: relative; + transition: all 300ms; + user-select: none; + width: 100%; - border: ${props => - props.picked - ? `1px solid ${props.theme.sanity.color.spot.orange} !important` - : '1px solid inherit'}; + border: ${picked + ? `1px solid ${theme.sanity.color.spot.orange} !important` + : '1px solid inherit'}; - ${props => - !props.updating && - css` - @media (hover: hover) and (pointer: fine) { - &:hover { - border: 1px solid ${hues.gray[500].hex}; + ${!updating && + css` + @media (hover: hover) and (pointer: fine) { + &:hover { + border: 1px solid var(--card-border-color); + } } - } - `} -` - -const ContextActionContainer = styled(Flex)` - cursor: ${props => (props.selected ? 'default' : 'pointer')}; - height: ${PANEL_HEIGHT}px; - transition: all 300ms; + `} + ` + } +) - @media (hover: hover) and (pointer: fine) { - &:hover { - background: ${hues.gray[950].hex}; +const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorSchemeKey}) => { + return css` + cursor: pointer; + height: ${PANEL_HEIGHT}px; + transition: all 300ms; + @media (hover: hover) and (pointer: fine) { + &:hover { + background: ${getSchemeColor(scheme, 'bg')}; + } } - } -` + ` +}) const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => { return { @@ -75,6 +88,8 @@ const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => { const CardAsset = (props: Props) => { const {id, selected} = props + const {scheme} = useColorScheme() + // Refs const shiftPressed: RefObject = useKeyPress('shift') @@ -134,7 +149,7 @@ const CardAsset = (props: Props) => { const opacityPreview = selected || updating ? 0.25 : 1 return ( - + {/* Image */} { {isImageAsset(asset) && ( { align="center" onClick={handleContextActionClick} paddingX={1} + scheme={scheme} style={{opacity: opacityContainer}} > {onSelect ? ( diff --git a/src/components/CardUpload/index.tsx b/src/components/CardUpload/index.tsx index 25b017e2..949066b6 100644 --- a/src/components/CardUpload/index.tsx +++ b/src/components/CardUpload/index.tsx @@ -1,15 +1,16 @@ -import {hues} from '@sanity/color' import {CloseIcon} from '@sanity/icons' import {Box, Button, Flex, Text} from '@sanity/ui' import filesize from 'filesize' import React from 'react' import {useDispatch} from 'react-redux' +import {useColorScheme} from 'sanity' import styled from 'styled-components' import {PANEL_HEIGHT} from '../../constants' import useTypedSelector from '../../hooks/useTypedSelector' import {selectUploadById, uploadsActions} from '../../modules/uploads' import FileIcon from '../FileIcon' import Image from '../Image' +import {getSchemeColor} from '../../utils/getSchemeColor' type Props = { id: string @@ -19,7 +20,6 @@ const CardWrapper = styled(Flex)` box-sizing: border-box; height: 100%; overflow: hidden; - padding: 2px; position: relative; width: 100%; ` @@ -27,6 +27,8 @@ const CardWrapper = styled(Flex)` const CardUpload = (props: Props) => { const {id} = props + const {scheme} = useColorScheme() + // Redux const dispatch = useDispatch() const item = useTypedSelector(state => selectUploadById(state, id)) @@ -59,12 +61,12 @@ const CardUpload = (props: Props) => { } return ( - + { {/* Progress bar */}
{ {item.assetType === 'image' && item?.objectUrl && ( { diff --git a/src/components/DialogAssetEdit/index.tsx b/src/components/DialogAssetEdit/index.tsx index 01b33335..7c173043 100644 --- a/src/components/DialogAssetEdit/index.tsx +++ b/src/components/DialogAssetEdit/index.tsx @@ -6,7 +6,7 @@ import groq from 'groq' import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react' import {SubmitHandler, useForm} from 'react-hook-form' import {useDispatch} from 'react-redux' -import {WithReferringDocuments, useDocumentStore} from 'sanity' +import {WithReferringDocuments, useColorScheme, useDocumentStore} from 'sanity' import {assetFormSchema} from '../../formSchema' import useTypedSelector from '../../hooks/useTypedSelector' import useVersionedClient from '../../hooks/useVersionedClient' @@ -40,6 +40,7 @@ const DialogAssetEdit = (props: Props) => { } = props const client = useVersionedClient() + const {scheme} = useColorScheme() const documentStore = useDocumentStore() @@ -338,7 +339,7 @@ const DialogAssetEdit = (props: Props) => { error={errors?.description?.message} label="Description" name="description" - rows={3} + rows={5} value={currentAsset?.description} /> @@ -375,6 +376,7 @@ const DialogAssetEdit = (props: Props) => { {isImageAsset(currentAsset) && ( diff --git a/src/components/FileIcon/index.tsx b/src/components/FileIcon/index.tsx index 73fe3160..5247f3c8 100644 --- a/src/components/FileIcon/index.tsx +++ b/src/components/FileIcon/index.tsx @@ -1,8 +1,8 @@ -import {Box, Flex} from '@sanity/ui' +import {Box, Flex, Theme} from '@sanity/ui' import React, {MouseEvent} from 'react' import {defaultStyles, FileIcon as ReactFileIcon} from 'react-file-icon' import type {DefaultExtensionType} from 'react-file-icon' -import styled from 'styled-components' +import styled, {css} from 'styled-components' type Props = { extension?: string @@ -11,13 +11,15 @@ type Props = { } // Force react-file-icon styles -const Container = styled(Box)` - text { - font-family: ${props => props.theme.sanity.fonts.text.family} !important; - font-size: 8px !important; - font-weight: 500 !important; - } -` +const Container = styled(Box)(({theme}: {theme: Theme}) => { + return css` + text { + font-family: ${theme.sanity.fonts.text.family} !important; + font-size: 8px !important; + font-weight: 500 !important; + } + ` +}) const FileIcon = (props: Props) => { const {extension, onClick, width} = props diff --git a/src/components/FormFieldInputTags/index.tsx b/src/components/FormFieldInputTags/index.tsx index f230c459..effe8c58 100644 --- a/src/components/FormFieldInputTags/index.tsx +++ b/src/components/FormFieldInputTags/index.tsx @@ -2,6 +2,7 @@ import {Box} from '@sanity/ui' import React from 'react' import {Controller} from 'react-hook-form' import CreatableSelect from 'react-select/creatable' +import {useColorScheme} from 'sanity' import useTypedSelector from '../../hooks/useTypedSelector' import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/creatable' import type {TagSelectOption} from '../../types' @@ -37,6 +38,8 @@ const FormFieldInputTags = (props: Props) => { value } = props + const {scheme} = useColorScheme() + // Redux const creating = useTypedSelector(state => state.tags.creating) const tagsFetching = useTypedSelector(state => state.tags.fetching) @@ -82,7 +85,7 @@ const FormFieldInputTags = (props: Props) => { onCreateOption={onCreateTag} options={options} placeholder={tagsFetching ? 'Loading...' : placeholder} - styles={reactSelectStyles} + styles={reactSelectStyles(scheme)} value={controllerValue} /> ) diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index 393d1654..327c5d50 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -1,16 +1,19 @@ -import {hues} from '@sanity/color' +import {ThemeColorSchemeKey} from '@sanity/ui' import {MouseEvent} from 'react' import styled, {css} from 'styled-components' +import {getSchemeColor} from '../../utils/getSchemeColor' type Props = { onClick?: (e: MouseEvent) => void showCheckerboard?: boolean + scheme?: ThemeColorSchemeKey src: string style?: any } const Image = styled.img` - --checkerboard-color: ${hues.gray[900].hex}; + --checkerboard-color: ${props => + props.scheme ? getSchemeColor(props.scheme, 'bg2') : 'inherit'}; display: block; width: 100%; diff --git a/src/components/OrderSelect/index.tsx b/src/components/OrderSelect/index.tsx index c48ec299..15ce5f70 100644 --- a/src/components/OrderSelect/index.tsx +++ b/src/components/OrderSelect/index.tsx @@ -1,4 +1,4 @@ -import {SelectIcon, SortIcon} from '@sanity/icons' +import {SortIcon} from '@sanity/icons' import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui' import React from 'react' import {useDispatch} from 'react-redux' @@ -21,8 +21,7 @@ const OrderSelect = () => {