minor ui fixes

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

@@ -55,7 +55,7 @@ export class AddNotebookDialog extends React.Component {
         if (toEdit && toEdit.type === 'notebook') {
             let topicsList = [];
             toEdit.topics.forEach((item, index) => {
-        if (index === 0)return;
+                if (index === 0) return;
                 topicsList.push(item.title);
             });
             console.log(topicsList);
@@ -252,7 +252,7 @@ export class AddNotebookDialog extends React.Component {
                 visible={visible}
                 transparent={true}
                 animated
-        animationType={DDS.isTab ? "fade" :"slide"}
+                animationType={DDS.isTab ? "fade" : "slide"}
                 onShow={() => {
                     this.topicsToDelete = [];
                     this.titleRef.focus();
@@ -262,7 +262,7 @@ export class AddNotebookDialog extends React.Component {
                     <KeyboardAvoidingView
                         behavior={Platform.OS === 'ios' ? 'padding' : null}
                         style={styles.wrapper}>
-            <TouchableOpacity onPress={this.close} style={styles.overlay} />
+                        <TouchableOpacity onPress={this.close} style={styles.overlay}/>
                         <View
                             style={[
                                 styles.container,
@@ -406,11 +406,6 @@ export class AddNotebookDialog extends React.Component {
                                 </TouchableOpacity>
                             </View>
 
-              <View
-                  style={{
-                    zIndex:10
-                  }}
-              >
 
                             <FlatList
                                 data={topics}
@@ -435,7 +430,6 @@ export class AddNotebookDialog extends React.Component {
                                     />
                                 )}
                             />
-              </View>
 
                             <View style={styles.buttonContainer}>
                                 <Button
@@ -453,7 +447,7 @@ export class AddNotebookDialog extends React.Component {
                             </View>
                         </View>
                     </KeyboardAvoidingView>
-          <Toast context="local" />
+                    <Toast context="local"/>
                 </SafeAreaView>
             </Modal>
         );
@@ -474,10 +468,10 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
 
                 style={{
                     width: '80%',
-          backgroundColor:"transparent",
-          zIndex:10,
-          position:'absolute',
-          height:30
+                    backgroundColor: "transparent",
+                    zIndex: 10,
+                    position: 'absolute',
+                    height: 30
                 }}
                 onPress={() => {
                     onPress(item, index)
@@ -509,7 +503,7 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
                         borderColor: colors.nav,
                     },
                 ]}>
-        <Icon name="minus" size={SIZE.lg} color={colors.icon} />
+                <Icon name="minus" size={SIZE.lg} color={colors.icon}/>
             </TouchableOpacity>
         </View>
     );
@@ -586,7 +580,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: ph,
         borderBottomWidth: 1.5,
         paddingRight: 40,
-    paddingVertical:10,
+        paddingVertical: 10,
         width: '100%',
         maxWidth: '100%',
     },

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

@@ -1,14 +1,38 @@
-import React, { createRef } from 'react';
-import Menu, { MenuDivider, MenuItem } from 'react-native-material-menu';
-import { useTracked } from '../../provider';
-import { Actions } from '../../provider/Actions';
-import { ActionIcon } from '../ActionIcon';
+import React, {createRef} from 'react';
+import Menu, {MenuDivider, MenuItem} from 'react-native-material-menu';
+import {useTracked} from '../../provider';
+import {Actions} from '../../provider/Actions';
+import {ActionIcon} from '../ActionIcon';
 import {SIZE, WEIGHT} from "../../utils/SizeUtils";
+
 const menuRef = createRef();
 export const HeaderMenu = () => {
   const [state, dispatch] = useTracked();
   const {colors, headerVerticalMenu} = state;
 
+  const styles = {
+      text:{
+          fontFamily: WEIGHT.regular,
+          color: colors.pri,
+          fontSize: SIZE.sm,
+      },
+      title:{
+          fontFamily: WEIGHT.regular,
+          color: colors.icon,
+          fontSize: SIZE.sm ,
+      },
+      action:{
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        height: 40,
+        width: 40,
+        marginLeft: 10,
+        borderRadius: 100,
+        backgroundColor: colors.bg,
+
+      }
+    }
+
   return headerVerticalMenu ? (
     <Menu
       ref={menuRef}
@@ -16,6 +40,7 @@ export const HeaderMenu = () => {
       style={{
         borderRadius: 5,
         backgroundColor: colors.bg,
+        paddingBottom:10,
       }}
       button={
         <ActionIcon
@@ -25,30 +50,16 @@ export const HeaderMenu = () => {
           name="dots-vertical"
           size={SIZE.xl}
           color={colors.pri}
-          customStyle={{
-            justifyContent: 'center',
-            alignItems: 'flex-end',
-            height: 40,
-            width: 40,
-            marginLeft: 10,
-            borderRadius: 100,
-            backgroundColor: colors.bg,
-          }}
+          customStyle={styles.action}
         />
       }>
       <MenuItem
-        textStyle={{
-          color: colors.icon,
-          fontSize: 12,
-        }}>
+        textStyle={styles.title}>
         Sort by:
       </MenuItem>
-      <MenuDivider />
       <MenuItem
-        textStyle={{
-          fontFamily: WEIGHT.regular,
-          color: colors.pri,
-        }}
+
+        textStyle={styles.text}
         onPress={() => {
           dispatch({type: Actions.NOTES, sort: null});
           menuRef.current?.hide();
@@ -56,10 +67,8 @@ export const HeaderMenu = () => {
         Default
       </MenuItem>
       <MenuItem
-        textStyle={{
-          fontFamily: WEIGHT.regular,
-          color: colors.pri,
-        }}
+          textStyle={styles.text}
+
         onPress={() => {
           dispatch({type: Actions.NOTES, sort: 'abc'});
           menuRef.current?.hide();
@@ -67,10 +76,7 @@ export const HeaderMenu = () => {
         Alphabetical
       </MenuItem>
         <MenuItem
-        textStyle={{
-          fontFamily: WEIGHT.regular,
-          color: colors.pri,
-        }}
+          textStyle={styles.text}
         onPress={() => {
           dispatch({type: Actions.NOTES, sort: 'year'});
           menuRef.current?.hide();
@@ -78,10 +84,7 @@ export const HeaderMenu = () => {
         By year
       </MenuItem>
       <MenuItem
-        textStyle={{
-          fontFamily: WEIGHT.regular,
-          color: colors.pri,
-        }}
+          textStyle={styles.text}
         onPress={() => {
           dispatch({type: Actions.NOTES, sort: 'month'});
           menuRef.current?.hide();
@@ -89,10 +92,7 @@ export const HeaderMenu = () => {
         By month
       </MenuItem>
       <MenuItem
-        textStyle={{
-          fontFamily: WEIGHT.regular,
-          color: colors.pri,
-        }}
+          textStyle={styles.text}
         onPress={() => {
           dispatch({type: Actions.NOTES, sort: 'week'});
           menuRef.current?.hide();

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

@@ -75,7 +75,7 @@ export const NotebookItem = ({
               paddingVertical: item.description ? 0 : 5,
             }}>
             {item && item.topics ? (
-              item.topics.slice(1, 4).map((topic) => (
+              item.topics.slice(1, 3).map((topic) => (
                 <TouchableOpacity
                   onPress={() => {
                     NavigationService.navigate('Notes', {

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

@@ -33,7 +33,7 @@ let tapCount = 0;
 const Editor = ({noMenu}) => {
     // Global State
     const [state,] = useTracked();
-    const {colors, premium} = state;
+    const {colors, premiumUser} = state;
     const [fullscreen, setFullscreen] = useState(false);
 
     // FUNCTIONS
@@ -105,7 +105,7 @@ const Editor = ({noMenu}) => {
 
     useEffect(() => {
         EditorWebView.current?.reload();
-    }, [premium]);
+    }, [premiumUser]);
 
     const _onHardwareBackPress = async () => {
         if (editing.currentlyEditing) {
@@ -287,7 +287,7 @@ const Editor = ({noMenu}) => {
                     testID="editor"
                     ref={EditorWebView}
                     onError={(error) => console.log(error)}
-                    onLoad={async () => await onWebViewLoad(noMenu, premium, colors)}
+                    onLoad={async () => await onWebViewLoad(noMenu, premiumUser, colors)}
                     javaScriptEnabled={true}
                     injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null}
                     onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}