Fix styling of share-extension dialogue

WorldBrain · Feb 13, 2020 · d7c07b7 · d7c07b7
1 parent a8c3df3
commit d7c07b7
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 16 deletions.
diff --git a/app/src/features/meta-picker/ui/components/meta-picker-entry.styles.ts b/app/src/features/meta-picker/ui/components/meta-picker-entry.styles.ts
@@ -7,6 +7,7 @@ export default EStyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: '1rem',
+        paddingHorizontal: '1.5rem',
     },
     containerBorder: {
         borderBottomWidth: 1,
@@ -21,7 +22,7 @@ export default EStyleSheet.create({
         backgroundColor: '#83c9f4',
     },
     entryText: {
-        fontSize: '1.2rem',
+        fontSize: '1.4rem',
         color: '$textColor',
         fontWeight: '400',
     },

diff --git a/app/src/features/meta-picker/ui/components/search-add-input.styles.ts b/app/src/features/meta-picker/ui/components/search-add-input.styles.ts
@@ -3,6 +3,7 @@ import EStyleSheet from 'react-native-extended-stylesheet'
 export default EStyleSheet.create({
     container: {
         margin: '1rem',
+        marginHorizontal: '1.5rem',
         borderRadius: 5,
         backgroundColor: '#f1f1f1',
     },

diff --git a/app/src/features/page-share/ui/components/action-bar-segment.styles.ts b/app/src/features/page-share/ui/components/action-bar-segment.styles.ts
@@ -8,13 +8,21 @@ export default EStyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingHorizontal: 15,
+        paddingHorizontal: '1.5rem',
         borderBottomWidth: 1,
         borderBottomColor: '#eaeae9',
-        height: 50,
+        height: '4rem',
+    },
+    buttonText: {
+        fontSize: '1.3rem',
+        color: '#007AFF',
+    },
+    buttonTextDisabled: {
+        fontSize: '1.3rem',
+        color: '#C4C4C4',
     },
     mainText: {
-        fontSize: 18,
+        fontSize: '1rem',
         fontWeight: 'bold',
     },
 })
diff --git a/app/src/features/page-share/ui/components/action-bar-segment.tsx b/app/src/features/page-share/ui/components/action-bar-segment.tsx
@@ -6,6 +6,7 @@ import {
     NativeSyntheticEvent,
     NativeTouchEvent,
     Keyboard,
+    TouchableOpacity,
 } from 'react-native'
 
 import styles from './action-bar-segment.styles'
@@ -19,16 +20,22 @@ export interface Props {
 const ActionBar: React.StatelessComponent<Props> = props => (
     <View style={styles.container} onTouchStart={() => Keyboard.dismiss()}>
         {props.onCancelPress ? (
-            <Button title="Back" onPress={props.onCancelPress} />
+            <TouchableOpacity onPress={props.onCancelPress}>
+                <Text style={styles.buttonText}>Back</Text>
+            </TouchableOpacity>
         ) : (
             <Text style={styles.placeholderBtn}>Back</Text>
         )}
         <Text style={styles.mainText}>{props.children}</Text>
         {props.onConfirmPress &&
             (props.isConfirming ? (
-                <Button title="Saving..." disabled onPress={f => f} />
+                <TouchableOpacity disabled>
+                    <Text style={styles.buttonTextDisabled}>Saving...</Text>
+                </TouchableOpacity>
             ) : (
-                <Button title="Save" onPress={props.onConfirmPress} />
+                <TouchableOpacity onPress={props.onConfirmPress}>
+                    <Text style={styles.buttonText}>Save</Text>
+                </TouchableOpacity>
             ))}
     </View>
 )

diff --git a/app/src/features/page-share/ui/components/note-input-segment.styles.ts b/app/src/features/page-share/ui/components/note-input-segment.styles.ts
@@ -6,14 +6,16 @@ export default EStyleSheet.create({
         flexDirection: 'row',
         borderBottomWidth: 1,
         borderBottomColor: '#eaeae9',
-        padding: 15,
+        padding: '2rem',
+        paddingTop: '1rem',
         paddingBottom: 0,
     },
     textInput: {
         height: '100%',
         width: '100%',
-        color: '#545454',
+        color: '$textColor',
         fontWeight: '500',
-        fontSize: 16,
+        fontStyle: 'italic',
+        fontSize: '1.2rem',
     },
 })
diff --git a/app/src/features/page-share/ui/components/note-input-segment.tsx b/app/src/features/page-share/ui/components/note-input-segment.tsx
@@ -19,6 +19,7 @@ const NoteInput: React.StatelessComponent<Props> = props => (
             placeholder="Add Note"
             multiline
             editable={!props.disabled}
+            placeholderTextColor={'#3a2f45'}
         />
     </View>
 )

diff --git a/app/src/features/page-share/ui/components/share-modal.styles.ts b/app/src/features/page-share/ui/components/share-modal.styles.ts
@@ -9,7 +9,7 @@ export default EStyleSheet.create({
         position: 'absolute',
         left: '2%',
         right: '2%',
-        top: 10,
+        top: '0rem',
         bottom: 200,
         borderRadius: 10,
         height: '50%',

diff --git a/app/src/features/page-share/ui/components/touchable-segment.styles.ts b/app/src/features/page-share/ui/components/touchable-segment.styles.ts
@@ -6,23 +6,24 @@ export default EStyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingHorizontal: 15,
+        paddingHorizontal: '1.5rem',
     },
     outter: {
         flex: 1,
+        justifyContent: 'center',
     },
     mainText: {
         color: '#3a2f45',
-        fontWeight: '700',
-        fontSize: 14,
+        fontWeight: '600',
+        fontSize: '1.2rem',
         fontFamily: 'Poppins',
     },
     border: {
         borderBottomWidth: 1,
         borderBottomColor: '#eaeae9',
     },
     starIcon: {
-        width: 15,
-        height: 15,
+        width: '1.3rem',
+        height: '1.3rem',
     },
 })