diff --git a/src/assets/svgs/social-icons/Facebook-Logo.svg b/src/assets/svgs/social-icons/Facebook-Logo.svg new file mode 100644 index 0000000000..a70f112dc7 --- /dev/null +++ b/src/assets/svgs/social-icons/Facebook-Logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/social-icons/Github-Logo.svg b/src/assets/svgs/social-icons/Github-Logo.svg new file mode 100644 index 0000000000..7679af859c --- /dev/null +++ b/src/assets/svgs/social-icons/Github-Logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/social-icons/Instagram-Logo.svg b/src/assets/svgs/social-icons/Instagram-Logo.svg new file mode 100644 index 0000000000..cbf278ae75 --- /dev/null +++ b/src/assets/svgs/social-icons/Instagram-Logo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/social-icons/Linkedin-Logo.svg b/src/assets/svgs/social-icons/Linkedin-Logo.svg new file mode 100644 index 0000000000..998dd1b826 --- /dev/null +++ b/src/assets/svgs/social-icons/Linkedin-Logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/social-icons/Reddit-Logo.svg b/src/assets/svgs/social-icons/Reddit-Logo.svg new file mode 100644 index 0000000000..8111415030 --- /dev/null +++ b/src/assets/svgs/social-icons/Reddit-Logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/svgs/social-icons/Slack-Logo.svg b/src/assets/svgs/social-icons/Slack-Logo.svg new file mode 100644 index 0000000000..29a9087d21 --- /dev/null +++ b/src/assets/svgs/social-icons/Slack-Logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/svgs/social-icons/Twitter-Logo.svg b/src/assets/svgs/social-icons/Twitter-Logo.svg new file mode 100644 index 0000000000..efa659339d --- /dev/null +++ b/src/assets/svgs/social-icons/Twitter-Logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/social-icons/Youtube-Logo.svg b/src/assets/svgs/social-icons/Youtube-Logo.svg new file mode 100644 index 0000000000..112b9c2d3b --- /dev/null +++ b/src/assets/svgs/social-icons/Youtube-Logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/social-icons/index.tsx b/src/assets/svgs/social-icons/index.tsx new file mode 100644 index 0000000000..d698fc1376 --- /dev/null +++ b/src/assets/svgs/social-icons/index.tsx @@ -0,0 +1,17 @@ +import FacebookLogo from './Facebook-Logo.svg'; +import GithubLogo from './Github-Logo.svg'; +import InstagramLogo from './Instagram-Logo.svg'; +import LinkedInLogo from './Linkedin-Logo.svg'; +import SlackLogo from './Slack-Logo.svg'; +import TwitterLogo from './Twitter-Logo.svg'; +import YoutubeLogo from './Youtube-Logo.svg'; + +export { + FacebookLogo, + GithubLogo, + InstagramLogo, + LinkedInLogo, + SlackLogo, + TwitterLogo, + YoutubeLogo, +}; diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css index 8e8e314ba9..02cd04032a 100644 --- a/src/screens/LoginPage/LoginPage.module.css +++ b/src/screens/LoginPage/LoginPage.module.css @@ -102,6 +102,10 @@ margin-bottom: 0; padding: 1rem; } + + .socialIcons { + margin-bottom: 1rem; + } } @media (max-width: 577px) { @@ -124,6 +128,10 @@ height: 120px; margin: 0 auto 2rem auto; } + + .socialIcons { + margin-bottom: 1rem; + } } .active_tab { @@ -186,3 +194,9 @@ transform: translateY(0); } } + +.socialIcons { + display: flex; + gap: 16px; + justify-content: center; +} diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx index f8f89a3871..44afdbacb9 100644 --- a/src/screens/LoginPage/LoginPage.tsx +++ b/src/screens/LoginPage/LoginPage.tsx @@ -10,6 +10,16 @@ import { useTranslation } from 'react-i18next'; import { Link, useHistory } from 'react-router-dom'; import { toast } from 'react-toastify'; +import { + FacebookLogo, + LinkedInLogo, + GithubLogo, + InstagramLogo, + SlackLogo, + TwitterLogo, + YoutubeLogo, +} from 'assets/svgs/social-icons'; + import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant'; import { LOGIN_MUTATION, @@ -226,6 +236,58 @@ function loginPage(): JSX.Element {

{t('fromPalisadoes')}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css index 840ceb8a0b..32858723ef 100644 --- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css +++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css @@ -45,4 +45,14 @@ body::before { .leftPane { width: 100%; } + + .socialIcons { + margin-bottom: 1rem; + } +} + +.socialIcons { + display: flex; + gap: 16px; + justify-content: center; } diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx index ca4915d691..559d088a9e 100644 --- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx +++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx @@ -8,6 +8,16 @@ import Login from 'components/UserPortal/Login/Login'; import Register from 'components/UserPortal/Register/Register'; import styles from './UserLoginPage.module.css'; +import { + FacebookLogo, + LinkedInLogo, + GithubLogo, + InstagramLogo, + SlackLogo, + TwitterLogo, + YoutubeLogo, +} from 'assets/svgs/social-icons'; + export default function userLoginPage(): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'loginPage' }); @@ -27,6 +37,57 @@ export default function userLoginPage(): JSX.Element {

{t('fromPalisadoes')}

+
+ + + + + + + + + + + + + + + + + + + + + +