change dialog ui

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

@@ -21,6 +21,8 @@ import {ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
 import {db} from '../../utils/DB';
 import {DDS} from '../../services/DeviceDetection';
 import {ActionIcon} from '../ActionIcon';
+import DialogButtons from '../Dialog/dialog-buttons';
+import DialogHeader from '../Dialog/dialog-header';
 
 let refs = [];
 
@@ -282,18 +284,18 @@ export class AddNotebookDialog extends React.Component {
                   backgroundColor: colors.bg,
                 },
               ]}>
-              <View style={styles.headingContainer}>
+              <DialogHeader
-                <Icon
+                title={
-                  name="book-outline"
+                  toEdit && toEdit.dateCreated
-                  color={colors.accent}
-                  size={SIZE.xl}
-                />
-                <Text style={[styles.headingText, {color: colors.heading}]}>
-                  {toEdit && toEdit.dateCreated
                     ? 'Edit Notebook'
-                    : 'New Notebook'}
+                    : 'New Notebook'
-                </Text>
+                }
-              </View>
+                paragraph={
+                  toEdit && toEdit.dateCreated
+                    ? 'Edit your notebook'
+                    : 'Add a new notebook to your notebooks.'
+                }
+              />
 
               <TextInput
                 ref={(ref) => (this.titleRef = ref)}
@@ -302,6 +304,7 @@ export class AddNotebookDialog extends React.Component {
                   {
                     borderColor: titleFocused ? colors.accent : colors.nav,
                     color: colors.pri,
+                    fontSize: SIZE.md,
                   },
                 ]}
                 numberOfLines={1}
@@ -447,20 +450,12 @@ export class AddNotebookDialog extends React.Component {
                 )}
               />
 
-              <View style={styles.buttonContainer}>
+              <DialogButtons
-                <Button
+                negativeTitle="Cancel"
-                  title={toEdit && toEdit.dateCreated ? 'Save' : 'Add'}
+                positiveTitle={toEdit && toEdit.dateCreated ? 'Save' : 'Add'}
-                  width="48%"
+                onPressPositive={this.addNewNotebook}
-                  onPress={this.addNewNotebook}
+                onPressNegative={this.close}
               />
-
-                <Button
-                  title="Cancel"
-                  grayed
-                  width="48%"
-                  onPress={this.close}
-                />
-              </View>
             </View>
           </KeyboardAvoidingView>
           <Toast context="local" />
@@ -555,10 +550,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   container: {
-    width: DDS.isTab ? 500 : '100%',
+    width: DDS.isTab ? 500 : '80%',
-    height: DDS.isTab ? 600 : '100%',
+    height: DDS.isTab ? 600 : null,
-    maxHeight: DDS.isTab ? 600 : '100%',
+    maxHeight: DDS.isTab ? 600 :"90%",
-    borderRadius: DDS.isTab ? 5 : 0,
+    borderRadius: 5,
     paddingHorizontal: 12,
     paddingVertical: pv,
   },
@@ -578,10 +573,11 @@ const styles = StyleSheet.create({
     fontSize: SIZE.xl,
   },
   input: {
-    paddingHorizontal: ph,
+    paddingRight: 12,
+    paddingHorizontal: 0,
     borderRadius: 0,
     minHeight: 45,
-    fontSize: SIZE.sm,
+    fontSize: SIZE.md,
     fontFamily: WEIGHT.regular,
     padding: pv - 2,
     borderBottomWidth: 1,