change some buttons to pressable

apps/mobile/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Android",
+      "cwd": "${workspaceFolder}",
+      "type": "reactnative",
+      "request": "launch",
+      "platform": "android"
+    },
+    {
+      "name": "Debug iOS",
+      "cwd": "${workspaceFolder}",
+      "type": "reactnative",
+      "request": "launch",
+      "platform": "ios"
+    },
+    {
+      "name": "Attach to packager",
+      "cwd": "${workspaceFolder}",
+      "type": "reactnative",
+      "request": "attach"
+    }
+  ]
+}

apps/mobile/src/components/Container/ContainerBottomButton.js

@@ -1,10 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import { Keyboard, Text, TouchableOpacity, View } from 'react-native';
-import { useSafeArea } from 'react-native-safe-area-context';
+import React, {useEffect, useState} from 'react';
+import {Keyboard, Text, TouchableOpacity, View, Pressable} from 'react-native';
+import {useSafeArea} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { pv, SIZE, WEIGHT } from '../../common/common';
-import { useTracked } from '../../provider';
-import { DDS, getElevation } from '../../utils/utils';
+import {pv, SIZE, WEIGHT} from '../../common/common';
+import {useTracked} from '../../provider';
+import {
+  DDS,
+  getElevation,
+  hexToRGBA,
+  RGB_Linear_Shade,
+} from '../../utils/utils';
+import {PressableButton} from '../PressableButton';
 
 export const ContainerBottomButton = ({root}) => {
   const [state, dispatch] = useTracked();
@@ -58,9 +64,10 @@ export const ContainerBottomButton = ({root}) => {
           },
         ],
       }}>
-      <TouchableOpacity
-        activeOpacity={0.8}
-        onPress={containerBottomButton.bottomButtonOnPress}>
+      <PressableButton
+        color={colors.accent}
+        selectedColor={colors.accent}
+        onPress={() => {}}>
         <View
           style={{
             ...getElevation(5),
@@ -69,11 +76,8 @@ export const ContainerBottomButton = ({root}) => {
             flexDirection: 'row',
             width: '100%',
             padding: pv,
-            borderRadius:5,
+            borderRadius: 5,
             paddingVertical: pv + 5,
-            backgroundColor:    containerBottomButton.color
-            ? containerBottomButton.color
-            : colors.accent
           }}>
           <Icon
             name={
@@ -94,7 +98,7 @@ export const ContainerBottomButton = ({root}) => {
             {'  ' + containerBottomButton.bottomButtonText}
           </Text>
         </View>
-      </TouchableOpacity>
+      </PressableButton>
     </View>
   );
 };

apps/mobile/src/components/Menu/MenuListItem.js

@@ -7,6 +7,7 @@ import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eClearSearch} from '../../services/events';
 import {sideMenuRef} from '../../utils/refs';
