style: larger active area for modal close

app/components/UI/Modal.js

@@ -36,12 +36,12 @@ class Modal extends React.Component {
       <Flex flexDirection="column" width={1} p={3} bg="darkestBackground" css={{ height: '100%' }}>
         <Flex justifyContent="flex-end" as="header" color="primaryText">
           <Box
-            css={{ cursor: 'pointer' }}
+            css={{ cursor: 'pointer', opacity: hover ? 0.6 : 1 }}
             ml="auto"
             onClick={onClose}
             onMouseEnter={this.hoverOn}
             onMouseLeave={this.hoverOff}
-            color={hover ? 'lightningOrange' : null}
+            p={2}
           >
             <X width="2em" height="2em" />
           </Box>

test/unit/components/UI/__snapshots__/Modal.spec.js.snap

@@ -3,7 +3,9 @@
 exports[`component.UI.Modal should render correctly 1`] = `
 .c2 {
   margin-left: auto;
+  padding: 8px;
   cursor: pointer;
+  opacity: 1;
 }
 
 .c3 {
@@ -49,7 +51,6 @@ exports[`component.UI.Modal should render correctly 1`] = `
   >
     <div
       className="c2"
-      color={null}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >