From 5704399537007d616db67433dd800f105b6a6a50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Fri, 12 Apr 2024 15:17:34 +0200 Subject: [PATCH 1/5] add apple login --- app.json | 10 +- assets/social/apple-icon-dark.png | Bin 357 -> 0 bytes assets/social/apple-icon.png | Bin 328 -> 0 bytes assets/social/facebook-icon.png | Bin 733 -> 0 bytes package.json | 1 + .../SocialButtons/AppleButton/AppleButton.tsx | 90 ++++++++++++++++++ .../SocialButtons/AppleButton/index.ts | 1 + .../GoogleButton/GoogleButton.tsx | 9 ++ .../GoogleButton/NativeGoogleButton.tsx | 37 +++++-- .../SocialButtons/GoogleButton/index.tsx | 9 -- .../molecules/SocialButtons/SocialButton.tsx | 35 +++++-- .../molecules/SocialButtons/SocialButtons.tsx | 19 ++++ .../molecules/SocialButtons/index.ts | 1 + src/constants/images.ts | 3 - .../components/Button/Button.tsx | 2 +- src/hooks/forms/useSignInForm.ts | 9 +- src/hooks/forms/useSignUpForm.ts | 9 +- src/providers/NotificationProvider.tsx | 4 +- src/screens/auth/SignInScreen.tsx | 19 ++-- src/screens/auth/SignUpScreen.tsx | 18 ++-- yarn.lock | 5 + 21 files changed, 230 insertions(+), 51 deletions(-) delete mode 100644 assets/social/apple-icon-dark.png delete mode 100644 assets/social/apple-icon.png delete mode 100644 assets/social/facebook-icon.png create mode 100644 src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx create mode 100644 src/components/molecules/SocialButtons/AppleButton/index.ts create mode 100644 src/components/molecules/SocialButtons/GoogleButton/GoogleButton.tsx delete mode 100644 src/components/molecules/SocialButtons/GoogleButton/index.tsx create mode 100644 src/components/molecules/SocialButtons/SocialButtons.tsx diff --git a/app.json b/app.json index 0844c12f..0cc093bc 100644 --- a/app.json +++ b/app.json @@ -8,13 +8,14 @@ }, "assetBundlePatterns": ["**/*"], "ios": { - "jsEngine": "hermes", "buildNumber": "17", - "supportsTablet": true, - "googleServicesFile": "./GoogleService-Info.plist", "config": { "usesNonExemptEncryption": false - } + }, + "googleServicesFile": "./GoogleService-Info.plist", + "jsEngine": "hermes", + "usesAppleSignIn": true, + "supportsTablet": true }, "name": "BACA", "orientation": "portrait", @@ -32,6 +33,7 @@ "version": "2.2.0", "plugins": [ "@react-native-google-signin/google-signin", + "expo-apple-authentication", "expo-font", "expo-localization", "expo-secure-store", diff --git a/assets/social/apple-icon-dark.png b/assets/social/apple-icon-dark.png deleted file mode 100644 index 213c5404282c2e24aab18f7459e3c631eb3d0564..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 357 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#U!E?GAr*{gr}XkR83?rUt0yp9H~A?@pWw(@ zApJt^5z7OX4UJZeIStZt-aGY5Ep&($+W&;LDE!{ne&tOqGm}>|_&t%HA@}3#yc(v% zE&BtX2usAJ&)%!2V3K^6x%nbrzvz+$)>GIW1C;bO3fy|JXV3KutUu?toe6LhEf1C~ zT9Y4|k!?5aMuJ<+~Q2*`ZK~=CvNye{|&JLh6019tDnm{r-UW|tD=h# diff --git a/assets/social/apple-icon.png b/assets/social/apple-icon.png deleted file mode 100644 index 34a7babe340408635a155accc5ede1c772a32149..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 328 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#yPhtNAr*{wrzG+oG7xB$*OYctdlywbG$n;bH}GBw>8!Gc?%!f#%UgUP<>AJSm5R>G8U(7 zrmWR|pkku`AW+*tzxJ8brgvZUFIzr(IngTNA$NwtWv!ISPbR$Ge@Z;Sx$HvQjU7xy zi4Mo_-=5=Wwrs)g01jpmrjT9}d!>M~khBGrt&KrHZ0g!}U*5BBXWI4Xb*VF!#7Qt* Vm(HoX(E;=*gQu&X%Q~loCII%^ef$6b diff --git a/assets/social/facebook-icon.png b/assets/social/facebook-icon.png deleted file mode 100644 index cc1109866152d9dda6aa0326394f647cd63fd31b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 733 zcmV<30wVp1P)P000;W1^@s654Bdt00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPBi#7KXGe3`p$&Vl1k}+=_uPLDH#249yG@1vVy_%7D~N zY=|J5uCb_SQwD56KwRSgd*6=Trj6}1X`f{I-#`1_{kwm63^5qanOPt)4alqnOEVy? z_9bM6fmMWb-hMCYZ=!6lFvU>r_bi#p`$l6>gXD#J@#KrHNXYXHdH$T1SsWfKV9rc^ zK{rB4S_CV!%%FGFh-hLjQ9zQOGt*is@u?evQyRnQ2oL0SQ_v&Zh#IzY$y(GcB_#db zR4VbP8-n>88tz^lXxsbxL*PpB&)%(bWbYxp?)wG}jA37?i!?2kK_FNa$wd z<9<4;^8*CG8qy8Zx+OdENXaMF!VQ;XY?2`w7tZiD`O7zfn@|6`MB!l5lJqP&<@OW}r{3ZaQHqNm(;FxMQFXsMN1*icme{;&ZZLqmoL&>eOwkhF_hL*VI&yqG01qz$t5uuF3L)`}&zhYwl_&reZ9udZA7Tlo`K!c2B5M!L; zZxKadt2o#(uc2*)yjh~x(&_u=6jkgLHMxr<`_0s93YbtQX3k4h3y8oDeE0AE2Exsk P00000NkvXXu0mjfz!Osm diff --git a/package.json b/package.json index 981bf60f..3b70b3ea 100644 --- a/package.json +++ b/package.json @@ -109,6 +109,7 @@ "@tanstack/react-query": "^4.29.19", "axios": "^1.6.7", "expo": "~50.0.13", + "expo-apple-authentication": "~6.3.0", "expo-application": "~5.8.3", "expo-asset": "~9.0.2", "expo-build-properties": "~0.11.1", diff --git a/src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx b/src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx new file mode 100644 index 00000000..62622e3e --- /dev/null +++ b/src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx @@ -0,0 +1,90 @@ +import { useAuthAppleControllerLogin } from '@baca/api/query/auth-social/auth-social' +import { assignPushToken, setToken } from '@baca/services' +import { isSignedInAtom, store } from '@baca/store' +import * as ExpoAppleAuthentication from 'expo-apple-authentication' +import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react' + +import { SocialButton } from '../SocialButton' + +type AppleButtonProps = { + isDisabled: boolean + setIsDisabled: Dispatch> +} + +export const AppleButton: FC = ({ isDisabled, setIsDisabled }) => { + const { mutate: signInApple } = useAuthAppleControllerLogin() + const [isLoading, setIsLoading] = useState(false) + const [showAppleButton, setShowAppleButton] = useState(false) + + const checkIfAvailable = useCallback(async () => { + const isAvailable = await ExpoAppleAuthentication.isAvailableAsync() + setShowAppleButton(isAvailable) + }, []) + + useEffect(() => { + checkIfAvailable() + }, [checkIfAvailable]) + + const onPress = useCallback(async () => { + setIsDisabled(true) + setIsLoading(true) + try { + const appleResponse = await ExpoAppleAuthentication.signInAsync({ + requestedScopes: [ + ExpoAppleAuthentication.AppleAuthenticationScope.EMAIL, + ExpoAppleAuthentication.AppleAuthenticationScope.FULL_NAME, + ], + }) + + console.log( + JSON.stringify( + { + data: { + idToken: appleResponse.identityToken!, + firstName: appleResponse.fullName?.givenName || '', + lastName: appleResponse.fullName?.familyName || '', + }, + }, + null, + 2 + ) + ) + signInApple( + { + data: { + idToken: appleResponse.identityToken!, + firstName: appleResponse.fullName?.givenName || '', + lastName: appleResponse.fullName?.familyName || '', + }, + }, + + { + onError: (e) => { + if (e.code === 'ERR_REQUEST_CANCELED') { + console.log('Request cancelled by the user') + } else return e + }, + onSuccess: async (response) => { + const { user, ...token } = response + if (token) { + await setToken(token) + } + store.set(isSignedInAtom, true) + + // Send push token to backend + await assignPushToken() + }, + } + ) + } catch (e) { + console.log('Cannot login with apple', e) + } finally { + setIsLoading(false) + setIsDisabled(false) + } + }, [setIsDisabled, signInApple]) + + if (!showAppleButton) return null + + return +} diff --git a/src/components/molecules/SocialButtons/AppleButton/index.ts b/src/components/molecules/SocialButtons/AppleButton/index.ts new file mode 100644 index 00000000..a47ce11d --- /dev/null +++ b/src/components/molecules/SocialButtons/AppleButton/index.ts @@ -0,0 +1 @@ +export * from './AppleButton' diff --git a/src/components/molecules/SocialButtons/GoogleButton/GoogleButton.tsx b/src/components/molecules/SocialButtons/GoogleButton/GoogleButton.tsx new file mode 100644 index 00000000..03684ec0 --- /dev/null +++ b/src/components/molecules/SocialButtons/GoogleButton/GoogleButton.tsx @@ -0,0 +1,9 @@ +import { isExpoGo, isWeb } from '@baca/constants' + +import { GoogleButtonProps, NativeGoogleButton } from './NativeGoogleButton' + +export const GoogleButton = (props: GoogleButtonProps) => { + //TODO: Add google button for web + if (isExpoGo || isWeb) return null + return +} diff --git a/src/components/molecules/SocialButtons/GoogleButton/NativeGoogleButton.tsx b/src/components/molecules/SocialButtons/GoogleButton/NativeGoogleButton.tsx index cf582110..2b69a067 100644 --- a/src/components/molecules/SocialButtons/GoogleButton/NativeGoogleButton.tsx +++ b/src/components/molecules/SocialButtons/GoogleButton/NativeGoogleButton.tsx @@ -4,22 +4,29 @@ import { useCallback, useEffect, useState } from '@baca/hooks' import { assignPushToken, setToken } from '@baca/services' import { isSignedInAtom, store } from '@baca/store' import { showErrorToast } from '@baca/utils' -import { FC } from 'react' +import { Dispatch, FC, SetStateAction } from 'react' import { useTranslation } from 'react-i18next' import { SocialButton } from '../SocialButton' -let NativeGoogleButton: FC = () => null +export type GoogleButtonProps = { + isDisabled: boolean + setIsDisabled: Dispatch> +} + +let NativeGoogleButton: FC = () => null if (!isExpoGo && !isWeb) { // Conditionally import makes it work with expo go import('@react-native-google-signin/google-signin').then(({ GoogleSignin, statusCodes }) => { type GoogleSignInError = Error & { code: keyof typeof statusCodes } - NativeGoogleButton = () => { - const [isDisabled, setIsDisabled] = useState(false) - const { mutate: signInByGoogle } = useAuthGoogleControllerLogin() + NativeGoogleButton = ({ isDisabled, setIsDisabled }) => { const { t } = useTranslation() + const { mutate: signInByGoogle } = useAuthGoogleControllerLogin() + + const [isGoogleButtonDisabled, setIsGoogleButtonDisabled] = useState(false) + const [isLoading, setIsLoading] = useState(false) useEffect(() => { // No extra configuration is needed, @@ -31,7 +38,7 @@ if (!isExpoGo && !isWeb) { }, []) const verifyPlayServices = useCallback(async (): Promise => { - setIsDisabled(!(await GoogleSignin?.hasPlayServices?.())) + setIsGoogleButtonDisabled(!(await GoogleSignin?.hasPlayServices?.())) }, []) useEffect(() => { @@ -65,6 +72,8 @@ if (!isExpoGo && !isWeb) { }, [signInByGoogle]) const signIn = useCallback(async (): Promise => { + setIsLoading(true) + setIsDisabled(true) try { await GoogleSignin?.signIn?.() await verifyToken() @@ -88,10 +97,20 @@ if (!isExpoGo && !isWeb) { } showErrorToast({ description: t('errors.something_went_wrong') }) + } finally { + setIsDisabled(false) + setIsLoading(false) } - }, [t, verifyToken]) - - return + }, [setIsDisabled, t, verifyToken]) + + return ( + + ) } }) } diff --git a/src/components/molecules/SocialButtons/GoogleButton/index.tsx b/src/components/molecules/SocialButtons/GoogleButton/index.tsx deleted file mode 100644 index 184d596c..00000000 --- a/src/components/molecules/SocialButtons/GoogleButton/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { isExpoGo, isWeb } from '@baca/constants' - -import { NativeGoogleButton } from './NativeGoogleButton' - -export const GoogleButton = () => { - //TODO: Add google button for web - if (isExpoGo || isWeb) return null - return -} diff --git a/src/components/molecules/SocialButtons/SocialButton.tsx b/src/components/molecules/SocialButtons/SocialButton.tsx index a8e96848..11e51700 100644 --- a/src/components/molecules/SocialButtons/SocialButton.tsx +++ b/src/components/molecules/SocialButtons/SocialButton.tsx @@ -1,24 +1,22 @@ -import { appleIconDark, appleIcon, facebookIcon, googleIcon } from '@baca/constants' +import { googleIcon } from '@baca/constants' import { useColorScheme } from '@baca/contexts' -import { Button, ButtonProps } from '@baca/design-system' +import { Button, ButtonProps, Icon } from '@baca/design-system' import i18n from '@baca/i18n' -import { FC } from 'react' +import { FC, useCallback } from 'react' import { Image, ImageSourcePropType } from 'react-native' type SocialMediaType = 'apple' | 'facebook' | 'google' const socialButtonVariants: { [key in SocialMediaType]: { - source: { light: ImageSourcePropType; dark?: ImageSourcePropType } + source?: { light: ImageSourcePropType; dark?: ImageSourcePropType } text: () => string } } = { apple: { - source: { light: appleIcon, dark: appleIconDark }, text: () => i18n.t('sign_in_screen.sign_in_by_apple'), }, facebook: { - source: { light: facebookIcon }, text: () => i18n.t('sign_in_screen.sign_in_by_facebook'), }, google: { @@ -37,11 +35,34 @@ export const SocialButton: FC = ({ type = 'google', ...rest } const { source, text } = socialButtonVariants[type] + const generateLeftElement = useCallback( + (type: SocialMediaType) => { + switch (type) { + case 'apple': + return ( + + ) + case 'facebook': + // @ts-expect-error icon type accepts only ColorNames in order to make suggestion in code, but strings works as well + return + case 'google': + return ( + + ) + } + }, + [colorScheme, source] + ) + return ( - - - + {t('sign_in_screen.do_not_have_an_account')} diff --git a/src/screens/auth/SignUpScreen.tsx b/src/screens/auth/SignUpScreen.tsx index 4706bc52..e0312370 100644 --- a/src/screens/auth/SignUpScreen.tsx +++ b/src/screens/auth/SignUpScreen.tsx @@ -1,8 +1,7 @@ -import { CompanyLogo, ControlledField, FormWrapper, GoogleButton } from '@baca/components' +import { CompanyLogo, ControlledField, FormWrapper, SocialButtons } from '@baca/components' import { Box, Button, Center, Display, Row, Spacer, Text } from '@baca/design-system' -import { useSignUpForm, useTranslation } from '@baca/hooks' +import { useCallback, useSignUpForm, useState, useTranslation } from '@baca/hooks' import { router } from 'expo-router' -import { useCallback } from 'react' import { Keyboard } from 'react-native' import { usePasswordValidation } from '../../hooks/usePasswordValidation' @@ -14,7 +13,11 @@ const navigateToLogIn = () => { export const SignUpScreen = () => { const { t } = useTranslation() - const { control, errors, register, isSubmitting, setFocus } = useSignUpForm() + const [isSignUpButtonDisabled, setIsSignUpButtonDisabled] = useState(false) + + const { control, errors, register, isSubmitting, setFocus } = useSignUpForm({ + setIsSignUpButtonDisabled, + }) const { isPasswordError, passwordSuggestions, validationFn } = usePasswordValidation() @@ -118,9 +121,10 @@ export const SignUpScreen = () => { {t('sign_up_screen.get_started')} - - - + diff --git a/yarn.lock b/yarn.lock index 685d71c9..a291c7dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6655,6 +6655,11 @@ expect@^29.0.0, expect@^29.7.0: jest-message-util "^29.7.0" jest-util "^29.7.0" +expo-apple-authentication@~6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/expo-apple-authentication/-/expo-apple-authentication-6.3.0.tgz#0e591efbb70e97f87c1fcadfb8ca97a1d78bf47b" + integrity sha512-eYoRMlh7qKkWdbNe5TV5n0/1mLMRDFDxt+uetyu0XMdn70vZSTaPr5yewyGzoFHRx5t4QCEj8wTobcjoqH5PGw== + expo-application@~5.8.0, expo-application@~5.8.3: version "5.8.3" resolved "https://registry.yarnpkg.com/expo-application/-/expo-application-5.8.3.tgz#43991bd81d05c987b07b2f430c036cda1572bc62" From d88c844492cbdc5ee6afffffbde69050b5297095 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Fri, 12 Apr 2024 19:01:51 +0200 Subject: [PATCH 2/5] add missing file --- src/components/molecules/SocialButtons/GoogleButton/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/components/molecules/SocialButtons/GoogleButton/index.ts diff --git a/src/components/molecules/SocialButtons/GoogleButton/index.ts b/src/components/molecules/SocialButtons/GoogleButton/index.ts new file mode 100644 index 00000000..e38dad87 --- /dev/null +++ b/src/components/molecules/SocialButtons/GoogleButton/index.ts @@ -0,0 +1 @@ +export * from './GoogleButton' From e33bd959e497bddb589082630a631dbd1233e01b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Mon, 15 Apr 2024 11:46:34 +0200 Subject: [PATCH 3/5] remove user profile data from device on logout --- src/enums/queryKeys.ts | 1 + src/hooks/forms/useUpdateProfileForm.ts | 3 ++- src/providers/Providers.tsx | 5 ++--- src/queryClient.ts | 3 +++ src/store/auth/authActions.ts | 6 ++++++ 5 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 src/queryClient.ts diff --git a/src/enums/queryKeys.ts b/src/enums/queryKeys.ts index 174422f3..52870bfe 100644 --- a/src/enums/queryKeys.ts +++ b/src/enums/queryKeys.ts @@ -1,3 +1,4 @@ export enum QueryKeys { TODOS = 'TODOS', + USER_DATA = 'USER DATA', } diff --git a/src/hooks/forms/useUpdateProfileForm.ts b/src/hooks/forms/useUpdateProfileForm.ts index 6b1eef9f..f2d201d9 100644 --- a/src/hooks/forms/useUpdateProfileForm.ts +++ b/src/hooks/forms/useUpdateProfileForm.ts @@ -1,12 +1,13 @@ import { useAuthControllerUpdate, useAuthControllerMe } from '@baca/api/query/auth/auth' import { AuthUpdateDto } from '@baca/api/types' +import { QueryKeys } from '@baca/enums' import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' import { useMemo, useEffect } from 'react' import { useForm } from 'react-hook-form' import { useTranslation } from 'react-i18next' export const useUpdateProfileForm = () => { - const { data: userData } = useAuthControllerMe() + const { data: userData } = useAuthControllerMe({ query: { queryKey: [QueryKeys.USER_DATA] } }) const { t } = useTranslation() const { mutate: updateUserMutation, isLoading } = useAuthControllerUpdate() diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx index 357c549a..e4baa8ca 100644 --- a/src/providers/Providers.tsx +++ b/src/providers/Providers.tsx @@ -1,11 +1,12 @@ import { AppLoading } from '@baca/components' import { useAppStateActive } from '@baca/hooks' import { AuthLogic } from '@baca/logic/AuthLogic' +import { queryClient } from '@baca/queryClient' import { store } from '@baca/store' import { checkForUpdates } from '@baca/utils' import { BottomSheetModalProvider } from '@gorhom/bottom-sheet' import { PortalProvider } from '@gorhom/portal' -import { QueryClientProvider, QueryClient } from '@tanstack/react-query' +import { QueryClientProvider } from '@tanstack/react-query' import { Provider } from 'jotai' import { FC, PropsWithChildren } from 'react' import { StyleSheet } from 'react-native' @@ -16,8 +17,6 @@ import { ColorSchemeProvider } from './ColorSchemeProvider' import { NotificationsProvider } from './NotificatedProvider' import { NotificationProvider as ExpoNotificationsProvider } from './NotificationProvider' -const queryClient = new QueryClient({}) - export const Providers: FC = ({ children }) => { useAppStateActive(checkForUpdates, false) diff --git a/src/queryClient.ts b/src/queryClient.ts new file mode 100644 index 00000000..2252401d --- /dev/null +++ b/src/queryClient.ts @@ -0,0 +1,3 @@ +import { QueryClient } from '@tanstack/react-query' + +export const queryClient = new QueryClient({}) diff --git a/src/store/auth/authActions.ts b/src/store/auth/authActions.ts index 16ad41bd..8aa967a5 100644 --- a/src/store/auth/authActions.ts +++ b/src/store/auth/authActions.ts @@ -1,3 +1,6 @@ +import { QueryKeys } from '@baca/enums' +import { queryClient } from '@baca/queryClient' + import { isSignedInAtom } from './authState' import { removePushToken } from '../../services/NotificationService' import { deleteToken } from '../../services/TokenService' @@ -7,6 +10,9 @@ export async function signOut() { // set user logged out store.set(isSignedInAtom, false) + // remove user profile data from device + queryClient.removeQueries({ queryKey: [QueryKeys.USER_DATA] }) + // remove auth token from device await deleteToken() From 4c4fc4c1b6ae03b0fdd91ad10275486b366482a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Mon, 15 Apr 2024 13:24:12 +0200 Subject: [PATCH 4/5] fix button lineHeight --- src/design-system/components/Button/Button.tsx | 11 +++++++++-- .../Button/__snapshots__/Button.test.tsx.snap | 2 +- src/design-system/config/buttonVariants.ts | 6 ++++++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx index 83d8e864..c21d8d70 100644 --- a/src/design-system/components/Button/Button.tsx +++ b/src/design-system/components/Button/Button.tsx @@ -61,7 +61,6 @@ const styles = StyleSheet.create({ baseText: { fontStyle: 'normal', fontWeight: '400', - lineHeight: 24, }, }) @@ -230,11 +229,19 @@ const RawButton = memo( ({ pressed }: PressableStateCallbackType) => StyleSheet.flatten([ styles.baseText, + { lineHeight: buttonSizeVariant.lineHeight }, pressed ? hoverColorStyle : defaultColorStyle, disabled && disabledColorStyle, textStyle, ]), - [hoverColorStyle, defaultColorStyle, disabled, disabledColorStyle, textStyle] + [ + buttonSizeVariant.lineHeight, + hoverColorStyle, + defaultColorStyle, + disabled, + disabledColorStyle, + textStyle, + ] ) const iconElement = useCallback( diff --git a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap index 8acaea4b..d2e6dd04 100644 --- a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap +++ b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap @@ -73,7 +73,7 @@ exports[`Button renders correctly 1`] = ` "fontSize": 14, "fontStyle": "normal", "fontWeight": "400", - "lineHeight": 21, + "lineHeight": 20, "textAlign": "center", "textTransform": "none", } diff --git a/src/design-system/config/buttonVariants.ts b/src/design-system/config/buttonVariants.ts index 384547b5..9e40077e 100644 --- a/src/design-system/config/buttonVariants.ts +++ b/src/design-system/config/buttonVariants.ts @@ -257,6 +257,7 @@ type SizeStyle = { paddingVertical: number iconGap: number iconSize: number + lineHeight: number } export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = { @@ -266,6 +267,7 @@ export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = { paddingVertical: 8, iconGap: 4, iconSize: 20, + lineHeight: 20, }, md: { textVariant: 'SmSemibold', @@ -273,6 +275,7 @@ export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = { paddingVertical: 10, iconGap: 4, iconSize: 20, + lineHeight: 20, }, lg: { textVariant: 'MdSemibold', @@ -280,6 +283,7 @@ export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = { paddingVertical: 12, iconGap: 6, iconSize: 20, + lineHeight: 24, }, xl: { textVariant: 'MdSemibold', @@ -287,6 +291,7 @@ export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = { paddingVertical: 16, iconGap: 6, iconSize: 20, + lineHeight: 24, }, xxl: { textVariant: 'LgSemibold', @@ -294,6 +299,7 @@ export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = { paddingVertical: 18, iconGap: 10, iconSize: 24, + lineHeight: 28, }, } as const From 010f9fc1960a2d2e229b9664aff8d09f3e862ce1 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 19 Apr 2024 13:52:05 +0200 Subject: [PATCH 5/5] chore: remove console.log --- .../SocialButtons/AppleButton/AppleButton.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx b/src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx index 62622e3e..8cd268a6 100644 --- a/src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx +++ b/src/components/molecules/SocialButtons/AppleButton/AppleButton.tsx @@ -36,19 +36,6 @@ export const AppleButton: FC = ({ isDisabled, setIsDisabled }) ], }) - console.log( - JSON.stringify( - { - data: { - idToken: appleResponse.identityToken!, - firstName: appleResponse.fullName?.givenName || '', - lastName: appleResponse.fullName?.familyName || '', - }, - }, - null, - 2 - ) - ) signInApple( { data: {