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

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 && (
           <>
             <MainButton
-              Icon={() => (
+              Icon={() => <IconGoogle size={theme.icon.size.lg} />}
-                <IconBrandGoogle
-                  size={theme.icon.size.md}
-                  stroke={theme.icon.stroke.lg}
-                />
-              )}
               title="Continue with Google"
               onClick={signInWithGoogle}
               fullWidth

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 <IconGoogleRaw height={size} width={size} />;
+};