fix: UI issues in Safari

kouprlabs · Jul 1, 2024 · 03d89f3 · 03d89f3
1 parent b4d81f4
commit 03d89f3
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 70 deletions.
diff --git a/ui/eslint.config.js b/ui/eslint.config.js
@@ -23,6 +23,6 @@ export default [
     },
   },
   {
-    ignores: ['*.cjs'],
+    ignores: ['*.cjs', 'dist'],
   },
 ]
diff --git a/ui/src/components/common/orb.tsx b/ui/src/components/common/orb.tsx
diff --git a/ui/src/components/file/file-menu.tsx b/ui/src/components/file/file-menu.tsx
@@ -31,6 +31,7 @@ import {
   IconSecurity,
   IconSelectCheckBox,
   IconUpload,
+  IconVisibility,
 } from '@/lib/components/icons'
 import downloadFile from '@/lib/helpers/download-file'
 import {
@@ -55,7 +56,6 @@ import { modalDidOpen as mosaicModalDidOpen } from '@/store/ui/mosaic'
 import { listModalDidOpen } from '@/store/ui/snapshots'
 import { drawerDidOpen } from '@/store/ui/uploads'
 import { modalDidOpen as watermarkModalDidOpen } from '@/store/ui/watermark'
-import Orb from '../common/orb'
 
 export type FileMenuProps = {
   isOpen?: boolean
@@ -236,7 +236,7 @@ const FileMenu = ({
               <MenuOptionGroup>
                 {isInsightsAuthorized ? (
                   <MenuItem
-                    icon={<Orb width="16px" height="16px" />}
+                    icon={<IconVisibility />}
                     onClick={(event: MouseEvent) => {
                       event.stopPropagation()
                       dispatch(insightsModalDidOpen())

diff --git a/ui/src/components/file/list/item/icon/icon-diverse/index.tsx b/ui/src/components/file/list/item/icon/icon-diverse/index.tsx
@@ -87,7 +87,11 @@ const IconDiverse = ({ file, scale }: IconFontProps) => {
   }
 
   return (
-    <img src={image} style={{ width: `${width}px`, height: `${height}px` }} />
+    <img
+      src={image}
+      className="pointer-events-none select-none"
+      style={{ width: `${width}px`, height: `${height}px` }}
+    />
   )
 }
 

diff --git a/ui/src/components/file/list/item/icon/icon-folder/index.tsx b/ui/src/components/file/list/item/icon/icon-folder/index.tsx
@@ -20,6 +20,7 @@ const IconFolder = ({ file, scale, isLoading }: IconFolderProps) => {
     <>
       <img
         src={FolderSvg}
+        className="pointer-events-none select-none"
         style={{ width: `${width}px`, height: `${height}px` }}
       />
       <div

diff --git a/ui/src/components/file/list/item/icon/icon-thumbnail/index.tsx b/ui/src/components/file/list/item/icon/icon-thumbnail/index.tsx
@@ -38,6 +38,7 @@ const IconThumbnail = ({ file, scale }: IconThumbnailProps) => {
         }}
         className={cx(
           'pointer-events-none',
+          'select-none',
           'object-cover',
           'border',
           'border-solid',

diff --git a/ui/src/components/file/list/item/index.tsx b/ui/src/components/file/list/item/index.tsx
@@ -145,7 +145,7 @@ const ListItem = ({
         'transition',
         'duration-400',
         'ease-in-out',
-        { 'bg-transparent': !isChecked },
+        { 'bg-transparent': !isChecked && !isDragging },
         'rounded-md',
         'select-none',
         'cursor-default',
@@ -154,8 +154,8 @@ const ListItem = ({
         'active:gray-200',
         'active:dark:gray-600',
         {
-          'bg-gray-100': isChecked,
-          'dark:bg-gray-700': isChecked,
+          'bg-gray-100': isChecked || isDragging,
+          'dark:bg-gray-700': isChecked || isDragging,
         },
         'border-2',
         {