+import {PressableButton} from '../PressableButton';
 
 export const MenuListItem = ({item, index, noTextMode, ignore}) => {
   const [state, dispatch] = useTracked();
@@ -30,19 +31,22 @@ export const MenuListItem = ({item, index, noTextMode, ignore}) => {
   };
 
   return (
-    <TouchableOpacity
+    <PressableButton
       key={item.name + index}
-      activeOpacity={opacity / 2}
       onPress={_onPress}
-      style={{
+      color={
+        currentScreen === item.name.toLowerCase() ? colors.shade : 'transparent'
+      }
+      
+      selectedColor={colors.accent}
+      alpha={!colors.night ? -0.02 : 0.02}
+      opacity={0.12}
+      customStyle={{
         width: '100%',
-        backgroundColor:
-          item.name.toLowerCase() === currentScreen
-            ? colors.shade
-            : 'transparent',
         alignSelf: 'center',
+        borderRadius: 0,
         flexDirection: 'row',
-        paddingHorizontal: noTextMode ? 0 : 12,
+        paddingHorizontal: noTextMode ? 0 : 8,
         justifyContent: noTextMode ? 'center' : 'space-between',
         alignItems: 'center',
         paddingBottom: noTextMode ? pv + 2 : normalize(15),
@@ -82,6 +86,6 @@ export const MenuListItem = ({item, index, noTextMode, ignore}) => {
           name={item.on ? 'toggle-switch' : 'toggle-switch-off'}
         />
       ) : undefined}
-    </TouchableOpacity>
+    </PressableButton>
   );
 };

apps/mobile/src/components/Menu/UserSection.js

@@ -1,19 +1,26 @@
-import React, { useEffect } from 'react';
-import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native';
+import React, {useEffect} from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { opacity, pv, SIZE, WEIGHT } from '../../common/common';
-import { useTracked } from '../../provider';
-import { ACTIONS } from '../../provider/actions';
-import { eSendEvent } from '../../services/eventManager';
-import { eOpenLoginDialog } from '../../services/events';
+import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
+import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
+import {eSendEvent} from '../../services/eventManager';
+import {eOpenLoginDialog} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
-import { db, DDS, hexToRGBA, ToastEvent } from '../../utils/utils';
-import { TimeSince } from './TimeSince';
-import { sideMenuRef } from '../../utils/refs';
+import {db, DDS, hexToRGBA, ToastEvent} from '../../utils/utils';
+import {TimeSince} from './TimeSince';
+import {sideMenuRef} from '../../utils/refs';
+import {PressableButton} from '../PressableButton';
 
 export const UserSection = ({noTextMode}) => {
   const [state, dispatch] = useTracked();
-  const {colors, syncing,user} = state;
+  const {colors, syncing, user} = state;
 
   useEffect(() => {
     dispatch({type: ACTIONS.TAGS});
@@ -131,17 +138,20 @@ export const UserSection = ({noTextMode}) => {
       </TouchableOpacity>
     </View>
   ) : (
-    <TouchableOpacity
+    <PressableButton
       onPress={() => {
         DDS.isTab
           ? eSendEvent(eOpenLoginDialog)
-          : NavigationService.navigate('Login',{
-            root:true
+          : NavigationService.navigate('Login', {
+              root: true,
             });
         sideMenuRef.current?.closeDrawer();
       }}
-      activeOpacity={opacity / 2}
-      style={{
+      color={colors.shade}
+      selectedColor={colors.accent}
+      alpha={!colors.night ? -0.02 : 0.1}
+      opacity={0.12}
+      customStyle={{
         paddingVertical: 12,
         marginVertical: 5,
         marginTop: pv + 5,
@@ -150,7 +160,6 @@ export const UserSection = ({noTextMode}) => {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: noTextMode ? 'center' : 'flex-start',
-        backgroundColor: noTextMode ? 'transparent' : colors.shade,
         paddingHorizontal: noTextMode ? 0 : 12,
       }}>
       <View
@@ -194,6 +203,6 @@ export const UserSection = ({noTextMode}) => {
           </Text>
         </View>
       )}
-    </TouchableOpacity>
+    </PressableButton>
   );
 };

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {Platform, Pressable} from 'react-native';
 import {br, opacity} from '../../common/common';
+import { RGB_Linear_Shade, hexToRGBA } from '../../utils/utils';
 
 export const PressableButton = ({
   color,
@@ -9,21 +10,19 @@ export const PressableButton = ({
   radius,
   children,
   onPress,
-  customStyle
+  customStyle,alpha=-0.1,
+  opacity=1
 }) => {
+
+
   return (
     <Pressable
       activeOpacity={opacity}
-      android_ripple={{
-        radius: radius,
-        color: selectedColor,
-        borderless: borderless,
-      }}
       onPress={onPress}
       style={({pressed}) => [
         {
           backgroundColor:
-            pressed && Platform.OS === 'ios' ? selectedColor : color,
+            pressed && Platform.OS === 'ios' ? RGB_Linear_Shade(alpha, hexToRGBA(selectedColor, opacity)) : color,
           width: '100%',
           alignSelf: 'center',
           borderRadius: br,

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

@@ -34,8 +34,9 @@ import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eOpenLoginDialog, eResetApp} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
-import {db, DDS, setSetting, ToastEvent, w} from '../../utils/utils';
+import {db, DDS, setSetting, ToastEvent, w, RGB_Linear_Shade, hexToRGBA} from '../../utils/utils';
 import {MMKV} from '../../utils/storage';
+import {PressableButton} from '../../components/PressableButton';
 
 export const Settings = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
@@ -381,7 +382,11 @@ export const Settings = ({route, navigation}) => {
           </>
         ) : (
           <>
-            <TouchableOpacity
+            <PressableButton
+              color={colors.shade}
+              selectedColor={colors.accent}
+              alpha={!colors.night ? -0.02 : 0.1}
+              opacity={0.12}
               onPress={() => {
                 DDS.isTab
                   ? eSendEvent(eOpenLoginDialog)
@@ -390,13 +395,13 @@ export const Settings = ({route, navigation}) => {
                     });
               }}
               activeOpacity={opacity / 2}
-              style={{
+              customStyle={{
                 paddingVertical: pv + 5,
                 marginBottom: pv + 5,
                 width: '100%',
                 flexDirection: 'row',
                 alignItems: 'center',
-                backgroundColor: colors.shade,
+                justifyContent: 'flex-start',
                 borderRadius: 5,
                 paddingHorizontal: 6,
               }}>
@@ -447,7 +452,7 @@ export const Settings = ({route, navigation}) => {
                   size={SIZE.lg}
                 />
               </View>
-            </TouchableOpacity>
+            </PressableButton>
           </>
         )}
         <Text
@@ -502,34 +507,38 @@ export const Settings = ({route, navigation}) => {
             '#bcf60c',
             '#fabebe',
           ].map((item) => (
-            <TouchableOpacity
+            <PressableButton
               key={item}
+              color={colors.accent === item? RGB_Linear_Shade(!colors.night? -0.2 : 0.2, hexToRGBA(item, 1)) : item}
+              selectedColor={item}
+              alpha={!colors.night ? -0.1 : 0.1}
+              opacity={1}
               onPress={() => {
                 changeAccentColor(item);
 
                 MMKV.setStringAsync('accentColor', item);
               }}
-              style={{
+              customStyle={{
                 flexDirection: 'row',
                 justifyContent: 'center',
                 alignItems: 'center',
                 marginHorizontal: 5,
                 marginVertical: 5,
-              }}>
-              <View
-                style={{
                 width: w / 5 - 35,
                 height: w / 5 - 35,
-                  backgroundColor: item,
                 borderRadius: 100,
                 justifyContent: 'center',
                 alignItems: 'center',
+              }}>
+              <View
+                style={{
+                
                 }}>
                 {colors.accent === item ? (
                   <Icon size={SIZE.lg} color="white" name="check" />
                 ) : null}
               </View>
-            </TouchableOpacity>
+            </PressableButton>
           ))}
         </View>