replace icons with Pressable

apps/mobile/src/components/ActionIcon/index.js

@@ -1,24 +1,37 @@
 import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {SIZE} from '../../common/common';
+import {useTracked} from '../../provider';
+import {PressableButton} from '../PressableButton';
+
+export const ActionIcon = ({
+  onPress,
+  name,
+  color,
+  customStyle,
+  size = SIZE.xxxl,
+  iconStyle={}
+}) => {
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
 
-export const ActionIcon = ({onPress, name, color, customStyle}) => {
   return (
-    <TouchableOpacity
+    <PressableButton
       onPress={onPress}
-      style={[
-        {
-          width: 50,
+      hitSlop={{top: 30, left: 30, right: 30, bottom: 30}}
+      color="transparent"
+      selectedColor={colors.nav}
+      alpha={!colors.night ? -0.02 : 0.02}
+      opacity={1}
+      customStyle={{
+        width: 40,
         height: 40,
         justifyContent: 'center',
-          alignItems: 'flex-end',
-          paddingRight: 12,
-          zIndex: 800,
-        },
-        customStyle,
-      ]}>
-      <Icon name={name} color={color} size={SIZE.xxxl} />
-    </TouchableOpacity>
+        alignItems: 'center',
+        borderRadius:100,
+        ...customStyle,
+      }}>
+      <Icon name={name} style={iconStyle} color={color} size={size} />
+    </PressableButton>
   );
 };

apps/mobile/src/components/NoteItem/index.js

@@ -3,7 +3,9 @@ import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {ph, SIZE, WEIGHT} from '../../common/common';
 import {timeSince} from '../../utils/utils';
+import {ActionIcon} from '../ActionIcon';
 import {ActionSheetEvent} from '../DialogManager/recievers';
+import {PressableButton} from '../PressableButton';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -59,7 +61,7 @@ export default class NoteItem extends React.Component {
             justifyContent: 'flex-start',
             alignItems: 'center',
             flexDirection: 'row',
-            maxWidth: '100%',
+            width: '100%',
             paddingRight: 6,
             alignSelf: 'center',
             borderBottomWidth: 1,
@@ -71,7 +73,7 @@ export default class NoteItem extends React.Component {
         <View
           style={{
             paddingLeft: 0,
-            width: '95%',
+            width: '92%',
           }}>
           <Text
             numberOfLines={1}
@@ -214,12 +216,10 @@ export default class NoteItem extends React.Component {
           </View>
         </View>
 
-        <TouchableOpacity
-          style={{
-            justifyContent: 'center',
-            minHeight: 70,
-            alignItems: 'center',
-          }}
+        <ActionIcon
+          color={colors.heading}
+          name="dots-horizontal"
+          size={SIZE.xl}
           onPress={() => {
             ActionSheetEvent(
               item,
@@ -230,9 +230,15 @@ export default class NoteItem extends React.Component {
                 : ['Add to', 'Share', 'Export', 'Delete', 'Copy'],
               isTrash ? [] : ['Pin', 'Favorite', 'Add to Vault'],
             );
-          }}>
-          <Icon name="dots-horizontal" size={SIZE.lg} color={colors.heading} />
-        </TouchableOpacity>
+          }}
+          customStyle={{
+            justifyContent: 'center',
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: 'center',
+          }}
+        />
       </View>
     );
   }

apps/mobile/src/components/NotebookItem/index.js

@@ -185,12 +185,10 @@ export const NotebookItem = ({
         </View>
       </View>
       {item.title === 'General' && item.type === 'topic' ? null : (
-        <TouchableOpacity
-          style={{
-            justifyContent: 'center',
-            minHeight: 70,
-            alignItems: 'center',
-          }}
+        <ActionIcon
+          color={colors.heading}
+          name="dots-horizontal"
+          size={SIZE.xl}
           onPress={() => {
             let rowItems = isTrash
               ? ['Restore', 'Remove']
@@ -204,9 +202,15 @@ export const NotebookItem = ({
             ActionSheetEvent(item, false, false, rowItems, columnItems, {
               notebookID: notebookID,
             });
-          }}>
-          <Icon name="dots-horizontal" size={SIZE.lg} color={colors.heading} />
-        </TouchableOpacity>
+          }}
+          customStyle={{
+            justifyContent: 'center',
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: 'center',
+          }}
+        />
       )}
     </View>
   );

apps/mobile/src/components/PressableButton/index.js

@@ -14,9 +14,11 @@ export const PressableButton = ({
   alpha = -0.1,
   opacity = 1,
   onLongPress,
+  hitSlop
 }) => {
   return (
     <Pressable
+      hitSlop={hitSlop}
       activeOpacity={opacity}
       onPress={onPress}
       onLongPress={onLongPress}

apps/mobile/src/components/SimpleList/index.js

@@ -1,12 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {
-  Dimensions,
-  LayoutAnimation,
-  Platform,
-  RefreshControl,
-  Text,
-  View,
-} from 'react-native';
+import {Dimensions, Platform, RefreshControl, Text, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
@@ -19,7 +12,7 @@ import {
   eOpenLoginDialog,
   eScrollEvent,
 } from '../../services/events';
-import {db, hexToRGBA, RGB_Linear_Shade, ToastEvent} from '../../utils/utils';
+import {db, ToastEvent} from '../../utils/utils';
 import {PressableButton} from '../PressableButton';
 let {width, height} = Dimensions.get('window');
 

apps/mobile/src/components/header/HeaderMenu.js

@@ -5,6 +5,7 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import {ActionIcon} from '../ActionIcon';
 const menuRef = createRef();
 export const HeaderMenu = () => {
   const [state, dispatch] = useTracked();
@@ -19,18 +20,23 @@ export const HeaderMenu = () => {
         backgroundColor: colors.bg,
       }}
       button={
-        <TouchableOpacity
+        <ActionIcon
           onPress={() => {
             menuRef.current?.show();
           }}
-          style={{
+          name="dots-vertical"
+          size={SIZE.xl}
+          color={colors.pri}
+          customStyle={{
             justifyContent: 'center',
             alignItems: 'flex-end',
             height: 40,
-            width: 50,
-          }}>
-          <Icon name="dots-vertical" size={SIZE.xl} color={colors.heading} />
-        </TouchableOpacity>
+            width: 40,
+            marginLeft: 10,
+            borderRadius: 100,
+            backgroundColor: 'white',
+          }}
+        />
       }>
       <MenuItem
         textStyle={{

apps/mobile/src/components/header/index.js

@@ -16,6 +16,7 @@ import NavigationService from '../../services/NavigationService';
 import {useHideHeader} from '../../utils/hooks';
 import {sideMenuRef} from '../../utils/refs';
 import {DDS, w} from '../../utils/utils';
+import {ActionIcon} from '../ActionIcon';
 import {HeaderMenu} from './HeaderMenu';
 import {HeaderTitle} from './HeaderTitle';
 
@@ -68,19 +69,16 @@ export const Header = ({showSearch, root}) => {
 
       <View style={styles.leftBtnContainer}>
         {!DDS.isTab ? (
-          <TouchableOpacity
-            hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
+          <ActionIcon
+            customStyle={styles.leftBtn}
             onPress={onLeftButtonPress}
-            style={styles.leftBtn}>
-            <Icon
-              style={{
-                marginLeft: headerState.canGoBack ? -5 : 0,
-              }}
-              color={colors.heading}
             name={headerState.canGoBack ? 'arrow-left' : 'menu'}
             size={SIZE.xxxl}
+            color={colors.pri}
+            iconStyle={{
+              marginLeft: headerState.canGoBack ? -5 : 0,
+            }}
           />
-          </TouchableOpacity>
         ) : undefined}
 
         {Platform.OS === 'android' ? <HeaderTitle root={root} /> : null}
@@ -95,15 +93,17 @@ export const Header = ({showSearch, root}) => {
           style={{
             opacity: hideHeader ? 1 : 0,
           }}>
-          <TouchableOpacity
+          <ActionIcon
             onPress={() => {
               if (!hideHeader) return;
               setHideHeader(false);
               eSendEvent('showSearch');
             }}
-            style={styles.rightBtn}>
-            <Icon name={'magnify'} size={SIZE.xl} color={colors.pri} />
-          </TouchableOpacity>
+            name="magnify"
+            size={SIZE.xl}
+            color={colors.pri}
+            style={styles.rightBtn}
+          />
         </Animatable.View>
 
         <HeaderMenu />
@@ -150,9 +150,12 @@ const styles = StyleSheet.create({
   },
   leftBtn: {
     justifyContent: 'center',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     height: 40,
-    width: 60,
+    width: 40,
+    borderRadius: 100,
+    marginLeft: -5,
+    marginRight: 25,
   },
   rightBtnContainer: {
     flexDirection: 'row',

apps/mobile/src/views/Editor/index.js

@@ -174,6 +174,7 @@ const Editor = ({noMenu}) => {
             height: 50,
             justifyContent: 'space-between',
             alignItems: 'center',
+            paddingHorizontal: 12,
           }}>
           {noMenu ? null : (
             <ActionIcon
@@ -182,7 +183,6 @@ const Editor = ({noMenu}) => {
               onPress={_onBackPress}
               customStyle={{
                 marginLeft: -5,
-                paddingLeft: 12,
               }}
             />
           )}
@@ -194,6 +194,9 @@ const Editor = ({noMenu}) => {
             <ActionIcon
               name="plus"
               color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
               onPress={() => {
                 simpleDialogEvent(TEMPLATE_NEW_NOTE);
               }}
@@ -202,6 +205,9 @@ const Editor = ({noMenu}) => {
               <ActionIcon
                 name="fullscreen"
                 color={colors.heading}
+                customStyle={{
+                  marginLeft: 10,
+                }}
                 onPress={() => {
                   eSendEvent(eOpenFullscreenEditor);
                   setFullscreen(true);
@@ -219,6 +225,9 @@ const Editor = ({noMenu}) => {
             <ActionIcon
               name="undo-variant"
               color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
               onPress={() => {
                 post('undo');
               }}
@@ -226,6 +235,9 @@ const Editor = ({noMenu}) => {
             <ActionIcon
               name="redo-variant"
               color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
               onPress={() => {
                 post('redo');
               }}
@@ -234,6 +246,9 @@ const Editor = ({noMenu}) => {
             <ActionIcon
               name="dots-horizontal"
               color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
               onPress={() => {
                 ActionSheetEvent(
                   getNote(),