From 520e1c077420355897a7465cbb3b1dacdb457b3b Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Tue, 30 Jun 2020 16:05:18 -0300
Subject: [PATCH] fix focus styles

---
 platform/ui/src/components/Thumbnail/Thumbnail.jsx            | 4 ++--
 .../ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx   | 2 +-
 platform/ui/tailwind.config.js                                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
index 2f6420f04..d5d242626 100644
--- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx
+++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
@@ -34,7 +34,7 @@ const Thumbnail = ({
       ref={drag}
       className={classnames(
         className,
-        'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none'
+        'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group'
       )}
       onDoubleClick={onClick}
       role="button"
@@ -45,7 +45,7 @@ const Thumbnail = ({
           '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'
+            : 'border border-secondary-light group-focus:border-blue-300 hover:border-blue-300'
         )}
       >
         {imageSrc ? (
diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
index 051d4c1df..892d371a7 100644
--- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
+++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
@@ -24,7 +24,7 @@ const ThumbnailNoImage = ({
     <div
       ref={drag}
       className={classnames(
-        'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 rounded',
+        'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded',
         isActive ? 'border-2 border-primary-light' : 'border'
       )}
       onDoubleClick={onClick}
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index 3e32e4955..302ba8843 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -717,7 +717,7 @@ module.exports = {
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderCollapse: ['responsive'],
-    borderColor: ['responsive', 'hover', 'focus', 'active'],
+    borderColor: ['responsive', 'hover', 'focus', 'active', 'group-focus'],
     borderRadius: ['responsive', 'focus', 'first', 'last'],
     borderStyle: ['responsive', 'focus'],
     borderWidth: ['responsive', 'focus', 'first', 'last'],