diff --git a/package-lock.json b/package-lock.json index 716f1ee..572c0ef 100644 --- 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", diff --git a/package.json b/package.json index 05af096..d35d4b4 100644 --- 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" diff --git a/src/Components/Button/index.js b/src/Components/Button/index.js index f17e0c8..a1c3b0c 100644 --- 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 ( - {buttonLeftComponent} @@ -51,7 +63,7 @@ export default function MyButton({ > {title} - + ); } diff --git a/src/Components/Card/index.js b/src/Components/Card/index.js index a79474c..5360174 100644 --- 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({ {children} @@ -52,3 +55,83 @@ export default function Card({ ); } + +export function MyNotifyCard({ + iconName, + notifyTitle, + notifyDescription, + onClose, +}) { + const [notifyVisible, setNotifyVisible] = useState(true); + + if (!notifyVisible) return null; + + return ( + + + + + + + + + + {notifyTitle} + + + {notifyDescription} + + + { + onClose(); + setNotifyVisible(false); + }} + /> + + + + ); +} diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js index 591080a..f41ebfa 100644 --- 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, }} > { + // TODO: API show notify card if there are some problems with the esp + return ( + console.log("closed notify")} + /> + ); + }; + return ( <> {device.selectedScene === "" ? ( <> + item.actionId} ListHeaderComponent={ + + } @@ -538,7 +556,6 @@ function ActionListItem({ drag, navigation, device, item }) { - {console.log("drag", drag)} { diff --git a/src/Screens/Device/settings.js b/src/Screens/Device/settings.js index b543779..f55ed3f 100644 --- 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 ( - + setIsBottomSheetModalCloseConnectionOpen(false)} + buttonGradientColor={Constants.gradients.gray} /> - + setIsBottomSheetModalResetToFactorySettingsOpen(false) } + buttonGradientColor={Constants.gradients.gray} /> FAQ Give Feedback + + + + Sign in with Facebook + + + + console.log("t")} /> ); } diff --git a/src/Screens/SearchForNewDevices/index.js b/src/Screens/SearchForNewDevices/index.js index aacbdf7..443c23d 100644 --- 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 }) { { @@ -321,7 +323,12 @@ function FoundDevice({ item, appContext, t }) { style={{ marginRight: 6 }} /> ) : connectingState === FoundDeviceState.connected ? ( - + ) : null } /> diff --git a/src/utils.js b/src/utils.js index f24ba14..1b57414 100644 --- 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 = {