notify card

package-lock.json

@@ -15,6 +15,7 @@
         "@react-navigation/stack": "^6.3.17",
         "expo": "~48.0.18",
         "expo-haptics": "~12.2.1",
+        "expo-linear-gradient": "~12.1.2",
         "expo-status-bar": "~1.4.4",
         "i18next": "^23.2.11",
         "i18next-browser-languagedetector": "^7.1.0",
@@ -23,7 +24,6 @@
         "react-native": "0.71.8",
         "react-native-draggable-flatlist": "^4.0.1",
         "react-native-gesture-handler": "~2.9.0",
-        "react-native-linear-gradient": "^2.8.2",
         "react-native-pager-view": "6.1.2",
         "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
@@ -7193,6 +7193,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-linear-gradient": {
+      "version": "12.1.2",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.1.2.tgz",
+      "integrity": "sha512-e1d6Hq5qsRL8sWutrOuQhuir4vHiRJ1PmvDIL8P33mt51Y8VFTQjTG/mr5qJlT8lUD/ADJfaBLzV7SNqSuDTLQ==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz",
@@ -11940,15 +11948,6 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz",
       "integrity": "sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ=="
     },
-    "node_modules/react-native-linear-gradient": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.2.tgz",
-      "integrity": "sha512-hgmCsgzd58WNcDCyPtKrvxsaoETjb/jLGxis/dmU3Aqm2u4ICIduj4ECjbil7B7pm9OnuTkmpwXu08XV2mpg8g==",
-      "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/react-native-pager-view": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.1.2.tgz",

package.json

@@ -24,7 +24,6 @@
     "react-native": "0.71.8",
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-gesture-handler": "~2.9.0",
-    "react-native-linear-gradient": "^2.8.2",
     "react-native-pager-view": "6.1.2",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
@@ -32,7 +31,8 @@
     "react-native-tab-view": "^3.5.2",
     "react-native-uuid": "^2.0.1",
     "react-native-zeroconf": "^0.13.8",
-    "reanimated-color-picker": "^2.3.1"
+    "reanimated-color-picker": "^2.3.1",
+    "expo-linear-gradient": "~12.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/Components/Button/index.js

@@ -6,8 +6,9 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import { AppContext, AppStyles } from "../../utils";
+import { AppContext, AppStyles, Constants } from "../../utils";
 import MyIcon from "../Icon";
