@chem-po/react-web 0.0.30 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,8 +16,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chem-po/core": "0.0.30",
-    "@chem-po/react": "0.0.30",
+    "@chem-po/core": "0.0.31",
+    "@chem-po/react": "0.0.31",
     "@chakra-ui/anatomy": "^2.3.4",
     "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "^2.10.7",

package/src/components/form/input/select/index.tsx

@@ -1,7 +1,6 @@
 import {
   Button,
   Popover,
-  PopoverArrow,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -9,7 +8,7 @@ import {
   useColorMode,
 } from '@chakra-ui/react'
 import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
-import { SelectField } from '@chem-po/react'
+import { SelectField, useBackgroundColor } from '@chem-po/react'
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { useInputStyles } from '../hooks/useInputStyles'
 import { InputContainer } from '../shared/InputContainer'
@@ -31,6 +30,7 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
         onBlur()
       },
     }))
+    const menuBg = useBackgroundColor(150)
 
     const DefaultRenderOption = (props: RenderSelectOptionProps) => {
       return <Text style={text}>{props.option.label}</Text>
@@ -66,7 +66,13 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
             </InputContainer>
           </Button>
         </PopoverTrigger>
-        <PopoverContent w="100%" overflowY="auto" maxH="300px">
+        <PopoverContent
+          w="100%"
+          overflowY="auto"
+          maxH="300px"
+          bg={menuBg}
+          border="none"
+          boxShadow="0 0 8px rgba(0, 0, 0, 0.3)">
           <PopoverBody p={0}>
             {options.map(o => (
               <Button
@@ -78,6 +84,10 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
                   onChange(o.value)
                   onBlur()
                 }}
+                display="flex"
+                justifyContent="flex-start"
+                alignItems="center"
+                px={3}
                 _hover={{ bg: 'blackAlpha.100' }}
                 _dark={{
                   _hover: { bg: 'whiteAlpha.100' },
@@ -92,7 +102,6 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
               </Button>
             ))}
           </PopoverBody>
-          <PopoverArrow />
         </PopoverContent>
       </Popover>
     )

package/src/components/loading/LoadingImage.tsx

@@ -1,5 +1,5 @@
 import { BoxProps, Center, IconButton, Image, ImageProps } from '@chakra-ui/react'
-import { useMounted } from '@chem-po/react'
+import { useColorModeValue, useMounted } from '@chem-po/react'
 import React, { SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
 import { LoadingLogo } from './Loading'
@@ -52,6 +52,11 @@ export const LoadingImage = ({
     if (src) setPrevSrc(src)
   }, [src, prevSrc])
 
+  const fullViewButtonFilter = useColorModeValue(
+    'none',
+    'brightness(300%) drop-shadow(1px 1px 3px #00000066)',
+  )
+
   const loading = imageLoading || !!loadingOverride
   return (
     <Center
@@ -97,7 +102,7 @@ export const LoadingImage = ({
               height="20px"
               src="/icons/open_in_full.svg"
               opacity={0.8}
-              filter="brightness(300%) drop-shadow(1px 1px 3px #00000066)"
+              filter={fullViewButtonFilter}
             />
           }
           onClick={() => setViewing(true)}

package/src/components/modal/DesktopModal.tsx

@@ -1,12 +1,16 @@
 import { Box, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import { useBackgroundColor } from '@chem-po/react'
 import React from 'react'
 import { DefaultModalProps } from './type'
 
-export const DesktopModal = ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => (
-  <Modal scrollBehavior="inside" isCentered isOpen={isOpen} {...props}>
-    <ModalOverlay />
-    <ModalContent position="relative" overflowY="auto" bg="background.100" {...contentProps}>
-      <Box>{children}</Box>
-    </ModalContent>
-  </Modal>
-)
+export const DesktopModal = ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => {
+  const bg = useBackgroundColor(100)
+  return (
+    <Modal scrollBehavior="inside" isCentered isOpen={isOpen} {...props}>
+      <ModalOverlay />
+      <ModalContent position="relative" overflowY="auto" bg={bg} {...contentProps}>
+        <Box>{children}</Box>
+      </ModalContent>
+    </Modal>
+  )
+}