From c78f2427a51584a2877c17b8b0dfbedffb44ee57 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Wed, 14 Jul 2021 22:01:23 -0400
Subject: [PATCH] fix(Role): default color hover state should be white svg fill

---
 .../design-system/atoms/role/Role.styled.tsx     | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/atoms/role/Role.styled.tsx b/packages/design-system/atoms/role/Role.styled.tsx
index 8a06761..dc686f0 100644
--- a/packages/design-system/atoms/role/Role.styled.tsx
+++ b/packages/design-system/atoms/role/Role.styled.tsx
@@ -1,4 +1,4 @@
-import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
 import { palette } from '@roleypoly/design-system/atoms/colors';
 import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
@@ -34,9 +34,10 @@ export const Circle = styled.div<StyledProps>`
     width: 10px;
     height: 10px;
     fill-opacity: ${(props) => (props.selected || props.disabled ? 1 : 0)};
-    transition: fill-opacity ${transitions.in2in}s ease-in-out;
+    transition: fill-opacity ${transitions.in2in}s ease-in-out,
+      fill ${transitions.in2in}s ease-in-out;
     fill: ${(props) =>
-      props.disabled && props.defaultColor
+      (props.disabled || !props.selected) && props.defaultColor
         ? 'var(--role-color)'
         : 'var(--role-contrast)'};
   }
@@ -58,17 +59,12 @@ export const Outer = styled.div<StyledProps>`
   cursor: pointer;
   ${(props) =>
     !props.disabled
-      ? css`
+      ? onTablet(css`
           &:hover {
             transform: translateY(-2px);
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
             ${Circle} svg {
               fill-opacity: 1;
-              ${onSmallScreen(
-                css`
-                  fill-opacity: 0;
-                `
-              )}
             }
           }
 
@@ -76,7 +72,7 @@ export const Outer = styled.div<StyledProps>`
             transform: translateY(0);
             box-shadow: 0 0 0 transparent;
           }
-        `
+        `)
       : null};
 `;