From 546f3e685f1c45271e9a8f8e263db0c57f6e29b1 Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Thu, 23 Nov 2023 13:54:36 +0200 Subject: [PATCH 1/2] added svg to danger zone --- apps/mobile/app/components/svgs/icons.tsx | 11 +++++++++++ .../Authenticated/SettingScreen/Team/QuitTeam.tsx | 8 +++++--- .../Authenticated/SettingScreen/Team/RemoveTeam.tsx | 8 +++++--- .../SettingScreen/components/UserRemoveAccount.tsx | 8 +++++--- 4 files changed, 26 insertions(+), 9 deletions(-) diff --git a/apps/mobile/app/components/svgs/icons.tsx b/apps/mobile/app/components/svgs/icons.tsx index 5f6841602..23726c97c 100644 --- a/apps/mobile/app/components/svgs/icons.tsx +++ b/apps/mobile/app/components/svgs/icons.tsx @@ -981,3 +981,14 @@ export const moreButtonDark = ` `; + +// Settings Screen Icons // + +export const danGerZoneRemoveUserIcon = ` + + + + + + +`; diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/QuitTeam.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/QuitTeam.tsx index bea60c733..ae48c404a 100644 --- a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/QuitTeam.tsx +++ b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/QuitTeam.tsx @@ -1,12 +1,14 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ import React from 'react'; -import { View, Text, Image, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from 'react-native'; +import { View, Text, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from 'react-native'; import { useOrganizationTeam } from '../../../../services/hooks/useOrganization'; import { translate } from '../../../../i18n'; import { typography, useAppTheme } from '../../../../theme'; import { observer } from 'mobx-react-lite'; import useAuthenticateUser from '../../../../services/hooks/features/useAuthentificateUser'; +import { SvgXml } from 'react-native-svg'; +import { danGerZoneRemoveUserIcon } from '../../../../components/svgs/icons'; const QuitTheTeam = observer(({ onDismiss }: { onDismiss: () => unknown }) => { const { colors, dark } = useAppTheme(); @@ -23,8 +25,8 @@ const QuitTheTeam = observer(({ onDismiss }: { onDismiss: () => unknown }) => { onDismiss()}> - - + + diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/RemoveTeam.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/RemoveTeam.tsx index 77774601a..551b46e33 100644 --- a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/RemoveTeam.tsx +++ b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/RemoveTeam.tsx @@ -1,12 +1,14 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ import React from 'react'; -import { View, Text, Image, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from 'react-native'; +import { View, Text, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from 'react-native'; import { useOrganizationTeam } from '../../../../services/hooks/useOrganization'; import { translate } from '../../../../i18n'; import { typography, useAppTheme } from '../../../../theme'; import { useStores } from '../../../../models'; import { observer } from 'mobx-react-lite'; +import { SvgXml } from 'react-native-svg'; +import { danGerZoneRemoveUserIcon } from '../../../../components/svgs/icons'; const RemoveTeam = observer(({ onDismiss }: { onDismiss: () => unknown }) => { const { colors, dark } = useAppTheme(); @@ -29,8 +31,8 @@ const RemoveTeam = observer(({ onDismiss }: { onDismiss: () => unknown }) => { onDismiss()}> - - + + diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/components/UserRemoveAccount.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/components/UserRemoveAccount.tsx index 4b34ed9cd..a2f438888 100644 --- a/apps/mobile/app/screens/Authenticated/SettingScreen/components/UserRemoveAccount.tsx +++ b/apps/mobile/app/screens/Authenticated/SettingScreen/components/UserRemoveAccount.tsx @@ -1,11 +1,13 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ import React, { useCallback } from 'react'; -import { Image, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'; +import { StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'; import { translate } from '../../../../i18n'; import { useUser } from '../../../../services/hooks/features/useUser'; import { useOrganizationTeam } from '../../../../services/hooks/useOrganization'; import { typography, useAppTheme } from '../../../../theme'; +import { SvgXml } from 'react-native-svg'; +import { danGerZoneRemoveUserIcon } from '../../../../components/svgs/icons'; const UserRemoveAccount = ({ onDismiss, @@ -36,8 +38,8 @@ const UserRemoveAccount = ({ onDismiss()}> - - + + From 21713d142453e84f01cc0191f7b1af9a61aa47cb Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Thu, 23 Nov 2023 14:27:35 +0200 Subject: [PATCH 2/2] added filter and gallery icons as svg --- apps/mobile/app/components/svgs/icons.tsx | 34 +++++++++++++++++++ .../ProfileScreen/components/TaskFilter.tsx | 10 +++--- .../components/ChangeTeamLogo.tsx | 8 ++--- .../components/ChangeUserAvatar.tsx | 8 ++--- 4 files changed, 46 insertions(+), 14 deletions(-) diff --git a/apps/mobile/app/components/svgs/icons.tsx b/apps/mobile/app/components/svgs/icons.tsx index 23726c97c..453537650 100644 --- a/apps/mobile/app/components/svgs/icons.tsx +++ b/apps/mobile/app/components/svgs/icons.tsx @@ -650,6 +650,28 @@ export const pauseStatusIconLarge = ` `; +// Profile Screen // + +export const filterLightIcon = ` + + + + + + + +`; + +export const filterDarkIcon = ` + + + + + + + +`; + // Task Screen // // Task Title export const tickIconLight = ` `; + +export const galleryLightIcon = ` + + + +`; + +export const galleryDarkIcon = ` + + + +`; diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx index 6d383f85d..92e10947a 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx +++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx @@ -1,5 +1,5 @@ /* eslint-disable react-native/no-inline-styles */ -import { Text, TouchableOpacity, Image, View, TextStyle, ViewStyle, Dimensions } from 'react-native'; +import { Text, TouchableOpacity, View, TextStyle, ViewStyle, Dimensions } from 'react-native'; import React, { useState } from 'react'; import { typography, useAppTheme } from '../../../../theme'; import { translate } from '../../../../i18n'; @@ -8,6 +8,8 @@ import ProfileTabs from './ProfileTabs'; import AssignTaskFormModal from './AssignTaskSection'; import FilterPopup from './FilterPopup'; import { ITaskFilter } from '../../../../services/hooks/features/useTaskFilters'; +import { SvgXml } from 'react-native-svg'; +import { filterDarkIcon, filterLightIcon } from '../../../../components/svgs/icons'; const TaskFilter = ({ profile, hook }: { profile: IUserProfile; hook: ITaskFilter }) => { const { colors, dark } = useAppTheme(); @@ -47,11 +49,7 @@ const TaskFilter = ({ profile, hook }: { profile: IUserProfile; hook: ITaskFilte style={{ ...$filterButton, borderColor: colors.border }} onPress={() => setShowFilterPopup(true)} > - {dark ? ( - - ) : ( - - )} + {dark ? : } {translate('tasksScreen.filter')} diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeTeamLogo.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeTeamLogo.tsx index 89202877b..2bb5e8be6 100644 --- a/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeTeamLogo.tsx +++ b/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeTeamLogo.tsx @@ -25,6 +25,8 @@ import { useOrganizationTeam } from '../../../../services/hooks/useOrganization' import { useStores } from '../../../../models'; import { observer } from 'mobx-react-lite'; import LoadingModal from '../../../../components/LoadingModal'; +import { SvgXml } from 'react-native-svg'; +import { galleryDarkIcon, galleryLightIcon } from '../../../../components/svgs/icons'; const ChangeTeamLogo = observer(({ onDismiss, onExtend }: { onDismiss: () => unknown; onExtend: () => unknown }) => { const { colors, dark } = useAppTheme(); @@ -109,9 +111,7 @@ const ChangeTeamLogo = observer(({ onDismiss, onExtend }: { onDismiss: () => unk setSelectedImage(null); }, [onDismiss]); - const image = dark - ? require('../../../../../assets/images/new/image-dark.png') - : require('../../../../../assets/images/new/image-light.png'); + const galleryImage = dark ? : ; return ( <> @@ -132,7 +132,7 @@ const ChangeTeamLogo = observer(({ onDismiss, onExtend }: { onDismiss: () => unk pickImageFromGalery()}> - + {galleryImage} {translate('settingScreen.changeAvatar.selectFromGalery')} diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeUserAvatar.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeUserAvatar.tsx index 95ad33707..a16992a10 100644 --- a/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeUserAvatar.tsx +++ b/apps/mobile/app/screens/Authenticated/SettingScreen/components/ChangeUserAvatar.tsx @@ -26,6 +26,8 @@ import mime from 'mime'; import LoadingModal from '../../../../components/LoadingModal'; import useAuthenticateUser from '../../../../services/hooks/features/useAuthentificateUser'; import { IUser } from '../../../../services/interfaces/IUserData'; +import { SvgXml } from 'react-native-svg'; +import { galleryDarkIcon, galleryLightIcon } from '../../../../components/svgs/icons'; interface IFileInfo { size: number; @@ -137,9 +139,7 @@ const ChangeUserAvatar = ({ onDismiss, onExtend }: { onDismiss: () => unknown; o setSelectedImage(null); }, [onDismiss]); - const image = dark - ? require('../../../../../assets/images/new/image-dark.png') - : require('../../../../../assets/images/new/image-light.png'); + const galleryImage = dark ? : ; return ( <> @@ -160,7 +160,7 @@ const ChangeUserAvatar = ({ onDismiss, onExtend }: { onDismiss: () => unknown; o pickImageFromGalery()}> - + {galleryImage} {translate('settingScreen.changeAvatar.selectFromGalery')}