Update user interface.

close #71
ivgraai · Aug 1, 2020 · c220d20 · c220d20
1 parent 435e253
commit c220d20
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/app.json b/app.json
@@ -38,6 +38,7 @@
 
     },
     "description": "This app does help you with keeping track of your perishable foods by notifications, etc. Moreover you can share these goods with others if you think.",
+    "primaryColor": "#556b2f",
     "extra": {
       "init": false,
       "serverUrl": "http://192.168.8.104:8080/v1/",

diff --git a/constants/styles/DateTimePickerModal.ts b/constants/styles/DateTimePickerModal.ts
@@ -6,13 +6,22 @@ const backgroundColor = "transparent";
 const fontSize = PixelRatio.getFontScale() * Layout.largerFontSize;
 const buttonHeight = PixelRatio.getPixelSizeForLayoutSize(23.5);
 const buttonFontWeight = "normal";
+const borderRadius = 13;
 
 export const styles: any = (isDark: boolean) => StyleSheet.create({
     headerRoot: {
         borderBottomColor: Layout.borderColor,
         borderBottomWidth: StyleSheet.hairlineWidth,
         padding: PixelRatio.getPixelSizeForLayoutSize(7),
-        backgroundColor
+        backgroundColor,
+        borderLeftColor: Layout.borderColor,
+        borderLeftWidth: Layout.borderWidth,
+        borderTopLeftRadius: borderRadius,
+        borderTopColor: Layout.borderColor,
+        borderTopWidth: Layout.borderWidth,
+        borderTopRightRadius: borderRadius,
+        borderRightColor: Layout.borderColor,
+        borderRightWidth: Layout.borderWidth
     },
     headerText: {
         textAlign: "center",
@@ -24,7 +33,15 @@ export const styles: any = (isDark: boolean) => StyleSheet.create({
         borderTopWidth: StyleSheet.hairlineWidth,
         backgroundColor,
         height: buttonHeight,
-        justifyContent: "center"
+        justifyContent: "center",
+        borderLeftColor: Layout.borderColor,
+        borderLeftWidth: Layout.borderWidth,
+        borderBottomLeftRadius: borderRadius,
+        borderBottomColor: Layout.borderColor,
+        borderBottomWidth: Layout.borderWidth,
+        borderBottomRightRadius: borderRadius,
+        borderRightColor: Layout.borderColor,
+        borderRightWidth: Layout.borderWidth
     },
     confirmText: {
         textAlign: "center",
@@ -34,11 +51,13 @@ export const styles: any = (isDark: boolean) => StyleSheet.create({
         backgroundColor
     },
     cancelButton: {
-        borderRadius: 13,
+        borderRadius: borderRadius,
         height: buttonHeight,
         marginBottom: 0,
         justifyContent: "center",
-        backgroundColor: isDark ? "#0E0E0E" : "white"
+        backgroundColor: isDark ? "#0E0E0E" : "white",
+        borderColor: Layout.borderColor,
+        borderWidth: Layout.borderWidth
     },
     cancelText: {
         padding: PixelRatio.getPixelSizeForLayoutSize(5),

diff --git a/constants/styles/MainScreen.ts b/constants/styles/MainScreen.ts
@@ -79,6 +79,12 @@ export const styles = (isDark: boolean) => StyleSheet.create({
         width: Layout.widthPercentageAsString,
         maxHeight: "40%"
     },
+    dataExpirationDateModal: {
+        borderLeftColor: Layout.borderColor,
+        borderLeftWidth: Layout.borderWidth,
+        borderRightColor: Layout.borderColor,
+        borderRightWidth: Layout.borderWidth
+    },
     dataLocationCheckBoxContainer: {
         marginTop: PixelRatio.getPixelSizeForLayoutSize(-3),
         backgroundColor: "transparent",

diff --git a/screens/MainScreen.tsx b/screens/MainScreen.tsx
@@ -287,6 +287,7 @@ class MainScreen extends React.Component<IComponentProps, IComponentState> {
               customHeaderIOS={dateTimePickerHeader}
               customConfirmButtonIOS={dateTimePickerConfirmButton}
               customCancelButtonIOS={dateTimePickerCancelButton}
+              style={withStyle.dataExpirationDateModal}
             />
           </View>
           <CheckBox