+import { LinearGradient } from "expo-linear-gradient";
 
 export default function MyButton({
   title,
@@ -15,14 +16,19 @@ export default function MyButton({
   disabled,
   onPress,
   buttonLeftComponent,
-  buttonBackgroundColor,
+  buttonGradientColor,
 }) {
   const appContext = useContext(AppContext);
 
-  const bBackgroundColor =
+  /*const bBackgroundColor =
     buttonBackgroundColor === undefined
       ? appContext.appTheme.colors.primary
-      : buttonBackgroundColor;
+      : buttonBackgroundColor; */
+
+  const bGradientColor =
+    buttonGradientColor === undefined
+      ? Constants.gradients.orange
+      : buttonGradientColor;
 
   return (
     <TouchableHighlight
@@ -30,16 +36,22 @@ export default function MyButton({
       onPress={onPress}
       style={[{ borderRadius: 6 }, style]}
     >
-      <View
+      <LinearGradient
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={bGradientColor}
         style={[
           {
-            backgroundColor: bBackgroundColor,
+            //backgroundColor: bBackgroundColor,
             borderRadius: 6,
             padding: 10,
           },
-          AppStyles.Shadow,
+          //AppStyles.Shadow,
           disabled && { opacity: 0.6 },
-          buttonLeftComponent && { flexDirection: "row", alignItems: "center" },
+          buttonLeftComponent && {
+            flexDirection: "row",
+            alignItems: "center",
+          },
         ]}
       >
         {buttonLeftComponent}
@@ -51,7 +63,7 @@ export default function MyButton({
         >
           {title}
         </Text>
-      </View>
+      </LinearGradient>
     </TouchableHighlight>
   );
 }

src/Components/Card/index.js

@@ -1,6 +1,9 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { Text, View } from "react-native";
-import { AppContext, AppStyles } from "../../utils";
+import { AppContext, AppStyles, Constants } from "../../utils";
+import { LinearGradient } from "expo-linear-gradient";
+import { MyIconButton } from "../Button";
+import MyIcon from "../Icon";
 
 export default function Card({
   children,
@@ -40,11 +43,11 @@ export default function Card({
       <View
         style={[
           {
-            borderRadius: 20,
             backgroundColor: backgroundColor,
             padding: 20,
           },
           AppStyles.Shadow,
+          AppStyles.card,
         ]}
       >
         {children}
@@ -52,3 +55,83 @@ export default function Card({
     </View>
   );
 }
+
+export function MyNotifyCard({
+  iconName,
+  notifyTitle,
+  notifyDescription,
+  onClose,
+}) {
+  const [notifyVisible, setNotifyVisible] = useState(true);
+
+  if (!notifyVisible) return null;
+
+  return (
+    <View
+      style={[
+        {
+          marginTop: 10,
+          marginLeft: 10,
+          marginRight: 10,
+        },
+        AppStyles.card,
+      ]}
+    >
+      <LinearGradient
+        style={[
+          {
+            width: "100%",
+            paddingTop: 20,
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingBottom: 20,
+          },
+          AppStyles.card,
+        ]}
+        colors={Constants.gradients.red}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-evenly",
+            gap: 10,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+          >
+            <MyIcon name={iconName} color={"yellow"} size={36} />
+          </View>
+
+          <View style={{ width: "70%" }}>
+            <Text
+              style={[
+                { color: "#fff", fontWeight: "bold" },
+                AppStyles.typography16,
+              ]}
+            >
+              {notifyTitle}
+            </Text>
+
+            <Text style={{ color: "#fff" }}>{notifyDescription}</Text>
+          </View>
+
+          <MyIconButton
+            iconName="close"
+            iconSize={24}
+            iconColor={"#ddd"}
+            onPress={() => {
+              onClose();
+              setNotifyVisible(false);
+            }}
+          />
+        </View>
+      </LinearGradient>
+    </View>
+  );
+}

src/Components/Modal/index.js

@@ -364,7 +364,9 @@ export function MyBottomSheetModal({
       duration: 100,
       easing: Easing.ease,
     });
+
     opacity.value = withTiming(0, { duration: 100, easing: Easing.ease });
+
     setTimeout(() => closeModal(), 100);
   };
 
@@ -398,7 +400,6 @@ export function MyBottomSheetModal({
               borderTopLeftRadius: 20,
               borderTopRightRadius: 20,
               height: modalHeight,
-              paddingTop: 12,
               shadowRadius: 8,
               shadowOffset: {
                 width: 0,
@@ -406,6 +407,7 @@ export function MyBottomSheetModal({
               },
               shadowColor: "#000000",
               elevation: 6,
+              paddingTop: 20,
             },
             animatedStyle,
           ]}
@@ -414,8 +416,9 @@ export function MyBottomSheetModal({
             style={{
               flexDirection: "row",
               justifyContent: "space-between",
-              marginLeft: 10,
+              paddingLeft: 20,
-              marginRight: 10,
+              paddingRight: 18,
+              paddingBottom: 2,
             }}
           >
             <Text

src/Screens/Device/modals/EditActions/Wait/index.js

@@ -64,8 +64,6 @@ const windowHeight = Dimensions.get("window").height;
 
 const modalHeight = windowHeight * 0.6; // 60 % of device screen
 
-console.log("modalHe", modalHeight);
-
 export default function WaitEditActionModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();

src/Screens/Device/scene.js

@@ -1,5 +1,5 @@
 import { Text, TouchableOpacity, View } from "react-native";
-import Card from "../../Components/Card";
+import Card, { MyNotifyCard } from "../../Components/Card";
 import {
   AppContext,
   AppSelectedUserDevice,
@@ -13,7 +13,7 @@ import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
 import { useTranslation } from "react-i18next";
 import MyResult from "../../Components/Result";
-import { MyTextButton } from "../../Components/Button";
+import { MyIconButton, MyTextButton } from "../../Components/Button";
 import { useFocusEffect } from "@react-navigation/native";
 import { Divider } from "../../Components/Divider";
 import { MyColorSwatch } from "../../Components/ColorPicker";
@@ -21,6 +21,7 @@ import { MyDotsModal } from "../../Components/Modal";
 import DraggableFlatList, {
   ScaleDecorator,
 } from "react-native-draggable-flatlist";
+import { LinearGradient } from "expo-linear-gradient";
 
 export default function SceneView({ navigation }) {
   const appContext = useContext(AppContext);
@@ -132,10 +133,25 @@ export default function SceneView({ navigation }) {
 
   const lastSceneAction = deviceSceneActions[deviceSceneActions.length - 1];
 
+  const NotifyCard = () => {
+    // TODO: API show notify card if there are some problems with the esp
+    return (
+      <MyNotifyCard
+        iconName="connection"
+        notifyTitle={"Netzteil überprüfen"}
+        notifyDescription={
+          "Bitte überprüfen Sie, ob das korrekte Netzteil verwendet wurde."
+        }
+        onClose={() => console.log("closed notify")}
+      />
+    );
+  };
+
   return (
     <>
       {device.selectedScene === "" ? (
         <>
+          <NotifyCard />
           <DropdownCard />
 
           <MyResult
@@ -163,6 +179,8 @@ export default function SceneView({ navigation }) {
           keyExtractor={(item) => item.actionId}
           ListHeaderComponent={
             <View style={{ marginBottom: 10 }}>
+              <NotifyCard />
+
               <DropdownCard />
             </View>
           }
@@ -538,7 +556,6 @@ function ActionListItem({ drag, navigation, device, item }) {
             </View>
           </View>
 
-          {console.log("drag", drag)}
           <TouchableOpacity
             disabled={drag === false}
             onLongPress={() => {

src/Screens/Device/settings.js

@@ -1,17 +1,12 @@
-import { Button, ScrollView, Text, View } from "react-native";
+import { ScrollView, Text, View } from "react-native";
 import Card from "../../Components/Card";
 import { useContext, useEffect, useState } from "react";
-import {
+import { AppContext, AppStyles, Constants, GetDevice } from "../../utils";
-  AppContext,
-  AppSelectedUserDevice,
-  AppStyles,
-  GetDevice,
-} from "../../utils";
 import { Divider } from "../../Components/Divider";
 import { useTranslation } from "react-i18next";
 import MySwitch from "../../Components/Switch";
-import MyButton, { MyIconButton, MyTextButton } from "../../Components/Button";
+import MyButton, { MyIconButton } from "../../Components/Button";
-import { MyBottomSheetModal, MyConfirmModal } from "../../Components/Modal";
+import { MyBottomSheetModal } from "../../Components/Modal";
 
 export default function SettingsView({ navigation }) {
   const appContext = useContext(AppContext);
@@ -64,8 +59,6 @@ export default function SettingsView({ navigation }) {
   }, []);
 
   const deleteDeviceFromApp = () => {
-    console.log("dev", appContext.devices.length);
-
     appContext.setDevices((devices) =>
       devices.filter((d) => d.id !== device.id)
     );
@@ -78,8 +71,6 @@ export default function SettingsView({ navigation }) {
       actions.filter((a) => a.deviceId !== device.id)
     );
 
-    console.log("dev", appContext.devices.length);
-
     // show no devices connected screen if there are no devices left
     if (appContext.devices.length < 2) {
       navigation.navigate("_noDevicesConnected");
@@ -88,8 +79,6 @@ export default function SettingsView({ navigation }) {
     // TODO: remove device from app async storage if it is not already handled by appContext
   };
 
-  const bottomSheetModalHeight = appContext.appLanguage === "en" ? 150 : 170;
-
   return (
     <ScrollView>
       <Card
@@ -237,9 +226,9 @@ export default function SettingsView({ navigation }) {
           headerTitle={t(
             "screens.device.settings.bottomSheetModalCloseConnection.headerTitle"
           )}
-          modalHeight={bottomSheetModalHeight}
+          modalHeight={172}
         >
-          <View style={{ margin: 10 }}>
+          <View style={{ paddingLeft: 20, paddingRight: 20 }}>
             <Text
               style={[
                 { color: appContext.appTheme.text },
@@ -266,6 +255,7 @@ export default function SettingsView({ navigation }) {
                 style={{ width: 100 }}
                 buttonBackgroundColor={appContext.appTheme.buttonSecondary}
                 onPress={() => setIsBottomSheetModalCloseConnectionOpen(false)}
+                buttonGradientColor={Constants.gradients.gray}
               />
               <MyButton
                 title={t(
@@ -310,9 +300,9 @@ export default function SettingsView({ navigation }) {
           headerTitle={t(
             "screens.device.settings.bottomSheetModalResetToFactorySettings.headerTitle"
           )}
-          modalHeight={bottomSheetModalHeight}
+          modalHeight={appContext.appLanguage === "en" ? 152 : 172}
         >
-          <View style={{ margin: 10 }}>
+          <View style={{ paddingLeft: 20, paddingRight: 20 }}>
             <Text
               style={[
                 { color: appContext.appTheme.text },
@@ -341,6 +331,7 @@ export default function SettingsView({ navigation }) {
                 onPress={() =>
                   setIsBottomSheetModalResetToFactorySettingsOpen(false)
                 }
+                buttonGradientColor={Constants.gradients.gray}
               />
               <MyButton
                 title={t(

src/Screens/Help/index.js

@@ -1,6 +1,8 @@
 import { useContext } from "react";
 import { AppContext } from "../../utils";
 import { Text, View } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import MyButton from "../../Components/Button";
 
 export default function HelpScreen() {
   const appContext = useContext(AppContext);
@@ -14,6 +16,31 @@ export default function HelpScreen() {
     >
       <Text style={{ color: appContext.appTheme.text }}>FAQ</Text>
       <Text style={{ color: appContext.appTheme.text }}>Give Feedback</Text>
+
+      <LinearGradient
+        colors={["#4c669f", "#3b5998", "#192f6a"]}
+        style={{
+          width: 150,
+          height: 150,
+          paddingLeft: 15,
+          paddingRight: 15,
+          borderRadius: 5,
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 18,
+            textAlign: "center",
+            margin: 10,
+            color: "#ffffff",
+            backgroundColor: "transparent",
+          }}
+        >
+          Sign in with Facebook
+        </Text>
+      </LinearGradient>
+
+      <MyButton title={"test"} onPress={() => console.log("t")} />
     </View>
   );
 }

src/Screens/SearchForNewDevices/index.js

@@ -3,6 +3,7 @@ import {
   AddNewDevice,
   AppContext,
   AppStyles,
+  Constants,
   ModalContainer,
 } from "../../utils";
 import {
@@ -173,6 +174,7 @@ export default function SearchForNewDevicesModalContent({ navigation }) {
         </View>
 
         <MyButton
+          buttonGradientColor={Constants.gradients.gray}
           style={{ width: 200 }}
           title={texts.searchButton}
           onPress={() => {
@@ -321,7 +323,12 @@ function FoundDevice({ item, appContext, t }) {
                   style={{ marginRight: 6 }}
                 />
               ) : connectingState === FoundDeviceState.connected ? (
-                <MyIcon name="check" size={12} style={{ marginRight: 6 }} />
+                <MyIcon
+                  name="check"
+                  size={12}
+                  style={{ marginRight: 6 }}
+                  color={"#fff"}
+                />
               ) : null
             }
           />

src/utils.js

@@ -42,6 +42,11 @@ export const Constants = {
     max_scene_name_length: 20,
   },
   defaultAnimationId: "00000000-0000-0000-0000-000000000000", // used id for -> No animation selected
+  gradients: {
+    orange: ["#fd4f2b", "#f9994d"],
+    gray: ["#60696b", "#A9A9A9"],
+    red: ["#f71e06", "#fd4b2f"],
+  },
 };
 
 export const AppStyles = StyleSheet.create({
@@ -77,6 +82,9 @@ export const AppStyles = StyleSheet.create({
   appBottom: {
     marginBottom: 40,
   },
+  card: {
+    borderRadius: 20,
+  },
 });
 
 const DarkAppTheme = {