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')}
+ +{t('fromPalisadoes')}
+