From 16e27f2f45643415c163a4d37400f3032bdcbe7f Mon Sep 17 00:00:00 2001
From: Paul Schreiber <paul@techmatters.org>
Date: Mon, 16 Oct 2023 16:02:35 -0400
Subject: [PATCH] fix: update login screen to match new design

- color Google and MS logos
- order is Google MS Apple
---
 src/account/components/AccountLogin.js | 32 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/account/components/AccountLogin.js b/src/account/components/AccountLogin.js
index 55d84f8aed..c6273e888b 100644
--- a/src/account/components/AccountLogin.js
+++ b/src/account/components/AccountLogin.js
@@ -22,7 +22,6 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { fetchAuthURLs } from 'terraso-client-shared/account/accountSlice';
 import { useFetchData } from 'terraso-client-shared/store/utils';
 import AppleIcon from '@mui/icons-material/Apple';
-import GoogleIcon from '@mui/icons-material/Google';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -33,6 +32,7 @@ import PageLoader from 'layout/PageLoader';
 import LocalePicker from 'localization/components/LocalePicker';
 import { useAnalytics } from 'monitoring/analytics';
 
+import { ReactComponent as GoogleSvg } from 'assets/google.svg';
 import logo from 'assets/logo.svg';
 import { ReactComponent as MicrosoftSvg } from 'assets/microsoft.svg';
 
@@ -41,6 +41,10 @@ const MicrosoftIcon = props => {
   return <SvgIcon component={MicrosoftSvg} {...props} />;
 };
 
+const GoogleIcon = props => {
+  return <SvgIcon component={GoogleSvg} {...props} />;
+};
+
 const appendReferrer = (url, referrer) => {
   if (!referrer) {
     return url;
@@ -132,19 +136,6 @@ const AccountForm = () => {
             </Button>
           )}
 
-          {urls.apple && (
-            <Button
-              variant="outlined"
-              startIcon={<AppleIcon sx={{ paddingRight: '5px' }} />}
-              href={appendReferrer(urls.apple, referrer)}
-              onClick={() =>
-                trackEvent('user.login', { props: { source: 'apple' } })
-              }
-            >
-              {t('account.apple_login')}
-            </Button>
-          )}
-
           {urls.microsoft && (
             <Button
               variant="outlined"
@@ -161,6 +152,19 @@ const AccountForm = () => {
               {t('account.microsoft_login')}
             </Button>
           )}
+
+          {urls.apple && (
+            <Button
+              variant="outlined"
+              startIcon={<AppleIcon sx={{ paddingRight: '5px' }} />}
+              href={appendReferrer(urls.apple, referrer)}
+              onClick={() =>
+                trackEvent('user.login', { props: { source: 'apple' } })
+              }
+            >
+              {t('account.apple_login')}
+            </Button>
+          )}
         </Stack>
 
         <Typography sx={{ mb: 4 }}>