From fc4491ccf98c268ea8a0eb2295dfdc1d1a9df8ea Mon Sep 17 00:00:00 2001
From: Bruno Lemos <brunohplemos@gmail.com>
Date: Wed, 16 Jan 2019 06:58:01 -0200
Subject: [PATCH] [UX] Tweak hover out effect on Column filters

---
 .../components/columns/ColumnOptionsRow.tsx   | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/columns/ColumnOptionsRow.tsx b/packages/components/src/components/columns/ColumnOptionsRow.tsx
index 82a030a3..6656af28 100644
--- a/packages/components/src/components/columns/ColumnOptionsRow.tsx
+++ b/packages/components/src/components/columns/ColumnOptionsRow.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { useRef, useState } from 'react'
-import { View, ViewStyle } from 'react-native'
+import { ViewStyle } from 'react-native'
 
 import { GitHubIcon } from '@devhub/core'
 import { useAnimatedTheme } from '../../hooks/use-animated-theme'
@@ -55,7 +55,20 @@ export function ColumnOptionsRow(props: ColumnOptionsRowProps) {
   const isHovered = useHover(touchableRef)
 
   return (
-    <>
+    <AnimatedView
+      style={[
+        {
+          backgroundColor: theme.backgroundColorLess08,
+          borderWidth: 0,
+          borderColor: 'transparent',
+          borderBottomWidth: 1,
+          borderBottomColor: theme.backgroundColorLess08,
+        },
+        !!(isHovered || isPressing || opened) && {
+          backgroundColor: theme.backgroundColorLess16,
+        },
+      ]}
+    >
       <TouchableOpacity
         ref={touchableRef}
         activeOpacity={1}
@@ -73,12 +86,8 @@ export function ColumnOptionsRow(props: ColumnOptionsRowProps) {
               alignItems: 'center',
               alignContent: 'center',
               padding: contentPadding,
-              backgroundColor: theme.backgroundColorLess08,
             },
             containerStyle,
-            !!(isHovered || isPressing || opened) && {
-              backgroundColor: theme.backgroundColorLess16,
-            },
           ]}
         >
           <ColumnHeaderItem
@@ -137,17 +146,12 @@ export function ColumnOptionsRow(props: ColumnOptionsRowProps) {
                 paddingRight: contentPadding,
               },
               contentContainerStyle,
-              !!(isHovered || isPressing || opened) && {
-                backgroundColor: theme.backgroundColorLess16,
-              },
             ]}
           >
             {children}
           </AnimatedView>
         )}
       </AccordionView>
-
-      <Spacer height={1} />
-    </>
+    </AnimatedView>
   )
 }