From 59a23fdb192ccd2b56762600c24c25b4fcff7495 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Wed, 30 Dec 2020 10:32:52 +0500
Subject: [PATCH] make width of ActionStrip icons dynamic

---
 .../src/components/SelectionWrapper/index.js     | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js
index fe926fefb..5a5be4eb3 100644
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/apps/mobile/src/components/SelectionWrapper/index.js
@@ -1,10 +1,10 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {TouchableOpacity, View, UIManager, ViewBase} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {eSendEvent, openVault, ToastEvent} from '../../services/EventManager';
-import {getElevation, showTooltip} from '../../utils';
+import {dWidth, getElevation} from '../../utils';
 import {hexToRGBA} from '../../utils/ColorUtils';
 import {db} from '../../utils/DB';
 import {refreshNotesPage} from '../../utils/Events';
@@ -89,6 +89,7 @@ const ActionStrip = ({note, setActionStrip}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode} = state;
   const [isPinnedToMenu, setIsPinnedToMenu] = useState(false);
+  const [width, setWidth] = useState(dWidth);
   useEffect(() => {
     if (note.type === 'note') return;
     setIsPinnedToMenu(db.settings.isPinned(note.id));
@@ -246,6 +247,7 @@ const ActionStrip = ({note, setActionStrip}) => {
 
   return (
     <View
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
       style={{
         position: 'absolute',
         zIndex: 10,
@@ -280,8 +282,8 @@ const ActionStrip = ({note, setActionStrip}) => {
             <View
               key={item.icon}
               style={{
-                width: 40,
-                height: 40,
+                width: width / 1.4 / actions.length,
+                height: width / 1.4 / actions.length,
                 backgroundColor: item.bg || colors.nav,
                 borderRadius: 100,
                 justifyContent: 'center',
@@ -293,8 +295,10 @@ const ActionStrip = ({note, setActionStrip}) => {
                 color={item.color || colors.heading}
                 onPress={item.onPress}
                 tooltipText={item.title}
+                top={60}
+                bottom={60}
                 name={item.icon}
-                size={SIZE.lg}
+                size={width / 2.8 / actions.length}
               />
             </View>
           ),