editor bottom bar styles is done

src/components/dropdownButton/view/dropdownButtonStyles.js

@@ -8,14 +8,14 @@ export default EStyleSheet.create({
     alignSelf: 'flex-start',
     height: 35,
   },
-  dropdownText: {
-    fontSize: 9,
-    color: '$primaryDarkGray',
-    marginLeft: 25,
-  },
+  // dropdownText: {
+  //   fontSize: 9,
+  //   color: '$primaryDarkGray',
+  //   marginLeft: 25,
+  // },
   dropdownIcon: {
     fontSize: 18,
-    color:"$iconColor",
+    color: '$iconColor',
     marginLeft: 7,
     marginTop: 1,
   },

src/components/dropdownButton/view/dropdownButtonView.js

@@ -30,15 +30,16 @@ const renderDropdownRow = (rowData, rowID, highlighted) => (
 );
 
 const DropdownButtonView = ({
-  defaultText,
-  iconName,
-  options,
-  onSelect,
-  defaultIndex,
-  children,
-  style,
-  isHasChildIcon,
   childIconWrapperStyle,
+  children,
+  defaultIndex,
+  defaultText,
+  iconStyle,
+  iconName,
+  isHasChildIcon,
+  onSelect,
+  options,
+  style,
 }) => (
   <View style={styles.container}>
     <ModalDropdown
@@ -56,7 +57,10 @@ const DropdownButtonView = ({
     >
       {isHasChildIcon && (
         <View style={[styles.iconWrapper, childIconWrapperStyle && childIconWrapperStyle]}>
-          <Ionicons style={styles.dropdownIcon} name={!iconName ? 'md-arrow-dropdown' : iconName} />
+          <Ionicons
+            style={[styles.dropdownIcon, iconStyle]}
+            name={!iconName ? 'md-arrow-dropdown' : iconName}
+          />
         </View>
       )}
     </ModalDropdown>

src/components/editorHeader/view/editorHeaderView.js

@@ -47,7 +47,7 @@ class EditorHeaderView extends Component {
             size={25}
             onPress={() => handleOnPressPreviewButton()}
             iconStyle={styles.rightIcon}
-            name={!isPreviewActive ? 'ios-eye' : 'ios-eye-off'}
+            name={isPreviewActive ? 'ios-eye' : 'ios-eye-off'}
           />
           <TextButton
             textStyle={styles.textButton}

src/components/markdownEditor/view/formats/formats.js

@@ -13,6 +13,29 @@ export default [
     onPress: applyWrapFormat,
     // style: { fontWeight: 'bold' },
   },
+  {
+    key: 'H1',
+    title: 'H1',
+    icon: 'format-size',
+    iconType: 'MaterialCommunityIcons',
+    prefix: '#',
+    onPress: applyListFormat,
+  },
+  {
+    key: 'L',
+    title: 'L',
+    icon: 'list',
+    iconType: 'Feather',
+    prefix: '-',
+    onPress: applyListFormat,
+  },
+  {
+    key: 'C',
+    title: 'C',
+    icon: 'ios-code',
+    wrapper: '`',
+    onPress: applyWrapFormat,
+  },
   {
     key: 'I',
     title: 'I',
@@ -44,14 +67,7 @@ export default [
     icon: 'ios-quote',
     onPress: applyListFormat,
   },
-  {
-    key: 'C',
-    title: 'C',
-    icon: 'code',
-    iconType: 'Feather',
-    wrapper: '`',
-    onPress: applyWrapFormat,
-  },
+
   {
     key: 'CC',
     title: 'CC',
@@ -59,14 +75,7 @@ export default [
     wrapper: '```',
     onPress: applyWrapFormatNewLines,
   },
-  {
-    key: 'L',
-    title: 'L',
-    icon: 'list',
-    iconType: 'Feather',
-    prefix: '-',
-    onPress: applyListFormat,
-  },
+
   {
     key: 'WEB',
     title: 'WEB',
@@ -74,42 +83,34 @@ export default [
     iconType: 'Feather',
     onPress: applyWebLinkFormat,
   },
-  {
-    key: 'H1',
-    title: 'H1',
-    icon: 'format-size',
-    iconType: 'MaterialCommunityIcons',
-    prefix: '#',
-    onPress: applyListFormat,
-  },
-  {
-    key: 'H2',
-    title: 'H2',
-    prefix: '##',
-    onPress: applyListFormat,
-  },
-  {
-    key: 'H3',
-    title: 'H3',
-    prefix: '###',
-    onPress: applyListFormat,
-  },
-  {
-    key: 'H4',
-    title: 'H4',
-    prefix: '####',
-    onPress: applyListFormat,
-  },
-  {
-    key: 'H5',
-    title: 'H5',
-    prefix: '#####',
-    onPress: applyListFormat,
-  },
-  {
-    key: 'H6',
-    title: 'H6',
-    prefix: '######',
-    onPress: applyListFormat,
-  },
+  // {
+  //   key: 'H2',
+  //   title: 'H2',
+  //   prefix: '##',
+  //   onPress: applyListFormat,
+  // },
+  // {
+  //   key: 'H3',
+  //   title: 'H3',
+  //   prefix: '###',
+  //   onPress: applyListFormat,
+  // },
+  // {
+  //   key: 'H4',
+  //   title: 'H4',
+  //   prefix: '####',
+  //   onPress: applyListFormat,
+  // },
+  // {
+  //   key: 'H5',
+  //   title: 'H5',
+  //   prefix: '#####',
+  //   onPress: applyListFormat,
+  // },
+  // {
+  //   key: 'H6',
+  //   title: 'H6',
+  //   prefix: '######',
+  //   onPress: applyListFormat,
+  // },
 ];

src/components/markdownEditor/view/markdownEditorStyles.js

@@ -21,10 +21,36 @@ export default EStyleSheet.create({
     flexDirection: 'row',
     backgroundColor: '$white',
     alignItems: 'center',
-    height: 48,
+    justifyContent: 'space-between',
+    height: 50,
     shadowOpacity: 0.2,
     shadowOffset: {
       height: 1.5,
     },
   },
+  leftButtonsWrapper: {
+    marginLeft: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: '$deviceWidth / 1.85',
+  },
+  rightButtonsWrapper: {
+    marginRight: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  editorButton: {
+    color: '$primaryDarkGray',
+    paddingRight: 22,
+    height: 24,
+  },
+  dropdownStyle: {
+    marginRight: 8,
+  },
+  rightIcons: {
+    paddingRight: 21,
+  },
+  dropdownIconStyle: {
+    color: '$primaryDarkGray',
+  },
 });

src/components/markdownEditor/view/markdownEditorView.js

@@ -1,16 +1,14 @@
 import React, { Component } from 'react';
 import {
-  View,
-  TextInput,
-  KeyboardAvoidingView,
-  ScrollView,
-  FlatList,
+  View, TextInput, KeyboardAvoidingView, ScrollView, FlatList,
 } from 'react-native';
 import { MarkdownView } from 'react-native-markdown-view';
 
 // Components
 import Formats from './formats/formats';
 import { IconButton } from '../../iconButton';
+import { DropdownButton } from '../../dropdownButton';
+
 // Styles
 import styles from './markdownEditorStyles';
 import previewStyles from './markdownPreviewStyles';
@@ -60,52 +58,73 @@ export default class MarkdownEditorView extends Component {
     return (
       <View style={styles.textWrapper}>
         <ScrollView removeClippedSubviews>
-          <MarkdownView styles={previewStyles}>
-            {text === '' ? 'There is nothing to preview here' : text}
-          </MarkdownView>
+          <MarkdownView styles={previewStyles}>{text === '' ? '...' : text}</MarkdownView>
         </ScrollView>
       </View>
     );
   };
 
   _renderMarkupButton = ({ item, getState, setState }) => (
-    <IconButton
-      iconType={item.iconType}
-      name={item.icon}
-      onPress={() => item.onPress({ getState, setState, item })}
-    />
-  );
-
-  _renderEditorButtons = ({ getState, setState }) => (
-    <View style={styles.editorButtons}>
-      <FlatList
-        data={Formats}
-        keyboardShouldPersistTaps="always"
-        renderItem={({ item }) => this._renderMarkupButton({ item, getState, setState })}
-        horizontal
+    <View style={styles.buttonWrapper}>
+      <IconButton
+        size={20}
+        style={styles.editorButton}
+        iconType={item.iconType}
+        name={item.icon}
+        onPress={() => item.onPress({ getState, setState, item })}
       />
     </View>
   );
 
+  _renderEditorButtons = ({ getState, setState }) => (
+    <View style={styles.editorButtons}>
+      <View style={styles.leftButtonsWrapper}>
+        <FlatList
+          data={Formats}
+          keyboardShouldPersistTaps="always"
+          renderItem={({ item }) => this._renderMarkupButton({ item, getState, setState })}
+          horizontal
+        />
+      </View>
+      <View style={styles.rightButtonsWrapper}>
+        <IconButton
+          size={20}
+          style={styles.rightIcons}
+          iconType="Feather"
+          name="link-2"
+          onPress={() => Formats[9].onPress({ getState, setState })}
+        />
+        <IconButton style={styles.rightIcons} size={20} iconType="Feather" name="image" />
+        <DropdownButton
+          style={styles.dropdownStyle}
+          options={['option1', 'option2', 'option3', 'option4']}
+          iconName="md-more"
+          iconStyle={styles.dropdownStyle}
+          isHasChildIcon
+        />
+      </View>
+    </View>
+  );
+
   render() {
-    const { placeHolder, isPreviewActive } = this.props;
+    const { isPreviewActive } = this.props;
     const { text, selection } = this.state;
 
     return (
       <KeyboardAvoidingView style={styles.container} behavior="padding">
         {!isPreviewActive ? (
           <TextInput
-            style={styles.textWrapper}
             multiline
-            underlineColorAndroid="transparent"
             onChangeText={this.changeText}
             onSelectionChange={this._handleOnSelectionChange}
-            value={text}
-            placeholder={placeHolder}
+            placeHolder="What would you like to write about today?"
             placeholderTextColor="#c1c5c7"
             ref={textInput => (this.textInput = textInput)}
             selection={selection}
             selectionColor="#357ce6"
+            style={styles.textWrapper}
+            underlineColorAndroid="transparent"
+            value={text}
           />
         ) : (
           this._renderPreview()

src/screens/editor/screen/editorScreen.js

@@ -41,10 +41,10 @@ export class EditorScreen extends Component {
           handleOnPressPreviewButton={this._handleOnPressPreviewButton}
         />
         <View style={globalStyles.containerHorizontal16}>
-          <TitleArea />
-          <TagArea />
+          <TitleArea isPreviewActive={isPreviewActive} />
+          <TagArea isPreviewActive={isPreviewActive} />
         </View>
-        <TextArea placeHolder="What would you like to write about today?" isPreviewActive={isPreviewActive} />
+        <TextArea isPreviewActive={isPreviewActive} />
       </View>
     );
   }