From 453a864e11dd90c1fba88ace959630297c323899 Mon Sep 17 00:00:00 2001 From: Michal Struck Date: Sun, 4 Feb 2024 17:03:09 +0100 Subject: [PATCH 01/12] app-redesign: animated tabbar --- native/navigation/BottomTabNavigation.tsx | 33 ++++++++++++----------- native/navigation/types.ts | 1 + 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/native/navigation/BottomTabNavigation.tsx b/native/navigation/BottomTabNavigation.tsx index 97bb4e6e..5c53d416 100644 --- a/native/navigation/BottomTabNavigation.tsx +++ b/native/navigation/BottomTabNavigation.tsx @@ -6,6 +6,8 @@ import { View } from "react-native"; import { DeliveryFormContextProvider } from "../components/DeliveryFormContext/DeliveryFormContextProvider"; import { DeliveryIcon, InventoryIcon, ListIcon } from "../components/Icon"; import { InventoryFormContextProvider } from "../components/InventoryFormContext/InventoryFormContextProvider"; + +import { CleanTabBar } from "../components/TabBar"; import { Typography } from "../components/Typography"; import { useListInventories } from "../db"; import { useGetInventoryName } from "../db/hooks/useGetInventoryName"; @@ -142,16 +144,20 @@ const InventoryStackNavigator = ({ route }: InventoryTabProps) => { }; export const BottomTabNavigation = ({}: BottomTabProps) => { + const theme = useTheme(); return ( - + } + > ( - - ), + tabBarActiveTintColor: theme.colors.black, + tabBarIcon: () => , headerShown: false, lazy: false, }} @@ -160,13 +166,11 @@ export const BottomTabNavigation = ({}: BottomTabProps) => { name="InventoryTab" component={InventoryStackNavigator} options={{ + title: "Inwentaryzacja", tabBarShowLabel: false, - tabBarIcon: ({ focused }) => ( - - ), + tabBarActiveTintColor: theme.colors.black, + tabBarIcon: () => , + headerShown: false, }} /> @@ -174,13 +178,10 @@ export const BottomTabNavigation = ({}: BottomTabProps) => { name="DeliveryTab" component={DeliveryStackNavigator} options={{ + title: "Dostawa", tabBarShowLabel: false, - tabBarIcon: ({ focused }) => ( - - ), + tabBarActiveTintColor: theme.colors.black, + tabBarIcon: () => , headerShown: false, }} /> diff --git a/native/navigation/types.ts b/native/navigation/types.ts index d7d7e0fe..c59383ee 100644 --- a/native/navigation/types.ts +++ b/native/navigation/types.ts @@ -39,6 +39,7 @@ export type BottomTabProps = CompositeScreenProps< NativeStackScreenProps, NativeStackScreenProps >; +export type BottomTabNavigatorScreen = keyof BottomTabParamList; /** * List Tab/Stack From 20088252cf2522a6f7cda894316bbd9456b227e2 Mon Sep 17 00:00:00 2001 From: Michal Struck Date: Sun, 4 Feb 2024 17:03:31 +0100 Subject: [PATCH 02/12] app-redesign: animated tabbar --- native/components/TabBar/TabBar.tsx | 213 ++++++++++++++++++ native/components/TabBar/TabBarDot.tsx | 18 ++ .../components/TabBar/TabBarTriangleCover.tsx | 38 ++++ native/components/TabBar/TabStyle.ts | 80 +++++++ native/components/TabBar/index.ts | 1 + native/components/TabBar/types.ts | 16 ++ 6 files changed, 366 insertions(+) create mode 100644 native/components/TabBar/TabBar.tsx create mode 100644 native/components/TabBar/TabBarDot.tsx create mode 100644 native/components/TabBar/TabBarTriangleCover.tsx create mode 100644 native/components/TabBar/TabStyle.ts create mode 100644 native/components/TabBar/index.ts create mode 100644 native/components/TabBar/types.ts diff --git a/native/components/TabBar/TabBar.tsx b/native/components/TabBar/TabBar.tsx new file mode 100644 index 00000000..a6a96857 --- /dev/null +++ b/native/components/TabBar/TabBar.tsx @@ -0,0 +1,213 @@ +import { BottomTabBarProps } from "@react-navigation/bottom-tabs"; +import { useTheme } from "@react-navigation/native"; +import React, { useEffect, useRef } from "react"; +import { + Animated, + Easing, + SafeAreaView, + Text, + TouchableOpacity, + View, +} from "react-native"; +import { BottomTabNavigatorScreen } from "../../navigation/types"; +import { TabBarDot } from "./TabBarDot"; +import { TabBarTriangleCover } from "./TabBarTriangleCover"; +import { CleanTabBarStyle } from "./TabStyle"; + +export const CleanTabBar = (props: BottomTabBarProps) => { + const theme = useTheme(); + const BACKGROUND_COLOR = theme.colors.white; + + return ( + + + + + + ); +}; + +export const CleanTabBarContent = ({ + state, + descriptors, + navigation, +}: BottomTabBarProps) => { + const theme = useTheme(); + const BACKGROUND_COLOR = theme.colors.white; + const FOREGROUND_COLOR = theme.colors.darkBlue; + + return state.routes.map((route, index) => { + const focusAnimation = useRef(new Animated.Value(0)).current; + + const { options } = descriptors[route.key as BottomTabNavigatorScreen]; + + const label = options.title; + const labelStyle = + options.tabBarLabelStyle !== undefined ? options.tabBarLabelStyle : {}; + + let color = + options.tabBarActiveTintColor !== undefined + ? options.tabBarActiveTintColor + : theme.colors.darkBlue; + + const icon = options.tabBarIcon !== undefined ? options.tabBarIcon : null; + + const renderIcon = (focused: boolean) => { + if (!icon) { + return No icon; + } + + return icon({ + focused, + color: focused ? FOREGROUND_COLOR : FOREGROUND_COLOR, + size: 23, + }); + }; + + const isFocused = state.index === index; + + const onPress = () => { + const event = navigation.emit({ + type: "tabPress", + target: route.key, + canPreventDefault: true, + }); + + if (!isFocused && !event.defaultPrevented) { + navigation.navigate(route); + } + }; + + const onLongPress = () => { + navigation.emit({ + type: "tabLongPress", + target: route.key, + }); + }; + + useEffect(() => { + if (isFocused) { + onFocusedAnimation(); + } else { + notFocusedAnimation(); + } + }, [isFocused]); + + const onFocusedAnimation = () => { + console.log("focusedanim"); + Animated.timing(focusAnimation, { + toValue: 1, + duration: 700, + useNativeDriver: true, + easing: Easing.bezier(0.33, 1, 0.68, 1), + }).start(); + }; + + const notFocusedAnimation = () => { + Animated.timing(focusAnimation, { + toValue: 0, + duration: 700, + useNativeDriver: true, + easing: Easing.bezier(0.33, 1, 0.68, 1), + }).start(); + }; + + const translateYIcon = focusAnimation.interpolate({ + inputRange: [0, 1], + outputRange: [0, -18], + }); + const scaleIcon = focusAnimation.interpolate({ + inputRange: [0, 0.9, 1], + outputRange: [1, 1, 0], + }); + const translateYFilterIcon = focusAnimation.interpolate({ + inputRange: [0, 1], + outputRange: [20, -35], + }); + const translateYText = focusAnimation.interpolate({ + inputRange: [0, 1], + outputRange: [40, 0], + }); + const scaleText = focusAnimation.interpolate({ + inputRange: [0, 0.1, 1], + outputRange: [0, 1, 1], + }); + const scaleDot = focusAnimation.interpolate({ + inputRange: [0, 1], + outputRange: [0, 1], + }); + + return ( + + + + {renderIcon(isFocused)} + + + + + + {label} + + + + + + + + ); + }); +}; diff --git a/native/components/TabBar/TabBarDot.tsx b/native/components/TabBar/TabBarDot.tsx new file mode 100644 index 00000000..e5bbdaa3 --- /dev/null +++ b/native/components/TabBar/TabBarDot.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import { Animated } from "react-native"; +import { CleanTabBarStyle } from "./TabStyle"; +import type { TabBarDotProps } from "./types"; + +export const TabBarDot = ({ color, scale = 1 }: TabBarDotProps) => { + return ( + + ); +}; diff --git a/native/components/TabBar/TabBarTriangleCover.tsx b/native/components/TabBar/TabBarTriangleCover.tsx new file mode 100644 index 00000000..573ad632 --- /dev/null +++ b/native/components/TabBar/TabBarTriangleCover.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { Animated, View } from "react-native"; +import { CleanTabBarStyle } from "./TabStyle"; +import type { TabBarTriangleProps } from "./types"; + +export const TabBarTriangleCover = ({ + color, + style, + translateY, +}: TabBarTriangleProps) => { + return ( + + + + + ); +}; diff --git a/native/components/TabBar/TabStyle.ts b/native/components/TabBar/TabStyle.ts new file mode 100644 index 00000000..4d0e7fc8 --- /dev/null +++ b/native/components/TabBar/TabStyle.ts @@ -0,0 +1,80 @@ +import { StyleSheet } from "react-native"; + +export const CleanTabBarStyle = StyleSheet.create({ + container: { + flexDirection: "column", + alignItems: "center", + overflow: "hidden", + }, + content: { + minHeight: 55, + flexDirection: "row", + marginBottom: 2, + }, + item: { + flex: 1, + flexDirection: "row", + overflow: "hidden", + }, + touchableItem: { + flex: 1, + padding: 5, + justifyContent: "center", + alignItems: "center", + }, + itemIconLayer: { + position: "absolute", + zIndex: 1, + }, + itemIconNotFound: { + borderWidth: 2, + width: 23, + height: 23, + }, + filterIcon: { + zIndex: 2, + position: "absolute", + width: "100%", + }, + itemTextLayer: { + zIndex: 3, + position: "absolute", + }, + itemText: { + fontWeight: "bold", + marginBottom: 5, + }, + filterText: { + zIndex: 4, + position: "absolute", + bottom: -5, + width: "100%", + }, + triangleTop: { + width: "100%", + height: 0, + backgroundColor: "transparent", + borderStyle: "solid", + borderTopWidth: 0, + borderRightWidth: 180, + borderBottomWidth: 20, + borderLeftWidth: 0, + borderTopColor: "transparent", + borderRightColor: "transparent", + borderLeftColor: "transparent", + marginBottom: -1, + }, + triangleBottom: { + width: "100%", + height: 50, + marginBottom: -50, + }, + itemDot: { + zIndex: 5, + width: 5, + height: 5, + borderRadius: 50, + position: "absolute", + bottom: 5, + }, +}); diff --git a/native/components/TabBar/index.ts b/native/components/TabBar/index.ts new file mode 100644 index 00000000..47ddee20 --- /dev/null +++ b/native/components/TabBar/index.ts @@ -0,0 +1 @@ +export * from "./TabBar"; diff --git a/native/components/TabBar/types.ts b/native/components/TabBar/types.ts new file mode 100644 index 00000000..a1804f6d --- /dev/null +++ b/native/components/TabBar/types.ts @@ -0,0 +1,16 @@ +import type { + AnimatableNumericValue, + StyleProp, + ViewStyle, +} from "react-native"; + +export type TabBarTriangleProps = { + color?: string; + style?: StyleProp; + translateY: AnimatableNumericValue; +}; + +export type TabBarDotProps = { + color?: string; + scale?: AnimatableNumericValue; +}; From 53fd7b1a37a4b4e4739e97ccdefd890000abd35c Mon Sep 17 00:00:00 2001 From: Michal Struck Date: Sun, 4 Feb 2024 21:08:30 +0100 Subject: [PATCH 03/12] app-redesign: introduce new_ colors, redesign the entire app mostly --- native/components/BarcodeScanner/index.tsx | 11 ++-- native/components/BottomSheet/BottomSheet.tsx | 30 +++++----- .../BottomSheet/contents/DatePicker.tsx | 17 ++++-- .../components/BottomSheet/contents/Input.tsx | 8 ++- .../internal/BottomSheetContent.tsx | 44 +++++++------- native/components/Button.tsx | 14 +++-- native/components/Card.tsx | 11 ++-- native/components/Header.tsx | 16 ++++-- native/components/HeaderRight.tsx | 6 +- native/components/IDListCard.tsx | 6 +- native/components/ListCard/ListCardAdd.tsx | 4 +- native/components/ListCard/ListCardLink.tsx | 10 ++-- native/components/LoadingSpinner.tsx | 8 ++- native/components/NewBarcodeListItem.tsx | 6 +- native/components/Snackbar/index.tsx | 12 ++-- native/components/TabBar/TabBar.tsx | 13 ++--- native/components/TextInput.tsx | 23 ++++---- native/db/hooks/useCreateInventory.ts | 36 ++++++------ native/navigation/BottomTabNavigation.tsx | 57 ++++++++++++++----- native/navigation/LoginStackNavigation.tsx | 12 ++-- native/screens/BarcodeModalScreen.tsx | 8 +-- native/screens/DeliveryTabScreen.tsx | 4 +- native/screens/InventoryTabScreen.tsx | 18 ++---- native/screens/ListTabScreen.tsx | 8 +-- native/screens/LoginScreen.tsx | 9 +-- native/screens/NewBarcodeScreen.tsx | 20 ++----- native/screens/NewStockScreen.tsx | 12 ++-- native/screens/RecordScreen.tsx | 54 +++++++++++------- native/screens/SettingsScreen.tsx | 17 +++--- native/screens/StartScreen.tsx | 7 ++- native/theme/index.ts | 16 +++++- 31 files changed, 295 insertions(+), 222 deletions(-) diff --git a/native/components/BarcodeScanner/index.tsx b/native/components/BarcodeScanner/index.tsx index 9f682dfb..439529a9 100644 --- a/native/components/BarcodeScanner/index.tsx +++ b/native/components/BarcodeScanner/index.tsx @@ -3,7 +3,6 @@ import { BarCodeScanningResult, Camera, CameraType, Point } from "expo-camera"; import { useNavigation } from "@react-navigation/native"; import React, { useRef, useState } from "react"; import { - ActivityIndicator, Alert, Animated, StyleSheet, @@ -16,6 +15,7 @@ import { useListBarcodes } from "../../db/hooks/useListBarcodes"; import { BarcodeModalScreenProps } from "../../screens/BarcodeModalScreen"; import { createStyles } from "../../theme/useStyles"; import { CameraSwitchIcon } from "../Icon"; +import { LoadingSpinner } from "../LoadingSpinner"; import { Typography } from "../Typography"; import { BarcodeOutline } from "./BarcodeOutline"; @@ -88,10 +88,10 @@ export const BarcodeScanner = ({ setTRCornerAnimation(corners[3]); }; - if (isLoading && !barcodeList) { + if (!isLoading && !barcodeList) { return ( - + ); } @@ -101,6 +101,7 @@ export const BarcodeScanner = ({ - + @@ -176,7 +177,7 @@ const useStyles = createStyles((theme) => container: { flex: 1, justifyContent: "center", - backgroundColor: theme.colors.lightBlue, + backgroundColor: theme.colors.new_darkBlue, height: "100%", }, camera: { diff --git a/native/components/BottomSheet/BottomSheet.tsx b/native/components/BottomSheet/BottomSheet.tsx index 763bf562..5755df35 100644 --- a/native/components/BottomSheet/BottomSheet.tsx +++ b/native/components/BottomSheet/BottomSheet.tsx @@ -27,21 +27,6 @@ import { useInternalBottomSheet } from "./internal/useInternalBottomSheet"; export const BOTTOMSHEET_TIMING_CLOSE = 250; -const useStyles = createStyles(() => - StyleSheet.create({ - absoluteFill: StyleSheet.absoluteFillObject, - overlay: { - backgroundColor: "black", - }, - bottomSheet: { - position: "absolute", - left: 0, - bottom: 0, - right: 0, - }, - }) -); - const BottomSheet = () => { const theme = useTheme(); const styles = useStyles(); @@ -196,3 +181,18 @@ const BottomSheet = () => { }; export default BottomSheet; + +const useStyles = createStyles(() => + StyleSheet.create({ + absoluteFill: StyleSheet.absoluteFillObject, + overlay: { + backgroundColor: "black", + }, + bottomSheet: { + position: "absolute", + left: 0, + bottom: 0, + right: 0, + }, + }) +); diff --git a/native/components/BottomSheet/contents/DatePicker.tsx b/native/components/BottomSheet/contents/DatePicker.tsx index 387be4b9..ee7d6f0f 100644 --- a/native/components/BottomSheet/contents/DatePicker.tsx +++ b/native/components/BottomSheet/contents/DatePicker.tsx @@ -20,11 +20,12 @@ export const DatePickerBottomSheetContent = ({ return ( Wybierz datę StyleSheet.create({ + container: { + paddingTop: 16, + backgroundColor: theme.colors.new_darkBlue, + }, dateTitle: { alignSelf: "center", }, input: { - backgroundColor: theme.colors.white, + backgroundColor: theme.colors.new_darkBlue, alignSelf: "center", }, button: { diff --git a/native/components/BottomSheet/contents/Input.tsx b/native/components/BottomSheet/contents/Input.tsx index 25d9b1b5..ef6b2812 100644 --- a/native/components/BottomSheet/contents/Input.tsx +++ b/native/components/BottomSheet/contents/Input.tsx @@ -85,14 +85,16 @@ export const InputBottomSheetContent = ({ ]} > - Wpisz ilość + + Wpisz ilość + StyleSheet.create({ container: { - backgroundColor: "white", + backgroundColor: theme.colors.new_darkBlue, paddingTop: theme.spacing, paddingHorizontal: theme.spacing * 2, }, diff --git a/native/components/BottomSheet/internal/BottomSheetContent.tsx b/native/components/BottomSheet/internal/BottomSheetContent.tsx index ec5231e6..49a2c151 100644 --- a/native/components/BottomSheet/internal/BottomSheetContent.tsx +++ b/native/components/BottomSheet/internal/BottomSheetContent.tsx @@ -1,10 +1,11 @@ import React, { forwardRef, RefObject, useEffect } from "react"; -import { BackHandler, Keyboard, View } from "react-native"; +import { BackHandler, Keyboard, StyleSheet, View } from "react-native"; import { NativeViewGestureHandler, PanGestureHandler, } from "react-native-gesture-handler"; import Animated, { useAnimatedScrollHandler } from "react-native-reanimated"; +import { createStyles } from "../../../theme/useStyles"; interface Props { panRef: RefObject; @@ -15,6 +16,8 @@ interface Props { const BottomSheetContent = forwardRef( ({ scrollOffset, Component, onClose }: Props, ref) => { + const styles = useStyles(); + const scrollHandler = useAnimatedScrollHandler((e) => { scrollOffset.value = e.contentOffset.y; }); @@ -45,24 +48,8 @@ const BottomSheetContent = forwardRef( keyboardShouldPersistTaps="handled" > {/* TODO THEMING!! */} - - + + @@ -74,3 +61,22 @@ const BottomSheetContent = forwardRef( } ); export default BottomSheetContent; + +const useStyles = createStyles((theme) => + StyleSheet.create({ + top: { + backgroundColor: theme.colors.new_darkBlue, + borderTopRightRadius: 25, + borderTopLeftRadius: 25, + }, + thingy: { + height: 6, + width: 72, + borderColor: "gray", + borderWidth: 3, + borderRadius: 99, + alignSelf: "center", + marginVertical: 8, + }, + }) +); diff --git a/native/components/Button.tsx b/native/components/Button.tsx index f83c1a73..5f9c181a 100644 --- a/native/components/Button.tsx +++ b/native/components/Button.tsx @@ -34,7 +34,7 @@ type ButtonProps = { isLoading?: boolean; }; -const BORDER_WIDTH = 4; +const BORDER_WIDTH = 2; // weird, but needed to supress errors, related to keeping the event around in an async context const debounceOnPress = ( @@ -100,14 +100,16 @@ const useStyles = createStyles((theme) => margin: theme.spacing * 0.5, alignItems: "center", justifyContent: "center", - borderRadius: theme.borderRadiusFull, + borderRadius: theme.borderRadiusMedium, }, primary: { - backgroundColor: theme.colors.mediumBlue, - padding: theme.spacing, + backgroundColor: theme.colors.new_darkBlue, + borderColor: theme.colors.new_highlight, + borderWidth: BORDER_WIDTH, + padding: theme.spacing - BORDER_WIDTH, }, secondary: { - borderColor: theme.colors.mediumBlue, + borderColor: theme.colors.new_lightBlue, borderWidth: BORDER_WIDTH, padding: theme.spacing - BORDER_WIDTH, }, @@ -116,7 +118,7 @@ const useStyles = createStyles((theme) => width: "100%", }, string: { - color: theme.colors.darkBlue, + color: theme.colors.new_darkGrey, }, disabled: { opacity: 0.6 }, // SIZES diff --git a/native/components/Card.tsx b/native/components/Card.tsx index cf6c2473..576c192d 100644 --- a/native/components/Card.tsx +++ b/native/components/Card.tsx @@ -7,6 +7,7 @@ import { ViewStyle, } from "react-native"; +import { useTheme } from "@react-navigation/native"; import { ThemeColors } from "../theme"; import { createStyles } from "../theme/useStyles"; @@ -16,10 +17,7 @@ interface CardProps { padding?: CardPaddings; fullWidth?: boolean; children: React.ReactNode; - color?: Exclude< - ThemeColors, - "error" | "grey" | "transparent" | "red" | "green" - >; + color?: ThemeColors; style?: StyleProp; borderTop?: boolean; borderBottom?: boolean; @@ -40,6 +38,7 @@ export const Card = forwardRef( }: CardProps, _ref ) => { + const theme = useTheme(); const styles = useStyles(); if (onPress) { return ( @@ -49,7 +48,7 @@ export const Card = forwardRef( borderBottom && styles.borderBottom, borderTop && styles.borderTop, styles[padding], - styles[color], + { backgroundColor: theme.colors[color] }, fullWidth && styles.fullWidth, style, ]} @@ -65,7 +64,7 @@ export const Card = forwardRef( borderBottom && styles.borderBottom, borderTop && styles.borderTop, styles[padding], - styles[color], + { backgroundColor: theme.colors[color] }, fullWidth && styles.fullWidth, style, ]} diff --git a/native/components/Header.tsx b/native/components/Header.tsx index 07bda642..7c25b0e1 100644 --- a/native/components/Header.tsx +++ b/native/components/Header.tsx @@ -1,6 +1,7 @@ -import { useNavigation } from "@react-navigation/native"; +import { useNavigation, useTheme } from "@react-navigation/native"; import { NativeStackHeaderProps } from "@react-navigation/native-stack"; + import { View } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { HeaderRight } from "./HeaderRight"; @@ -8,18 +9,17 @@ import { ArrowRightIcon } from "./Icon"; const HeaderWrapper = ({ children }: { children: React.ReactNode }) => { const insets = useSafeAreaInsets(); + const theme = useTheme(); return ( {children} @@ -31,7 +31,11 @@ export const Header = ({ route }: NativeStackHeaderProps) => { return ( {navigation.canGoBack() ? ( - + ) : ( )} diff --git a/native/components/HeaderRight.tsx b/native/components/HeaderRight.tsx index f0fb2045..c070438e 100644 --- a/native/components/HeaderRight.tsx +++ b/native/components/HeaderRight.tsx @@ -5,6 +5,10 @@ import { CogIcon } from "./Icon"; export const HeaderRight = () => { const navigation = useNavigation(); return ( - navigation.navigate("SettingsScreen")} /> + navigation.navigate("SettingsScreen")} + color="new_darkGrey" + /> ); }; diff --git a/native/components/IDListCard.tsx b/native/components/IDListCard.tsx index f92f69d2..9f69e111 100644 --- a/native/components/IDListCard.tsx +++ b/native/components/IDListCard.tsx @@ -25,7 +25,7 @@ export const IDListCard = ({ const navigation = useNavigation(); return ( @@ -38,14 +38,14 @@ export const IDListCard = ({ } > 15 ? "sBold" : "lBold"} numberOfLines={2} > {name} 15 ? "sBold" : "lBold"} > {quantity + " " + unit} diff --git a/native/components/ListCard/ListCardAdd.tsx b/native/components/ListCard/ListCardAdd.tsx index e0c601d6..37f58103 100644 --- a/native/components/ListCard/ListCardAdd.tsx +++ b/native/components/ListCard/ListCardAdd.tsx @@ -11,14 +11,14 @@ export const InventoryCardAdd = () => { const navigation = useNavigation(); return ( { navigation.navigate("NewStockScreen"); }} > - + ); }; diff --git a/native/components/ListCard/ListCardLink.tsx b/native/components/ListCard/ListCardLink.tsx index 430b5ac8..387c824f 100644 --- a/native/components/ListCard/ListCardLink.tsx +++ b/native/components/ListCard/ListCardLink.tsx @@ -11,7 +11,7 @@ import { SmallerArrowRightIcon } from "../Icon"; import { Typography } from "../Typography"; type InventoryCardAddProps = { - title: string; + title: string | undefined; id: number; isDelivery: boolean; }; @@ -40,14 +40,14 @@ export const ListCardLink = ({ const navigation = useNavigation(); return ( 15 ? "sBold" : "lBold"} + color="new_darkGrey" + variant={(title?.length ?? 0) > 15 ? "sBold" : "lBold"} numberOfLines={2} > {title} @@ -69,7 +69,7 @@ export const ListCardLink = ({ } } /> - + ); }; diff --git a/native/components/LoadingSpinner.tsx b/native/components/LoadingSpinner.tsx index 6139dfcd..6debdb94 100644 --- a/native/components/LoadingSpinner.tsx +++ b/native/components/LoadingSpinner.tsx @@ -1,6 +1,10 @@ import { useTheme } from "@react-navigation/native"; import { ActivityIndicator } from "react-native"; -export const LoadingSpinner = () => { +export const LoadingSpinner = ({ + size = 17, +}: { + size?: number | "small" | "large"; +}) => { const theme = useTheme(); - return ; + return ; }; diff --git a/native/components/NewBarcodeListItem.tsx b/native/components/NewBarcodeListItem.tsx index ccd9945b..b473507b 100644 --- a/native/components/NewBarcodeListItem.tsx +++ b/native/components/NewBarcodeListItem.tsx @@ -18,12 +18,12 @@ export const NewBarcodeListItem = ({ return ( 15 ? "sBold" : "lBold"} numberOfLines={2} > @@ -45,7 +45,7 @@ const useStyles = createStyles((theme) => borderRadius: theme.borderRadiusSmall, }, highlighted: { - borderColor: theme.colors.darkBlue, + borderColor: theme.colors.new_highlight, borderStyle: "solid", borderWidth: 2, marginLeft: -2, diff --git a/native/components/Snackbar/index.tsx b/native/components/Snackbar/index.tsx index f8ac236c..5e075cbd 100644 --- a/native/components/Snackbar/index.tsx +++ b/native/components/Snackbar/index.tsx @@ -100,7 +100,7 @@ const Snackbar = ({ item }: SnackbarProps) => { export const SnackbarRenderer = () => { const { state: items } = useSnackbar(); - console.log(items.slice(0, 1)); + //TODO: add a logger entry here return items .slice(0, 1) .map((item) => ); @@ -119,21 +119,21 @@ const useStyles = createStyles((theme) => paddingVertical: theme.spacing * 2, justifyContent: "center", paddingHorizontal: theme.spacing * 2, - borderBottomLeftRadius: theme.borderRadiusSmall, - borderBottomRightRadius: theme.borderRadiusSmall, + borderBottomLeftRadius: theme.borderRadiusMedium, + borderBottomRightRadius: theme.borderRadiusMedium, }, contentContainer: { flexDirection: "row", alignItems: "center", }, success: { - backgroundColor: theme.colors.green, + backgroundColor: theme.colors.new_green, }, error: { - backgroundColor: theme.colors.red, + backgroundColor: theme.colors.new_red, }, info: { - backgroundColor: theme.colors.grey, + backgroundColor: theme.colors.new_highlight, }, text: { color: theme.colors.white, diff --git a/native/components/TabBar/TabBar.tsx b/native/components/TabBar/TabBar.tsx index a6a96857..f36d12d8 100644 --- a/native/components/TabBar/TabBar.tsx +++ b/native/components/TabBar/TabBar.tsx @@ -16,7 +16,7 @@ import { CleanTabBarStyle } from "./TabStyle"; export const CleanTabBar = (props: BottomTabBarProps) => { const theme = useTheme(); - const BACKGROUND_COLOR = theme.colors.white; + const BACKGROUND_COLOR = theme.colors.new_mediumBlue; return ( { const theme = useTheme(); - const BACKGROUND_COLOR = theme.colors.white; - const FOREGROUND_COLOR = theme.colors.darkBlue; + const BACKGROUND_COLOR = theme.colors.new_mediumBlue; + const FOREGROUND_COLOR = theme.colors.new_mediumBlue; return state.routes.map((route, index) => { const focusAnimation = useRef(new Animated.Value(0)).current; @@ -57,14 +57,12 @@ export const CleanTabBarContent = ({ ? options.tabBarActiveTintColor : theme.colors.darkBlue; - const icon = options.tabBarIcon !== undefined ? options.tabBarIcon : null; - const renderIcon = (focused: boolean) => { - if (!icon) { + if (!options.tabBarIcon) { return No icon; } - return icon({ + return options.tabBarIcon({ focused, color: focused ? FOREGROUND_COLOR : FOREGROUND_COLOR, size: 23, @@ -101,7 +99,6 @@ export const CleanTabBarContent = ({ }, [isFocused]); const onFocusedAnimation = () => { - console.log("focusedanim"); Animated.timing(focusAnimation, { toValue: 1, duration: 700, diff --git a/native/components/TextInput.tsx b/native/components/TextInput.tsx index 84ec79d4..e74fd415 100644 --- a/native/components/TextInput.tsx +++ b/native/components/TextInput.tsx @@ -15,7 +15,7 @@ import { import { isAndroid } from "../constants"; import { createStyles } from "../theme/useStyles"; -const BORDER_WIDTH = 4; +const BORDER_WIDTH = 2; export type TextInputProps = Omit & { invalid?: boolean; disabled?: boolean; @@ -81,9 +81,9 @@ export const TextInput = React.forwardRef( accessible accessibilityLabel={props.accessibilityLabel} editable={!disabled || editable} - placeholderTextColor={theme.colors.darkBlue} - selectionColor={theme.colors.darkBlue} - cursorColor={theme.colors.darkBlue} + placeholderTextColor={theme.colors.grey} + selectionColor={theme.colors.grey} + cursorColor={theme.colors.grey} onFocus={(e: NativeSyntheticEvent) => handleFocus(onFocus ? () => onFocus(e) : () => undefined) } @@ -109,19 +109,19 @@ const useStyles = createStyles((theme) => StyleSheet.create({ container: { ...theme.text.s, - borderRadius: theme.borderRadiusFull, - height: 44, + borderRadius: theme.borderRadiusMedium, + height: 48, justifyContent: isAndroid ? undefined : "center", - borderColor: theme.colors.mediumBlue, + borderColor: theme.colors.new_lightBlue, borderWidth: BORDER_WIDTH, padding: theme.spacing + (isAndroid ? 0 : -BORDER_WIDTH), }, containerMultiline: { height: undefined, - minHeight: 44, + minHeight: 48, }, content: { - height: 44, + height: 48, overflow: "hidden", flexDirection: "row", justifyContent: "flex-start", @@ -129,18 +129,19 @@ const useStyles = createStyles((theme) => }, contentMultiline: { height: undefined, - minHeight: 44, + minHeight: 48, paddingVertical: 6, }, focused: { ...theme.baseShadow, }, input: { - height: 44, + height: 54, flexGrow: 1, flexShrink: 1, width: "100%", paddingHorizontal: theme.spacing * 2, + color: theme.colors.new_highlight, }, inputMultiline: { height: undefined, diff --git a/native/db/hooks/useCreateInventory.ts b/native/db/hooks/useCreateInventory.ts index c67de29b..e7045701 100644 --- a/native/db/hooks/useCreateInventory.ts +++ b/native/db/hooks/useCreateInventory.ts @@ -7,8 +7,8 @@ import { useSession } from "./sessionContext"; export const useCreateInventory = () => { const { companyId, session } = useSession(); const queryClient = useQueryClient(); - return useMutation({ - mutationFn: async (inventory: InventoryInsert) => { + return useMutation( + async (inventory: InventoryInsert) => { const { data, error } = await supabase .from("inventory") .insert({ ...inventory, company_id: companyId }) @@ -17,18 +17,22 @@ export const useCreateInventory = () => { if (error) throw new Error(error.message); return data; }, - onMutate: async (inventory: InventoryInsert) => { - await queryClient.cancelQueries(["inventories", session?.user.id]); - queryClient.setQueryData( - ["inventories", session?.user.id], - (old: any) => [...old, inventory] - ); - }, - onSuccess: () => - queryClient.invalidateQueries({ - queryKey: ["inventories", session?.user.id], - exact: true, - refetchType: "all", - }), - }); + { + onMutate: async (inventory: InventoryInsert) => { + await queryClient.cancelQueries(["inventories", session?.user.id]); + queryClient.setQueryData( + ["inventories", session?.user.id], + (old: any) => { + return { ...old, data: [{ ...old.data, inventory }] }; + } + ); + }, + onSuccess: () => + queryClient.invalidateQueries({ + queryKey: ["inventories", session?.user.id], + exact: true, + refetchType: "all", + }), + } + ); }; diff --git a/native/navigation/BottomTabNavigation.tsx b/native/navigation/BottomTabNavigation.tsx index 5c53d416..7b8f8aa2 100644 --- a/native/navigation/BottomTabNavigation.tsx +++ b/native/navigation/BottomTabNavigation.tsx @@ -57,14 +57,19 @@ const DeliveryStackNavigator = ({ route }: DeliveryTabProps) => { headerBackground: () => ( ), - headerBackVisible: false, headerTitle: deliveryName, + headerTitleStyle: { + color: theme.colors.new_highlight, + }, + headerBackVisible: false, }} /> { headerBackground: () => ( ), - headerBackVisible: false, headerTitle: deliveryName, + headerTitleStyle: { + color: theme.colors.new_highlight, + }, + headerBackVisible: false, // headerShown: false, }} /> @@ -121,13 +131,18 @@ const InventoryStackNavigator = ({ route }: InventoryTabProps) => { headerBackground: () => ( ), headerTitle: inventoryName, + headerTitleStyle: { + color: theme.colors.new_highlight, + }, headerBackVisible: false, }} /> @@ -135,7 +150,22 @@ const InventoryStackNavigator = ({ route }: InventoryTabProps) => { name="RecordScreen" component={RecordScreen} options={{ - headerShown: false, + headerBackground: () => ( + + ), + headerTitle: inventoryName, + headerTitleStyle: { + color: theme.colors.new_highlight, + }, + headerBackVisible: false, }} /> @@ -156,8 +186,8 @@ export const BottomTabNavigation = ({}: BottomTabProps) => { options={{ title: "Lista", tabBarShowLabel: false, - tabBarActiveTintColor: theme.colors.black, - tabBarIcon: () => , + tabBarActiveTintColor: theme.colors.new_highlight, + tabBarIcon: () => , headerShown: false, lazy: false, }} @@ -168,10 +198,10 @@ export const BottomTabNavigation = ({}: BottomTabProps) => { options={{ title: "Inwentaryzacja", tabBarShowLabel: false, - tabBarActiveTintColor: theme.colors.black, - tabBarIcon: () => , - + tabBarActiveTintColor: theme.colors.new_highlight, + tabBarIcon: () => , headerShown: false, + lazy: false, }} /> { options={{ title: "Dostawa", tabBarShowLabel: false, - tabBarActiveTintColor: theme.colors.black, - tabBarIcon: () => , + tabBarActiveTintColor: theme.colors.new_highlight, + tabBarIcon: () => , headerShown: false, + lazy: false, }} /> diff --git a/native/navigation/LoginStackNavigation.tsx b/native/navigation/LoginStackNavigation.tsx index 211076bd..da783697 100644 --- a/native/navigation/LoginStackNavigation.tsx +++ b/native/navigation/LoginStackNavigation.tsx @@ -1,4 +1,5 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack"; +import { Header } from "../components/Header"; import LoginScreen from "../screens/LoginScreen"; import StartScreen from "../screens/StartScreen"; import { LoginStackParamList } from "./types"; @@ -7,12 +8,11 @@ const Stack = createNativeStackNavigator(); export const LoginStackNavigation = () => { return ( - - + + Aby skorzystać ze skanera kodów, pozwól aplikacji na dostęp do kamery. Aby skorzystać ze skanera kodów, pozwól aplikacji na dostęp do kamery. @@ -102,7 +102,7 @@ const useStyles = createStyles((theme) => container: { flex: 1, justifyContent: "center", - backgroundColor: theme.colors.lightBlue, + backgroundColor: theme.colors.new_darkBlue, height: "100%", }, }) diff --git a/native/screens/DeliveryTabScreen.tsx b/native/screens/DeliveryTabScreen.tsx index 3d802e20..4c270aa3 100644 --- a/native/screens/DeliveryTabScreen.tsx +++ b/native/screens/DeliveryTabScreen.tsx @@ -143,7 +143,7 @@ export default function DeliveryTabScreen({ const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.lightBlue, + backgroundColor: theme.colors.new_darkBlue, }, topBar: { ...theme.baseShadow, @@ -157,7 +157,7 @@ const useStyles = createStyles((theme) => scroll: { width: "100%", height: "100%", - backgroundColor: theme.colors.lightBlue, + backgroundColor: theme.colors.new_darkBlue, }, date: { paddingTop: theme.spacing, diff --git a/native/screens/InventoryTabScreen.tsx b/native/screens/InventoryTabScreen.tsx index 0a626455..fba27377 100644 --- a/native/screens/InventoryTabScreen.tsx +++ b/native/screens/InventoryTabScreen.tsx @@ -66,9 +66,6 @@ export default function InventoryTabScreen({ return ( - - - @@ -132,21 +129,14 @@ export default function InventoryTabScreen({ const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.lightBlue, - }, - topBar: { - ...theme.baseShadow, - width: "100%", - backgroundColor: theme.colors.mediumBlue, - height: 50, - justifyContent: "center", - alignItems: "center", + backgroundColor: theme.colors.new_darkBlue, }, + listContainer: { paddingHorizontal: theme.spacing * 4 }, scroll: { width: "100%", height: "100%", - backgroundColor: theme.colors.lightBlue, + backgroundColor: theme.colors.new_darkBlue, }, date: { paddingTop: theme.spacing, @@ -165,7 +155,7 @@ const useStyles = createStyles((theme) => marginTop: theme.spacing * 2, gap: theme.spacing, }, - skeletonTopBarText: { height: 20, width: "50%" }, + skeletonFullWidthButton: { width: "100%", height: 58 }, skeletonButton: { width: 58, height: 58 }, skeletonListItem: { diff --git a/native/screens/ListTabScreen.tsx b/native/screens/ListTabScreen.tsx index 2b307c8b..cbc316e1 100644 --- a/native/screens/ListTabScreen.tsx +++ b/native/screens/ListTabScreen.tsx @@ -17,7 +17,7 @@ const MonthTitle = ({ title }: { title: string }) => { {title} @@ -27,7 +27,7 @@ const MonthTitle = ({ title }: { title: string }) => { const DayTitle = ({ title }: { title: string }) => { const styles = useStyles(); return ( - + {title} ); @@ -114,7 +114,7 @@ export const ListTab = ({}: ListTabScreenProps) => { {inventories.map((inventory) => ( { const useStyles = createStyles((theme) => StyleSheet.create({ screen: { - backgroundColor: theme.colors.lightBlue, + backgroundColor: theme.colors.new_darkBlue, height: "100%", }, scroll: { diff --git a/native/screens/LoginScreen.tsx b/native/screens/LoginScreen.tsx index 089376b4..cee7b724 100644 --- a/native/screens/LoginScreen.tsx +++ b/native/screens/LoginScreen.tsx @@ -54,7 +54,7 @@ export default function LoginScreen({}: LoginScreenProps) { @@ -96,7 +96,7 @@ export default function LoginScreen({}: LoginScreenProps) { /> ); }; @@ -169,17 +175,28 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { return ( - + {/* nazwa produktu */} {recordName} - + Ile było: 999 ? "lBold" : "xlBold"} style={styles.wasAmount} + color="new_darkGrey" > {unit ? previousQuantity + " " + unit : null} @@ -187,6 +204,7 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { {steppers.negative.map(({ click, step }, i) => ( - + - Ile jest: + + Ile jest: + 999 ? "lBold" : "xlBold"} style={styles.title} + color="new_darkGrey" > {/* liczba + jednostka current */} {unit ? quantity + " " + unit : null} @@ -227,12 +248,13 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { containerStyle={styles.editButton} onPress={() => openManualInput(quantity!, setQuantity)} > - + {steppers.positive.map(({ click, step }, i) => ( - + @@ -267,19 +289,13 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { const useStyles = createStyles((theme) => StyleSheet.create({ - topBar: { - ...theme.baseShadow, - width: "100%", - backgroundColor: theme.colors.mediumBlue, - height: 50, - justifyContent: "center", - alignItems: "center", - }, - container: { backgroundColor: theme.colors.lightBlue, height: "100%" }, + container: { backgroundColor: theme.colors.new_darkBlue, height: "100%" }, contentContainer: { paddingHorizontal: theme.spacing * 3 }, title: { paddingTop: theme.spacing * 3 }, wasTitle: { marginTop: theme.spacing * 5.5 }, - wasAmount: { paddingTop: theme.spacing * 2 }, + wasAmount: { + paddingTop: theme.spacing * 2, + }, content: { alignItems: "center" }, gridRow: { flexDirection: "row" }, leftColumn: { flexDirection: "column", alignItems: "flex-start" }, diff --git a/native/screens/SettingsScreen.tsx b/native/screens/SettingsScreen.tsx index 75fda825..a5e213db 100644 --- a/native/screens/SettingsScreen.tsx +++ b/native/screens/SettingsScreen.tsx @@ -30,10 +30,10 @@ export default function SettingsScreen({ navigation }: SettingsScreenProps) { return ( - + Ustawienia - + Twój email: @@ -90,10 +90,10 @@ export default function SettingsScreen({ navigation }: SettingsScreenProps) { // @ts-ignore navigation.navigate("StartScreen"); }} - type="secondary" - size="s" + type="primary" + size="xl" fullWidth - containerStyle={styles.mt2} + containerStyle={[styles.mt2, styles.selfCenter]} > Wyloguj się @@ -104,7 +104,7 @@ export default function SettingsScreen({ navigation }: SettingsScreenProps) { const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.lightBlue, + backgroundColor: theme.colors.new_darkBlue, paddingHorizontal: theme.spacing * 2, paddingTop: theme.spacing * 2, alignItems: "center", @@ -113,6 +113,9 @@ const useStyles = createStyles((theme) => mt2: { marginTop: theme.spacing * 9, }, + selfCenter: { + alignSelf: "center", + }, mb: { marginBottom: 16 }, }) ); diff --git a/native/screens/StartScreen.tsx b/native/screens/StartScreen.tsx index 332da247..b38f592e 100644 --- a/native/screens/StartScreen.tsx +++ b/native/screens/StartScreen.tsx @@ -25,6 +25,7 @@ export default function StartScreen({ navigation }: StartScreenProps) { return ( - + InvTrack ); }; @@ -30,6 +32,7 @@ const useStyles = createStyles((theme) => borderRadius: theme.borderRadiusSmall, alignItems: "center", justifyContent: "center", + alignSelf: "center", marginBottom: theme.spacing * 2, }, }) diff --git a/native/components/Snackbar/index.tsx b/native/components/Snackbar/index.tsx index 5e075cbd..4c93633a 100644 --- a/native/components/Snackbar/index.tsx +++ b/native/components/Snackbar/index.tsx @@ -119,8 +119,8 @@ const useStyles = createStyles((theme) => paddingVertical: theme.spacing * 2, justifyContent: "center", paddingHorizontal: theme.spacing * 2, - borderBottomLeftRadius: theme.borderRadiusMedium, - borderBottomRightRadius: theme.borderRadiusMedium, + borderBottomLeftRadius: theme.borderRadiusSmall, + borderBottomRightRadius: theme.borderRadiusSmall, }, contentContainer: { flexDirection: "row", diff --git a/native/components/TextInput.tsx b/native/components/TextInput.tsx index e74fd415..18a9f49c 100644 --- a/native/components/TextInput.tsx +++ b/native/components/TextInput.tsx @@ -109,7 +109,7 @@ const useStyles = createStyles((theme) => StyleSheet.create({ container: { ...theme.text.s, - borderRadius: theme.borderRadiusMedium, + borderRadius: theme.borderRadiusSmall, height: 48, justifyContent: isAndroid ? undefined : "center", borderColor: theme.colors.new_lightBlue, diff --git a/native/components/Typography.tsx b/native/components/Typography.tsx index 21fbfbc9..454e4499 100644 --- a/native/components/Typography.tsx +++ b/native/components/Typography.tsx @@ -19,7 +19,6 @@ export type TypographyProps = { variant?: keyof MainTheme["text"]; numberOfLines?: number; align?: "left" | "center" | "right" | "auto" | "justify"; - underline?: boolean; opacity?: boolean; }; @@ -31,7 +30,6 @@ export const Typography = ({ variant = "l", numberOfLines, align = "left", - underline = false, opacity = false, }: TypographyProps) => { const theme = useTheme(); @@ -43,7 +41,6 @@ export const Typography = ({ color && { color: theme.colors[color] }, styles[variant], align && styles[`align${align}`], - underline && styles.underline, opacity && styles.opacity, style, ]} @@ -82,9 +79,6 @@ const useStyles = createStyles((theme) => lBold: { ...theme.text.lBold }, xl: { ...theme.text.xl }, xlBold: { ...theme.text.xlBold }, - underline: { - textDecorationLine: "underline", - }, opacity: { opacity: theme.opacity, }, diff --git a/native/screens/LoginScreen.tsx b/native/screens/LoginScreen.tsx index cee7b724..219d5376 100644 --- a/native/screens/LoginScreen.tsx +++ b/native/screens/LoginScreen.tsx @@ -52,12 +52,7 @@ export default function LoginScreen({}: LoginScreenProps) { return ( - + Logowanie - + {`Nowy wpis:`} diff --git a/native/screens/RecordScreen.tsx b/native/screens/RecordScreen.tsx index c47d52f2..3928fd03 100644 --- a/native/screens/RecordScreen.tsx +++ b/native/screens/RecordScreen.tsx @@ -295,7 +295,7 @@ const useStyles = createStyles((theme) => }, editButton: { marginTop: theme.spacing * 3, - borderRadius: theme.borderRadiusMedium, + borderRadius: theme.borderRadiusSmall, width: 72, height: 72, marginBottom: 58 + 12, diff --git a/native/theme/index.ts b/native/theme/index.ts index 5cc797bb..51e898d8 100644 --- a/native/theme/index.ts +++ b/native/theme/index.ts @@ -115,8 +115,7 @@ export const mainTheme = { spacing: 8, opacity: 0.6, borderRadius: 25, - borderRadiusMedium: 10, - borderRadiusSmall: 5, + borderRadiusSmall: 10, borderRadiusFull: 9999, breakpoints, colors: themeColors, From dbd6c17af52a8ceb45db2dfa4204b2d927896756 Mon Sep 17 00:00:00 2001 From: Michal Struck Date: Tue, 6 Feb 2024 00:06:23 +0100 Subject: [PATCH 09/12] app-redesign style: remove old colors --- .../_ReanimatedCameraTracers.tsx | 2 +- native/components/BarcodeScanner/index.tsx | 6 ++-- .../BottomSheet/contents/DatePicker.tsx | 6 ++-- .../components/BottomSheet/contents/Input.tsx | 4 +-- .../internal/BottomSheetContent.tsx | 2 +- native/components/Button.tsx | 8 ++--- native/components/Card.tsx | 5 --- native/components/DateInputController.tsx | 2 +- native/components/Header.tsx | 4 +-- native/components/HeaderRight.tsx | 2 +- native/components/IDListCard.tsx | 6 ++-- native/components/ListCard/ListCardAdd.tsx | 2 +- native/components/ListCard/ListCardLink.tsx | 6 ++-- native/components/LoadingSpinner.tsx | 2 +- native/components/NewBarcodeListItem.tsx | 6 ++-- native/components/Skeleton.tsx | 2 +- native/components/Snackbar/index.tsx | 8 ++--- native/components/TabBar/TabBar.tsx | 6 ++-- native/components/TextInput.tsx | 10 +++--- native/components/TextInputController.tsx | 2 +- native/navigation/BottomTabNavigation.tsx | 36 +++++++++---------- native/screens/BarcodeModalScreen.tsx | 8 ++--- native/screens/DeliveryTabScreen.tsx | 15 ++------ native/screens/InventoryTabScreen.tsx | 4 +-- native/screens/ListTabScreen.tsx | 10 ++---- native/screens/LoginScreen.tsx | 6 ++-- native/screens/NewBarcodeScreen.tsx | 4 +-- native/screens/NewStockScreen.tsx | 6 ++-- native/screens/RecordScreen.tsx | 23 ++++++------ native/screens/SettingsScreen.tsx | 6 ++-- native/screens/StartScreen.tsx | 6 ++-- native/theme/index.ts | 25 ++++--------- 32 files changed, 102 insertions(+), 138 deletions(-) diff --git a/native/components/BarcodeScanner/_ReanimatedCameraTracers.tsx b/native/components/BarcodeScanner/_ReanimatedCameraTracers.tsx index e7a098c6..bdd960e9 100644 --- a/native/components/BarcodeScanner/_ReanimatedCameraTracers.tsx +++ b/native/components/BarcodeScanner/_ReanimatedCameraTracers.tsx @@ -176,7 +176,7 @@ const useStyles = createStyles((theme) => container: { flex: 1, justifyContent: "center", - backgroundColor: theme.colors.lightBlue, + // backgroundColor: theme.colors.lightBlue, height: "100%", }, camera: { diff --git a/native/components/BarcodeScanner/index.tsx b/native/components/BarcodeScanner/index.tsx index 7e3f99fe..088d1459 100644 --- a/native/components/BarcodeScanner/index.tsx +++ b/native/components/BarcodeScanner/index.tsx @@ -101,7 +101,7 @@ export const BarcodeScanner = ({ - + @@ -180,7 +180,7 @@ const useStyles = createStyles((theme) => container: { flex: 1, justifyContent: "center", - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, height: "100%", }, camera: { diff --git a/native/components/BottomSheet/contents/DatePicker.tsx b/native/components/BottomSheet/contents/DatePicker.tsx index c9404799..4c8552f1 100644 --- a/native/components/BottomSheet/contents/DatePicker.tsx +++ b/native/components/BottomSheet/contents/DatePicker.tsx @@ -27,7 +27,7 @@ export const DatePickerBottomSheetContent = ({ styles.container, ]} > - + Wybierz datę StyleSheet.create({ container: { paddingTop: 16, - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, }, dateTitle: { alignSelf: "center", }, input: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, alignSelf: "center", }, button: { diff --git a/native/components/BottomSheet/contents/Input.tsx b/native/components/BottomSheet/contents/Input.tsx index 0800097f..f3a471a5 100644 --- a/native/components/BottomSheet/contents/Input.tsx +++ b/native/components/BottomSheet/contents/Input.tsx @@ -89,7 +89,7 @@ export const InputBottomSheetContent = ({ ]} > - + Wpisz ilość ); }; diff --git a/native/components/ListCard/ListCardLink.tsx b/native/components/ListCard/ListCardLink.tsx index 387c824f..2559793f 100644 --- a/native/components/ListCard/ListCardLink.tsx +++ b/native/components/ListCard/ListCardLink.tsx @@ -40,13 +40,13 @@ export const ListCardLink = ({ const navigation = useNavigation(); return ( 15 ? "sBold" : "lBold"} numberOfLines={2} > @@ -69,7 +69,7 @@ export const ListCardLink = ({ } } /> - + ); }; diff --git a/native/components/LoadingSpinner.tsx b/native/components/LoadingSpinner.tsx index 6debdb94..3bbd2372 100644 --- a/native/components/LoadingSpinner.tsx +++ b/native/components/LoadingSpinner.tsx @@ -6,5 +6,5 @@ export const LoadingSpinner = ({ size?: number | "small" | "large"; }) => { const theme = useTheme(); - return ; + return ; }; diff --git a/native/components/NewBarcodeListItem.tsx b/native/components/NewBarcodeListItem.tsx index b473507b..44f81ced 100644 --- a/native/components/NewBarcodeListItem.tsx +++ b/native/components/NewBarcodeListItem.tsx @@ -18,12 +18,12 @@ export const NewBarcodeListItem = ({ return ( 15 ? "sBold" : "lBold"} numberOfLines={2} > @@ -45,7 +45,7 @@ const useStyles = createStyles((theme) => borderRadius: theme.borderRadiusSmall, }, highlighted: { - borderColor: theme.colors.new_highlight, + borderColor: theme.colors.highlight, borderStyle: "solid", borderWidth: 2, marginLeft: -2, diff --git a/native/components/Skeleton.tsx b/native/components/Skeleton.tsx index 0ac20e4c..5d36b275 100644 --- a/native/components/Skeleton.tsx +++ b/native/components/Skeleton.tsx @@ -51,7 +51,7 @@ const useStyles = createStyles((theme) => defaultSkeletonStyle: { height: "100%", width: "100%", - backgroundColor: theme.colors.darkBlue, + backgroundColor: theme.colors.darkGrey, }, }) ); diff --git a/native/components/Snackbar/index.tsx b/native/components/Snackbar/index.tsx index 4c93633a..3bef4d95 100644 --- a/native/components/Snackbar/index.tsx +++ b/native/components/Snackbar/index.tsx @@ -127,16 +127,16 @@ const useStyles = createStyles((theme) => alignItems: "center", }, success: { - backgroundColor: theme.colors.new_green, + backgroundColor: theme.colors.green, }, error: { - backgroundColor: theme.colors.new_red, + backgroundColor: theme.colors.red, }, info: { - backgroundColor: theme.colors.new_highlight, + backgroundColor: theme.colors.highlight, }, text: { - color: theme.colors.white, + color: theme.colors.mediumBlue, }, }) ); diff --git a/native/components/TabBar/TabBar.tsx b/native/components/TabBar/TabBar.tsx index f36d12d8..4d1b25ce 100644 --- a/native/components/TabBar/TabBar.tsx +++ b/native/components/TabBar/TabBar.tsx @@ -16,7 +16,7 @@ import { CleanTabBarStyle } from "./TabStyle"; export const CleanTabBar = (props: BottomTabBarProps) => { const theme = useTheme(); - const BACKGROUND_COLOR = theme.colors.new_mediumBlue; + const BACKGROUND_COLOR = theme.colors.mediumBlue; return ( { const theme = useTheme(); - const BACKGROUND_COLOR = theme.colors.new_mediumBlue; - const FOREGROUND_COLOR = theme.colors.new_mediumBlue; + const BACKGROUND_COLOR = theme.colors.mediumBlue; + const FOREGROUND_COLOR = theme.colors.mediumBlue; return state.routes.map((route, index) => { const focusAnimation = useRef(new Animated.Value(0)).current; diff --git a/native/components/TextInput.tsx b/native/components/TextInput.tsx index 18a9f49c..4e910153 100644 --- a/native/components/TextInput.tsx +++ b/native/components/TextInput.tsx @@ -81,9 +81,9 @@ export const TextInput = React.forwardRef( accessible accessibilityLabel={props.accessibilityLabel} editable={!disabled || editable} - placeholderTextColor={theme.colors.grey} - selectionColor={theme.colors.grey} - cursorColor={theme.colors.grey} + placeholderTextColor={theme.colors.darkGrey} + selectionColor={theme.colors.highlight} + cursorColor={theme.colors.highlight} onFocus={(e: NativeSyntheticEvent) => handleFocus(onFocus ? () => onFocus(e) : () => undefined) } @@ -112,7 +112,7 @@ const useStyles = createStyles((theme) => borderRadius: theme.borderRadiusSmall, height: 48, justifyContent: isAndroid ? undefined : "center", - borderColor: theme.colors.new_lightBlue, + borderColor: theme.colors.lightBlue, borderWidth: BORDER_WIDTH, padding: theme.spacing + (isAndroid ? 0 : -BORDER_WIDTH), }, @@ -141,7 +141,7 @@ const useStyles = createStyles((theme) => flexShrink: 1, width: "100%", paddingHorizontal: theme.spacing * 2, - color: theme.colors.new_highlight, + color: theme.colors.highlight, }, inputMultiline: { height: undefined, diff --git a/native/components/TextInputController.tsx b/native/components/TextInputController.tsx index be0d9508..4445fecd 100644 --- a/native/components/TextInputController.tsx +++ b/native/components/TextInputController.tsx @@ -40,7 +40,7 @@ export const TextInputController = ({ ref={ref} /> {error && ( - + {error.message} )} diff --git a/native/navigation/BottomTabNavigation.tsx b/native/navigation/BottomTabNavigation.tsx index 7b8f8aa2..ac43d70a 100644 --- a/native/navigation/BottomTabNavigation.tsx +++ b/native/navigation/BottomTabNavigation.tsx @@ -57,9 +57,9 @@ const DeliveryStackNavigator = ({ route }: DeliveryTabProps) => { headerBackground: () => ( { ), headerTitle: deliveryName, headerTitleStyle: { - color: theme.colors.new_highlight, + color: theme.colors.highlight, }, headerBackVisible: false, }} @@ -79,9 +79,9 @@ const DeliveryStackNavigator = ({ route }: DeliveryTabProps) => { headerBackground: () => ( { ), headerTitle: deliveryName, headerTitleStyle: { - color: theme.colors.new_highlight, + color: theme.colors.highlight, }, headerBackVisible: false, // headerShown: false, @@ -131,9 +131,9 @@ const InventoryStackNavigator = ({ route }: InventoryTabProps) => { headerBackground: () => ( { ), headerTitle: inventoryName, headerTitleStyle: { - color: theme.colors.new_highlight, + color: theme.colors.highlight, }, headerBackVisible: false, }} @@ -153,9 +153,9 @@ const InventoryStackNavigator = ({ route }: InventoryTabProps) => { headerBackground: () => ( { ), headerTitle: inventoryName, headerTitleStyle: { - color: theme.colors.new_highlight, + color: theme.colors.highlight, }, headerBackVisible: false, }} @@ -186,8 +186,8 @@ export const BottomTabNavigation = ({}: BottomTabProps) => { options={{ title: "Lista", tabBarShowLabel: false, - tabBarActiveTintColor: theme.colors.new_highlight, - tabBarIcon: () => , + tabBarActiveTintColor: theme.colors.highlight, + tabBarIcon: () => , headerShown: false, lazy: false, }} @@ -198,8 +198,8 @@ export const BottomTabNavigation = ({}: BottomTabProps) => { options={{ title: "Inwentaryzacja", tabBarShowLabel: false, - tabBarActiveTintColor: theme.colors.new_highlight, - tabBarIcon: () => , + tabBarActiveTintColor: theme.colors.highlight, + tabBarIcon: () => , headerShown: false, lazy: false, }} @@ -210,8 +210,8 @@ export const BottomTabNavigation = ({}: BottomTabProps) => { options={{ title: "Dostawa", tabBarShowLabel: false, - tabBarActiveTintColor: theme.colors.new_highlight, - tabBarIcon: () => , + tabBarActiveTintColor: theme.colors.highlight, + tabBarIcon: () => , headerShown: false, lazy: false, }} diff --git a/native/screens/BarcodeModalScreen.tsx b/native/screens/BarcodeModalScreen.tsx index cc05b838..6181d80a 100644 --- a/native/screens/BarcodeModalScreen.tsx +++ b/native/screens/BarcodeModalScreen.tsx @@ -37,14 +37,14 @@ export function BarcodeModalScreen({ route }: BarcodeModalScreenProps) { Aby skorzystać ze skanera kodów, pozwól aplikacji na dostęp do kamery. Aby skorzystać ze skanera kodów, pozwól aplikacji na dostęp do kamery. @@ -102,7 +102,7 @@ const useStyles = createStyles((theme) => container: { flex: 1, justifyContent: "center", - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, height: "100%", }, }) diff --git a/native/screens/DeliveryTabScreen.tsx b/native/screens/DeliveryTabScreen.tsx index 4c270aa3..000a9305 100644 --- a/native/screens/DeliveryTabScreen.tsx +++ b/native/screens/DeliveryTabScreen.tsx @@ -66,9 +66,6 @@ export default function DeliveryTabScreen({ return ( - - - @@ -143,21 +140,13 @@ export default function DeliveryTabScreen({ const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.new_darkBlue, - }, - topBar: { - ...theme.baseShadow, - width: "100%", - backgroundColor: theme.colors.mediumBlue, - height: 50, - justifyContent: "center", - alignItems: "center", + backgroundColor: theme.colors.darkBlue, }, listContainer: { paddingHorizontal: theme.spacing * 4 }, scroll: { width: "100%", height: "100%", - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, }, date: { paddingTop: theme.spacing, diff --git a/native/screens/InventoryTabScreen.tsx b/native/screens/InventoryTabScreen.tsx index fba27377..3324e7fb 100644 --- a/native/screens/InventoryTabScreen.tsx +++ b/native/screens/InventoryTabScreen.tsx @@ -129,14 +129,14 @@ export default function InventoryTabScreen({ const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, }, listContainer: { paddingHorizontal: theme.spacing * 4 }, scroll: { width: "100%", height: "100%", - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, }, date: { paddingTop: theme.spacing, diff --git a/native/screens/ListTabScreen.tsx b/native/screens/ListTabScreen.tsx index 0f835ec9..6042773d 100644 --- a/native/screens/ListTabScreen.tsx +++ b/native/screens/ListTabScreen.tsx @@ -14,11 +14,7 @@ import { createStyles } from "../theme/useStyles"; const MonthTitle = ({ title }: { title: string }) => { const styles = useStyles(); return ( - + {title} ); @@ -26,7 +22,7 @@ const MonthTitle = ({ title }: { title: string }) => { const DayTitle = ({ title }: { title: string }) => { const styles = useStyles(); return ( - + {title} ); @@ -132,7 +128,7 @@ export const ListTab = ({}: ListTabScreenProps) => { const useStyles = createStyles((theme) => StyleSheet.create({ screen: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, height: "100%", }, scroll: { diff --git a/native/screens/LoginScreen.tsx b/native/screens/LoginScreen.tsx index 219d5376..369fc6b0 100644 --- a/native/screens/LoginScreen.tsx +++ b/native/screens/LoginScreen.tsx @@ -52,7 +52,7 @@ export default function LoginScreen({}: LoginScreenProps) { return ( - + Logowanie StyleSheet.create({ container: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, height: "100%", paddingHorizontal: theme.spacing * 6, paddingTop: theme.spacing * 3, @@ -125,7 +125,7 @@ const useStyles = createStyles((theme) => link: { alignSelf: "center", marginTop: theme.spacing * 2.5, - color: theme.colors.new_darkBlue, + color: theme.colors.darkBlue, textDecorationLine: "underline", opacity: theme.opacity, ...theme.text.xs, diff --git a/native/screens/NewBarcodeScreen.tsx b/native/screens/NewBarcodeScreen.tsx index 85f87e77..34eb4509 100644 --- a/native/screens/NewBarcodeScreen.tsx +++ b/native/screens/NewBarcodeScreen.tsx @@ -114,13 +114,13 @@ export function NewBarcodeScreen({ route, navigation }: NewBarcodeScreenProps) { const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, }, listContainer: { paddingHorizontal: theme.spacing * 4 }, scroll: { width: "100%", height: "100%", - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, }, date: { paddingTop: theme.spacing, diff --git a/native/screens/NewStockScreen.tsx b/native/screens/NewStockScreen.tsx index 7fd56e02..9950e1cc 100644 --- a/native/screens/NewStockScreen.tsx +++ b/native/screens/NewStockScreen.tsx @@ -96,12 +96,12 @@ export function NewStockScreen({ navigation }: NewStockScreenProps) { return ( - + {`Nowy wpis:`} - + {is_delivery ? `Dostawa` : `Inwentaryzacja`} @@ -149,7 +149,7 @@ export function NewStockScreen({ navigation }: NewStockScreenProps) { const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, height: "100%", paddingHorizontal: theme.spacing * 5, }, diff --git a/native/screens/RecordScreen.tsx b/native/screens/RecordScreen.tsx index 3928fd03..13511394 100644 --- a/native/screens/RecordScreen.tsx +++ b/native/screens/RecordScreen.tsx @@ -51,10 +51,7 @@ const RecordButton = ({ ]} onPress={onPress} > - + {label} @@ -175,18 +172,18 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { return ( - + {/* nazwa produktu */} {recordName} - + Ile było: 999 ? "lBold" : "xlBold"} style={styles.wasAmount} - color="new_darkGrey" + color="darkGrey" > {unit ? previousQuantity + " " + unit : null} @@ -217,15 +214,15 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { isFirst )} > - + - Ile jest: + Ile jest: 999 ? "lBold" : "xlBold"} style={styles.title} - color="new_darkGrey" + color="darkGrey" > {/* liczba + jednostka current */} {unit ? quantity + " " + unit : null} @@ -236,7 +233,7 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { containerStyle={styles.editButton} onPress={() => openManualInput(quantity!, setQuantity)} > - + @@ -265,7 +262,7 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { isLast )} > - + @@ -277,7 +274,7 @@ export function RecordScreen({ route, navigation }: RecordScreenProps) { const useStyles = createStyles((theme) => StyleSheet.create({ - container: { backgroundColor: theme.colors.new_darkBlue, height: "100%" }, + container: { backgroundColor: theme.colors.darkBlue, height: "100%" }, contentContainer: { paddingHorizontal: theme.spacing * 3 }, title: { paddingTop: theme.spacing * 3 }, wasTitle: { marginTop: theme.spacing * 5.5 }, diff --git a/native/screens/SettingsScreen.tsx b/native/screens/SettingsScreen.tsx index a5e213db..7d76bc14 100644 --- a/native/screens/SettingsScreen.tsx +++ b/native/screens/SettingsScreen.tsx @@ -30,10 +30,10 @@ export default function SettingsScreen({ navigation }: SettingsScreenProps) { return ( - + Ustawienia - + Twój email: StyleSheet.create({ container: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, paddingHorizontal: theme.spacing * 2, paddingTop: theme.spacing * 2, alignItems: "center", diff --git a/native/screens/StartScreen.tsx b/native/screens/StartScreen.tsx index b38f592e..a143edf0 100644 --- a/native/screens/StartScreen.tsx +++ b/native/screens/StartScreen.tsx @@ -25,7 +25,7 @@ export default function StartScreen({ navigation }: StartScreenProps) { return ( - + InvTrack @@ -56,7 +56,7 @@ export default function StartScreen({ navigation }: StartScreenProps) { const useStyles = createStyles((theme) => StyleSheet.create({ container: { - backgroundColor: theme.colors.new_darkBlue, + backgroundColor: theme.colors.darkBlue, height: "100%", alignItems: "center", }, diff --git a/native/theme/index.ts b/native/theme/index.ts index 51e898d8..367b1f97 100644 --- a/native/theme/index.ts +++ b/native/theme/index.ts @@ -15,29 +15,16 @@ const fontSize = { export type ThemeColors = keyof typeof themeColors; // remove export -export const NEWthemeColors = { - new_black: "#000000", - new_darkGrey: "#676D75", - new_lightBlue: "#384152", - new_mediumBlue: "#212939", - new_darkBlue: "#111828", - new_highlight: "#62A0E8", - new_green: "#099D56", - new_red: "#F05250", - new_transparent: "rgba(0,0,0,0)", -} as const; const themeColors = { black: "#000000", - white: "#FFFFFF", - lightBlue: "#EDF6FF", - mediumBlue: "#C9E0F6", - darkBlue: "#4A6D90", - grey: "#96AFC8", - error: "#EF5350", - green: "#0D9F6F", + darkGrey: "#676D75", + lightBlue: "#384152", + mediumBlue: "#212939", + darkBlue: "#111828", + highlight: "#62A0E8", + green: "#099D56", red: "#F05250", transparent: "rgba(0,0,0,0)", - ...NEWthemeColors, } as const; export type Breakpoints = typeof breakpoints; From fe2c71c65a8000ef7f3aaa664616e72f798d6451 Mon Sep 17 00:00:00 2001 From: Michal Struck Date: Tue, 6 Feb 2024 00:07:04 +0100 Subject: [PATCH 10/12] cleanup --- native/theme/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/native/theme/index.ts b/native/theme/index.ts index 367b1f97..9b8a7142 100644 --- a/native/theme/index.ts +++ b/native/theme/index.ts @@ -14,7 +14,6 @@ const fontSize = { export type ThemeColors = keyof typeof themeColors; -// remove export const themeColors = { black: "#000000", darkGrey: "#676D75", From 58b93764dd4928515cd1e5ca85da556ba90bbd18 Mon Sep 17 00:00:00 2001 From: Michal Struck Date: Tue, 6 Feb 2024 00:22:04 +0100 Subject: [PATCH 11/12] app-redesign style: add badges instead of icons, closes #74 --- native/components/Card.tsx | 30 +++++++++++++++++++++ native/components/ListCard/ListCardLink.tsx | 20 ++------------ 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/native/components/Card.tsx b/native/components/Card.tsx index 249443a6..cdd769fd 100644 --- a/native/components/Card.tsx +++ b/native/components/Card.tsx @@ -22,6 +22,7 @@ interface CardProps { borderTop?: boolean; borderBottom?: boolean; onPress?: () => void; + badge?: "red" | "green"; } export const Card = forwardRef( @@ -35,6 +36,7 @@ export const Card = forwardRef( borderTop = false, borderBottom = false, onPress, + badge, }: CardProps, _ref ) => { @@ -53,6 +55,11 @@ export const Card = forwardRef( style, ]} > + {badge && ( + + )} {children} ); @@ -69,6 +76,11 @@ export const Card = forwardRef( style, ]} > + {badge && ( + + )} {children} ); @@ -85,6 +97,24 @@ const useStyles = createStyles((theme) => borderBottomLeftRadius: theme.borderRadius, borderBottomRightRadius: theme.borderRadius, }, + // badge: { + // position: "absolute", + // overflow: "hidden", + // backgroundColor: theme.colors.red, + // top: -2, + // left: -2, + // width: 12, + // height: 12, + // borderRadius: theme.borderRadius, + // }, + badge: { + position: "absolute", + height: "100%", + width: 5, + left: 0, + borderTopStartRadius: theme.borderRadiusSmall, + borderBottomStartRadius: theme.borderRadiusSmall, + }, none: { padding: 0, }, diff --git a/native/components/ListCard/ListCardLink.tsx b/native/components/ListCard/ListCardLink.tsx index 2559793f..974de749 100644 --- a/native/components/ListCard/ListCardLink.tsx +++ b/native/components/ListCard/ListCardLink.tsx @@ -1,6 +1,6 @@ import { useNavigation } from "@react-navigation/native"; import React from "react"; -import { StyleSheet, View } from "react-native"; +import { StyleSheet } from "react-native"; import { DeliveryTabNavigationProp, InventoryTabNavigationProp, @@ -43,6 +43,7 @@ export const ListCardLink = ({ color="mediumBlue" style={styles.card} padding="none" + badge={isDelivery ? "green" : "red"} onPress={navigateToTabScreen(navigation, id, isDelivery)} > {title} - ); From 880d65edb5d8c298aced04fb91ba1af9d4e96238 Mon Sep 17 00:00:00 2001 From: Michal Struck Date: Tue, 6 Feb 2024 00:22:55 +0100 Subject: [PATCH 12/12] remove grpahic comment --- native/components/ListCard/ListCardLink.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/native/components/ListCard/ListCardLink.tsx b/native/components/ListCard/ListCardLink.tsx index 974de749..8ae025cb 100644 --- a/native/components/ListCard/ListCardLink.tsx +++ b/native/components/ListCard/ListCardLink.tsx @@ -16,7 +16,6 @@ type InventoryCardAddProps = { isDelivery: boolean; }; -// fuck this type assetion bullshit man const navigateToTabScreen = (navigation: any, id: number, isDelivery: boolean) => () => { if (isDelivery) {