refactor Pressable Button

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

@@ -27,15 +27,11 @@ export const ActionIcon = ({
       testID={testID}
       onPress={onPress}
       hitSlop={{top: top, left: left, right: right, bottom: bottom}}
-      color="transparent"
       disabled={disabled}
-      selectedColor={colors.nav}
+      type="gray"
-      alpha={!colors.night ? -0.02 : 0.02}
-      opacity={1}
       customStyle={{
         width: 40,
         height: 40,
-        backgroundColor: disabled ? colors.bg : null,
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: 100,

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

@@ -72,6 +72,7 @@ export default class ActionSheet extends Component {
     this.isRecoiling = false;
     this.targetId = null;
     this.offsetY = 0;
+    this.borderRadius = new Animated.Value(10);
   }
 
   waitAsync = (ms) =>
@@ -574,6 +575,8 @@ export default class ActionSheet extends Component {
                           translateY: this.transformValue,
                         },
                       ],
+                      borderTopRightRadius:this.borderRadius,
+                      borderTopLeftRadius:this.borderRadius
                     },
                   ]}>
                   {gestureEnabled || headerAlwaysVisible ? (

apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js

@@ -43,13 +43,9 @@ export const ActionSheetColorsSection = ({item,close}) => {
 
     return (
       <PressableButton
-        color={RGB_Linear_Shade(
+        type="accent"
-          !colors.night ? -0.2 : 0.2,
+        accentColor={color.name.toLowerCase()}
-          hexToRGBA(color.value, 1),
+        testID={'icon-color-' + c}
-        )}
-        selectedColor={color.value}
-        alpha={!colors.night ? -0.1 : 0.1}
-        opacity={1}
         key={color.value}
         onPress={async () => {
           await PremiumService.verify(async () => {

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

@@ -3,6 +3,7 @@ import {Keyboard, Platform, View} from 'react-native';
 import Animated, {Easing} from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {notesnook} from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
 import {getElevation, showContext} from '../../utils';
@@ -10,7 +11,12 @@ import {normalize, SIZE} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
 
 const translateY = new Animated.Value(0);
-export const ContainerBottomButton = ({title, onPress, color,shouldShow =false}) => {
+export const ContainerBottomButton = ({
+  title,
+  onPress,
+  color = 'accent',
+  shouldShow = false,
+}) => {
   const [state] = useTracked();
   const {colors} = state;
   const insets = useSafeAreaInsets();
@@ -59,9 +65,10 @@ export const ContainerBottomButton = ({title, onPress, color,shouldShow =false})
         ],
       }}>
       <PressableButton
-        testID={'container_bottom_btn'}
+        testID={notesnook.ids.default.addBtn}
-        color={color || colors.accent}
+        type="accent"
-        selectedColor={color || colors.accent}
+        accentColor={color || 'accent'}
+        accentText="light"
         customStyle={{
           ...getElevation(5),
           borderRadius: 100,

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

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Platform} from 'react-native';
+import {Dimensions, Platform} from 'react-native';
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -48,6 +48,7 @@ import SortDialog from '../SortDialog';
 import JumpToDialog from '../JumpToDialog';
 import {GetPremium, translatePrem} from '../ActionSheetComponent/GetPremium';
 import {sleep} from '../../utils/TimeUtils';
+import { dHeight } from '../../utils';
 
 export class DialogManager extends Component {
   constructor(props) {
@@ -95,12 +96,7 @@ export class DialogManager extends Component {
   };
 
   _hideActionSheet = () => {
-    this.actionSheet._setModalVisible();
+    this.actionSheet._setModalVisible(false);
-    sleep(200).then(() => {
-      this.setState({
-        actionSheetVisible: false,
-      });
-    });
   };
 
   _showMoveNote = () => {
@@ -313,10 +309,12 @@ export class DialogManager extends Component {
             ref={(ref) => (this.actionSheet = ref)}
             containerStyle={{
               backgroundColor: colors.bg,
-              width: DDS.isTab ? 500 : '100%',
+              width: DDS.isLargeTablet() ? 500 : '100%',
               alignSelf: 'center',
               borderRadius: 10,
-              marginBottom: DDS.isTab ? 50 : 0,
+              marginBottom: DDS.isLargeTablet() ? 50 : 0,
+              borderBottomRightRadius: DDS.isLargeTablet() ? 10 : 1,
+              borderBottomLeftRadius: DDS.isLargeTablet() ? 10 : 1,
             }}
             extraScroll={DDS.isTab ? 50 : 0}
             indicatorColor={
@@ -350,6 +348,9 @@ export class DialogManager extends Component {
             onClose={() => {
               translatePrem.setValue(-800);
               this.onActionSheetHide();
+              this.setState({
+                actionSheetVisible: false,
+              });
             }}>
             <ActionSheetComponent
               item={item}

apps/mobile/src/components/Header/HeaderRightMenu.js

@@ -19,7 +19,7 @@ export const HeaderRightMenu = () => {
       <ActionIcon
         onPress={async () => {
           Navigation.navigate('Search', {
-            menu:false
+            menu: false,
           });
         }}
         name="magnify"
@@ -99,9 +99,10 @@ const styles = StyleSheet.create({
   },
   rightBtn: {
     justifyContent: 'center',
-    alignItems: 'flex-end',
+    alignItems: 'center',
     height: 40,
-    width: 50,
+    width: 40,
+    marginLeft: 10,
     paddingRight: 0,
   },
 });

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

@@ -128,12 +128,7 @@ const JumpToDialog = () => {
                 <PressableButton
                   key={item.title}
                   onPress={() => onPress(item, index)}
-                  color={currentIndex === index ? colors.shade : 'transparent'}
+                  type={currentIndex === index? 'shade' : 'gray'}
-                  selectedColor={
-                    currentIndex === index ? colors.accent : colors.nav
-                  }
-                  alpha={!colors.night ? -0.02 : 0.02}
-                  opacity={currentIndex === index ? 0.12 : 1}
                   customStyle={{
                     minWidth: '20%',
                     maxWidth: '46%',

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

@@ -73,12 +73,12 @@ const ColorItem = ({item, index}) => {
   return (
     <PressableButton
       key={item.id}
-      color={
+      customColor={
         headerTextState?.id === item.id && item.type === headerTextState?.type
           ? COLORS_NOTE[item.title]
           : 'transparent'
       }
-      selectedColor={COLORS_NOTE[item.title]}
+      customSelectedColor={COLORS_NOTE[item.title]}
       alpha={!colors.night ? -0.02 : 0.02}
       opacity={0.12}
       onPress={() => onPress(item)}

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

@@ -53,14 +53,11 @@ export const MenuListItem = ({item, index, noTextMode, testID}) => {
       testID={testID}
       key={item.name + index}
       onPress={_onPress}
-      color={
+      type={
         headerTextState?.id === item.name.toLowerCase() + '_navigation'
-          ? colors.shade
+          ? 'shade'
           : 'transparent'
       }
-      selectedColor={colors.accent}
-      alpha={!colors.night ? -0.02 : 0.02}
-      opacity={0.12}
       customStyle={{
         width: noTextMode ? 50 : '100%',
         alignSelf: 'center',

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

@@ -4,7 +4,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
-import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import {getElevation} from '../../utils';
 import {db} from '../../utils/DB';
@@ -26,7 +30,6 @@ export const TagsSection = () => {
     dispatch({type: Actions.MENU_PINS});
   }, []);
 
-
   const onPress = (item) => {
     let params;
     if (item.type === 'notebook') {
@@ -42,7 +45,6 @@ export const TagsSection = () => {
         type: item.type,
       });
       rootNavigatorRef.current?.setParams(params);
-
     } else if (item.type === 'tag') {
       params = params = {
         title: item.title,
@@ -118,8 +120,6 @@ const PinItem = ({item, index, onPress}) => {
   const [visible, setVisible] = useState(false);
   const [headerTextState, setHeaderTextState] = useState(null);
 
-
-
   const onHeaderStateChange = (event) => {
     if (event?.id === item.name) {
       setHeaderTextState(event);
@@ -162,14 +162,11 @@ const PinItem = ({item, index, onPress}) => {
         </BaseDialog>
       )}
       <PressableButton
-        color={
+        type={
           headerTextState?.id === item.id && headerTextState?.type === item.type
-            ? colors.shade
+            ? 'shade'
             : 'transparent'
         }
-        selectedColor={colors.accent}
-        alpha={!colors.night ? -0.02 : 0.02}
-        opacity={0.12}
         onLongPress={() => setVisible(true)}
         onPress={() => onPress(item)}
         customStyle={{
@@ -226,53 +223,4 @@ const PinItem = ({item, index, onPress}) => {
   );
 };
 
-/* 
 
-  {tags
-        .filter((o) => o.noteIds.length > 1)
-        .slice(0, tags.length > 10 ? 10 : tags.length)
-        .map((item) => (
-          <PressableButton
-            key={item.id}
-            color={
-              currentScreen === item.title.toLowerCase()
-                ? colors.shade
-                : 'transparent'
-            }
-            selectedColor={colors.accent}
-            alpha={!colors.night ? -0.02 : 0.02}
-            opacity={0.12}
-            onPress={() => onPress(item)}
-            customStyle={{
-              flexDirection: 'row',
-              justifyContent: 'flex-start',
-              alignItems: 'center',
-              width: '100%',
-              borderRadius: 0,
-              paddingHorizontal: 10,
-              height: 50,
-            }}>
-            <View
-              style={{
-                width: 35,
-                height: 35,
-                justifyContent: 'center',
-                alignItems: 'flex-start',
-              }}>
-              <Paragraph color={colors.accent} size={SIZE.md}>
-                #
-              </Paragraph>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                width: '85%',
-              }}>
-              <Paragraph color={colors.heading}>{item.title}</Paragraph>
-
-            </View>
-          </PressableButton>
-        ))}
-*/

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

@@ -1,8 +1,8 @@
 import React, {useEffect, useState} from 'react';
-import {timeSince} from "../../utils/TimeUtils";
+import {timeSince} from '../../utils/TimeUtils';
 import Paragraph from '../Typography/Paragraph';
 
-export const TimeSince = ({time}) => {
+export const TimeSince = ({time, style,updateFrequency=30000}) => {
   const [timeAgo, setTimeAgo] = useState(null);
 
   useEffect(() => {
@@ -11,12 +11,12 @@ export const TimeSince = ({time}) => {
     let interval = setInterval(() => {
       t = timeSince(time);
       setTimeAgo(t);
-    }, 60000);
+    }, updateFrequency);
     return () => {
       clearInterval(interval);
       interval = null;
     };
-  },[]);
+  }, [time,updateFrequency]);
 
-  return <Paragraph>{timeAgo}</Paragraph>;
+  return <Paragraph style={style}>{timeAgo}</Paragraph>;
 };

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

@@ -116,10 +116,7 @@ export const UserSection = ({noTextMode}) => {
       onPress={() => {
         eSendEvent(eOpenLoginDialog);
       }}
-      color={colors.accent}
+      type="shade"
-      selectedColor={colors.accent}
-      alpha={!colors.night ? -0.02 : 0.1}
-      opacity={0.12}
       customStyle={{
         paddingVertical: 12,
         marginVertical: 5,

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

@@ -224,12 +224,7 @@ const MoveNoteDialog = () => {
                     onPress={() => {
                       setExpanded(item.id === expanded ? null : item.id);
                     }}
-                    color={expanded === item.id ? colors.shade : 'transparent'}
+                    type={expanded === item.id ? 'shade' : 'transparent'}
-                    selectedColor={
-                      expanded === item.id ? colors.accent : colors.nav
-                    }
-                    alpha={colors.night ? 0.02 : -0.02}
-                    opacity={expanded === item.id ? 0.12 : 1}
                     customStyle={{
                       height: 50,
                       width: '100%',
@@ -365,9 +360,7 @@ const MoveNoteDialog = () => {
                               'success',
                             );
                           }}
-                          color="transparent"
+                          type="gray"
-                          selectedColor={colors.nav}
-                          alpha={colors.night ? 0.02 : -0.02}
                           customStyle={{
                             height: 50,
                             borderTopWidth: index === 0 ? 0 : 1,
@@ -398,7 +391,7 @@ const MoveNoteDialog = () => {
             <View
               style={{
                 paddingHorizontal: 12,
-                width:"100%"
+                width: '100%',
               }}>
               <DialogButtons negativeTitle="Cancel" onPressNegative={close} />
             </View>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {notesnook} from '../../../e2e/test.ids';
 import {Actions} from '../../provider/Actions';
 import Navigation from '../../services/Navigation';
 import {COLORS_NOTE} from '../../utils/Colors';
@@ -9,6 +10,7 @@ import { SIZE } from '../../utils/SizeUtils';
 import {timeSince} from '../../utils/TimeUtils';
 import {ActionIcon} from '../ActionIcon';
 import {ActionSheetEvent, updateEvent} from '../DialogManager/recievers';
+import {TimeSince} from '../Menu/TimeSince';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -191,15 +193,14 @@ export default class NoteItem extends React.Component {
                     color="orange"
                   />
                 ) : null}
-                <Paragraph
+
-                  color={colors.icon}
+                <TimeSince
-                  size={SIZE.xs}
+                  style={{fontSize: SIZE.xs, color: colors.icon}}
-                  style={{
+                  time={item.dateCreated}
-                    textAlignVertical: 'center',
+                  updateFrequency={
-                    marginRight: 10,
+                    Date.now() - item.dateCreated < 60000 ? 2000 : 60000
-                  }}>
+                  }
-                  {timeSince(item.dateCreated)}
+                />
-                </Paragraph>
               </>
             ) : null}
 
@@ -253,6 +254,7 @@ export default class NoteItem extends React.Component {
         <ActionIcon
           color={colors.heading}
           name="dots-horizontal"
+          testID={notesnook.ids.note.menu}
           size={SIZE.xl}
           onPress={() => {
             ActionSheetEvent(

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

@@ -26,16 +26,18 @@ export const PressableButton = ({
   noborder,
   accentColor = 'accent',
   accentText = 'light',
+  customColor,
+  customSelectedColor
 }) => {
   const [state] = useTracked();
   const {colors} = state;
-  const selectedColor =
+  const selectedColor = customSelectedColor ||
     colors[
       type === 'accent'
         ? BUTTON_TYPES[type](accentColor, accentText).selected
         : BUTTON_TYPES[type].selected
     ];
-  const primaryColor =
+  const primaryColor = customColor ||
     colors[
       type === 'accent'
         ? BUTTON_TYPES[type](accentColor, accentText).primary

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

@@ -36,7 +36,7 @@ const SelectionWrapper = ({
     }
   }, [selectedItemsList]);
 
-  const onPressPin = async () => {
+/*   const onPressPin = async () => {
     let func = async () => {
       if (!item.id) return;
       if (item.type === 'note') {
@@ -61,11 +61,11 @@ const SelectionWrapper = ({
       },
       'Undo',
     );
-  };
+  }; */
 
   return (
     <PressableButton
-      color={
+      customColor={
         currentEditingNote === item.id
           ? item.type === 'note' && item.colors[0]
             ? COLORS_NOTE[item.colors[0]]
@@ -76,7 +76,7 @@ const SelectionWrapper = ({
       }
       onLongPress={onLongPress}
       onPress={onPress}
-      selectedColor={currentEditingNote ? colors.accent : colors.nav}
+      customSelectedColor={currentEditingNote ? colors.accent : colors.nav}
       alpha={!colors.night ? -0.02 : 0.02}
       opacity={currentEditingNote ? 0.15 : 1}
       customStyle={{

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

@@ -155,6 +155,7 @@ class SortDialog extends React.Component {
             {Object.keys(SORT).map((item, index) => (
               <PressableButton
                 key={item}
+                testID={'btn-' + item}
                 color={
                   this.state.settings.sort === item
                     ? colors.shade

apps/mobile/src/utils/Colors.js

@@ -6,6 +6,17 @@ export const ACCENT = {
   color: '#0560FF',
   shade: '#0560FF12',
 };
+
+export const COLORS_NOTE = {
+  red: '#f44336',
+  orange: '#FF9800',
+  yellow: '#FFD600',
+  green: '#4CAF50',
+  blue: '#2196F3',
+  purple: '#673AB7',
+  gray: '#9E9E9E',
+};
+
 const fixedColors = {
   accent: ACCENT.color,
   shade: ACCENT.shade,
@@ -18,6 +29,13 @@ const fixedColors = {
   successText: '#4F8A10',
   warningBg: '#FEEFB3',
   warningText: '#9F6000',
+  red: '#f44336',
+  orange: '#FF9800',
+  yellow: '#FFD600',
+  green: '#4CAF50',
+  blue: '#2196F3',
+  purple: '#673AB7',
+  gray: '#9E9E9E',
 };
 export var COLOR_SCHEME = {
   ...fixedColors,
@@ -54,15 +72,7 @@ export const COLOR_SCHEME_DARK = {
   sec: 'black',
   light: '#ffffff',
 };
-export const COLORS_NOTE = {
+
-  red: '#f44336',
-  orange: '#FF9800',
-  yellow: '#FFD600',
-  green: '#4CAF50',
-  blue: '#2196F3',
-  purple: '#673AB7',
-  gray: '#9E9E9E',
-};
 
 export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
   COLOR_SCHEME = {...colors, accent: accent.color, shade: accent.shade};

apps/mobile/src/utils/index.js

@@ -169,7 +169,7 @@ export const BUTTON_TYPES = {
   accent: (themeColor, text) => ({
     primary: themeColor,
     text: text,
-    selected: 'accent',
+    selected: themeColor,
   }),
   inverted: {
     primary: 'bg',

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

@@ -12,9 +12,9 @@ import {hexToRGBA} from '../../utils/ColorUtils';
 import { db } from '../../utils/DB';
 import {
   eOnLoadNote,
-  eOpenPremiumDialog,
+
   eShowGetPremium,
-  refreshNotesPage,
+  refreshNotesPage
 } from '../../utils/Events';
 import { MMKV } from '../../utils/mmkv';
 import { sideMenuRef, tabBarRef } from '../../utils/Refs';

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

@@ -187,7 +187,7 @@ export const Notes = ({route, navigation}) => {
       <ContainerBottomButton
         title="Create a new note"
         onPress={_onPressBottomButton}
-        color={params.type == 'color' ? COLORS_NOTE[params.title] : null}
+        color={params.type == 'color' ? params.title : null}
       />
     </>
   );

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

@@ -207,12 +207,8 @@ const CustomButton = ({
 }) => {
   const [state] = useTracked();
   const {colors} = state;
-  const [visible, setVisible] = useState(false);
   return (
     <PressableButton
-      color="transparent"
-      selectedColor={colors.nav}
-      alpha={!colors.night ? -0.02 : 0.02}
       onPress={onPress}
       customStyle={{
         minHeight: 50,
@@ -416,13 +412,9 @@ const SettingsUserSection = () => {
           paddingHorizontal: 0,
         }}>
         <PressableButton
-          color="transparent"
-          selectedColor={colors.nav}
-          alpha={!colors.night ? -0.02 : 0.1}
           onPress={() => {
             eSendEvent(eOpenLoginDialog);
           }}
-          activeOpacity={opacity / 2}
           customStyle={{
             paddingVertical: 12,
             width: '100%',
@@ -550,7 +542,7 @@ const SettingsAppearanceSection = () => {
         ].map((item) => (
           <PressableButton
             key={item}
-            color={
+            customColor={
               colors.accent === item
                 ? RGB_Linear_Shade(
                     !colors.night ? -0.2 : 0.2,
@@ -558,7 +550,7 @@ const SettingsAppearanceSection = () => {
                   )
                 : item
             }
-            selectedColor={item}
+            customSelectedColor={item}
             alpha={!colors.night ? -0.1 : 0.1}
             opacity={1}
             onPress={async () => {