From 1333c2b89dc6915b561ce1a2618bd97fb4c501ed Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Tue, 19 May 2020 23:15:33 -0400
Subject: [PATCH] Re-enable draggable thumbs

---
 .../ui/src/components/Thumbnail/Thumbnail.jsx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
index ad3fd808a..15dfd93a4 100644
--- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx
+++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
@@ -15,26 +15,26 @@ const Thumbnail = ({
   description,
   seriesNumber,
   numInstances,
-  // dragData,
+  dragData,
   isActive,
   onClick,
 }) => {
   // TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as
   // this will still allow for "drag", even if there is no drop target for the
   // specified item.
-  /*const [collectedProps, drag, dragPreview] = useDrag({
+  const [collectedProps, drag, dragPreview] = useDrag({
     item: { ...dragData },
     canDrag: function(monitor) {
       return Object.keys(dragData).length !== 0;
     },
-  });*/
+  });
 
-  //      ref={drag}
   return (
     <div
+      ref={drag}
       className={classnames(
         className,
-        'flex flex-col flex-1 px-3 cursor-pointer outline-none'
+        'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none'
       )}
       onClick={onClick}
       onKeyDown={onClick}
@@ -43,7 +43,7 @@ const Thumbnail = ({
     >
       <div
         className={classnames(
-          'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white mb-2 min-h-32',
+          'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32',
           isActive
             ? 'border-2 border-primary-light'
             : 'border border-secondary-light hover:border-blue-300'
@@ -53,22 +53,22 @@ const Thumbnail = ({
           <img
             src={imageSrc}
             alt={imageAltText}
-            className="min-h-32 object-none"
+            className="object-none min-h-32"
           />
         ) : (
           <div>{imageAltText}</div>
         )}
       </div>
-      <div className="flex flex-row flex-1 text-blue-300 text-base items-center">
+      <div className="flex flex-row items-center flex-1 text-base text-blue-300">
         <div className="mr-4">
-          <span className="text-primary-main font-bold">{'S: '}</span>
+          <span className="font-bold text-primary-main">{'S: '}</span>
           {seriesNumber}
         </div>
         <div className="flex flex-row items-center flex-1">
           <Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
         </div>
       </div>
-      <div className="text-white text-base">{description}</div>
+      <div className="text-base text-white">{description}</div>
     </div>
   );
 };