From c220d2077743e781d02d2c364d28100f60985eb0 Mon Sep 17 00:00:00 2001
From: Gergo IVAN <ivgraai@gmail.com>
Date: Sat, 1 Aug 2020 07:11:21 +0200
Subject: [PATCH] Update user interface.

close #71
---
 app.json                                |  1 +
 constants/styles/DateTimePickerModal.ts | 27 +++++++++++++++++++++----
 constants/styles/MainScreen.ts          |  6 ++++++
 screens/MainScreen.tsx                  |  1 +
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app.json b/app.json
index 7446714..25b8bc8 100644
--- 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
index 621f569..9d8d298 100644
--- 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
index 14fd8b5..106511c 100644
--- 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
index 9840229..37c4a0b 100644
--- 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