notify card

2023-08-13 17:20:39 +00:00 · 2023-08-13 17:20:39 +00:00 · f33b7f7c97
parent aa46586b98
commit f33b7f7c97
11 changed files with 197 additions and 52 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/src/Components/Button/index.js
+++ b/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>
  );
 }
--- a/src/Components/Card/index.js
+++ b/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>
+  );
+}
--- a/src/Components/Modal/index.js
+++ b/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,
-              marginRight: 10,
+              paddingLeft: 20,
+              paddingRight: 18,
+              paddingBottom: 2,
            }}
          >
            <Text
--- a/src/Screens/Device/modals/EditActions/Wait/index.js
+++ b/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();
--- a/src/Screens/Device/scene.js
+++ b/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={() => {
--- a/src/Screens/Device/settings.js
+++ b/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 {
-  AppContext,
-  AppSelectedUserDevice,
-  AppStyles,
-  GetDevice,
-} from "../../utils";
+import { AppContext, AppStyles, Constants, 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 { MyBottomSheetModal, MyConfirmModal } from "../../Components/Modal";
+import MyButton, { MyIconButton } from "../../Components/Button";
+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(
--- a/src/Screens/Help/index.js
+++ b/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>
  );
 }
--- a/src/Screens/SearchForNewDevices/index.js
+++ b/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
            }
          />
--- a/src/utils.js
+++ b/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 = {