From b5e76dc9c8bcb0889d6c15fa867f72d529cf6bad Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Sat, 16 May 2020 09:37:01 -0400
Subject: [PATCH] fix: safari action button color fix

---
 ui/components/src/ActionBar/ActionBar.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
index 3787f8f00..d49d0af13 100644
--- a/ui/components/src/ActionBar/ActionBar.tsx
+++ b/ui/components/src/ActionBar/ActionBar.tsx
@@ -20,6 +20,8 @@ const ActionColors = ({
 }) => ({
   backgroundColor: theme.colors?.['action'],
   color: disabled ? '#ddd' : 'background',
+  //safari fix:
+  '-webkit-text-fill-color': 'initial',
   cursor: disabled ? 'not-allowed' : undefined,
   px: 2,
   py: 1,
@@ -81,25 +83,24 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
 
   return (
     <div
-      css={{
+      sx={{
         position: 'relative',
       }}
     >
       <Flex
-        css={{
+        sx={{
           position: 'absolute',
           width: '100%',
         }}
       >
-        <div
-          style={{
-            display: 'flex',
+        <Flex
+          sx={{
             flexDirection: 'row-reverse',
             marginLeft: 'auto',
           }}
         >
           {items}
-        </div>
+        </Flex>
       </Flex>
     </div>
   );