From 4f23118f7a80ceb23bad007c0165f51d100fd5d7 Mon Sep 17 00:00:00 2001
From: Pavlos Vinieratos <pvinis@gmail.com>
Date: Fri, 15 Jul 2022 13:11:16 +0300
Subject: [PATCH] better

---
 .../navigation/VisibilityButton.tsx           | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/VisibilityButton.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/VisibilityButton.tsx
index e62d2396c2..b2186fa1f2 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/VisibilityButton.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/navigation/VisibilityButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/native';
+import { View } from 'react-native';
 
 interface Props {
   onPress: () => void;
@@ -13,10 +14,36 @@ const Touchable = styled.TouchableOpacity({
   zIndex: 100,
 });
 
-const HideIcon = styled.Text(({ theme }) => ({
-  fontSize: 14,
-  color: theme.buttonTextColor || '#999999',
+const HIDE_ICON_SIZE = 14;
+const HIDE_ICON_BORDER_WIDTH = 1;
+const Inner = styled.View(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: HIDE_ICON_SIZE,
+  height: HIDE_ICON_SIZE,
+  borderRadius: HIDE_ICON_BORDER_WIDTH,
+  overflow: 'hidden',
+  borderColor: theme.buttonTextColor || '#999999',
+  borderWidth: HIDE_ICON_BORDER_WIDTH * 2,
 }));
+const Outer = styled.View({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: HIDE_ICON_SIZE,
+  height: HIDE_ICON_SIZE,
+  borderRadius: HIDE_ICON_BORDER_WIDTH,
+  overflow: 'hidden',
+  borderColor: 'white',
+  borderWidth: HIDE_ICON_BORDER_WIDTH,
+});
+const HideIcon = () => (
+  <View style={{ width: HIDE_ICON_SIZE, height: HIDE_ICON_SIZE, marginRight: 4 }}>
+    <Inner />
+    <Outer />
+  </View>
+);
 
 const VisibilityButton = ({ onPress }: Props) => (
   <Touchable
@@ -25,7 +52,7 @@ const VisibilityButton = ({ onPress }: Props) => (
     accessibilityLabel="Storybook.OnDeviceUI.toggleUI"
     hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
   >
-    <HideIcon>□</HideIcon>
+    <HideIcon />
   </Touchable>
 );
 export default React.memo(VisibilityButton);