From 0395ea077d4b9c95a9b22e29261200b2560317a8 Mon Sep 17 00:00:00 2001 From: Anchit Sinha Date: Tue, 28 Nov 2023 23:05:13 +0530 Subject: [PATCH] 2694-fix(front): Replace "Continue with Google" monochrome logo by colourful logo (#2724) * Replaced Google mono logo with colourful logo * Removed stroke and increased size of logo to 20 * Changed default size of Google Icon to 20 * added default value for size from theme --- .../auth/sign-in-up/components/SignInUpForm.tsx | 9 ++------- .../modules/ui/display/icon/assets/google-icon.svg | 9 +++++++++ .../ui/display/icon/components/IconGoogle.tsx | 14 ++++++++++++++ 3 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 front/src/modules/ui/display/icon/assets/google-icon.svg create mode 100644 front/src/modules/ui/display/icon/components/IconGoogle.tsx diff --git a/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 335d663c0..b249b61a0 100644 --- a/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -4,7 +4,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; -import { IconBrandGoogle } from '@/ui/display/icon'; +import { IconGoogle } from '@/ui/display/icon/components/IconGoogle'; import { MainButton } from '@/ui/input/button/components/MainButton'; import { TextInput } from '@/ui/input/components/TextInput'; import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; @@ -95,12 +95,7 @@ export const SignInUpForm = () => { {authProviders.google && ( <> ( - - )} + Icon={() => } title="Continue with Google" onClick={signInWithGoogle} fullWidth diff --git a/front/src/modules/ui/display/icon/assets/google-icon.svg b/front/src/modules/ui/display/icon/assets/google-icon.svg new file mode 100644 index 000000000..5166126ca --- /dev/null +++ b/front/src/modules/ui/display/icon/assets/google-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/front/src/modules/ui/display/icon/components/IconGoogle.tsx b/front/src/modules/ui/display/icon/components/IconGoogle.tsx new file mode 100644 index 000000000..59ef4899b --- /dev/null +++ b/front/src/modules/ui/display/icon/components/IconGoogle.tsx @@ -0,0 +1,14 @@ +import { useTheme } from '@emotion/react'; + +import { ReactComponent as IconGoogleRaw } from '../assets/google-icon.svg'; + +interface IconGoogleProps { + size?: number; +} + +export const IconGoogle = (props: IconGoogleProps): JSX.Element => { + const theme = useTheme(); + const size = props.size ?? theme.icon.size.lg; + + return ; +};