From 1cba48f513d106067918a7252024138005d36a43 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@kittycad.io>
Date: Mon, 7 Aug 2023 17:07:28 -0400
Subject: [PATCH] Make paneOpacity smoothly set lower when dragging (#235)

---
 src/App.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8e53f59e5..3fa2cf905 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -132,7 +132,12 @@ export function App() {
   useHotkeys('shift + e', () => togglePane('kclErrors'))
   useHotkeys('shift + d', () => togglePane('debug'))
 
-  const paneOpacity = onboardingStatus === 'camera' ? 'opacity-20' : ''
+  const paneOpacity =
+    onboardingStatus === 'camera'
+      ? 'opacity-20'
+      : isMouseDownInStream
+      ? 'opacity-40'
+      : ''
 
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
@@ -353,13 +358,15 @@ export function App() {
     >
       <AppHeader
         className={
-          paneOpacity + (isMouseDownInStream ? ' pointer-events-none' : '')
+          'transition-opacity transition-duration-75 ' +
+          paneOpacity +
+          (isMouseDownInStream ? ' pointer-events-none' : '')
         }
       />
       <ModalContainer />
       <Resizable
         className={
-          'z-10 my-5 ml-5 pr-1 flex flex-col flex-grow overflow-hidden' +
+          'z-10 my-5 ml-5 pr-1 flex flex-col flex-grow overflow-hidden transition-opacity transition-duration-75 ' +
           (isMouseDownInStream || onboardingStatus === 'camera'
             ? ' pointer-events-none '
             : ' ') +
@@ -438,7 +445,9 @@ export function App() {
         <DebugPanel
           title="Debug"
           className={
-            paneOpacity + (isMouseDownInStream ? ' pointer-events-none' : '')
+            'transition-opacity transition-duration-75 ' +
+            paneOpacity +
+            (isMouseDownInStream ? ' pointer-events-none' : '')
           }
           open={openPanes.includes('debug')}
         />