From 517fb9ebba85daaaf81a85c1401000e0a52af94c Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Thu, 16 Nov 2023 19:37:57 +0200 Subject: [PATCH 1/2] added theme switchers, and styled the input team name --- apps/mobile/app/components/TextField.tsx | 6 +- apps/mobile/app/components/svgs/icons.tsx | 136 +++++++++--------- .../Components/FillTeamNameForm.tsx | 45 ++++-- .../LoginScreen/Components/LoginBottom.tsx | 62 +++++++- apps/mobile/app/screens/LoginScreen/index.tsx | 6 +- 5 files changed, 163 insertions(+), 92 deletions(-) diff --git a/apps/mobile/app/components/TextField.tsx b/apps/mobile/app/components/TextField.tsx index 92cced1a0..9fcb7eabe 100644 --- a/apps/mobile/app/components/TextField.tsx +++ b/apps/mobile/app/components/TextField.tsx @@ -1,7 +1,7 @@ import React, { ComponentType, forwardRef, Ref, useImperativeHandle, useRef } from 'react'; import { StyleProp, TextInput, TextInputProps, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'; import { isRTL, translate } from '../i18n'; -import { colors, spacing, typography } from '../theme'; +import { colors, spacing, typography, useAppTheme } from '../theme'; import { Text, TextProps } from './Text'; export interface TextFieldAccessoryProps { @@ -152,6 +152,8 @@ export const TextField = forwardRef(function TextField(props: TextFieldProps, re useImperativeHandle(ref, () => input.current); + const { colors: appThemeColors, dark } = useAppTheme(); + return ( {!!RightAccessory && ( diff --git a/apps/mobile/app/components/svgs/icons.tsx b/apps/mobile/app/components/svgs/icons.tsx index a849f2822..d8ebc4ec5 100644 --- a/apps/mobile/app/components/svgs/icons.tsx +++ b/apps/mobile/app/components/svgs/icons.tsx @@ -3,31 +3,31 @@ export const sunDarkLarge = ` -` +`; export const moonDarkLarge = ` -` +`; export const sunLightLarge = ` -` +`; export const moonLightLarge = ` -` +`; export const moonLightMedium = ` -` +`; export const moonDarkMedium = ` -` +`; // Ever Teams Logo @@ -87,7 +87,7 @@ export const everTeamsLogoLightTheme = ` - ` + `; export const everTeamsLogoDarkTheme = ` - ` + `; export const grayCircleIcon = ` - ` + `; export const greenCircleTickIcon = ` - ` + `; // Timer Icons @@ -180,7 +180,7 @@ export const timerLargeStopIcon = ` - ` + `; export const timerMediumStopIcon = ` - ` + `; export const timerSmallStopIcon = ` - ` + `; export const timerLargePlayIcon = ` - ` + `; export const timerLargeDarkPlayIcon = ` - ` + `; export const timerMediumDarkPlayIcon = ` - ` + `; export const timerMediumPlayIcon = ` - ` + `; export const timerSmallPlayIcon = ` - ` + `; export const timerSmallDarkPlayIcon = ` - ` + `; // Footer Navigation and Hamburger/Drawer Menu icons @@ -293,7 +293,7 @@ export const peopleIconGrey = ` -` +`; export const peopleIconActive = ` @@ -302,7 +302,7 @@ export const peopleIconActive = ` -` +`; export const peopleIconActiveDark = ` @@ -311,22 +311,22 @@ export const peopleIconActiveDark = ` -` +`; export const userGrey = ` -` +`; export const userActive = ` -` +`; export const userActiveDark = ` -` +`; export const peopleNotFocusedDark = ` @@ -336,7 +336,7 @@ export const peopleNotFocusedDark = ` -` +`; export const peopleCaseNotFocusedDark2 = ` @@ -346,7 +346,7 @@ export const peopleCaseNotFocusedDark2 = ` -` +`; export const peopleNotFocusedLight = ` @@ -356,14 +356,14 @@ export const peopleNotFocusedLight = ` -` +`; export const briefCaseNotFocusedLight = ` -` +`; export const briefCaseNotFocusedDark = ` @@ -371,7 +371,7 @@ export const briefCaseNotFocusedDark = ` -` +`; export const briefCaseNotFocusedDark2 = ` @@ -380,44 +380,44 @@ export const briefCaseNotFocusedDark2 = ` -` +`; export const userNotFocusedDark = ` -` +`; export const userNotFocusedDark2 = ` -` +`; export const userNotFocusedLight = ` -` +`; export const userFocusedLight = ` -` +`; export const userFocusedDark = ` -` +`; export const settingsIconLight = ` -` +`; export const settingsIconDark = ` -` +`; // Timer Status Icons @@ -429,7 +429,7 @@ export const suspendedStatusIcon = ` - ` + `; export const idleStatusIcon = ` - ` + `; export const onlineAndTrackingTimeStatusIcon = ` - ` + `; export const pauseStatusIcon = ` - ` + `; export const suspendedStatusIconLarge = ` - ` + `; export const idleStatusIconLarge = ` - ` + `; export const onlineAndTrackingTimeStatusIconLarge = ` - ` + `; export const pauseStatusIconLarge = ` - ` + `; // Task Screen // // Task Title @@ -534,7 +534,7 @@ export const tickIconLight = ` - ` + `; export const tickIconDark = ` - ` + `; export const closeIconLight = ` - ` + `; export const closeIconDark = ` - ` + `; export const editIcon = ` -` +`; export const copyIcon = ` -` +`; // Task Details export const globeLightTheme = ` - ` + `; export const globeDarkTheme = ` - ` + `; export const lockLightTheme = ` - ` + `; export const lockDarkTheme = ` - ` + `; export const clipboardIcon = ` -` +`; export const profileIcon = ` -` +`; export const peopleIconSmall = ` @@ -781,12 +781,12 @@ export const peopleIconSmall = ` -` +`; export const settingsIconSmall = ` -` +`; export const trashIconLarge = ` @@ -794,7 +794,7 @@ export const trashIconLarge = ` -` +`; export const trashIconSmall = ` @@ -802,7 +802,7 @@ export const trashIconSmall = ` -` +`; export const calendarIcon = ` @@ -813,14 +813,14 @@ export const calendarIcon = ` -` +`; export const categoryIcon = ` -` +`; // Member & Roles Screen @@ -828,23 +828,23 @@ export const searchIconLight = ` -` +`; export const searchIconDark = ` -` +`; export const moreButtonLight = ` -` +`; export const moreButtonDark = ` -` +`; diff --git a/apps/mobile/app/screens/LoginScreen/Components/FillTeamNameForm.tsx b/apps/mobile/app/screens/LoginScreen/Components/FillTeamNameForm.tsx index 7d1bfd0c1..c401f8805 100644 --- a/apps/mobile/app/screens/LoginScreen/Components/FillTeamNameForm.tsx +++ b/apps/mobile/app/screens/LoginScreen/Components/FillTeamNameForm.tsx @@ -8,7 +8,7 @@ import EStyleSheet from 'react-native-extended-stylesheet'; // Components import { translate } from '../../../i18n'; import { Button, TextField } from '../../../components'; -import { spacing, typography } from '../../../theme'; +import { spacing, typography, useAppTheme } from '../../../theme'; import { useStores } from '../../../models'; import { GLOBAL_STYLE as GS } from '../../../../assets/ts/styles'; @@ -22,18 +22,32 @@ interface Props { const FillTeamNameForm: FC = observer(({ isLoading, errors, setScreenStatus, setWithTeam }) => { const authTeamInput = useRef(); + const { colors, dark } = useAppTheme(); + const { authenticationStore: { authTeamName, setAuthTeamName } } = useStores(); return ( - - {translate('loginScreen.step1Title')} + + {translate('loginScreen.step1Title')} = observer(({ isLoading, errors, setScreenStat /> setWithTeam(true)}> - {translate('loginScreen.joinExistTeam')} + + {translate('loginScreen.joinExistTeam')} +