From 7067fb9708706868d5acdbdf7dea3007e1bd61ab Mon Sep 17 00:00:00 2001 From: Arthur Jamet Date: Sat, 28 Oct 2023 08:09:21 +0200 Subject: [PATCH] Front: Pretty --- front/Theme.tsx | 4 +- front/components/ScoreGraph.tsx | 92 +++++---- front/components/UI/ButtonBase.tsx | 17 +- front/components/UI/ButtonMenuBase.tsx | 14 +- front/components/UI/CheckboxBase.tsx | 12 +- front/components/UI/Glassmorphism.tsx | 22 +-- front/components/UI/LinkBase.tsx | 138 +++++++------- front/components/UI/LogoutButtonCC.tsx | 65 ++++--- front/components/UI/PopupCC.tsx | 90 +++++---- front/components/UI/Scaffold.tsx | 4 +- front/components/UI/ScaffoldAuth.tsx | 52 ++++-- front/components/UI/ScaffoldCC.tsx | 44 ++--- front/components/UI/ScaffoldDesktopCC.tsx | 155 +++++++++------- front/components/UI/ScaffoldMobileCC.tsx | 38 ++-- front/components/UI/SeparatorBase.tsx | 8 +- front/components/UI/TextFieldBase.tsx | 10 +- front/components/forms/signupform.tsx | 2 +- front/i18n/Translations.ts | 175 +++++++++++------- front/views/ProfileView.tsx | 10 +- front/views/SearchView.tsx | 2 +- front/views/SigninView.tsx | 6 +- front/views/SignupView.tsx | 4 +- .../views/settings/NotificationsSettings.tsx | 18 +- front/views/settings/PreferencesSettings.tsx | 10 +- front/views/settings/PrivacySettings.tsx | 6 +- front/views/settings/SettingsPremium.tsx | 2 +- front/views/settings/SettingsProfile.tsx | 42 ++++- front/views/settings/SettingsView.tsx | 22 ++- 28 files changed, 610 insertions(+), 454 deletions(-) diff --git a/front/Theme.tsx b/front/Theme.tsx index fbfd9cf..aec7d2b 100644 --- a/front/Theme.tsx +++ b/front/Theme.tsx @@ -29,9 +29,7 @@ const ThemeProvider = ({ children }: { children: JSX.Element }) => { 900: 'rgba(16,16,20,0.9)', }; - const glassmorphism = colorScheme === 'light' - ? lightGlassmorphism - : darkGlassmorphism + const glassmorphism = colorScheme === 'light' ? lightGlassmorphism : darkGlassmorphism; return ( { // const formattedDate = `${pad(playDate.getDay())}/${pad(playDate.getMonth())}`; // const formattedTime = `${pad(playDate.getHours())}:${pad(playDate.getMinutes())}`; - + // console.log(playDate.toDateString()); // console.log(`${playDate.getDate()}/${playDate.getMonth() + 1}`); return `${playDate.getDate()}`; }; type GraphProps = { - songId: number, - since: Date + songId: number; + since: Date; }; -const calculateDailyAverages = (scores: { playDate: Date, score: number }[]): { playDate: Date, score: number }[] => { - const dailyScores: { [key: string]: number[] } = {}; +const calculateDailyAverages = ( + scores: { playDate: Date; score: number }[] +): { playDate: Date; score: number }[] => { + const dailyScores: { [key: string]: number[] } = {}; - // Regroupez les scores par date - scores.forEach((score) => { - const date = score.playDate.toISOString().split('T')[0] as string; // Obtenez la date au format 'YYYY-MM-DD' - if (!dailyScores[date]) { - dailyScores[date] = []; - } - dailyScores[date]!.push(score.score); - }); + // Regroupez les scores par date + scores.forEach((score) => { + const date = score.playDate.toISOString().split('T')[0] as string; // Obtenez la date au format 'YYYY-MM-DD' + if (!dailyScores[date]) { + dailyScores[date] = []; + } + dailyScores[date]!.push(score.score); + }); - // Calculez la moyenne des scores par jour et créez un tableau d'objets avec le format final - const dailyAverages: { playDate: Date, score: number }[] = []; - Object.keys(dailyScores).forEach((date) => { - const oneDayScore = dailyScores[date]; + // Calculez la moyenne des scores par jour et créez un tableau d'objets avec le format final + const dailyAverages: { playDate: Date; score: number }[] = []; + Object.keys(dailyScores).forEach((date) => { + const oneDayScore = dailyScores[date]; if (oneDayScore) { - const average = oneDayScore.reduce((total, score) => total + score, 0) / oneDayScore.length; + const average = + oneDayScore.reduce((total, score) => total + score, 0) / oneDayScore.length; dailyAverages.push({ playDate: new Date(date), score: average }); } - }); + }); - return dailyAverages; + return dailyAverages; }; -const Graph = ({songId, since}: GraphProps) => { +const Graph = ({ songId, since }: GraphProps) => { const isSmall = useBreakpointValue({ base: true, md: false }); const theme = useTheme(); const [containerWidth, setContainerWidth] = useState(0); @@ -63,8 +59,7 @@ const Graph = ({songId, since}: GraphProps) => { } const dailyScore = calculateDailyAverages(scoresQuery.data.history); - const scoresToSort = dailyScore - .filter((item: { playDate: Date; }) => item.playDate >= since); + const scoresToSort = dailyScore.filter((item: { playDate: Date }) => item.playDate >= since); const scores = scoresToSort.sort((a, b) => { if (a.playDate < b.playDate) { @@ -81,10 +76,12 @@ const Graph = ({songId, since}: GraphProps) => { style={{ width: '100%', marginTop: 20 }} onLayout={(event) => setContainerWidth(event.nativeEvent.layout.width)} > - {scores && scores.length > 0 && + {scores && scores.length > 0 && ( formatScoreDate(playDate)), + labels: isSmall + ? [] + : scores.map(({ playDate }) => formatScoreDate(playDate)), datasets: [ { data: scores.map(({ score }) => score), @@ -117,10 +114,10 @@ const Graph = ({songId, since}: GraphProps) => { }} bezier /> - } + )} ); -} +}; const ScoreGraph = () => { const layout = useWindowDimensions(); @@ -158,25 +155,25 @@ const ScoreGraph = () => { setSelectedSinceDate(threeDaysAgo); break; } - } + }; return ( - + @@ -198,12 +195,9 @@ const ScoreGraph = () => { - {selectedSong !== undefined && - - } + {selectedSong !== undefined && ( + + )} ); }; diff --git a/front/components/UI/ButtonBase.tsx b/front/components/UI/ButtonBase.tsx index 7509dcb..d36a8c9 100644 --- a/front/components/UI/ButtonBase.tsx +++ b/front/components/UI/ButtonBase.tsx @@ -127,12 +127,25 @@ const ButtonBase: React.FC = ({ {icon && ( )} {iconImage && } - {title && {title}} + {title && ( + + {title} + + )} )} diff --git a/front/components/UI/ButtonMenuBase.tsx b/front/components/UI/ButtonMenuBase.tsx index 335234a..5a64a2f 100644 --- a/front/components/UI/ButtonMenuBase.tsx +++ b/front/components/UI/ButtonMenuBase.tsx @@ -127,12 +127,22 @@ const ButtonBase: React.FC = ({ {icon && ( )} {iconImage && } - {title && {title}} + {title && ( + + {title} + + )} )} diff --git a/front/components/UI/CheckboxBase.tsx b/front/components/UI/CheckboxBase.tsx index 2c6b861..7b0efae 100644 --- a/front/components/UI/CheckboxBase.tsx +++ b/front/components/UI/CheckboxBase.tsx @@ -54,17 +54,9 @@ const CheckboxBase: React.FC = ({ title, color, style, check, set > {check ? ( - + ) : ( - + )} {title} diff --git a/front/components/UI/Glassmorphism.tsx b/front/components/UI/Glassmorphism.tsx index 95afa46..b98d50c 100644 --- a/front/components/UI/Glassmorphism.tsx +++ b/front/components/UI/Glassmorphism.tsx @@ -5,22 +5,22 @@ import { StyleProp, ViewStyle } from 'react-native'; import useColorScheme from '../../hooks/colorScheme'; type GlassmorphismCCProps = { - children?: ReactNode, + children?: ReactNode; style?: StyleProp; }; const GlassmorphismCC = ({ children, style }: GlassmorphismCCProps) => { - const colorScheme = useColorScheme(); - console.log(colorScheme); + const colorScheme = useColorScheme(); + console.log(colorScheme); - return ( - - {children} - + return ( + + {children} + ); }; diff --git a/front/components/UI/LinkBase.tsx b/front/components/UI/LinkBase.tsx index 8d5c004..8285f23 100644 --- a/front/components/UI/LinkBase.tsx +++ b/front/components/UI/LinkBase.tsx @@ -3,86 +3,88 @@ import { TouchableOpacity, Animated, StyleSheet, Platform } from 'react-native'; import { Column, Text, useTheme } from 'native-base'; interface LinkBaseProps { - text: string; - onPress: () => void; + text: string; + onPress: () => void; } const LinkBase: React.FC = ({ text, onPress }) => { - const underlineHeight = useRef(new Animated.Value(4)).current; - const opacity = useRef(new Animated.Value(1)).current; - const color = useRef(new Animated.Value(1)).current; + const underlineHeight = useRef(new Animated.Value(4)).current; + const opacity = useRef(new Animated.Value(1)).current; + const color = useRef(new Animated.Value(1)).current; const theme = useTheme(); - const handleMouseEnter = () => { - if (Platform.OS === 'web') { - Animated.timing(underlineHeight, { - toValue: 20, - duration: 250, - useNativeDriver: false - }).start(); - } - }; + const handleMouseEnter = () => { + if (Platform.OS === 'web') { + Animated.timing(underlineHeight, { + toValue: 20, + duration: 250, + useNativeDriver: false, + }).start(); + } + }; - const handleMouseLeave = () => { - if (Platform.OS === 'web') { - Animated.timing(underlineHeight, { - toValue: 4, - duration: 250, - useNativeDriver: false - }).start(); - } - }; + const handleMouseLeave = () => { + if (Platform.OS === 'web') { + Animated.timing(underlineHeight, { + toValue: 4, + duration: 250, + useNativeDriver: false, + }).start(); + } + }; - const handlePressIn = () => { - Animated.timing(opacity, { - toValue: 0.8, - duration: 250, - useNativeDriver: false - }).start(); - }; + const handlePressIn = () => { + Animated.timing(opacity, { + toValue: 0.8, + duration: 250, + useNativeDriver: false, + }).start(); + }; - const handlePressOut = () => { - Animated.timing(opacity, { - toValue: 1, - duration: 250, - useNativeDriver: false - }).start(); - }; + const handlePressOut = () => { + Animated.timing(opacity, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }).start(); + }; - return ( - - - {text} - - - - ); + return ( + + + {text} + + + + ); }; const styles = StyleSheet.create({ - container: { - position: 'relative', - }, - underline: { - width: '100%', - position: 'absolute', - zIndex: -1, - bottom: 0, - }, + container: { + position: 'relative', + }, + underline: { + width: '100%', + position: 'absolute', + zIndex: -1, + bottom: 0, + }, }); export default LinkBase; diff --git a/front/components/UI/LogoutButtonCC.tsx b/front/components/UI/LogoutButtonCC.tsx index c4440f0..83f107d 100644 --- a/front/components/UI/LogoutButtonCC.tsx +++ b/front/components/UI/LogoutButtonCC.tsx @@ -6,7 +6,7 @@ import { translate } from '../../i18n/i18n'; import { unsetAccessToken } from '../../state/UserSlice'; import { BlurView } from 'expo-blur'; import { useState } from 'react'; -import Modal from "react-native-modal"; +import Modal from 'react-native-modal'; import React from 'react'; import SignUpForm from '../../components/forms/signupform'; import API, { APIError } from '../../API'; @@ -26,39 +26,48 @@ const handleSubmit = async (username: string, password: string, email: string) = type LogoutButtonCCProps = { collapse?: boolean; isGuest?: boolean; - style: any; - buttonType: ButtonType + style: any; + buttonType: ButtonType; }; -const LogoutButtonCC = ({collapse = false, isGuest = false, buttonType = 'menu', style}: LogoutButtonCCProps) => { +const LogoutButtonCC = ({ + collapse = false, + isGuest = false, + buttonType = 'menu', + style, +}: LogoutButtonCCProps) => { const dispatch = useDispatch(); const [isVisible, setIsVisible] = useState(false); return ( - <> - {isGuest ? setIsVisible(true) : dispatch(unsetAccessToken());}} - /> - - - { dispatch(unsetAccessToken()) }} - /> - - + <> + { + isGuest ? setIsVisible(true) : dispatch(unsetAccessToken()); + }} + /> + + + { + dispatch(unsetAccessToken()); + }} + /> + + ); }; diff --git a/front/components/UI/PopupCC.tsx b/front/components/UI/PopupCC.tsx index 5dc04f4..63f084a 100644 --- a/front/components/UI/PopupCC.tsx +++ b/front/components/UI/PopupCC.tsx @@ -3,61 +3,57 @@ import ButtonBase from './ButtonBase'; import { CloseSquare } from 'iconsax-react-native'; import { BlurView } from 'expo-blur'; import { ReactNode } from 'react'; -import Modal from "react-native-modal"; +import Modal from 'react-native-modal'; import React from 'react'; import GlassmorphismCC from './Glassmorphism'; type PopupCCProps = { - title: string, - description?: string, - children?: ReactNode, - isVisible: boolean, - setIsVisible?: (isVisible: boolean) => void, + title: string; + description?: string; + children?: ReactNode; + isVisible: boolean; + setIsVisible?: (isVisible: boolean) => void; }; const PopupCC = ({ title, description, children, isVisible, setIsVisible }: PopupCCProps) => { return ( - - - - - - - {title} - - {setIsVisible !== undefined && - setIsVisible(false)} - /> - } - - - {description !== undefined && - {description} - } - {children !== undefined && children} - - - + + + + + + {title} + {setIsVisible !== undefined && ( + setIsVisible(false)} + /> + )} + + + {description !== undefined && {description}} + {children !== undefined && children} + + + ); }; diff --git a/front/components/UI/Scaffold.tsx b/front/components/UI/Scaffold.tsx index 55fef12..c8277d7 100644 --- a/front/components/UI/Scaffold.tsx +++ b/front/components/UI/Scaffold.tsx @@ -86,11 +86,11 @@ const ScaffoldCC = (props: ScaffoldCCProps) => { height: 32, }} /> - {layout.width > 650 && + {layout.width > 650 && ( Chromacase - } + )} diff --git a/front/components/UI/ScaffoldAuth.tsx b/front/components/UI/ScaffoldAuth.tsx index 24ed830..9c9ff74 100644 --- a/front/components/UI/ScaffoldAuth.tsx +++ b/front/components/UI/ScaffoldAuth.tsx @@ -1,5 +1,16 @@ import { LinearGradient } from 'expo-linear-gradient'; -import { Flex, Stack, View, Text, Wrap, Image, Row, Column, ScrollView, useToast } from 'native-base'; +import { + Flex, + Stack, + View, + Text, + Wrap, + Image, + Row, + Column, + ScrollView, + useToast, +} from 'native-base'; import { FunctionComponent } from 'react'; import { Linking, useWindowDimensions } from 'react-native'; import ButtonBase from './ButtonBase'; @@ -37,9 +48,10 @@ const ScaffoldAuth: FunctionComponent = ({ const dispatch = useDispatch(); const toast = useToast(); const colorScheme = useColorScheme(); - const logo = colorScheme == 'light' - ? require('../../assets/icon_light.png') - : require('../../assets/icon_dark.png'); + const logo = + colorScheme == 'light' + ? require('../../assets/icon_light.png') + : require('../../assets/icon_dark.png'); const [banner] = useAssets(require('../../assets/banner.jpg')); return ( @@ -49,7 +61,7 @@ const ScaffoldAuth: FunctionComponent = ({ style={{ flex: 1, backgroundColor: '#cdd4fd' }} > - + = ({ height: 32, }} /> - {layout.width > 650 && + {layout.width > 650 && ( Chromacase - } + )} { try { handleGuestLogin((accessToken: string) => { @@ -79,10 +91,17 @@ const ScaffoldAuth: FunctionComponent = ({ } toast.show({ description: error as string }); } - }} + }} /> - + = ({ {submitButton} {link.label} - + - {layout.width > 650 && + {layout.width > 650 && ( = ({ style={{ width: '100%', height: '100%', borderRadius: 8 }} /> - } - {colorScheme === 'dark' && + )} + {colorScheme === 'dark' && ( = ({ zIndex: -2, }} /> - } + )} ); }; diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx index 2f2c3df..9e1161f 100644 --- a/front/components/UI/ScaffoldCC.tsx +++ b/front/components/UI/ScaffoldCC.tsx @@ -3,31 +3,23 @@ import useColorScheme from '../../hooks/colorScheme'; import { useQuery } from '../../Queries'; import API from '../../API'; import { LinearGradient } from 'expo-linear-gradient'; -import { - Cup, - Discover, - Icon, - Music, - SearchNormal1, - Setting2, - User, -} from 'iconsax-react-native'; +import { Cup, Discover, Icon, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native'; import { LoadingView } from '../Loading'; import ScaffoldDesktopCC from './ScaffoldDesktopCC'; import ScaffoldMobileCC from './ScaffoldMobileCC'; const menu: { - type: "main" | "sub"; + type: 'main' | 'sub'; title: string; icon: Icon; link: string; }[] = [ - { type: "main", title: 'menuDiscovery', icon: Discover, link: 'HomeNew' }, - { type: "main", title: 'menuProfile', icon: User, link: 'User' }, - { type: "main", title: 'menuMusic', icon: Music, link: 'Home' }, - { type: "main", title: 'menuSearch', icon: SearchNormal1, link: 'Search' }, - { type: "main", title: 'menuLeaderBoard', icon: Cup, link: 'Score' }, - { type: "sub", title: 'menuSettings', icon: Setting2, link: 'Settings' }, + { type: 'main', title: 'menuDiscovery', icon: Discover, link: 'HomeNew' }, + { type: 'main', title: 'menuProfile', icon: User, link: 'User' }, + { type: 'main', title: 'menuMusic', icon: Music, link: 'Home' }, + { type: 'main', title: 'menuSearch', icon: SearchNormal1, link: 'Search' }, + { type: 'main', title: 'menuLeaderBoard', icon: Cup, link: 'Score' }, + { type: 'sub', title: 'menuSettings', icon: Setting2, link: 'Settings' }, ]; type ScaffoldCCProps = { @@ -36,7 +28,7 @@ type ScaffoldCCProps = { withPadding?: boolean; }; -const ScaffoldCC = ({children, routeName, withPadding = true}: ScaffoldCCProps) => { +const ScaffoldCC = ({ children, routeName, withPadding = true }: ScaffoldCCProps) => { const userQuery = useQuery(API.getUserInfo); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); @@ -44,13 +36,14 @@ const ScaffoldCC = ({children, routeName, withPadding = true}: ScaffoldCCProps) return ; } const colorScheme = useColorScheme(); - const logo = colorScheme == 'light' - ? require('../../assets/icon_light.png') - : require('../../assets/icon_dark.png'); + const logo = + colorScheme == 'light' + ? require('../../assets/icon_light.png') + : require('../../assets/icon_dark.png'); return ( - {screenSize === 'small' ? + {screenSize === 'small' ? ( {children} - : {children} - } - {colorScheme === 'dark' && + )} + {colorScheme === 'dark' && ( - } + )} ); }; diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx index 086e141..56fe8e2 100644 --- a/front/components/UI/ScaffoldDesktopCC.tsx +++ b/front/components/UI/ScaffoldDesktopCC.tsx @@ -17,20 +17,20 @@ import { ColorSchemeProvider } from '../../Theme'; import useColorScheme from '../../hooks/colorScheme'; type ScaffoldDesktopCCProps = { - widthPadding: boolean, + widthPadding: boolean; children?: React.ReactNode; user: User; logo: string; routeName: string; menu: { - type: "main" | "sub"; + type: 'main' | 'sub'; title: string; icon: Icon; link: string; - }[] + }[]; }; -const SongHistory = (props: {quantity: number}) => { +const SongHistory = (props: { quantity: number }) => { const playHistoryQuery = useQuery(API.getUserPlayHistory); const songHistory = useQueries( playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? [] @@ -42,9 +42,10 @@ const SongHistory = (props: {quantity: number}) => { return ( - {songHistory.length === 0 ? + {songHistory.length === 0 ? ( {translate('menuNoSongsPlayedYet')} - : songHistory + ) : ( + songHistory .map((h) => h.data) .filter((data): data is Song => data !== undefined) .filter( @@ -62,12 +63,11 @@ const SongHistory = (props: {quantity: number}) => { > {histoItem.name} - ) - ) - } + )) + )} ); -} +}; const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => { const navigation = useNavigation(); @@ -103,39 +103,53 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => { alignItems: isSmallScreen ? 'center' : 'flex-start', }} /> - {!isSmallScreen && + {!isSmallScreen && ( Chromacase - } + )} - {props.menu.map((value) => ( - value.type === "main" && - - - navigation.navigate(value.link as never) - } - /> - - - ))} + {props.menu.map( + (value) => + value.type === 'main' && ( + + + navigation.navigate(value.link as never) + } + /> + + + ) + )} - {!isSmallScreen && + {!isSmallScreen && ( - - + + { > {translate('menuRecentlyPlayed')} - + - } - + )} + - - - {props.menu.map((value) => ( - value.type === "sub" && - - navigation.navigate(value.link as never) - } - /> - ))} - - + + + {props.menu.map( + (value) => + value.type === 'sub' && ( + navigation.navigate(value.link as never)} + /> + ) + )} + + - + { > {props.children} - + - ); }; diff --git a/front/components/UI/ScaffoldMobileCC.tsx b/front/components/UI/ScaffoldMobileCC.tsx index 3214f73..3f7a464 100644 --- a/front/components/UI/ScaffoldMobileCC.tsx +++ b/front/components/UI/ScaffoldMobileCC.tsx @@ -1,5 +1,5 @@ import { View } from 'react-native'; -import { ScrollView, Flex, useMediaQuery, useTheme } from 'native-base'; +import { ScrollView, Flex, useMediaQuery, useTheme } from 'native-base'; import ButtonBase from './ButtonBase'; import { Icon } from 'iconsax-react-native'; import { useNavigation } from '../../Navigation'; @@ -13,11 +13,11 @@ type ScaffoldMobileCCProps = { logo: string; routeName: string; menu: { - type: "main" | "sub"; + type: 'main' | 'sub'; title: string; icon: Icon; link: string; - }[] + }[]; }; const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => { @@ -35,16 +35,14 @@ const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => { maxHeight: '100vh', flexDirection: 'column', flexShrink: 0, - padding: 16 + padding: 16, }} contentContainerStyle={{ flex: 1 }} > - - {props.children} - - + {props.children} + - + { key={'key-menu-link-' + value.title} type="menu" icon={value.icon} - title={props.routeName === value.link && !isSmallScreen ? translate(value.title as 'menuDiscovery' | 'menuProfile' | 'menuMusic' | 'menuSearch' | 'menuLeaderBoard' | 'menuSettings') : undefined} + title={ + props.routeName === value.link && !isSmallScreen + ? translate( + value.title as + | 'menuDiscovery' + | 'menuProfile' + | 'menuMusic' + | 'menuSearch' + | 'menuLeaderBoard' + | 'menuSettings' + ) + : undefined + } isDisabled={props.routeName === value.link} - iconVariant={ - props.routeName === value.link ? 'Bold' : 'Outline' - } - onPress={async () => - navigation.navigate(value.link as never) - } + iconVariant={props.routeName === value.link ? 'Bold' : 'Outline'} + onPress={async () => navigation.navigate(value.link as never)} /> ))} diff --git a/front/components/UI/SeparatorBase.tsx b/front/components/UI/SeparatorBase.tsx index e228c91..c517aba 100644 --- a/front/components/UI/SeparatorBase.tsx +++ b/front/components/UI/SeparatorBase.tsx @@ -27,14 +27,14 @@ const SeparatorBase: FunctionComponent = ({ children }) => { const colorScheme = useColorScheme(); const { colors } = useTheme(); const color = colorScheme === 'light' ? colors.black[500] : '#FFFFFF'; - + return ( - + {children} - + ); -} +}; export default SeparatorBase; diff --git a/front/components/UI/TextFieldBase.tsx b/front/components/UI/TextFieldBase.tsx index f1c0509..2753fab 100644 --- a/front/components/UI/TextFieldBase.tsx +++ b/front/components/UI/TextFieldBase.tsx @@ -104,7 +104,11 @@ const TextFieldBase: React.FC = ({ }); return ( - + {icon && ( @@ -121,7 +125,9 @@ const TextFieldBase: React.FC = ({ style={[styles.input, icon ? {} : { paddingLeft: 12 }]} autoComplete={autoComplete} placeholder={placeholder + (isRequired ? '*' : '')} - placeholderTextColor={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} + placeholderTextColor={ + colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)' + } secureTextEntry={isSecret ? !isPasswordVisible : false} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} diff --git a/front/components/forms/signupform.tsx b/front/components/forms/signupform.tsx index 4b8719d..d4dc4ee 100644 --- a/front/components/forms/signupform.tsx +++ b/front/components/forms/signupform.tsx @@ -130,7 +130,7 @@ const SignUpForm = ({ onSubmit }: SignupFormProps) => { }); }} /> - + ) => { Account created on {userQuery.data.data.createdAt.toLocaleDateString()} - + Your client ID is {userQuery.data.id} @@ -93,7 +99,7 @@ const ProfileView = (props: RouteProps<{}>) => { flex={1} /> - + ); diff --git a/front/views/SearchView.tsx b/front/views/SearchView.tsx index bb43cac..3af01fc 100644 --- a/front/views/SearchView.tsx +++ b/front/views/SearchView.tsx @@ -110,4 +110,4 @@ const SearchView = (props: RouteProps) => { ); }; -export default SearchView; \ No newline at end of file +export default SearchView; diff --git a/front/views/SigninView.tsx b/front/views/SigninView.tsx index 401c7d0..d276ead 100644 --- a/front/views/SigninView.tsx +++ b/front/views/SigninView.tsx @@ -61,11 +61,11 @@ const SigninView = () => { return ( { return ( { } return ( , title: translate('SettingsNotificationsTabPushNotificationsSectionTitle'), - description: translate('SettingsNotificationsTabPushNotificationsSectionDescription'), + description: translate( + 'SettingsNotificationsTabPushNotificationsSectionDescription' + ), data: { value: settings.data.notifications.pushNotif, onToggle: () => { @@ -39,7 +41,9 @@ const NotificationsSettings = () => { type: 'toggle', icon: , title: translate('SettingsNotificationsTabEmailNotificationsSectionTitle'), - description: translate('SettingsNotificationsTabEmailNotificationsSectionDescription'), + description: translate( + 'SettingsNotificationsTabEmailNotificationsSectionDescription' + ), data: { value: settings.data.notifications.emailNotif, onToggle: () => { @@ -55,7 +59,9 @@ const NotificationsSettings = () => { type: 'toggle', icon: , title: translate('SettingsNotificationsTabTrainingReminderSectionTitle'), - description: translate('SettingsNotificationsTabTrainingReminderSectionDescription'), + description: translate( + 'SettingsNotificationsTabTrainingReminderSectionDescription' + ), data: { value: settings.data.notifications.trainNotif, onToggle: () => { @@ -71,7 +77,9 @@ const NotificationsSettings = () => { type: 'toggle', icon: , title: translate('SettingsNotificationsTabReleaseAlertSectionTitle'), - description: translate('SettingsNotificationsTabReleaseAlertSectionDescription'), + description: translate( + 'SettingsNotificationsTabReleaseAlertSectionDescription' + ), data: { value: settings.data.notifications.newSongNotif, onToggle: () => { diff --git a/front/views/settings/PreferencesSettings.tsx b/front/views/settings/PreferencesSettings.tsx index 2912919..a1ed0e1 100644 --- a/front/views/settings/PreferencesSettings.tsx +++ b/front/views/settings/PreferencesSettings.tsx @@ -17,7 +17,7 @@ const PreferencesSettings = () => { const colorScheme = useColorScheme(); const color = colorScheme === 'light' ? '#000' : '#fff'; return ( - + { icon: , type: 'dropdown', title: translate('SettingsPreferencesTabDifficultySectionTitle'), - description: translate('SettingsPreferencesTabDifficultySectionDescription'), + description: translate( + 'SettingsPreferencesTabDifficultySectionDescription' + ), data: { value: settings.difficulty, defaultValue: 'medium', @@ -90,7 +92,9 @@ const PreferencesSettings = () => { icon: , type: 'toggle', title: translate('SettingsPreferencesTabColorblindModeSectionTitle'), - description: translate('SettingsPreferencesTabColorblindModeSectionDescription'), + description: translate( + 'SettingsPreferencesTabColorblindModeSectionDescription' + ), data: { value: settings.colorBlind, onToggle: () => { diff --git a/front/views/settings/PrivacySettings.tsx b/front/views/settings/PrivacySettings.tsx index cfb279f..e645c5f 100644 --- a/front/views/settings/PrivacySettings.tsx +++ b/front/views/settings/PrivacySettings.tsx @@ -22,7 +22,7 @@ const PrivacySettings = () => { } return ( { data: { value: settings.dataCollection, onToggle: () => - dispatch( - updateSettings({ dataCollection: !settings.dataCollection }) - ), + dispatch(updateSettings({ dataCollection: !settings.dataCollection })), }, }, { diff --git a/front/views/settings/SettingsPremium.tsx b/front/views/settings/SettingsPremium.tsx index cfd7015..8944127 100644 --- a/front/views/settings/SettingsPremium.tsx +++ b/front/views/settings/SettingsPremium.tsx @@ -21,7 +21,7 @@ const PremiumSettings = () => { const color = colorScheme === 'light' ? '#000' : '#fff'; return ( , diff --git a/front/views/settings/SettingsProfile.tsx b/front/views/settings/SettingsProfile.tsx index c206a55..524ae82 100644 --- a/front/views/settings/SettingsProfile.tsx +++ b/front/views/settings/SettingsProfile.tsx @@ -36,7 +36,7 @@ const ProfileSettings = () => { const colorScheme = useColorScheme(); const color = colorScheme === 'light' ? '#000' : '#fff'; return ( - + { title: translate('settingsProfileTabGoogleSectionTitle'), description: translate('settingsProfileTabGoogleSectionDescription'), data: { - text: translate(user.googleID ? 'settingsProfileTabGoogleSectionLinkedText' : 'settingsProfileTabGoogleSectionNotLinkedText') + text: translate( + user.googleID + ? 'settingsProfileTabGoogleSectionLinkedText' + : 'settingsProfileTabGoogleSectionNotLinkedText' + ), }, }, { @@ -54,20 +58,28 @@ const ProfileSettings = () => { title: translate('settingsProfileTabVerifiedSectionTitle'), description: translate('settingsProfileTabVerifiedSectionDescription'), data: { - text: translate(user.emailVerified ? 'settingsProfileTabVerifiedSectionVerifiedText' : 'settingsProfileTabVerifiedSectionNotVerifiedText'), + text: translate( + user.emailVerified + ? 'settingsProfileTabVerifiedSectionVerifiedText' + : 'settingsProfileTabVerifiedSectionNotVerifiedText' + ), onPress: user.emailVerified ? undefined : () => API.fetch({ route: '/auth/reverify', method: 'PUT' }) .then(() => Toast.show({ - description: translate('settingsProfileTabVerifiedSectionVerificationToast') + description: translate( + 'settingsProfileTabVerifiedSectionVerificationToast' + ), }) ) .catch((e) => { console.error(e); Toast.show({ - description: translate('settingsProfileTabVerifiedSectionVerificationToastError') + description: translate( + 'settingsProfileTabVerifiedSectionVerificationToastError' + ), }); }), }, @@ -94,12 +106,18 @@ const ProfileSettings = () => { .then(() => { userQuery.refetch(); Toast.show({ - description: translate('settingsProfileTabAvatarSectionUpdateToast'), + description: translate( + 'settingsProfileTabAvatarSectionUpdateToast' + ), }); }) .catch((e) => { console.error(e); - Toast.show({ description: translate('settingsProfileTabAvatarSectionUpdateToastError')}); + Toast.show({ + description: translate( + 'settingsProfileTabAvatarSectionUpdateToastError' + ), + }); }); } }); @@ -125,7 +143,9 @@ const ProfileSettings = () => { icon: , type: 'sectionDropdown', title: translate('settingsProfileTabChangePasswordSectionTitle'), - description: translate('settingsProfileTabChangePasswordSectionDescription'), + description: translate( + 'settingsProfileTabChangePasswordSectionDescription' + ), data: { value: true, section: [ @@ -140,7 +160,11 @@ const ProfileSettings = () => { }, ]} /> - + ); }; diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index f44cb60..411f3c4 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -89,8 +89,8 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { borderBottomWidth: 1, borderColor: colors.primary[500], }} - activeColor={ colorScheme === 'light' ? '#000' : '#fff'} - inactiveColor={ colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} + activeColor={colorScheme === 'light' ? '#000' : '#fff'} + inactiveColor={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} indicatorStyle={{ backgroundColor: colors.primary[500] }} renderIcon={( scene: Scene & { @@ -100,13 +100,25 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { ) => { const tabHeader = getTabData(scene.route!.key); return ( - + ); }} renderLabel={({ route, color }) => layout.width > 1100 && ( - {translate(route.title as 'settingsTabProfile' | 'settingsTabPremium' | 'settingsTabPreferences' | 'settingsTabNotifications' | 'settingsTabPrivacy' | 'settingsTabPiano')} + {translate( + route.title as + | 'settingsTabProfile' + | 'settingsTabPremium' + | 'settingsTabPreferences' + | 'settingsTabNotifications' + | 'settingsTabPrivacy' + | 'settingsTabPiano' + )} ) } @@ -123,7 +135,7 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { paddingTop: 32, padding: 20, maxWidth: 850, - width: '100%' + width: '100%', }} style={{ height: 'fit-content' }} renderTabBar={renderTabBar}