From 19d64c1bc5a96ebe70f2f9919fa0b9ca6012178d Mon Sep 17 00:00:00 2001 From: mathysPaul Date: Mon, 13 Nov 2023 14:30:10 +0100 Subject: [PATCH] [IMP] Color theme & MusicList optional property --- front/components/GtkUI/ElementTypes.tsx | 6 +- front/components/GtkUI/RawElement.tsx | 17 ++- front/components/UI/MusicList copy.tsx | 137 ------------------ front/components/UI/MusicList.tsx | 21 +-- front/components/UI/SeparatorBase.tsx | 7 +- front/components/UI/TextFieldBase.tsx | 6 +- front/views/MusicView.tsx | 64 ++++++-- .../views/settings/NotificationsSettings.tsx | 11 +- front/views/settings/PreferencesSettings.tsx | 17 +-- front/views/settings/PrivacySettings.tsx | 11 +- front/views/settings/SettingsPremium.tsx | 9 +- front/views/settings/SettingsProfile.tsx | 15 +- front/views/settings/SettingsView.tsx | 12 +- 13 files changed, 110 insertions(+), 223 deletions(-) delete mode 100644 front/components/UI/MusicList copy.tsx diff --git a/front/components/GtkUI/ElementTypes.tsx b/front/components/GtkUI/ElementTypes.tsx index b10e1d8..0f03bff 100644 --- a/front/components/GtkUI/ElementTypes.tsx +++ b/front/components/GtkUI/ElementTypes.tsx @@ -1,10 +1,10 @@ -import { Select, Switch, Text, Icon, Row, Slider, useTheme } from 'native-base'; +import { Select, Switch, Text, Row, Slider, Icon, useTheme } from 'native-base'; import { MaterialIcons } from '@expo/vector-icons'; import { useWindowDimensions } from 'react-native'; - +import { Icon as IconSax } from 'iconsax-react-native'; export type ElementProps = { title: string; - icon?: React.ReactNode; + icon?: IconSax; helperText?: string; description?: string; disabled?: boolean; diff --git a/front/components/GtkUI/RawElement.tsx b/front/components/GtkUI/RawElement.tsx index 9c49bbc..e4ffa03 100644 --- a/front/components/GtkUI/RawElement.tsx +++ b/front/components/GtkUI/RawElement.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Button, Column, Icon, Popover, Row, Text, useBreakpointValue } from 'native-base'; +import { Box, Button, Column, Icon, Popover, Row, Text, useBreakpointValue, useTheme } from 'native-base'; import { Ionicons } from '@expo/vector-icons'; import { ElementProps } from './ElementTypes'; import { @@ -8,9 +8,8 @@ import { getElementToggleNode, getElementRangeNode, } from './ElementTypes'; -import { ArrowDown2 } from 'iconsax-react-native'; +import { ArrowDown2, Icon as IconSax } from 'iconsax-react-native'; import { useWindowDimensions } from 'react-native'; -import useColorScheme from '../../hooks/colorScheme'; type RawElementProps = { element: ElementProps; @@ -21,15 +20,15 @@ export const RawElement = ({ element }: RawElementProps) => { const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); const isSmallScreen = screenSize === 'small'; const { width: screenWidth } = useWindowDimensions(); - const colorScheme = useColorScheme(); - const color = colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'; + const { colors } = useTheme(); + const IconElement = icon as IconSax; return ( { alignItems: 'center', }} > - {icon} + {IconElement && + + } { case 'custom': return data; case 'sectionDropdown': - return ; + return ; default: return Unknown type; } diff --git a/front/components/UI/MusicList copy.tsx b/front/components/UI/MusicList copy.tsx deleted file mode 100644 index db3b2ca..0000000 --- a/front/components/UI/MusicList copy.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import { FlatList, HStack, View, useBreakpointValue, useTheme, Text, Row } from 'native-base'; -import MusicItem, { MusicItemType } from './MusicItem'; -import React, { useState } from 'react'; -import { ActivityIndicator } from 'react-native'; -import { ArrowDown2, ArrowRotateLeft, Chart2, Cup, Icon } from 'iconsax-react-native'; -import { StyleSheet } from 'react-native'; -import ButtonBase from './ButtonBase'; -import useColorScheme from '../../hooks/colorScheme'; - -interface MusicItemTitleProps { - text: string; - icon: Icon; - isBigScreen: boolean; -} - -const MusicItemTitle = (props: MusicItemTitleProps) => { - const colorScheme = useColorScheme(); - - return ( - - {props.isBigScreen && ( - - {props.text} - - )} - - - ); -}; - -type MusicListProps = { - initialMusics: MusicItemType[]; - loadMoreMusics: (page: number) => Promise; // fonction pour charger plus de musiques -}; - -const MusicList: React.FC = ({ initialMusics }) => { - const [musicData, setMusicData] = useState(initialMusics); - const [loading, setLoading] = useState(false); - const { colors } = useTheme(); - const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); - const isSmallScreen = screenSize === 'small'; - const isBigScreen = screenSize === 'xl'; - - const loadMoreMusicItems = () => { - if (!loading) { - setLoading(true); - setTimeout(() => { - const moreItems: MusicItemType[] = []; - setMusicData((currentItems) => [...currentItems, ...moreItems]); - setLoading(false); - }, 2000); // Simule un appel réseau avec un délai de 2 secondes. - } - }; - - return ( - - - - - Song - - {[ - { text: 'level', icon: Chart2 }, - { text: 'lastScore', icon: ArrowRotateLeft }, - { text: 'BastScore', icon: Cup }, - ].map((value) => ( - - ))} - - } - keyExtractor={(item) => item.artist + item.song} - /> - - - {loading ? ( - - ) : ( - - )} - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - gap: 2, - borderRadius: 10, - overflow: 'hidden', - }, - footerContainer: { - height: 60, - justifyContent: 'center', - alignItems: 'center', - }, -}); - -export default MusicList; diff --git a/front/components/UI/MusicList.tsx b/front/components/UI/MusicList.tsx index 22baa50..6a545f6 100644 --- a/front/components/UI/MusicList.tsx +++ b/front/components/UI/MusicList.tsx @@ -4,7 +4,6 @@ import { ActivityIndicator, StyleSheet } from 'react-native'; import MusicItem, { MusicItemType } from './MusicItem'; import ButtonBase from './ButtonBase'; import { ArrowDown2, Chart2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native'; -import useColorScheme from '../../hooks/colorScheme'; // Props type definition for MusicItemTitle. interface MusicItemTitleProps { @@ -19,7 +18,7 @@ interface MusicItemTitleProps { } function MusicItemTitleComponent(props: MusicItemTitleProps) { - const colorScheme = useColorScheme(); + const { colors } = useTheme(); return ( ); @@ -64,12 +63,12 @@ type MusicListProps = { * Function to load more music items asynchronously. Called with current page number * and the list of all music items. Should return a Promise with additional music items. */ - loadMoreMusics: (page: number, musics: MusicItemType[]) => Promise; + loadMoreMusics?: (page: number, musics: MusicItemType[]) => Promise; /** * Number of music items to display per page. Determines initial and additional items displayed. */ - musicsPerPage: number; + musicsPerPage?: number; }; /** @@ -101,23 +100,25 @@ type MusicListProps = { * making it suitable for use cases where the list of items is expected to grow over time. * - The layout and styling are optimized for performance and responsiveness. */ -function MusicListComponent({ initialMusics, loadMoreMusics, musicsPerPage }: MusicListProps) { +function MusicListComponent({ initialMusics, loadMoreMusics, musicsPerPage = loadMoreMusics ? 50 : initialMusics.length }: MusicListProps) { // State initialization for MusicList. // 'allMusics': all music items. // 'displayedMusics': items displayed per page. // 'currentPage': current page in pagination. // 'loading': indicates if more items are being loaded. // 'hasMoreMusics': flag for more items availability. + console.log('initialMusics', initialMusics.length); const [musicListState, setMusicListState] = useState({ allMusics: initialMusics, displayedMusics: initialMusics.slice(0, musicsPerPage), currentPage: 1, loading: false, - hasMoreMusics: true, + hasMoreMusics: initialMusics.length > musicsPerPage || !!loadMoreMusics, }); const { colors } = useTheme(); const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); const isBigScreen = screenSize === 'xl'; + console.log('coucou', initialMusics.length); // Loads additional music items. // Uses useCallback to avoid unnecessary redefinitions on re-renders. @@ -132,11 +133,13 @@ function MusicListComponent({ initialMusics, loadMoreMusics, musicsPerPage }: Mu const nextEndIndex = (musicListState.currentPage + 1) * musicsPerPage; let updatedAllMusics = musicListState.allMusics; - if (updatedAllMusics.length <= nextEndIndex) { + if (loadMoreMusics && updatedAllMusics.length <= nextEndIndex) { const newMusics = await loadMoreMusics(musicListState.currentPage, updatedAllMusics); updatedAllMusics = [...updatedAllMusics, ...newMusics]; hasMoreMusics = newMusics.length > 0; - } + } else { + hasMoreMusics = updatedAllMusics.length > nextEndIndex; + } setMusicListState((prevState) => ({ ...prevState, diff --git a/front/components/UI/SeparatorBase.tsx b/front/components/UI/SeparatorBase.tsx index c517aba..0fc1419 100644 --- a/front/components/UI/SeparatorBase.tsx +++ b/front/components/UI/SeparatorBase.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { View, StyleSheet } from 'react-native'; import { Text, useTheme } from 'native-base'; -import useColorScheme from '../../hooks/colorScheme'; const styles = StyleSheet.create({ line: { @@ -24,15 +23,13 @@ interface SeparatorBaseProps { } const SeparatorBase: FunctionComponent = ({ children }) => { - const colorScheme = useColorScheme(); const { colors } = useTheme(); - const color = colorScheme === 'light' ? colors.black[500] : '#FFFFFF'; return ( - + {children} - + ); }; diff --git a/front/components/UI/TextFieldBase.tsx b/front/components/UI/TextFieldBase.tsx index e0ad2a2..92a1243 100644 --- a/front/components/UI/TextFieldBase.tsx +++ b/front/components/UI/TextFieldBase.tsx @@ -3,7 +3,6 @@ import React, { useState } from 'react'; import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native'; import InteractiveBase from './InteractiveBase'; import { Input, useTheme } from 'native-base'; -import useColorScheme from '../../hooks/colorScheme'; export interface TextFieldBaseProps { style?: StyleProp; @@ -69,7 +68,6 @@ const TextFieldBase: React.FC = ({ const [isFocused, setFocused] = useState(false); const MyIcon: Icon = icon as Icon; const { colors } = useTheme(); - const colorScheme = useColorScheme(); const styleAnimate = StyleSheet.create({ Default: { @@ -124,9 +122,7 @@ 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={colors.text[700]} secureTextEntry={isSecret ? !isPasswordVisible : false} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} diff --git a/front/views/MusicView.tsx b/front/views/MusicView.tsx index 762d9db..a40557a 100644 --- a/front/views/MusicView.tsx +++ b/front/views/MusicView.tsx @@ -11,12 +11,14 @@ import { } from 'react-native-tab-view'; import { Heart, Clock, StatusUp, FolderCross } from 'iconsax-react-native'; import { Scene } from 'react-native-tab-view/lib/typescript/src/types'; -import useColorScheme from '../hooks/colorScheme'; import { RouteProps } from '../Navigation'; import { translate } from '../i18n/i18n'; import ScaffoldCC from '../components/UI/ScaffoldCC'; -import { MusicItemType } from '../components/UI/MusicItem'; import MusicList from '../components/UI/MusicList'; +import { useQueries, useQuery } from '../Queries'; +import API from '../API'; +import Song from '../models/Song'; +import { LoadingView } from '../components/Loading'; // Fichier de données fictives, par exemple MusicData.ts export const fakeMusicData = [ @@ -1159,15 +1161,50 @@ export const fakeMusicData = [ ]; export const FavoritesMusic = () => { + const playHistoryQuery = useQuery(API.getUserPlayHistory); + const nextStepQuery = useQuery(API.getSongSuggestions); + const songHistory = useQueries( + playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? [] + ); + const artistsQueries = useQueries( + songHistory + .map((entry) => entry.data) + .concat(nextStepQuery.data ?? []) + .filter((s): s is Song => s !== undefined) + .map((song) => API.getArtist(song.artistId)) + ); + + const isLoading = playHistoryQuery.isLoading || nextStepQuery.isLoading || + songHistory.some(query => query.isLoading) || + artistsQueries.some(query => query.isLoading); + + const musics = nextStepQuery.data + ?.filter((song) => + artistsQueries.find( + (artistQuery) => artistQuery.data?.id === song.artistId + ) + ) + .map((song) => ({ + artist: artistsQueries.find( + (artistQuery) => artistQuery.data?.id === song.artistId + )!.data!.name, + song: song.name, + image: song.cover, + level: 42, + lastScore: 42, + bestScore: 42, + liked: false, + onLike: () => {console.log("onLike")}, + onPlay: () => {console.log("onPlay")}, + })) ?? [] + + if (isLoading) { + return ; + } return ( { - const startIndex = musics.length; - const endIndex = startIndex + 15; - return fakeMusicData.slice(startIndex, Math.min(endIndex, fakeMusicData.length)); - }} + initialMusics={musics} + // musicsPerPage={7} /> ); }; @@ -1210,7 +1247,6 @@ const getTabData = (key: string) => { const MusicTab = (props: RouteProps) => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); - const colorScheme = useColorScheme(); const { colors } = useTheme(); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); const isSmallScreen = screenSize === 'small'; @@ -1229,8 +1265,8 @@ const MusicTab = (props: RouteProps) => { borderBottomWidth: 1, borderColor: colors.primary[300], }} - activeColor={colorScheme === 'light' ? '#000' : '#fff'} - inactiveColor={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} + activeColor={colors.text[900]} + inactiveColor={colors.text[700]} indicatorStyle={{ backgroundColor: colors.primary[300] }} renderIcon={( scene: Scene & { @@ -1269,12 +1305,10 @@ const MusicTab = (props: RouteProps) => { sceneContainerStyle={{ flex: 1, alignSelf: 'center', - padding: isSmallScreen ? 4 : 20, + padding: isSmallScreen ? 8 : 20, paddingTop: 32, - // maxWidth: 850, width: '100%', }} - // style={{ height: 'fit-content' }} renderTabBar={renderTabBar} navigationState={{ index, routes }} renderScene={renderScene} diff --git a/front/views/settings/NotificationsSettings.tsx b/front/views/settings/NotificationsSettings.tsx index fdba6c6..408c009 100644 --- a/front/views/settings/NotificationsSettings.tsx +++ b/front/views/settings/NotificationsSettings.tsx @@ -5,11 +5,10 @@ import useUserSettings from '../../hooks/userSettings'; import { LoadingView } from '../../components/Loading'; import { Calendar1, MonitorMobbile, Send2, Warning2 } from 'iconsax-react-native'; import useColorScheme from '../../hooks/colorScheme'; +import { useTheme } from 'native-base'; const NotificationsSettings = () => { const { settings, updateSettings } = useUserSettings(); - const colorScheme = useColorScheme(); - const color = colorScheme === 'light' ? '#000' : '#fff'; if (!settings.data) { return ; @@ -20,7 +19,7 @@ const NotificationsSettings = () => { elements={[ { type: 'toggle', - icon: , + icon: MonitorMobbile, title: translate('SettingsNotificationsTabPushNotificationsSectionTitle'), description: translate( 'SettingsNotificationsTabPushNotificationsSectionDescription' @@ -38,7 +37,7 @@ const NotificationsSettings = () => { }, { type: 'toggle', - icon: , + icon: Send2, title: translate('SettingsNotificationsTabEmailNotificationsSectionTitle'), description: translate( 'SettingsNotificationsTabEmailNotificationsSectionDescription' @@ -56,7 +55,7 @@ const NotificationsSettings = () => { }, { type: 'toggle', - icon: , + icon: Calendar1, title: translate('SettingsNotificationsTabTrainingReminderSectionTitle'), description: translate( 'SettingsNotificationsTabTrainingReminderSectionDescription' @@ -74,7 +73,7 @@ const NotificationsSettings = () => { }, { type: 'toggle', - icon: , + icon: Warning2, title: translate('SettingsNotificationsTabReleaseAlertSectionTitle'), description: translate( 'SettingsNotificationsTabReleaseAlertSectionDescription' diff --git a/front/views/settings/PreferencesSettings.tsx b/front/views/settings/PreferencesSettings.tsx index 821aba4..4c9f12f 100644 --- a/front/views/settings/PreferencesSettings.tsx +++ b/front/views/settings/PreferencesSettings.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useDispatch } from 'react-redux'; -import { Column } from 'native-base'; +import { Column, useTheme } from 'native-base'; import { useLanguage } from '../../state/LanguageSlice'; import { AvailableLanguages, DefaultLanguage, translate } from '../../i18n/i18n'; import { useSelector } from '../../state/Store'; @@ -8,20 +8,19 @@ import { updateSettings } from '../../state/SettingsSlice'; import ElementList from '../../components/GtkUI/ElementList'; import LocalSettings from '../../models/LocalSettings'; import { Brush2, Colorfilter, LanguageSquare, Rank, Sound } from 'iconsax-react-native'; -import useColorScheme from '../../hooks/colorScheme'; const PreferencesSettings = () => { const dispatch = useDispatch(); const language = useSelector((state) => state.language.value); const settings = useSelector((state) => state.settings.local); - const colorScheme = useColorScheme(); - const color = colorScheme === 'light' ? '#000' : '#fff'; + const { colors } = useTheme(); + return ( , + icon: Brush2, type: 'dropdown', title: translate('SettingsPreferencesTabThemeSectionTitle'), description: translate('SettingsPreferencesTabThemeSectionDescription'), @@ -43,7 +42,7 @@ const PreferencesSettings = () => { }, }, { - icon: , + icon: LanguageSquare, type: 'dropdown', title: translate('SettingsPreferencesTabLanguageSectionTitle'), description: translate('SettingsPreferencesTabLanguageSectionDescription'), @@ -61,7 +60,7 @@ const PreferencesSettings = () => { }, }, { - icon: , + icon: Rank, type: 'dropdown', title: translate('SettingsPreferencesTabDifficultySectionTitle'), description: translate( @@ -89,7 +88,7 @@ const PreferencesSettings = () => { , + icon: Colorfilter, type: 'toggle', title: translate('SettingsPreferencesTabColorblindModeSectionTitle'), description: translate( @@ -107,7 +106,7 @@ const PreferencesSettings = () => { , + icon: Sound, type: 'range', title: translate('SettingsPreferencesTabMicVolumeSectionTitle'), description: translate('SettingsPreferencesTabMicVolumeSectionDescription'), diff --git a/front/views/settings/PrivacySettings.tsx b/front/views/settings/PrivacySettings.tsx index 9ee66db..715f14d 100644 --- a/front/views/settings/PrivacySettings.tsx +++ b/front/views/settings/PrivacySettings.tsx @@ -7,14 +7,13 @@ import { updateSettings } from '../../state/SettingsSlice'; import useUserSettings from '../../hooks/userSettings'; import { LoadingView } from '../../components/Loading'; import { Driver, Like1, Shop } from 'iconsax-react-native'; -import useColorScheme from '../../hooks/colorScheme'; +import { useTheme } from 'native-base'; const PrivacySettings = () => { const dispatch = useDispatch(); const settings = useSelector((state: RootState) => state.settings.local); const { settings: userSettings, updateSettings: updateUserSettings } = useUserSettings(); - const colorScheme = useColorScheme(); - const color = colorScheme === 'light' ? '#000' : '#fff'; + const { colors } = useTheme(); if (!userSettings.data) { return ; @@ -25,7 +24,7 @@ const PrivacySettings = () => { elements={[ { type: 'toggle', - icon: , + icon: Driver, title: translate('SettingsPrivacyTabDataCollectionSectionTitle'), description: translate('SettingsPrivacyTabDataCollectionSectionDescription'), data: { @@ -36,7 +35,7 @@ const PrivacySettings = () => { }, { type: 'toggle', - icon: , + icon: Shop, title: translate('SettingsPrivacyTabCustomAdsSectionTitle'), description: translate('SettingsPrivacyTabCustomAdsSectionDescription'), data: { @@ -47,7 +46,7 @@ const PrivacySettings = () => { }, { type: 'toggle', - icon: , + icon: Like1, title: translate('SettingsPrivacyTabRecommendationsSectionTitle'), description: translate('SettingsPrivacyTabRecommendationsSectionDescription'), data: { diff --git a/front/views/settings/SettingsPremium.tsx b/front/views/settings/SettingsPremium.tsx index 3c0db60..91323c2 100644 --- a/front/views/settings/SettingsPremium.tsx +++ b/front/views/settings/SettingsPremium.tsx @@ -5,7 +5,6 @@ import ElementList from '../../components/GtkUI/ElementList'; import { translate } from '../../i18n/i18n'; import { useQuery } from '../../Queries'; import { Designtools, Magicpen, Star1 } from 'iconsax-react-native'; -import useColorScheme from '../../hooks/colorScheme'; // Too painful to infer the settings-only, typed navigator. Gave up // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -16,14 +15,12 @@ const PremiumSettings = () => { return ; } const user = userQuery.data; - const colorScheme = useColorScheme(); - const color = colorScheme === 'light' ? '#000' : '#fff'; return ( , + icon: Star1, type: 'text', title: translate('settingsPremiumTabPremiumAccountSectionTitle'), description: translate('settingsPremiumTabPremiumAccountSectionDescription'), @@ -32,7 +29,7 @@ const PremiumSettings = () => { }, }, { - icon: , + icon: Magicpen, type: 'toggle', title: translate('settingsPremiumTabPianoMagiqueSectionTitle'), description: translate('settingsPremiumTabPianoMagiqueSectionDescription'), @@ -44,7 +41,7 @@ const PremiumSettings = () => { }, }, { - icon: , + icon: Designtools, type: 'dropdown', title: translate('settingsPremiumTabThemePianoSectionTitle'), description: translate('settingsPremiumTabThemePianoSectionDescription'), diff --git a/front/views/settings/SettingsProfile.tsx b/front/views/settings/SettingsProfile.tsx index 8e76b12..ebb1c99 100644 --- a/front/views/settings/SettingsProfile.tsx +++ b/front/views/settings/SettingsProfile.tsx @@ -1,6 +1,6 @@ import API from '../../API'; import React from 'react'; -import { Column, Toast } from 'native-base'; +import { Column, Toast, useTheme } from 'native-base'; import { LoadingView } from '../../components/Loading'; import ElementList from '../../components/GtkUI/ElementList'; import { translate } from '../../i18n/i18n'; @@ -31,14 +31,13 @@ const ProfileSettings = () => { return ; } const user = userQuery.data; - const colorScheme = useColorScheme(); - const color = colorScheme === 'light' ? '#000' : '#fff'; + const { colors } = useTheme(); return ( , + icon: Google, type: 'text', title: translate('settingsProfileTabGoogleSectionTitle'), description: translate('settingsProfileTabGoogleSectionDescription'), @@ -51,7 +50,7 @@ const ProfileSettings = () => { }, }, { - icon: , + icon: Verify, type: 'text', title: translate('settingsProfileTabVerifiedSectionTitle'), description: translate('settingsProfileTabVerifiedSectionDescription'), @@ -83,7 +82,7 @@ const ProfileSettings = () => { }, }, { - icon: , + icon: UserSquare, type: 'text', title: translate('settingsProfileTabAvatarSectionTitle'), description: translate('settingsProfileTabAvatarSectionDescription'), @@ -123,7 +122,7 @@ const ProfileSettings = () => { }, }, { - icon: , + icon: SmsEdit, type: 'sectionDropdown', title: translate('settingsProfileTabChangeEmailSectionTitle'), description: translate('settingsProfileTabChangeEmailSectionDescription'), @@ -138,7 +137,7 @@ const ProfileSettings = () => { }, }, { - icon: , + icon: PasswordCheck, type: 'sectionDropdown', title: translate('settingsProfileTabChangePasswordSectionTitle'), description: translate( diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index 9d3215a..3a3eec0 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Center, Text, useTheme } from 'native-base'; +import { Center, Text, useBreakpointValue, useTheme } from 'native-base'; import ProfileSettings from './SettingsProfile'; import NotificationsSettings from './NotificationsSettings'; import PrivacySettings from './PrivacySettings'; @@ -26,7 +26,6 @@ import { Scene } from 'react-native-tab-view/lib/typescript/src/types'; import PremiumSettings from './SettingsPremium'; import { RouteProps } from '../../Navigation'; import ScaffoldCC from '../../components/UI/ScaffoldCC'; -import useColorScheme from '../../hooks/colorScheme'; import { translate } from '../../i18n/i18n'; export const PianoSettings = () => { @@ -69,7 +68,6 @@ const getTabData = (key: string) => { const SettingsTab = (props: RouteProps<{}>) => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); - const colorScheme = useColorScheme(); const { colors } = useTheme(); const [routes] = React.useState([ { key: 'profile', title: 'settingsTabProfile' }, @@ -79,6 +77,8 @@ const SettingsTab = (props: RouteProps<{}>) => { { key: 'privacy', title: 'settingsTabPrivacy' }, { key: 'piano', title: 'settingsTabPiano' }, ]); + const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); + const isSmallScreen = screenSize === 'small'; const renderTabBar = ( props: SceneRendererProps & { navigationState: NavigationState } ) => ( @@ -89,8 +89,8 @@ const SettingsTab = (props: RouteProps<{}>) => { borderBottomWidth: 1, borderColor: colors.primary[300], }} - activeColor={colorScheme === 'light' ? '#000' : '#fff'} - inactiveColor={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} + activeColor={colors.text[900]} + inactiveColor={colors.text[700]} indicatorStyle={{ backgroundColor: colors.primary[300] }} renderIcon={( scene: Scene & { @@ -133,7 +133,7 @@ const SettingsTab = (props: RouteProps<{}>) => { flex: 1, alignSelf: 'center', paddingTop: 32, - padding: 20, + padding: isSmallScreen ? 8 : 20, maxWidth: 850, width: '100%', }}