diff --git a/front/API.ts b/front/API.ts index 876f874..4d72ce5 100644 --- a/front/API.ts +++ b/front/API.ts @@ -68,7 +68,7 @@ export default class API { public static readonly baseUrl = process.env.NODE_ENV != 'development' && Platform.OS === 'web' ? '/api' - : "https://nightly.chroma.octohub.app/api"; + : 'https://nightly.chroma.octohub.app/api'; public static async fetch( params: FetchParams, handle: Pick, 'raw'> diff --git a/front/App.tsx b/front/App.tsx index 4b017cf..8ceb4fb 100644 --- a/front/App.tsx +++ b/front/App.tsx @@ -19,7 +19,7 @@ export default function App() { setTimeout(SplashScreen.hideAsync, 500); const [fontsLoaded] = useFonts({ - 'Lexend': require('./assets/fonts/Lexend-VariableFont_wght.ttf'), + Lexend: require('./assets/fonts/Lexend-VariableFont_wght.ttf'), }); return ( diff --git a/front/Theme.tsx b/front/Theme.tsx index 704282a..8e02c3d 100644 --- a/front/Theme.tsx +++ b/front/Theme.tsx @@ -13,9 +13,9 @@ const ThemeProvider = ({ children }: { children: JSX.Element }) => { initialColorMode: colorScheme, }, fonts: { - heading: "Lexend", - body: "Lexend", - mono: "Lexend", + heading: 'Lexend', + body: 'Lexend', + mono: 'Lexend', }, colors: { primary: { diff --git a/front/components/GtkUI/Element.tsx b/front/components/GtkUI/Element.tsx index 2eb3c9e..5c336af 100644 --- a/front/components/GtkUI/Element.tsx +++ b/front/components/GtkUI/Element.tsx @@ -6,10 +6,10 @@ import { Animated, StyleSheet } from 'react-native'; import InteractiveBase from '../UI/InteractiveBase'; export const Element = (props: T) => { - let actionFunction: (() => void) | null | undefined = null; + let actionFunction: (() => void) | null | undefined = null; const dropdownAnimator = useRef(new Animated.Value(1)).current; const [dropdownValue, setDropdownValue] = useState(false); - + switch (props.type) { case 'text': actionFunction = props.data?.onPress; @@ -55,39 +55,43 @@ export const Element = (props: T) => { shadowRadius: 0, elevation: 0, backgroundColor: 'rgba(16, 16, 20, 0.50)', - } + }, }); if (!props?.disabled && actionFunction) { return ( {actionFunction?.();}} + onPress={async () => { + actionFunction?.(); + }} > - { - props.type === 'sectionDropdown' && dropdownValue && + {props.type === 'sectionDropdown' && dropdownValue && ( - { - props.data.section.map((value, index) => ( - - {value} - - )) - } + {props.data.section.map((value, index) => ( + + {value} + + ))} - } + )} ); } - return ; + return ( + + + + ); }; diff --git a/front/components/GtkUI/ElementList.tsx b/front/components/GtkUI/ElementList.tsx index dc694f3..d96d466 100644 --- a/front/components/GtkUI/ElementList.tsx +++ b/front/components/GtkUI/ElementList.tsx @@ -18,7 +18,7 @@ const ElementList = ({ elements, style }: ElementListProps) => { // const isDark = colorScheme === 'dark'; const elementStyle = { borderRadius: 10, - shadowOpacity: 0.30, + shadowOpacity: 0.3, shadowRadius: 4.65, elevation: 8, backgroundColor: 'transparent', @@ -30,7 +30,7 @@ const ElementList = ({ elements, style }: ElementListProps) => { {elements.map((element, index) => ( - {index < elements.length - 1 && } + {index < elements.length - 1 && } ))} diff --git a/front/components/GtkUI/ElementTypes.tsx b/front/components/GtkUI/ElementTypes.tsx index 35eab89..f936417 100644 --- a/front/components/GtkUI/ElementTypes.tsx +++ b/front/components/GtkUI/ElementTypes.tsx @@ -109,14 +109,10 @@ export const getElementDropdownNode = ( bgColor={'rgba(16,16,20,0.5)'} variant="filled" isDisabled={disabled} - width={layout.width > 650 ? "200" : "100"} + width={layout.width > 650 ? '200' : '100'} > {options.map((option) => ( - + ))} ); @@ -141,7 +137,7 @@ export const getElementRangeNode = ( isDisabled={disabled} onChangeEnd={onChange} accessibilityLabel={`Slider for ${title}`} - width={layout.width > 650 ? "200" : "100"} + width={layout.width > 650 ? '200' : '100'} > diff --git a/front/components/GtkUI/RawElement.tsx b/front/components/GtkUI/RawElement.tsx index a2e776b..938618a 100644 --- a/front/components/GtkUI/RawElement.tsx +++ b/front/components/GtkUI/RawElement.tsx @@ -1,5 +1,15 @@ import React from 'react'; -import { Box, Button, Column, Icon, Popover, Row, Text, Wrap, useBreakpointValue } from 'native-base'; +import { + Box, + Button, + Column, + Icon, + Popover, + Row, + Text, + Wrap, + useBreakpointValue, +} from 'native-base'; import useColorScheme from '../../hooks/colorScheme'; import { Ionicons } from '@expo/vector-icons'; import { ElementProps } from './ElementTypes'; @@ -30,7 +40,6 @@ export const RawElement = ({ element }: RawElementProps) => { justifyContent: 'space-between', alignContent: 'stretch', alignItems: 'center', - }} > { alignItems: 'center', }} > - {icon} + {icon} { case 'custom': return data; case 'sectionDropdown': - return ; + return ; default: return Unknown type; } diff --git a/front/components/UI/ButtonBase.tsx b/front/components/UI/ButtonBase.tsx index f60fd64..bf06cae 100644 --- a/front/components/UI/ButtonBase.tsx +++ b/front/components/UI/ButtonBase.tsx @@ -6,130 +6,142 @@ import { Text, useTheme } from 'native-base'; // import { BlurView } from 'expo-blur'; interface ButtonProps { - title?: string; - style?: StyleProp, - onPress?: () => Promise; - isDisabled?: boolean; - icon?: (size: string, color: string) => React.ReactNode; - iconImage?: string; - isCollapsed?: boolean; - type: 'filled' | 'outlined' | 'menu'; + title?: string; + style?: StyleProp; + onPress?: () => Promise; + isDisabled?: boolean; + icon?: (size: string, color: string) => React.ReactNode; + iconImage?: string; + isCollapsed?: boolean; + type: 'filled' | 'outlined' | 'menu'; } -const ButtonBase: React.FC = ({ title, style, onPress, isDisabled, icon, iconImage, isCollapsed, type = 'filled'}) => { - const { colors } = useTheme(); - const [loading, setLoading] = useState(false); +const ButtonBase: React.FC = ({ + title, + style, + onPress, + isDisabled, + icon, + iconImage, + isCollapsed, + type = 'filled', +}) => { + const { colors } = useTheme(); + const [loading, setLoading] = useState(false); - const styleButton = StyleSheet.create({ - Default: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: colors.primary[400], - }, - onHover: { - scale: 1.02, - shadowOpacity: 0.37, - shadowRadius: 7.49, - elevation: 12, - backgroundColor: colors.primary[500], - }, - onPressed: { - scale: 0.98, - shadowOpacity: 0.23, - shadowRadius: 2.62, - elevation: 4, - backgroundColor: colors.primary[600], - }, - Disabled: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: colors.primary[400], - } - }); + const styleButton = StyleSheet.create({ + Default: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: colors.primary[400], + }, + onHover: { + scale: 1.02, + shadowOpacity: 0.37, + shadowRadius: 7.49, + elevation: 12, + backgroundColor: colors.primary[500], + }, + onPressed: { + scale: 0.98, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + backgroundColor: colors.primary[600], + }, + Disabled: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: colors.primary[400], + }, + }); - const styleMenu = StyleSheet.create({ - Default: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(16,16,20,0.5)', - }, - onHover: { - scale: 1.01, - shadowOpacity: 0.37, - shadowRadius: 7.49, - elevation: 12, - backgroundColor: 'rgba(16,16,20,0.4)', - }, - onPressed: { - scale: 0.99, - shadowOpacity: 0.23, - shadowRadius: 2.62, - elevation: 4, - backgroundColor: 'rgba(16,16,20,0.6)', - }, - Disabled: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(16,16,20,0.5)', - } - }); + const styleMenu = StyleSheet.create({ + Default: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(16,16,20,0.5)', + }, + onHover: { + scale: 1.01, + shadowOpacity: 0.37, + shadowRadius: 7.49, + elevation: 12, + backgroundColor: 'rgba(16,16,20,0.4)', + }, + onPressed: { + scale: 0.99, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + backgroundColor: 'rgba(16,16,20,0.6)', + }, + Disabled: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(16,16,20,0.5)', + }, + }); - const typeToStyleAnimator = {'filled': styleButton,'outlined': styleButton,'menu': styleMenu}; + const typeToStyleAnimator = { filled: styleButton, outlined: styleButton, menu: styleMenu }; - return ( - { - if (onPress && !isDisabled) { - setLoading(true); - await onPress(); - setLoading(false); - } - }} - isDisabled={isDisabled} - isOutlined={type === 'outlined'} - > - {loading ? ( - - ) : ( - - {icon && icon("18", type === 'outlined' ? '#6075F9' : '#FFFFFF')} - {iconImage && } - {title && {title}} - - )} - - ); + return ( + { + if (onPress && !isDisabled) { + setLoading(true); + await onPress(); + setLoading(false); + } + }} + isDisabled={isDisabled} + isOutlined={type === 'outlined'} + > + {loading ? ( + + ) : ( + + {icon && icon('18', type === 'outlined' ? '#6075F9' : '#FFFFFF')} + {iconImage && } + {title && {title}} + + )} + + ); }; const styles = StyleSheet.create({ - container: { - borderRadius: 8, - }, - content: { - padding: 10, - justifyContent: 'center', - flexDirection: 'row', - alignItems: 'center', - }, - icon: { - width: 18, - height: 18, - // marginRight: 8, - }, - text: { - color: '#fff', - marginHorizontal: 8 - }, + container: { + borderRadius: 8, + }, + content: { + padding: 10, + justifyContent: 'center', + flexDirection: 'row', + alignItems: 'center', + }, + icon: { + width: 18, + height: 18, + // marginRight: 8, + }, + text: { + color: '#fff', + marginHorizontal: 8, + }, }); export default ButtonBase; diff --git a/front/components/UI/InteractiveBase.tsx b/front/components/UI/InteractiveBase.tsx index f1b3c71..0f12b4b 100644 --- a/front/components/UI/InteractiveBase.tsx +++ b/front/components/UI/InteractiveBase.tsx @@ -3,225 +3,254 @@ import React, { useRef } from 'react'; import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native'; interface InteractiveBaseProps { - children?: React.ReactNode; - onPress?: () => Promise; - isDisabled?: boolean; - isOutlined?: boolean; - style?: StyleProp, - styleAnimate: { - Default: { - scale: number, - shadowOpacity: number, - shadowRadius: number, - elevation: number, - backgroundColor: string, - }, - onHover: { - scale: number, - shadowOpacity: number, - shadowRadius: number, - elevation: number, - backgroundColor: string, - }, - onPressed: { - scale: number, - shadowOpacity: number, - shadowRadius: number, - elevation: number, - backgroundColor: string, - }, - Disabled: { - scale: number, - shadowOpacity: number, - shadowRadius: number, - elevation: number, - backgroundColor: string, - } - } + children?: React.ReactNode; + onPress?: () => Promise; + isDisabled?: boolean; + isOutlined?: boolean; + style?: StyleProp; + styleAnimate: { + Default: { + scale: number; + shadowOpacity: number; + shadowRadius: number; + elevation: number; + backgroundColor: string; + }; + onHover: { + scale: number; + shadowOpacity: number; + shadowRadius: number; + elevation: number; + backgroundColor: string; + }; + onPressed: { + scale: number; + shadowOpacity: number; + shadowRadius: number; + elevation: number; + backgroundColor: string; + }; + Disabled: { + scale: number; + shadowOpacity: number; + shadowRadius: number; + elevation: number; + backgroundColor: string; + }; + }; } -const InteractiveBase: React.FC = ({ children, onPress, style, styleAnimate, isDisabled = false, isOutlined = false }) => { - const scaleAnimator = useRef(new Animated.Value(1)).current; - const scaleValue = scaleAnimator.interpolate({ - inputRange: [0, 1, 2], - outputRange: [styleAnimate.Default.scale, styleAnimate.onHover.scale, styleAnimate.onPressed.scale], - }); - const shadowOpacityAnimator = useRef(new Animated.Value(0)).current; - const shadowOpacityValue = shadowOpacityAnimator.interpolate({ - inputRange: [0, 1, 2], - outputRange: [styleAnimate.Default.shadowOpacity, styleAnimate.onHover.shadowOpacity, styleAnimate.onPressed.shadowOpacity], - }); - const shadowRadiusAnimator = useRef(new Animated.Value(0)).current; - const shadowRadiusValue = shadowRadiusAnimator.interpolate({ - inputRange: [0, 1, 2], - outputRange: [styleAnimate.Default.shadowRadius, styleAnimate.onHover.shadowRadius, styleAnimate.onPressed.shadowRadius], - }); - const elevationAnimator = useRef(new Animated.Value(0)).current; - const elevationValue = elevationAnimator.interpolate({ - inputRange: [0, 1, 2], - outputRange: [styleAnimate.Default.elevation, styleAnimate.onHover.elevation, styleAnimate.onPressed.elevation], - }); - const backgroundColorAnimator = useRef(new Animated.Value(0)).current; - const backgroundColorValue = backgroundColorAnimator.interpolate({ - inputRange: [0, 1, 2], - outputRange: [styleAnimate.Default.backgroundColor, styleAnimate.onHover.backgroundColor, styleAnimate.onPressed.backgroundColor], - }); +const InteractiveBase: React.FC = ({ + children, + onPress, + style, + styleAnimate, + isDisabled = false, + isOutlined = false, +}) => { + const scaleAnimator = useRef(new Animated.Value(1)).current; + const scaleValue = scaleAnimator.interpolate({ + inputRange: [0, 1, 2], + outputRange: [ + styleAnimate.Default.scale, + styleAnimate.onHover.scale, + styleAnimate.onPressed.scale, + ], + }); + const shadowOpacityAnimator = useRef(new Animated.Value(0)).current; + const shadowOpacityValue = shadowOpacityAnimator.interpolate({ + inputRange: [0, 1, 2], + outputRange: [ + styleAnimate.Default.shadowOpacity, + styleAnimate.onHover.shadowOpacity, + styleAnimate.onPressed.shadowOpacity, + ], + }); + const shadowRadiusAnimator = useRef(new Animated.Value(0)).current; + const shadowRadiusValue = shadowRadiusAnimator.interpolate({ + inputRange: [0, 1, 2], + outputRange: [ + styleAnimate.Default.shadowRadius, + styleAnimate.onHover.shadowRadius, + styleAnimate.onPressed.shadowRadius, + ], + }); + const elevationAnimator = useRef(new Animated.Value(0)).current; + const elevationValue = elevationAnimator.interpolate({ + inputRange: [0, 1, 2], + outputRange: [ + styleAnimate.Default.elevation, + styleAnimate.onHover.elevation, + styleAnimate.onPressed.elevation, + ], + }); + const backgroundColorAnimator = useRef(new Animated.Value(0)).current; + const backgroundColorValue = backgroundColorAnimator.interpolate({ + inputRange: [0, 1, 2], + outputRange: [ + styleAnimate.Default.backgroundColor, + styleAnimate.onHover.backgroundColor, + styleAnimate.onPressed.backgroundColor, + ], + }); - // Mouse Enter - const handleMouseEnter = () => { - Animated.parallel([ - Animated.spring(scaleAnimator, { - toValue: 1, - useNativeDriver: true, - }), - Animated.timing(backgroundColorAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowRadiusAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowOpacityAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(elevationAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - ]).start(); - } - // Mouse Down - const handlePressIn = () => { - Animated.parallel([ - Animated.spring(scaleAnimator, { - toValue: 2, - useNativeDriver: true, - }), - Animated.timing(backgroundColorAnimator, { - toValue: 2, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowRadiusAnimator, { - toValue: 2, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowOpacityAnimator, { - toValue: 2, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(elevationAnimator, { - toValue: 2, - duration: 250, - useNativeDriver: false, - }), - ]).start(); - }; - // Mouse Up - const handlePressOut = () => { - Animated.parallel([ - Animated.spring(scaleAnimator, { - toValue: 1, - useNativeDriver: true, - }), - Animated.timing(backgroundColorAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowRadiusAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowOpacityAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(elevationAnimator, { - toValue: 1, - duration: 250, - useNativeDriver: false, - }), - ]).start(); + // Mouse Enter + const handleMouseEnter = () => { + Animated.parallel([ + Animated.spring(scaleAnimator, { + toValue: 1, + useNativeDriver: true, + }), + Animated.timing(backgroundColorAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowRadiusAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowOpacityAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(elevationAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + ]).start(); + }; + // Mouse Down + const handlePressIn = () => { + Animated.parallel([ + Animated.spring(scaleAnimator, { + toValue: 2, + useNativeDriver: true, + }), + Animated.timing(backgroundColorAnimator, { + toValue: 2, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowRadiusAnimator, { + toValue: 2, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowOpacityAnimator, { + toValue: 2, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(elevationAnimator, { + toValue: 2, + duration: 250, + useNativeDriver: false, + }), + ]).start(); + }; + // Mouse Up + const handlePressOut = () => { + Animated.parallel([ + Animated.spring(scaleAnimator, { + toValue: 1, + useNativeDriver: true, + }), + Animated.timing(backgroundColorAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowRadiusAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowOpacityAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(elevationAnimator, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }), + ]).start(); - if (onPress && !isDisabled) { - onPress(); - } - } - // Mouse Leave - const handleMouseLeave = () => { - Animated.parallel([ - Animated.spring(scaleAnimator, { - toValue: 0, - useNativeDriver: true, - }), - Animated.timing(backgroundColorAnimator, { - toValue: 0, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowRadiusAnimator, { - toValue: 0, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(shadowOpacityAnimator, { - toValue: 0, - duration: 250, - useNativeDriver: false, - }), - Animated.timing(elevationAnimator, { - toValue: 0, - duration: 250, - useNativeDriver: true, - }), - ]).start(); - } + if (onPress && !isDisabled) { + onPress(); + } + }; + // Mouse Leave + const handleMouseLeave = () => { + Animated.parallel([ + Animated.spring(scaleAnimator, { + toValue: 0, + useNativeDriver: true, + }), + Animated.timing(backgroundColorAnimator, { + toValue: 0, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowRadiusAnimator, { + toValue: 0, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(shadowOpacityAnimator, { + toValue: 0, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(elevationAnimator, { + toValue: 0, + duration: 250, + useNativeDriver: true, + }), + ]).start(); + }; - return ( - - - {children} - - - ); + return ( + + + {children} + + + ); }; const styles = StyleSheet.create({ - container: { - width: '100%', - height: '100%', - }, + container: { + width: '100%', + height: '100%', + }, }); -export default InteractiveBase; \ No newline at end of file +export default InteractiveBase; diff --git a/front/components/UI/LinkBase.tsx b/front/components/UI/LinkBase.tsx index 188cdbb..69f7424 100644 --- a/front/components/UI/LinkBase.tsx +++ b/front/components/UI/LinkBase.tsx @@ -2,22 +2,22 @@ import React, { ReactNode, FunctionComponent } from 'react'; import { TouchableOpacity, Text, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ - linkText: { - textDecorationLine: 'underline', - color: '#A3AFFC', - fontWeight: '700', - }, + linkText: { + textDecorationLine: 'underline', + color: '#A3AFFC', + fontWeight: '700', + }, }); interface LinkBaseProps { - children: ReactNode; - onPress: () => void; + children: ReactNode; + onPress: () => void; } const LinkBase: FunctionComponent = ({ children, onPress }) => ( - - {children} - + + {children} + ); export default LinkBase; diff --git a/front/components/UI/SeparatorBase.tsx b/front/components/UI/SeparatorBase.tsx index 5168cec..2ce23d4 100644 --- a/front/components/UI/SeparatorBase.tsx +++ b/front/components/UI/SeparatorBase.tsx @@ -2,33 +2,33 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { View, Text, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ - line: { - flex: 1, - height: 2, - backgroundColor: 'white', - }, - container: { - width: '100%', - flexDirection: 'row', - alignItems: 'center', - marginVertical: 20, - }, - text: { - color: 'white', - paddingHorizontal: 16, - }, + line: { + flex: 1, + height: 2, + backgroundColor: 'white', + }, + container: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginVertical: 20, + }, + text: { + color: 'white', + paddingHorizontal: 16, + }, }); interface SeparatorBaseProps { - children: ReactNode; + children: ReactNode; } -const SeparatorBase: FunctionComponent = ({children}) => ( - - - {children} - - +const SeparatorBase: FunctionComponent = ({ children }) => ( + + + {children} + + ); export default SeparatorBase; diff --git a/front/components/UI/SettingsBase.tsx b/front/components/UI/SettingsBase.tsx index 5798132..5cb7c11 100644 --- a/front/components/UI/SettingsBase.tsx +++ b/front/components/UI/SettingsBase.tsx @@ -6,93 +6,93 @@ import { Text, useTheme } from 'native-base'; // import { BlurView } from 'expo-blur'; interface SettingProps { - icon: (size: number, color: string) => React.ReactNode; - title: string; - description?: string; - onPress?: () => Promise; - children?: React.ReactNode; + icon: (size: number, color: string) => React.ReactNode; + title: string; + description?: string; + onPress?: () => Promise; + children?: React.ReactNode; } -const SettingBase: React.FC = ({ title, description, onPress, icon, children}) => { - const styleSetting = StyleSheet.create({ - Default: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(16, 16, 20, 0.50)', - }, - onHover: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(32, 32, 40, 0.50)', - }, - onPressed: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(16, 16, 20, 0.50)', - }, - Disabled: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(16, 16, 20, 0.50)', - } - }); +const SettingBase: React.FC = ({ title, description, onPress, icon, children }) => { + const styleSetting = StyleSheet.create({ + Default: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(16, 16, 20, 0.50)', + }, + onHover: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(32, 32, 40, 0.50)', + }, + onPressed: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(16, 16, 20, 0.50)', + }, + Disabled: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(16, 16, 20, 0.50)', + }, + }); - return ( - { - if (onPress) { - await onPress(); - } - }} - > - - {icon(24, "#fff")} - - {title} - {description} - - {children} - - - ); + return ( + { + if (onPress) { + await onPress(); + } + }} + > + + {icon(24, '#fff')} + + {title} + {description} + + {children} + + + ); }; const styles = StyleSheet.create({ - container: { - borderRadius: 8, - backgroundColor: 'rgba(16, 16, 20, 0.50)', - }, - content: { - paddingVertical: 10, - paddingHorizontal: 20, - justifyContent: 'space-between', - alignItems: 'center', - alignSelf: 'stretch', - flexDirection: 'row', - }, - info: { - flexDirection: 'column', - marginHorizontal: 16, - flex: 1, - }, - text: { - color: '#fff', - fontSize: 16, - }, - description: { - color: '#fff', - fontSize: 10, - }, + container: { + borderRadius: 8, + backgroundColor: 'rgba(16, 16, 20, 0.50)', + }, + content: { + paddingVertical: 10, + paddingHorizontal: 20, + justifyContent: 'space-between', + alignItems: 'center', + alignSelf: 'stretch', + flexDirection: 'row', + }, + info: { + flexDirection: 'column', + marginHorizontal: 16, + flex: 1, + }, + text: { + color: '#fff', + fontSize: 16, + }, + description: { + color: '#fff', + fontSize: 10, + }, }); export default SettingBase; diff --git a/front/components/UI/TextFieldBase.tsx b/front/components/UI/TextFieldBase.tsx index cbfd2cc..f330833 100644 --- a/front/components/UI/TextFieldBase.tsx +++ b/front/components/UI/TextFieldBase.tsx @@ -5,151 +5,167 @@ import InteractiveBase from './InteractiveBase'; import { Input } from 'native-base'; export interface TextFieldBaseProps { - style?: StyleProp, - value?: string; - icon?: (size: string, color: string) => React.ReactNode; - iconColor?: string; - placeholder?: string; - autoComplete?: - | 'birthdate-day' - | 'birthdate-full' - | 'birthdate-month' - | 'birthdate-year' - | 'cc-csc' - | 'cc-exp' - | 'cc-exp-day' - | 'cc-exp-month' - | 'cc-exp-year' - | 'cc-number' - | 'email' - | 'gender' - | 'name' - | 'name-family' - | 'name-given' - | 'name-middle' - | 'name-middle-initial' - | 'name-prefix' - | 'name-suffix' - | 'password' - | 'password-new' - | 'postal-address' - | 'postal-address-country' - | 'postal-address-extended' - | 'postal-address-extended-postal-code' - | 'postal-address-locality' - | 'postal-address-region' - | 'postal-code' - | 'street-address' - | 'sms-otp' - | 'tel' - | 'tel-country-code' - | 'tel-national' - | 'tel-device' - | 'username' - | 'username-new' - | 'off' - | undefined; - isSecret?: boolean; - isRequired?: boolean; - onChangeText?: ((text: string) => void) | undefined; + style?: StyleProp; + value?: string; + icon?: (size: string, color: string) => React.ReactNode; + iconColor?: string; + placeholder?: string; + autoComplete?: + | 'birthdate-day' + | 'birthdate-full' + | 'birthdate-month' + | 'birthdate-year' + | 'cc-csc' + | 'cc-exp' + | 'cc-exp-day' + | 'cc-exp-month' + | 'cc-exp-year' + | 'cc-number' + | 'email' + | 'gender' + | 'name' + | 'name-family' + | 'name-given' + | 'name-middle' + | 'name-middle-initial' + | 'name-prefix' + | 'name-suffix' + | 'password' + | 'password-new' + | 'postal-address' + | 'postal-address-country' + | 'postal-address-extended' + | 'postal-address-extended-postal-code' + | 'postal-address-locality' + | 'postal-address-region' + | 'postal-code' + | 'street-address' + | 'sms-otp' + | 'tel' + | 'tel-country-code' + | 'tel-national' + | 'tel-device' + | 'username' + | 'username-new' + | 'off' + | undefined; + isSecret?: boolean; + isRequired?: boolean; + onChangeText?: ((text: string) => void) | undefined; } -const TextFieldBase: React.FC = ({ placeholder = '', style, icon, iconColor, autoComplete = 'off', isSecret = false, isRequired = false, ...props }) => { - const [isPasswordVisible, setPasswordVisible] = useState(!isSecret); - const [isFocused, setFocused] = useState(false); +const TextFieldBase: React.FC = ({ + placeholder = '', + style, + icon, + iconColor, + autoComplete = 'off', + isSecret = false, + isRequired = false, + ...props +}) => { + const [isPasswordVisible, setPasswordVisible] = useState(!isSecret); + const [isFocused, setFocused] = useState(false); - const styleAnimate = StyleSheet.create({ - Default: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(16,16,20,0.5)', - }, - onHover: { - scale: 1, - shadowOpacity: 0.37, - shadowRadius: 7.49, - elevation: 12, - backgroundColor: 'rgba(16,16,20,0.45)', - }, - onPressed: { - scale: 1, - shadowOpacity: 0.23, - shadowRadius: 2.62, - elevation: 4, - backgroundColor: 'rgba(16,16,20,0.55)', - }, - Disabled: { - scale: 1, - shadowOpacity: 0.30, - shadowRadius: 4.65, - elevation: 8, - backgroundColor: 'rgba(16,16,20,0.5)', - } - }); + const styleAnimate = StyleSheet.create({ + Default: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(16,16,20,0.5)', + }, + onHover: { + scale: 1, + shadowOpacity: 0.37, + shadowRadius: 7.49, + elevation: 12, + backgroundColor: 'rgba(16,16,20,0.45)', + }, + onPressed: { + scale: 1, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + backgroundColor: 'rgba(16,16,20,0.55)', + }, + Disabled: { + scale: 1, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + backgroundColor: 'rgba(16,16,20,0.5)', + }, + }); - return ( - - - - {icon && icon("20", iconColor ? iconColor : (isFocused ? '#5f74f7' : '#394694'))} - - setFocused(true)} - onBlur={() => setFocused(false)} - {...props} - /> - {isSecret && ( - setPasswordVisible(prevState => !prevState)}> - {isPasswordVisible ? - - : - } - - )} - - - ); + return ( + + + + {icon && icon('20', iconColor ? iconColor : isFocused ? '#5f74f7' : '#394694')} + + setFocused(true)} + onBlur={() => setFocused(false)} + {...props} + /> + {isSecret && ( + setPasswordVisible((prevState) => !prevState)} + > + {isPasswordVisible ? ( + + ) : ( + + )} + + )} + + + ); }; const styles = StyleSheet.create({ - container: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'row', - }, - input: { - flex: 1, - color: '#ffffff', - paddingHorizontal: 12 + 20 + 12, - paddingVertical: 12, - outlineStyle: 'none', - }, - iconContainerLeft: { - position: 'absolute', - left: 12, - zIndex: 1, - }, - iconContainerRight: { - position: 'absolute', - outlineStyle: 'none', - right: 12, - zIndex: 1, - }, + container: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'row', + }, + input: { + flex: 1, + color: '#ffffff', + paddingHorizontal: 12 + 20 + 12, + paddingVertical: 12, + outlineStyle: 'none', + }, + iconContainerLeft: { + position: 'absolute', + left: 12, + zIndex: 1, + }, + iconContainerRight: { + position: 'absolute', + outlineStyle: 'none', + right: 12, + zIndex: 1, + }, }); export default TextFieldBase; diff --git a/front/components/UI/TextFormField.tsx b/front/components/UI/TextFormField.tsx index 310396e..6e6bb8c 100644 --- a/front/components/UI/TextFormField.tsx +++ b/front/components/UI/TextFormField.tsx @@ -5,77 +5,74 @@ import { Text } from 'native-base'; import { Warning2 } from 'iconsax-react-native'; interface TextFormFieldProps extends TextFieldBaseProps { - style?: StyleProp, - error: string | null; + style?: StyleProp; + error: string | null; } const ERROR_HEIGHT = 20; const ERROR_PADDING_TOP = 8; const TextFormField: React.FC = ({ error, style, ...textFieldBaseProps }) => { - const fadeAnim = React.useRef(new Animated.Value(0)).current; - const heightAnim = React.useRef(new Animated.Value(0)).current; - const paddingTopAnim = React.useRef(new Animated.Value(0)).current; + const fadeAnim = React.useRef(new Animated.Value(0)).current; + const heightAnim = React.useRef(new Animated.Value(0)).current; + const paddingTopAnim = React.useRef(new Animated.Value(0)).current; - useEffect(() => { - Animated.parallel([ - Animated.timing( - fadeAnim, - { - toValue: error ? 1 : 0, - duration: 150, - useNativeDriver: false - } - ), - Animated.timing( - heightAnim, - { - toValue: error ? ERROR_HEIGHT : 0, - duration: 250, - useNativeDriver: false - } - ), - Animated.timing( - paddingTopAnim, - { - toValue: error ? ERROR_PADDING_TOP : 0, - duration: 250, - useNativeDriver: false - } - ), - ]).start(); - }, [error]); + useEffect(() => { + Animated.parallel([ + Animated.timing(fadeAnim, { + toValue: error ? 1 : 0, + duration: 150, + useNativeDriver: false, + }), + Animated.timing(heightAnim, { + toValue: error ? ERROR_HEIGHT : 0, + duration: 250, + useNativeDriver: false, + }), + Animated.timing(paddingTopAnim, { + toValue: error ? ERROR_PADDING_TOP : 0, + duration: 250, + useNativeDriver: false, + }), + ]).start(); + }, [error]); - return ( - - - - - {error} - - - ); + return ( + + + + + + {error} + + + + ); }; const styles = StyleSheet.create({ - wrapper: { - flex: 1, - width: '100%', - // maxWidth: 400, - }, - errorContainer: { - flexDirection: 'row', - alignItems: 'center', - paddingLeft: 12, - }, - errorText: { - color: '#f7253d', - fontSize: 12, - marginLeft: 8, - }, + wrapper: { + flex: 1, + width: '100%', + // maxWidth: 400, + }, + errorContainer: { + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 12, + }, + errorText: { + color: '#f7253d', + fontSize: 12, + marginLeft: 8, + }, }); -export default TextFormField; \ No newline at end of file +export default TextFormField; diff --git a/front/components/forms/changeEmailForm.tsx b/front/components/forms/changeEmailForm.tsx index a5fa6c4..8b4768c 100644 --- a/front/components/forms/changeEmailForm.tsx +++ b/front/components/forms/changeEmailForm.tsx @@ -1,7 +1,16 @@ import React from 'react'; import { translate } from '../../i18n/i18n'; import { string } from 'yup'; -import { FormControl, Input, Stack, WarningOutlineIcon, Box, Button, useToast, Flex } from 'native-base'; +import { + FormControl, + Input, + Stack, + WarningOutlineIcon, + Box, + Button, + useToast, + Flex, +} from 'native-base'; import TextFormField from '../UI/TextFormField'; import ButtonBase from '../UI/ButtonBase'; import { Sms } from 'iconsax-react-native'; @@ -29,11 +38,11 @@ const ChangeEmailForm = ({ onSubmit }: ChangeEmailFormProps) => { const toast = useToast(); return ( - + ()} + icon={(size, color) => } placeholder={translate('oldEmail')} value={formData.oldEmail.value} error={formData.oldEmail.error} @@ -51,7 +60,7 @@ const ChangeEmailForm = ({ onSubmit }: ChangeEmailFormProps) => { style={{ marginVertical: 10 }} isRequired autoComplete="off" - icon={(size, color) => ()} + icon={(size, color) => } placeholder={translate('newEmail')} value={formData.newEmail.value} error={formData.newEmail.error} @@ -67,11 +76,11 @@ const ChangeEmailForm = ({ onSubmit }: ChangeEmailFormProps) => { /> { const toast = useToast(); return ( - + ()} + icon={(size, color) => } placeholder={translate('oldPassword')} value={formData.oldPassword.value} error={formData.oldPassword.error} @@ -60,7 +69,7 @@ const ChangePasswordForm = ({ onSubmit }: ChangePasswordFormProps) => { isSecret isRequired autoComplete="password" - icon={(size, color) => ()} + icon={(size, color) => } placeholder={translate('newPassword')} value={formData.newPassword.value} error={formData.newPassword.error} @@ -79,15 +88,13 @@ const ChangePasswordForm = ({ onSubmit }: ChangePasswordFormProps) => { isSecret isRequired autoComplete="password" - icon={(size, color) => ()} + icon={(size, color) => } placeholder={translate('confirmNewPassword')} value={formData.confirmNewPassword.value} error={formData.confirmNewPassword.error} onChangeText={(t) => { let error: null | string = null; - validationSchemas.password - .validate(t) - .catch((e) => (error = e.message)); + validationSchemas.password.validate(t).catch((e) => (error = e.message)); if (!error && t !== formData.newPassword.value) { error = translate('passwordsDontMatch'); } diff --git a/front/views/settings/NotificationView.tsx b/front/views/settings/NotificationView.tsx index 57a5f72..faf0ace 100644 --- a/front/views/settings/NotificationView.tsx +++ b/front/views/settings/NotificationView.tsx @@ -29,7 +29,7 @@ const NotificationsView = () => { elements={[ { type: 'toggle', - icon: , + icon: , title: translate('SettingsNotificationsPushNotifications'), description: 'Cette notification apparaitra sur votre apparail en pop-up', data: { @@ -45,7 +45,7 @@ const NotificationsView = () => { }, { type: 'toggle', - icon: , + icon: , title: translate('SettingsNotificationsEmailNotifications'), description: 'Recevez des mails pour atteindre vos objectifs', data: { @@ -61,7 +61,7 @@ const NotificationsView = () => { }, { type: 'toggle', - icon: , + icon: , title: translate('SettingsNotificationsTrainingReminder'), description: 'Un apprentissage régulier est la clé', data: { @@ -77,7 +77,7 @@ const NotificationsView = () => { }, { type: 'toggle', - icon: , + icon: , title: translate('SettingsNotificationsReleaseAlert'), description: 'Restez informé de nos mises à jour', data: { diff --git a/front/views/settings/PreferencesView.tsx b/front/views/settings/PreferencesView.tsx index e79c400..6f30723 100644 --- a/front/views/settings/PreferencesView.tsx +++ b/front/views/settings/PreferencesView.tsx @@ -7,7 +7,16 @@ import { useSelector } from '../../state/Store'; import { updateSettings } from '../../state/SettingsSlice'; import ElementList from '../../components/GtkUI/ElementList'; import LocalSettings from '../../models/LocalSettings'; -import { Brush, Brush2, Colorfilter, LanguageSquare, Rank, Ranking, Sound, Star1 } from 'iconsax-react-native'; +import { + Brush, + Brush2, + Colorfilter, + LanguageSquare, + Rank, + Ranking, + Sound, + Star1, +} from 'iconsax-react-native'; const PreferencesView = () => { const dispatch = useDispatch(); @@ -29,7 +38,7 @@ const PreferencesView = () => { }} elements={[ { - icon: , + icon: , type: 'dropdown', title: translate('SettingsPreferencesTheme'), description: 'Définissez le theme (Dark ou Light) de votre application', @@ -51,7 +60,7 @@ const PreferencesView = () => { }, }, { - icon: , + icon: , type: 'dropdown', title: translate('SettingsPreferencesLanguage'), description: 'Définissez la langue de votre application', @@ -69,7 +78,7 @@ const PreferencesView = () => { }, }, { - icon: , + icon: , type: 'dropdown', title: translate('SettingsPreferencesDifficulty'), description: 'La précision du tempo est de plus en plus élevée', @@ -100,7 +109,7 @@ const PreferencesView = () => { }} elements={[ { - icon: , + icon: , type: 'toggle', title: translate('SettingsPreferencesColorblindMode'), description: 'Augmente le contraste', @@ -121,7 +130,7 @@ const PreferencesView = () => { }} elements={[ { - icon: , + icon: , type: 'range', title: translate('SettingsPreferencesMicVolume'), description: 'Régler le volume de votre micro selon vos preference', diff --git a/front/views/settings/PrivacyView.tsx b/front/views/settings/PrivacyView.tsx index 726d6b2..df2599b 100644 --- a/front/views/settings/PrivacyView.tsx +++ b/front/views/settings/PrivacyView.tsx @@ -34,9 +34,10 @@ const PrivacyView = () => { elements={[ { type: 'toggle', - icon: , + icon: , title: translate('dataCollection'), - description: 'Acceptez-vous la récupération de vos données pour l\'amélioration de Chromacase ?', + description: + "Acceptez-vous la récupération de vos données pour l'amélioration de Chromacase ?", data: { value: settings.dataCollection, onToggle: () => @@ -47,7 +48,7 @@ const PrivacyView = () => { }, { type: 'toggle', - icon: , + icon: , title: translate('customAds'), description: 'Afficher les suggestions dans la section des recommandations', data: { @@ -58,7 +59,7 @@ const PrivacyView = () => { }, { type: 'toggle', - icon: , + icon: , title: translate('recommendations'), description: 'Souhaitez-vous recevoir nos conseils et recommandations ?', data: { diff --git a/front/views/settings/SettingsPremiumView.tsx b/front/views/settings/SettingsPremiumView.tsx index cc64a4f..9487b74 100644 --- a/front/views/settings/SettingsPremiumView.tsx +++ b/front/views/settings/SettingsPremiumView.tsx @@ -11,7 +11,15 @@ import { useQuery } from '../../Queries'; import UserAvatar from '../../components/UserAvatar'; import * as ImagePicker from 'expo-image-picker'; import SettingBase from '../../components/UI/SettingsBase'; -import { Designtools, Google, Magicpen, PasswordCheck, SmsEdit, Star1, UserSquare } from 'iconsax-react-native'; +import { + Designtools, + Google, + Magicpen, + PasswordCheck, + SmsEdit, + Star1, + UserSquare, +} from 'iconsax-react-native'; import { LinearGradient } from 'expo-linear-gradient'; // Too painful to infer the settings-only, typed navigator. Gave up @@ -40,19 +48,21 @@ const PremiumSettings = () => { }} elements={[ { - icon: , + icon: , type: 'text', title: translate('premiumAccount'), - description: 'Personalisation premium et outils vous permetant de passer au niveau supperieur', + description: + 'Personalisation premium et outils vous permetant de passer au niveau supperieur', data: { text: translate(user.premium ? 'yes' : 'no'), }, }, { - icon: , + icon: , type: 'toggle', title: 'Piano Magique', - description: 'Fait apparaître de la lumière sur le piano pendant les parties', + description: + 'Fait apparaître de la lumière sur le piano pendant les parties', helperText: 'Vous devez posséder le module physique lumineux Chromacase pour pouvoir utiliser cette fonctionnalité', disabled: true, @@ -62,7 +72,7 @@ const PremiumSettings = () => { }, }, { - icon: , + icon: , type: 'dropdown', title: 'Thème de piano', description: 'Définissez le theme de votre piano', diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx index 53dc7ea..64d2ecb 100644 --- a/front/views/settings/SettingsProfileView.tsx +++ b/front/views/settings/SettingsProfileView.tsx @@ -2,7 +2,18 @@ import API from '../../API'; import { useDispatch } from 'react-redux'; import { unsetAccessToken } from '../../state/UserSlice'; import React from 'react'; -import { Column, Text, Button, Box, Flex, Center, Heading, Popover, Toast, View } from 'native-base'; +import { + Column, + Text, + Button, + Box, + Flex, + Center, + Heading, + Popover, + Toast, + View, +} from 'native-base'; import TextButton from '../../components/TextButton'; import { LoadingView } from '../../components/Loading'; import ElementList from '../../components/GtkUI/ElementList'; @@ -11,7 +22,16 @@ import { useQuery } from '../../Queries'; import UserAvatar from '../../components/UserAvatar'; import * as ImagePicker from 'expo-image-picker'; import SettingBase from '../../components/UI/SettingsBase'; -import { ArrowDown2, EyeSlash, Google, Lock1, PasswordCheck, Sms, SmsEdit, UserSquare } from 'iconsax-react-native'; +import { + ArrowDown2, + EyeSlash, + Google, + Lock1, + PasswordCheck, + Sms, + SmsEdit, + UserSquare, +} from 'iconsax-react-native'; import { LinearGradient } from 'expo-linear-gradient'; import TextFormField from '../../components/UI/TextFormField'; import ButtonBase from '../../components/UI/ButtonBase'; @@ -54,19 +74,19 @@ const ProfileSettings = () => { }} elements={[ { - icon: , + icon: , type: 'text', - title: "Google account", // TODO translate - description: "Liez votre compte Google à ChromaCase", // TODO translate + title: 'Google account', // TODO translate + description: 'Liez votre compte Google à ChromaCase', // TODO translate data: { text: user.googleID ? 'Linked' : 'Not linked', }, }, { - icon: , + icon: , type: 'text', title: translate('avatar'), - description: "Changer votre photo de profile", // TODO translate + description: 'Changer votre photo de profile', // TODO translate data: { text: translate('changeIt'), onPress: () => { @@ -97,10 +117,11 @@ const ProfileSettings = () => { }, }, { - icon: , + icon: , type: 'sectionDropdown', - title: 'Change email', // TODO translate - description: "Saisissez votre adresse électronique actuelle et définissez votre nouvelle adresse électroniquetion", // TODO translate + title: 'Change email', // TODO translate + description: + 'Saisissez votre adresse électronique actuelle et définissez votre nouvelle adresse électroniquetion', // TODO translate data: { value: true, section: [ @@ -108,25 +129,24 @@ const ProfileSettings = () => { onSubmit={(oldPassword, newPassword) => handleChangePassword(oldPassword, newPassword) } - /> - ] - } + />, + ], + }, }, { - icon: , + icon: , type: 'sectionDropdown', title: 'Change password', // TODO translate - description: "Saisissez votre mot de passe actuel et définissez votre nouveau mot de passe", // TODO translate + description: + 'Saisissez votre mot de passe actuel et définissez votre nouveau mot de passe', // TODO translate data: { value: true, section: [ - handleChangeEmail(newEmail) - } - /> - ] - } + onSubmit={(oldEmail, newEmail) => handleChangeEmail(newEmail)} + />, + ], + }, }, ]} /> diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index 30c718d..bad81a1 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -13,9 +13,33 @@ import GuestToUserView from './GuestToUserView'; import { useQuery } from '../../Queries'; import API from '../../API'; import { RouteProps } from '../../Navigation'; -import { PressableAndroidRippleConfig, StyleProp, TextStyle, View, ViewStyle, useWindowDimensions } from 'react-native'; -import { TabView, SceneMap, TabBar, NavigationState, Route, SceneRendererProps, TabBarIndicatorProps, TabBarItemProps } from 'react-native-tab-view'; -import { HeartEdit, Star1, UserEdit, Notification, SecurityUser, Music, FolderCross } from 'iconsax-react-native'; +import { + PressableAndroidRippleConfig, + StyleProp, + TextStyle, + View, + ViewStyle, + useWindowDimensions, +} from 'react-native'; +import { + TabView, + SceneMap, + TabBar, + NavigationState, + Route, + SceneRendererProps, + TabBarIndicatorProps, + TabBarItemProps, +} from 'react-native-tab-view'; +import { + HeartEdit, + Star1, + UserEdit, + Notification, + SecurityUser, + Music, + FolderCross, +} from 'iconsax-react-native'; import { Scene, Event } from 'react-native-tab-view/lib/typescript/src/types'; import { LinearGradient } from 'expo-linear-gradient'; import PremiumSettings from './SettingsPremiumView'; @@ -38,7 +62,7 @@ const renderScene = SceneMap({ }); const getTabData = (key: string) => { - switch (key){ + switch (key) { case 'profile': return { index: 0, icon: UserEdit }; case 'premium': @@ -54,60 +78,125 @@ const getTabData = (key: string) => { default: return { index: 6, icon: FolderCross }; } -} +}; const SetttingsNavigator = () => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); const [routes] = React.useState([ - {key: 'profile', title: 'Profile'}, - {key: 'premium', title: 'Premium'}, - {key: 'preferences', title: 'Preferences'}, - {key: 'notifications', title: 'Notifications'}, - {key: 'privacy', title: 'Privacy'}, - {key: 'piano', title: 'Piano'}, + { key: 'profile', title: 'Profile' }, + { key: 'premium', title: 'Premium' }, + { key: 'preferences', title: 'Preferences' }, + { key: 'notifications', title: 'Notifications' }, + { key: 'privacy', title: 'Privacy' }, + { key: 'piano', title: 'Piano' }, ]); - const renderTabBar = (props: JSX.IntrinsicAttributes & SceneRendererProps & { navigationState: NavigationState; scrollEnabled?: boolean | undefined; bounces?: boolean | undefined; activeColor?: string | undefined; inactiveColor?: string | undefined; pressColor?: string | undefined; pressOpacity?: number | undefined; getLabelText?: ((scene: Scene) => string | undefined) | undefined; getAccessible?: ((scene: Scene) => boolean | undefined) | undefined; getAccessibilityLabel?: ((scene: Scene) => string | undefined) | undefined; getTestID?: ((scene: Scene) => string | undefined) | undefined; renderLabel?: ((scene: Scene & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderIcon?: ((scene: Scene & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderBadge?: ((scene: Scene) => React.ReactNode) | undefined; renderIndicator?: ((props: TabBarIndicatorProps) => React.ReactNode) | undefined; renderTabBarItem?: ((props: TabBarItemProps & { key: string; }) => React.ReactElement>) | undefined; onTabPress?: ((scene: Scene & Event) => void) | undefined; onTabLongPress?: ((scene: Scene) => void) | undefined; tabStyle?: StyleProp; indicatorStyle?: StyleProp; indicatorContainerStyle?: StyleProp; labelStyle?: StyleProp; contentContainerStyle?: StyleProp; style?: StyleProp; gap?: number | undefined; testID?: string | undefined; android_ripple?: PressableAndroidRippleConfig | undefined; }) => ( + const renderTabBar = ( + props: JSX.IntrinsicAttributes & + SceneRendererProps & { + navigationState: NavigationState; + scrollEnabled?: boolean | undefined; + bounces?: boolean | undefined; + activeColor?: string | undefined; + inactiveColor?: string | undefined; + pressColor?: string | undefined; + pressOpacity?: number | undefined; + getLabelText?: ((scene: Scene) => string | undefined) | undefined; + getAccessible?: ((scene: Scene) => boolean | undefined) | undefined; + getAccessibilityLabel?: ((scene: Scene) => string | undefined) | undefined; + getTestID?: ((scene: Scene) => string | undefined) | undefined; + renderLabel?: + | (( + scene: Scene & { focused: boolean; color: string } + ) => React.ReactNode) + | undefined; + renderIcon?: + | (( + scene: Scene & { focused: boolean; color: string } + ) => React.ReactNode) + | undefined; + renderBadge?: ((scene: Scene) => React.ReactNode) | undefined; + renderIndicator?: + | ((props: TabBarIndicatorProps) => React.ReactNode) + | undefined; + renderTabBarItem?: + | (( + props: TabBarItemProps & { key: string } + ) => React.ReactElement>) + | undefined; + onTabPress?: ((scene: Scene & Event) => void) | undefined; + onTabLongPress?: ((scene: Scene) => void) | undefined; + tabStyle?: StyleProp; + indicatorStyle?: StyleProp; + indicatorContainerStyle?: StyleProp; + labelStyle?: StyleProp; + contentContainerStyle?: StyleProp; + style?: StyleProp; + gap?: number | undefined; + testID?: string | undefined; + android_ripple?: PressableAndroidRippleConfig | undefined; + } + ) => ( & { - focused: boolean; - color: string; - }) => { - const tabHeader = getTabData(scene.route!.key); - return tabHeader.index == index ? - - : + {...props} + style={{ + backgroundColor: 'rgba(0, 0, 0, 0)', + borderBottomWidth: 2, + borderColor: 'rgba(255,255,255,0.5)', }} - renderLabel={({ route, focused, color }) => ( - layout.width > 750 ? - - {route.title} - : null - )} - tabStyle={{flexDirection: 'row'}} - /> - ); + indicatorStyle={{ backgroundColor: 'white' }} + renderIcon={( + scene: Scene & { + focused: boolean; + color: string; + } + ) => { + const tabHeader = getTabData(scene.route!.key); + return tabHeader.index == index ? ( + + ) : ( + + ); + }} + renderLabel={({ route, focused, color }) => + layout.width > 750 ? ( + + {route.title} + + ) : null + } + tabStyle={{ flexDirection: 'row' }} + /> + ); return ( );