From 8def66f53e5b8ae1f745ad418ca4e0b8e47b6381 Mon Sep 17 00:00:00 2001
From: aialok <alokgupta1560@gmail.com>
Date: Sun, 31 Dec 2023 00:49:41 +0530
Subject: [PATCH 1/5] Feature: Social Icons Integration on Login and Signup
 Page

---
 INSTALLATION.md                               |  5 +-
 src/screens/LoginPage/LoginPage.module.css    | 21 +++++++
 src/screens/LoginPage/LoginPage.tsx           | 55 +++++++++++++++++++
 .../UserLoginPage/UserLoginPage.module.css    | 17 ++++++
 .../UserLoginPage/UserLoginPage.tsx           | 52 ++++++++++++++++++
 5 files changed, 148 insertions(+), 2 deletions(-)

diff --git a/INSTALLATION.md b/INSTALLATION.md
index 1a7028dfab..a628a75d28 100644
--- a/INSTALLATION.md
+++ b/INSTALLATION.md
@@ -10,6 +10,7 @@ This document provides instructions on how to set up and start a running instanc
 - [Installation](#installation)
   - [Setting up this repository](#setting-up-this-repository)
   - [Setting up npm](#setting-up-npm)
+  - [Setting up Typescript](#setting-up-typescript)
   - [Installing required packages/dependencies](#installing-required-packagesdependencies)
 - [Configuration](#configuration)
   - [Creating .env file](#creating-env-file)
@@ -25,8 +26,8 @@ This document provides instructions on how to set up and start a running instanc
   - [Debugging tests](#debugging-tests)
   - [Linting code files](#linting-code-files)
   - [Husky for Git Hooks](#husky-for-git-hooks)
-    - [pre-commit hook](#pre-commit-hook)
-    - [post-merge hook](#post-merge-hook)
+      - [pre-commit hook](#pre-commit-hook)
+      - [post-merge hook](#post-merge-hook)
 
 <!-- tocstop -->
 
diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
index 8e8e314ba9..968ecc9ec2 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,16 @@
     transform: translateY(0);
   }
 }
+
+.socialIcons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.socialIcon {
+  font-size: 24px;
+  color: #555;
+  transition: color 0.3s ease;
+  cursor: pointer;
+}
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index b81b9c809c..2e1c6c71b3 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -9,6 +9,13 @@ import ReCAPTCHA from 'react-google-recaptcha';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
+import {
+  FaFacebook,
+  FaTwitter,
+  FaLinkedin,
+  FaGithub,
+  FaYoutube,
+} from 'react-icons/fa';
 
 import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant';
 import {
@@ -223,6 +230,54 @@ function loginPage(): JSX.Element {
               <PalisadoesLogo className={styles.palisadoes_logo} />
               <p className="text-center">{t('fromPalisadoes')}</p>
             </div>
+
+            <div className={styles.socialIcons}>
+              <a
+                href="https://twitter.com/palisadoesorg?lang=en"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaTwitter
+                  className={`${styles.socialIcon} ${styles.twitterIcon}`}
+                />
+              </a>
+              <a
+                href="https://www.facebook.com/palisadoesproject"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaFacebook
+                  className={`${styles.socialIcon} ${styles.facebookIcon}`}
+                />
+              </a>
+              <a
+                href="https://www.linkedin.com/company/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaLinkedin
+                  className={`${styles.socialIcon} ${styles.linkedinIcon}`}
+                />
+              </a>
+              <a
+                href="https://github.com/PalisadoesFoundation"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaGithub
+                  className={`${styles.socialIcon} ${styles.githubIcon}`}
+                />
+              </a>
+              <a
+                href="https://www.youtube.com/@PalisadoesOrganization"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaYoutube
+                  className={`${styles.socialIcon} ${styles.youtubeIcon}`}
+                />
+              </a>
+            </div>
           </Col>
           <Col sm={12} md={6} lg={5}>
             <div className={styles.right_portion}>
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
index 840ceb8a0b..aec437e006 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
@@ -45,4 +45,21 @@ body::before {
   .leftPane {
     width: 100%;
   }
+
+  .socialIcons {
+    margin-bottom: 1rem;
+  }
+}
+
+.socialIcons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.socialIcon {
+  font-size: 24px;
+  color: #555;
+  transition: color 0.3s ease;
+  cursor: pointer;
 }
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
index ca4915d691..9117b7d020 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
@@ -7,6 +7,13 @@ import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLang
 import Login from 'components/UserPortal/Login/Login';
 import Register from 'components/UserPortal/Register/Register';
 import styles from './UserLoginPage.module.css';
+import {
+  FaFacebook,
+  FaTwitter,
+  FaLinkedin,
+  FaGithub,
+  FaYoutube,
+} from 'react-icons/fa';
 
 export default function userLoginPage(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
@@ -27,6 +34,51 @@ export default function userLoginPage(): JSX.Element {
         <h6 style={{ textAlign: `center` }}>
           <p>{t('fromPalisadoes')}</p>
         </h6>
+        <div className={styles.socialIcons}>
+          <a
+            href="https://twitter.com/palisadoesorg?lang=en"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaTwitter
+              className={`${styles.socialIcon} ${styles.twitterIcon}`}
+            />
+          </a>
+          <a
+            href="https://www.facebook.com/palisadoesproject"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaFacebook
+              className={`${styles.socialIcon} ${styles.facebookIcon}`}
+            />
+          </a>
+          <a
+            href="https://www.linkedin.com/company/palisadoes/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaLinkedin
+              className={`${styles.socialIcon} ${styles.linkedinIcon}`}
+            />
+          </a>
+          <a
+            href="https://github.com/PalisadoesFoundation"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaGithub className={`${styles.socialIcon} ${styles.githubIcon}`} />
+          </a>
+          <a
+            href="https://www.youtube.com/@PalisadoesOrganization"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaYoutube
+              className={`${styles.socialIcon} ${styles.youtubeIcon}`}
+            />
+          </a>
+        </div>
       </div>
       <div className={`${styles.contentContainer} py-5`}>
         <ChangeLanguageDropDown parentContainerStyle="m-0" />

From 352ed377bf4a5dbeb3785e7ebf5bba75841002fb Mon Sep 17 00:00:00 2001
From: aialok <alokgupta1560@gmail.com>
Date: Sun, 31 Dec 2023 14:11:06 +0530
Subject: [PATCH 2/5] Changes social icons color

---
 src/screens/LoginPage/LoginPage.module.css    | 24 ++++++++++++++++---
 src/screens/LoginPage/LoginPage.tsx           | 12 +++++-----
 .../UserLoginPage/UserLoginPage.module.css    | 24 ++++++++++++++++---
 .../UserLoginPage/UserLoginPage.tsx           | 12 +++++-----
 4 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
index 968ecc9ec2..60f213cbac 100644
--- a/src/screens/LoginPage/LoginPage.module.css
+++ b/src/screens/LoginPage/LoginPage.module.css
@@ -202,8 +202,26 @@
 }
 
 .socialIcon {
-  font-size: 24px;
-  color: #555;
-  transition: color 0.3s ease;
+  font-size: 30px;
   cursor: pointer;
 }
+
+.twitterIcon {
+  color: #1da1f2;
+}
+
+.facebookIcon {
+  color: #1877f2;
+}
+
+.linkedinIcon {
+  color: #0a66c2;
+}
+
+.githubIcon {
+  color: #211f1f;
+}
+
+.youtubeIcon {
+  color: #ff0000;
+}
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index 2e1c6c71b3..e7286adbf9 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -233,21 +233,21 @@ function loginPage(): JSX.Element {
 
             <div className={styles.socialIcons}>
               <a
-                href="https://twitter.com/palisadoesorg?lang=en"
+                href="https://www.facebook.com/palisadoesproject"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaTwitter
-                  className={`${styles.socialIcon} ${styles.twitterIcon}`}
+                <FaFacebook
+                  className={`${styles.socialIcon} ${styles.facebookIcon}`}
                 />
               </a>
               <a
-                href="https://www.facebook.com/palisadoesproject"
+                href="https://twitter.com/palisadoesorg?lang=en"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaFacebook
-                  className={`${styles.socialIcon} ${styles.facebookIcon}`}
+                <FaTwitter
+                  className={`${styles.socialIcon} ${styles.twitterIcon}`}
                 />
               </a>
               <a
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
index aec437e006..27ef4d5d78 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
@@ -58,8 +58,26 @@ body::before {
 }
 
 .socialIcon {
-  font-size: 24px;
-  color: #555;
-  transition: color 0.3s ease;
+  font-size: 30px;
   cursor: pointer;
 }
+
+.twitterIcon {
+  color: #1da1f2;
+}
+
+.facebookIcon {
+  color: #1877f2;
+}
+
+.linkedinIcon {
+  color: #0a66c2;
+}
+
+.githubIcon {
+  color: #211f1f;
+}
+
+.youtubeIcon {
+  color: #ff0000;
+}
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
index 9117b7d020..b5f695784b 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
@@ -36,21 +36,21 @@ export default function userLoginPage(): JSX.Element {
         </h6>
         <div className={styles.socialIcons}>
           <a
-            href="https://twitter.com/palisadoesorg?lang=en"
+            href="https://www.facebook.com/palisadoesproject"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaTwitter
-              className={`${styles.socialIcon} ${styles.twitterIcon}`}
+            <FaFacebook
+              className={`${styles.socialIcon} ${styles.facebookIcon}`}
             />
           </a>
           <a
-            href="https://www.facebook.com/palisadoesproject"
+            href="https://twitter.com/palisadoesorg?lang=en"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaFacebook
-              className={`${styles.socialIcon} ${styles.facebookIcon}`}
+            <FaTwitter
+              className={`${styles.socialIcon} ${styles.twitterIcon}`}
             />
           </a>
           <a

From 400faa55d0484b476e0fdf46d55c83469db267b6 Mon Sep 17 00:00:00 2001
From: aialok <alokgupta1560@gmail.com>
Date: Mon, 1 Jan 2024 01:04:51 +0530
Subject: [PATCH 3/5] Added Instagram and Slack Icon

---
 src/assets/svgs/Slack-mark.svg                | 35 +++++++++++++++++++
 src/screens/LoginPage/LoginPage.module.css    |  9 +++++
 src/screens/LoginPage/LoginPage.tsx           | 24 +++++++++++--
 .../UserLoginPage/UserLoginPage.module.css    | 11 +++++-
 .../UserLoginPage/UserLoginPage.tsx           | 22 ++++++++++--
 5 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/svgs/Slack-mark.svg

diff --git a/src/assets/svgs/Slack-mark.svg b/src/assets/svgs/Slack-mark.svg
new file mode 100644
index 0000000000..cb36bb990a
--- /dev/null
+++ b/src/assets/svgs/Slack-mark.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 270 270" style="enable-background:new 0 0 270 270; " xml:space="preserve"
+	 transform="scale(2)"
+	 >
+<style type="text/css">
+	.st0{fill:#E01E5A;}
+	.st1{fill:#36C5F0;}
+	.st2{fill:#2EB67D;}
+	.st3{fill:#ECB22E;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
+		<path class="st0" d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9
+			s-12.9-5.8-12.9-12.9V151.2z"/>
+	</g>
+	<g>
+		<path class="st1" d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
+		<path class="st1" d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9
+			s5.8-12.9,12.9-12.9H118.8z"/>
+	</g>
+	<g>
+		<path class="st2" d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
+		<path class="st2" d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
+			c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
+	</g>
+	<g>
+		<path class="st3" d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
+		<path class="st3" d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
+			c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
index 60f213cbac..cf923627a3 100644
--- a/src/screens/LoginPage/LoginPage.module.css
+++ b/src/screens/LoginPage/LoginPage.module.css
@@ -225,3 +225,12 @@
 .youtubeIcon {
   color: #ff0000;
 }
+
+.slackIcon {
+  width: 30px;
+  height: 30px;
+}
+
+.instagramIcon {
+  color: #e4405f;
+}
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index e7286adbf9..a4b290a7b6 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -11,11 +11,12 @@ import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import {
   FaFacebook,
-  FaTwitter,
   FaLinkedin,
   FaGithub,
   FaYoutube,
+  FaInstagram,
 } from 'react-icons/fa';
+import { FaXTwitter } from 'react-icons/fa6';
 
 import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant';
 import {
@@ -25,6 +26,7 @@ import {
 } from 'GraphQl/Mutations/mutations';
 import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import { ReactComponent as PalisadoesLogo } from 'assets/svgs/palisadoes.svg';
+import { ReactComponent as SlackLogo } from 'assets/svgs/Slack-mark.svg';
 import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
 import Loader from 'components/Loader/Loader';
 import { errorHandler } from 'utils/errorHandler';
@@ -246,7 +248,7 @@ function loginPage(): JSX.Element {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaTwitter
+                <FaXTwitter
                   className={`${styles.socialIcon} ${styles.twitterIcon}`}
                 />
               </a>
@@ -277,6 +279,24 @@ function loginPage(): JSX.Element {
                   className={`${styles.socialIcon} ${styles.youtubeIcon}`}
                 />
               </a>
+              <a
+                href="https://join.slack.com/t/thepalisadoes-dyb6419/shared_invite/zt-29oltereu-qJ931LcKxswuCAy29iA9WA"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <SlackLogo
+                  className={`${styles.socialIcon} ${styles.slackIcon}`}
+                />
+              </a>
+              <a
+                href="https://www.instagram.com/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaInstagram
+                  className={`${styles.socialIcon} ${styles.instagramIcon}`}
+                />
+              </a>
             </div>
           </Col>
           <Col sm={12} md={6} lg={5}>
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
index 27ef4d5d78..db36a01b2e 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
@@ -63,7 +63,7 @@ body::before {
 }
 
 .twitterIcon {
-  color: #1da1f2;
+  color: #000000;
 }
 
 .facebookIcon {
@@ -81,3 +81,12 @@ body::before {
 .youtubeIcon {
   color: #ff0000;
 }
+
+.slackIcon {
+  width: 30px;
+  height: 30px;
+}
+
+.instagramIcon {
+  color: #e4405f;
+}
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
index b5f695784b..ff9c0b8f62 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
@@ -7,13 +7,15 @@ import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLang
 import Login from 'components/UserPortal/Login/Login';
 import Register from 'components/UserPortal/Register/Register';
 import styles from './UserLoginPage.module.css';
+import { ReactComponent as SlackLogo } from '../../../assets/svgs/Slack-mark.svg';
 import {
   FaFacebook,
-  FaTwitter,
   FaLinkedin,
   FaGithub,
   FaYoutube,
+  FaInstagram,
 } from 'react-icons/fa';
+import { FaXTwitter } from 'react-icons/fa6';
 
 export default function userLoginPage(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
@@ -49,7 +51,7 @@ export default function userLoginPage(): JSX.Element {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaTwitter
+            <FaXTwitter
               className={`${styles.socialIcon} ${styles.twitterIcon}`}
             />
           </a>
@@ -78,6 +80,22 @@ export default function userLoginPage(): JSX.Element {
               className={`${styles.socialIcon} ${styles.youtubeIcon}`}
             />
           </a>
+          <a
+            href="https://join.slack.com/t/thepalisadoes-dyb6419/shared_invite/zt-29oltereu-qJ931LcKxswuCAy29iA9WA"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <SlackLogo className={`${styles.socialIcon} ${styles.slackIcon}`} />
+          </a>
+          <a
+            href="https://www.instagram.com/palisadoes/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaInstagram
+              className={`${styles.socialIcon} ${styles.instagramIcon}`}
+            />
+          </a>
         </div>
       </div>
       <div className={`${styles.contentContainer} py-5`}>

From 0ae9d688b7111ace65446bbbda3e912d2efd9d88 Mon Sep 17 00:00:00 2001
From: aialok <alokgupta1560@gmail.com>
Date: Mon, 1 Jan 2024 01:13:28 +0530
Subject: [PATCH 4/5] Fixes Color of Twitter Icon

---
 src/screens/LoginPage/LoginPage.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
index cf923627a3..0ddc086f44 100644
--- a/src/screens/LoginPage/LoginPage.module.css
+++ b/src/screens/LoginPage/LoginPage.module.css
@@ -207,7 +207,7 @@
 }
 
 .twitterIcon {
-  color: #1da1f2;
+  color: #000000;
 }
 
 .facebookIcon {

From b18592e2475f48ca5974e5b63d40cb63dd095fe6 Mon Sep 17 00:00:00 2001
From: aialok <alokgupta1560@gmail.com>
Date: Tue, 2 Jan 2024 16:17:55 +0530
Subject: [PATCH 5/5] Added Social Icons from figma design

---
 src/assets/svgs/Slack-mark.svg                | 35 --------------
 .../svgs/social-icons/Facebook-Logo.svg       |  4 ++
 src/assets/svgs/social-icons/Github-Logo.svg  |  4 ++
 .../svgs/social-icons/Instagram-Logo.svg      | 23 +++++++++
 .../svgs/social-icons/Linkedin-Logo.svg       |  4 ++
 src/assets/svgs/social-icons/Reddit-Logo.svg  | 11 +++++
 src/assets/svgs/social-icons/Slack-Logo.svg   | 14 ++++++
 src/assets/svgs/social-icons/Twitter-Logo.svg |  4 ++
 src/assets/svgs/social-icons/Youtube-Logo.svg |  4 ++
 src/assets/svgs/social-icons/index.tsx        | 17 +++++++
 src/screens/LoginPage/LoginPage.module.css    | 34 --------------
 src/screens/LoginPage/LoginPage.tsx           | 47 +++++++------------
 .../UserLoginPage/UserLoginPage.module.css    | 34 --------------
 .../UserLoginPage/UserLoginPage.tsx           | 43 +++++++----------
 14 files changed, 119 insertions(+), 159 deletions(-)
 delete mode 100644 src/assets/svgs/Slack-mark.svg
 create mode 100644 src/assets/svgs/social-icons/Facebook-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/Github-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/Instagram-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/Linkedin-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/Reddit-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/Slack-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/Twitter-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/Youtube-Logo.svg
 create mode 100644 src/assets/svgs/social-icons/index.tsx

diff --git a/src/assets/svgs/Slack-mark.svg b/src/assets/svgs/Slack-mark.svg
deleted file mode 100644
index cb36bb990a..0000000000
--- a/src/assets/svgs/Slack-mark.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 270 270" style="enable-background:new 0 0 270 270; " xml:space="preserve"
-	 transform="scale(2)"
-	 >
-<style type="text/css">
-	.st0{fill:#E01E5A;}
-	.st1{fill:#36C5F0;}
-	.st2{fill:#2EB67D;}
-	.st3{fill:#ECB22E;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
-		<path class="st0" d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9
-			s-12.9-5.8-12.9-12.9V151.2z"/>
-	</g>
-	<g>
-		<path class="st1" d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
-		<path class="st1" d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9
-			s5.8-12.9,12.9-12.9H118.8z"/>
-	</g>
-	<g>
-		<path class="st2" d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
-		<path class="st2" d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
-			c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
-	</g>
-	<g>
-		<path class="st3" d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
-		<path class="st3" d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
-			c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
-	</g>
-</g>
-</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#1778F2"/>
+<path d="M28 18C28 12.48 23.52 8 18 8C12.48 8 8 12.48 8 18C8 22.84 11.44 26.87 16 27.8V21H14V18H16V15.5C16 13.57 17.57 12 19.5 12H22V15H20C19.45 15 19 15.45 19 16V18H22V21H19V27.95C24.05 27.45 28 23.19 28 18Z" fill="white"/>
+</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#24292D"/>
+<path d="M18 8C16.6868 8 15.3864 8.25866 14.1732 8.7612C12.9599 9.26375 11.8575 10.0003 10.9289 10.9289C9.05357 12.8043 8 15.3478 8 18C8 22.42 10.87 26.17 14.84 27.5C15.34 27.58 15.5 27.27 15.5 27V25.31C12.73 25.91 12.14 23.97 12.14 23.97C11.68 22.81 11.03 22.5 11.03 22.5C10.12 21.88 11.1 21.9 11.1 21.9C12.1 21.97 12.63 22.93 12.63 22.93C13.5 24.45 14.97 24 15.54 23.76C15.63 23.11 15.89 22.67 16.17 22.42C13.95 22.17 11.62 21.31 11.62 17.5C11.62 16.39 12 15.5 12.65 14.79C12.55 14.54 12.2 13.5 12.75 12.15C12.75 12.15 13.59 11.88 15.5 13.17C16.29 12.95 17.15 12.84 18 12.84C18.85 12.84 19.71 12.95 20.5 13.17C22.41 11.88 23.25 12.15 23.25 12.15C23.8 13.5 23.45 14.54 23.35 14.79C24 15.5 24.38 16.39 24.38 17.5C24.38 21.32 22.04 22.16 19.81 22.41C20.17 22.72 20.5 23.33 20.5 24.26V27C20.5 27.27 20.66 27.59 21.17 27.5C25.14 26.16 28 22.42 28 18C28 16.6868 27.7413 15.3864 27.2388 14.1732C26.7362 12.9599 25.9997 11.8575 25.0711 10.9289C24.1425 10.0003 23.0401 9.26375 21.8268 8.7612C20.6136 8.25866 19.3132 8 18 8Z" fill="white"/>
+</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_921_2571)">
+<path d="M27.5625 0H8.4375C3.7776 0 0 3.7776 0 8.4375V27.5625C0 32.2224 3.7776 36 8.4375 36H27.5625C32.2224 36 36 32.2224 36 27.5625V8.4375C36 3.7776 32.2224 0 27.5625 0Z" fill="url(#paint0_radial_921_2571)"/>
+<path d="M27.5625 0H8.4375C3.7776 0 0 3.7776 0 8.4375V27.5625C0 32.2224 3.7776 36 8.4375 36H27.5625C32.2224 36 36 32.2224 36 27.5625V8.4375C36 3.7776 32.2224 0 27.5625 0Z" fill="url(#paint1_radial_921_2571)"/>
+<path d="M18.001 7C15.0136 7 14.6386 7.01309 13.4654 7.06644C12.2943 7.12012 11.4949 7.30547 10.7956 7.57749C10.072 7.85843 9.45828 8.2343 8.8469 8.84589C8.23497 9.45738 7.8591 10.0711 7.57728 10.7943C7.30448 11.4939 7.11891 12.2936 7.06622 13.4641C7.01375 14.6374 7 15.0125 7 18C7 20.9875 7.0132 21.3612 7.06644 22.5345C7.12034 23.7055 7.30569 24.5049 7.5775 25.2043C7.85866 25.9278 8.23453 26.5415 8.84613 27.1529C9.4574 27.7648 10.0711 28.1416 10.7941 28.4225C11.4941 28.6945 12.2935 28.8799 13.4644 28.9336C14.6377 28.9869 15.0124 29 17.9997 29C20.9874 29 21.3612 28.9869 22.5344 28.9336C23.7055 28.8799 24.5057 28.6945 25.2057 28.4225C25.9289 28.1416 26.5417 27.7648 27.1529 27.1529C27.7648 26.5415 28.1406 25.9278 28.4225 25.2046C28.6929 24.5049 28.8786 23.7053 28.9336 22.5347C28.9862 21.3615 29 20.9875 29 18C29 15.0125 28.9862 14.6377 28.9336 13.4643C28.8786 12.2933 28.6929 11.494 28.4225 10.7946C28.1406 10.0711 27.7648 9.45738 27.1529 8.84589C26.5411 8.23408 25.9291 7.85821 25.205 7.5776C24.5037 7.30547 23.7039 7.12001 22.5329 7.06644C21.3595 7.01309 20.9859 7 17.9976 7H18.001ZM17.0142 8.98091C17.0142 8.98167 17.0148 8.98229 17.0156 8.98229C17.3081 8.98185 17.6345 8.98229 18.001 8.98229C20.9381 8.98229 21.2861 8.99285 22.446 9.04554C23.5185 9.0946 24.1006 9.27379 24.4883 9.42438C25.0017 9.62369 25.3677 9.86206 25.7525 10.2472C26.1375 10.6322 26.3757 10.9988 26.5756 11.5122C26.7262 11.8994 26.9056 12.4815 26.9544 13.554C27.0071 14.7136 27.0186 15.0618 27.0186 17.9975C27.0186 20.9331 27.0071 21.2815 26.9544 22.441C26.9054 23.5135 26.7262 24.0956 26.5756 24.4829C26.3763 24.9963 26.1375 25.3618 25.7525 25.7466C25.3675 26.1316 25.0019 26.3698 24.4883 26.5692C24.101 26.7205 23.5185 26.8992 22.446 26.9483C21.2864 27.001 20.9381 27.0124 18.001 27.0124C15.0638 27.0124 14.7156 27.001 13.5561 26.9483C12.4836 26.8988 11.9015 26.7196 11.5134 26.569C11.0001 26.3696 10.6334 26.1313 10.2484 25.7463C9.86341 25.3613 9.62515 24.9956 9.42528 24.482C9.27469 24.0947 9.09528 23.5126 9.04644 22.4401C8.99375 21.2805 8.98319 20.9322 8.98319 17.9947C8.98319 15.0573 8.99375 14.7108 9.04644 13.5512C9.0955 12.4787 9.27469 11.8966 9.42528 11.5089C9.62471 10.9955 9.86341 10.6289 10.2485 10.2439C10.6335 9.85887 11.0001 9.6205 11.5135 9.42075C11.9013 9.2695 12.4836 9.09075 13.5561 9.04147C14.5706 8.99561 14.9639 8.98186 17.0128 8.97954C17.0135 8.97954 17.0142 8.98016 17.0142 8.98091ZM23.8728 10.8085C23.8728 10.8086 23.8727 10.8087 23.8726 10.8087C23.1439 10.8088 22.5528 11.3995 22.5528 12.1283C22.5528 12.857 23.144 13.4482 23.8728 13.4482C24.6015 13.4482 25.1928 12.857 25.1928 12.1283C25.1928 11.3996 24.6017 10.8084 23.873 10.8083C23.8729 10.8083 23.8728 10.8084 23.8728 10.8085ZM18.001 12.351C14.8814 12.351 12.352 14.8803 12.352 18C12.352 21.1197 14.8814 23.6478 18.001 23.6478C21.1207 23.6478 23.6492 21.1197 23.6492 18C23.6492 14.8804 21.1205 12.351 18.0008 12.351H18.001ZM18.001 14.3333C20.026 14.3333 21.6677 15.9748 21.6677 18C21.6677 20.025 20.026 21.6667 18.001 21.6667C15.9759 21.6667 14.3344 20.025 14.3344 18C14.3344 15.9748 15.9759 14.3333 18.001 14.3333Z" fill="white"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_921_2571" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.5625 38.7727) rotate(-90) scale(35.6787 33.184)">
+<stop stop-color="#FFDD55"/>
+<stop offset="0.1" stop-color="#FFDD55"/>
+<stop offset="0.5" stop-color="#FF543E"/>
+<stop offset="1" stop-color="#C837AB"/>
+</radialGradient>
+<radialGradient id="paint1_radial_921_2571" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.03014 2.59327) rotate(78.681) scale(15.9486 65.7405)">
+<stop stop-color="#3771C8"/>
+<stop offset="0.128" stop-color="#3771C8"/>
+<stop offset="1" stop-color="#6600FF" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_921_2571">
+<rect width="36" height="36" rx="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#0D66C2"/>
+<path d="M25 9C25.5304 9 26.0391 9.21071 26.4142 9.58579C26.7893 9.96086 27 10.4696 27 11V25C27 25.5304 26.7893 26.0391 26.4142 26.4142C26.0391 26.7893 25.5304 27 25 27H11C10.4696 27 9.96086 26.7893 9.58579 26.4142C9.21071 26.0391 9 25.5304 9 25V11C9 10.4696 9.21071 9.96086 9.58579 9.58579C9.96086 9.21071 10.4696 9 11 9H25ZM24.5 24.5V19.2C24.5 18.3354 24.1565 17.5062 23.5452 16.8948C22.9338 16.2835 22.1046 15.94 21.24 15.94C20.39 15.94 19.4 16.46 18.92 17.24V16.13H16.13V24.5H18.92V19.57C18.92 18.8 19.54 18.17 20.31 18.17C20.6813 18.17 21.0374 18.3175 21.2999 18.5801C21.5625 18.8426 21.71 19.1987 21.71 19.57V24.5H24.5ZM12.88 14.56C13.3256 14.56 13.7529 14.383 14.0679 14.0679C14.383 13.7529 14.56 13.3256 14.56 12.88C14.56 11.95 13.81 11.19 12.88 11.19C12.4318 11.19 12.0019 11.3681 11.685 11.685C11.3681 12.0019 11.19 12.4318 11.19 12.88C11.19 13.81 11.95 14.56 12.88 14.56ZM14.27 24.5V16.13H11.5V24.5H14.27Z" fill="white"/>
+</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_921_2584)">
+<path d="M18 36C27.9411 36 36 27.9411 36 18C36 8.05887 27.9411 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36Z" fill="#FF4500"/>
+<path d="M29.9742 18.1716C29.9742 16.7125 28.7942 15.5536 27.3562 15.5536C26.6769 15.5526 26.0235 15.8141 25.5323 16.2833C23.7298 14.9956 21.2618 14.1589 18.5151 14.0516L19.7166 8.42923L23.6222 9.26595C23.6654 10.2531 24.4806 11.0472 25.4894 11.0472C26.5193 11.0472 27.3562 10.2105 27.3562 9.18003C27.3562 8.15009 26.5195 7.31323 25.4894 7.31323C24.7598 7.31323 24.1158 7.74242 23.8154 8.36483L19.4594 7.44204C19.3306 7.42039 19.2018 7.44205 19.1159 7.50645C19.0086 7.57086 18.9443 7.67801 18.9231 7.80683L17.5922 14.0728C14.8026 14.1589 12.2918 14.9956 10.4679 16.3048C9.97659 15.8356 9.32312 15.5742 8.6438 15.5752C7.18454 15.5752 6.02579 16.7552 6.02579 18.1932C6.02579 19.2661 6.66943 20.1672 7.57098 20.5753C7.52719 20.8377 7.50565 21.1033 7.50657 21.3693C7.50657 25.4032 12.2063 28.6868 18.0001 28.6868C23.7942 28.6868 28.4939 25.4249 28.4939 21.3693C28.4937 21.1033 28.4722 20.8378 28.4295 20.5753C29.3306 20.1672 29.9742 19.2444 29.9742 18.1716ZM11.9914 20.0384C11.9914 19.0084 12.8281 18.1716 13.8586 18.1716C14.8885 18.1716 15.7254 19.0083 15.7254 20.0384C15.7254 21.0685 14.8887 21.9056 13.8586 21.9056C12.8282 21.9267 11.9914 21.0685 11.9914 20.0384ZM22.4422 24.9956C21.1546 26.2833 18.7082 26.3692 18.0001 26.3692C17.2706 26.3692 14.8243 26.2616 13.5578 24.9956C13.365 24.8025 13.365 24.502 13.5578 24.3089C13.751 24.1161 14.0514 24.1161 14.2446 24.3089C15.0602 25.1245 16.777 25.4032 18.0001 25.4032C19.2234 25.4032 20.9614 25.1244 21.7554 24.3089C21.9486 24.1161 22.249 24.1161 22.4422 24.3089C22.6138 24.502 22.6138 24.8025 22.4422 24.9956ZM22.0987 21.9268C21.0686 21.9268 20.2319 21.0901 20.2319 20.06C20.2319 19.03 21.0686 18.1932 22.0987 18.1932C23.129 18.1932 23.9657 19.03 23.9657 20.06C23.9657 21.0683 23.129 21.9268 22.0987 21.9268Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_921_2584">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.15" y="0.15" width="35.7" height="35.7" rx="17.85" fill="white" stroke="#DDDDDD" stroke-width="0.3"/>
+<g clip-path="url(#clip0_957_79)">
+<path d="M12.2586 20.6123C12.2586 21.7576 11.3245 22.6931 10.1791 22.6931C9.03375 22.6931 8.09843 21.7576 8.09843 20.6123C8.09843 19.467 9.0339 18.5316 10.1792 18.5316H12.2587L12.2586 20.6123ZM13.3069 20.6123C13.3069 19.467 14.2423 18.5316 15.3877 18.5316C16.533 18.5316 17.4684 19.4669 17.4684 20.6123V25.8209C17.4684 26.9662 16.5331 27.9017 15.3877 27.9017C14.2423 27.9017 13.3069 26.9662 13.3069 25.8209V20.6123Z" fill="#DE1C59"/>
+<path d="M15.3877 12.2586C14.2423 12.2586 13.3069 11.3245 13.3069 10.1791C13.3069 9.03376 14.2423 8.09845 15.3877 8.09845C16.533 8.09845 17.4684 9.03392 17.4684 10.1792V12.2588L15.3877 12.2586ZM15.3877 13.3069C16.533 13.3069 17.4684 14.2424 17.4684 15.3877C17.4684 16.533 16.5331 17.4684 15.3877 17.4684H10.1791C9.03375 17.4684 8.09843 16.5331 8.09843 15.3877C8.09843 14.2424 9.0339 13.3069 10.1792 13.3069H15.3877Z" fill="#35C5F0"/>
+<path d="M23.7414 15.3877C23.7414 14.2424 24.6755 13.3069 25.8209 13.3069C26.9663 13.3069 27.9017 14.2424 27.9017 15.3877C27.9017 16.533 26.9663 17.4684 25.8209 17.4684H23.7414V15.3877ZM22.6931 15.3877C22.6931 16.533 21.7577 17.4684 20.6123 17.4684C19.467 17.4684 18.5316 16.5331 18.5316 15.3877V10.1791C18.5316 9.03376 19.4669 8.09845 20.6123 8.09845C21.7577 8.09845 22.6931 9.03392 22.6931 10.1792V15.3877Z" fill="#2EB57D"/>
+<path d="M20.6123 23.7414C21.7577 23.7414 22.6931 24.6755 22.6931 25.8209C22.6931 26.9662 21.7577 27.9017 20.6123 27.9017C19.467 27.9017 18.5316 26.9662 18.5316 25.8209V23.7414H20.6123ZM20.6123 22.6931C19.467 22.6931 18.5316 21.7576 18.5316 20.6123C18.5316 19.467 19.4669 18.5316 20.6123 18.5316H25.8209C26.9663 18.5316 27.9017 19.4669 27.9017 20.6123C27.9017 21.7576 26.9663 22.6931 25.8209 22.6931H20.6123Z" fill="#EBB02E"/>
+</g>
+<defs>
+<clipPath id="clip0_957_79">
+<rect width="20" height="20" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="black"/>
+<path d="M19.5067 16.7242L25.4 9.66669H24.0033L18.885 15.7942L14.7983 9.66669H10.0833L16.265 18.9334L10.0833 26.3334H11.48L16.885 19.8625L21.2017 26.3334H25.9167L19.5067 16.7242ZM17.5933 19.0142L16.9667 18.0917L11.9833 10.75H14.1292L18.1508 16.675L18.7767 17.5975L24.0042 25.2992H21.8592L17.5933 19.0142Z" fill="white"/>
+</svg>
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 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#FF0000"/>
+<path d="M16 21L21.19 18L16 15V21ZM27.56 13.17C27.69 13.64 27.78 14.27 27.84 15.07C27.91 15.87 27.94 16.56 27.94 17.16L28 18C28 20.19 27.84 21.8 27.56 22.83C27.31 23.73 26.73 24.31 25.83 24.56C25.36 24.69 24.5 24.78 23.18 24.84C21.88 24.91 20.69 24.94 19.59 24.94L18 25C13.81 25 11.2 24.84 10.17 24.56C9.27 24.31 8.69 23.73 8.44 22.83C8.31 22.36 8.22 21.73 8.16 20.93C8.09 20.13 8.06 19.44 8.06 18.84L8 18C8 15.81 8.16 14.2 8.44 13.17C8.69 12.27 9.27 11.69 10.17 11.44C10.64 11.31 11.5 11.22 12.82 11.16C14.12 11.09 15.31 11.06 16.41 11.06L18 11C22.19 11 24.8 11.16 25.83 11.44C26.73 11.69 27.31 12.27 27.56 13.17Z" fill="white"/>
+</svg>
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 0ddc086f44..02cd04032a 100644
--- a/src/screens/LoginPage/LoginPage.module.css
+++ b/src/screens/LoginPage/LoginPage.module.css
@@ -200,37 +200,3 @@
   gap: 16px;
   justify-content: center;
 }
-
-.socialIcon {
-  font-size: 30px;
-  cursor: pointer;
-}
-
-.twitterIcon {
-  color: #000000;
-}
-
-.facebookIcon {
-  color: #1877f2;
-}
-
-.linkedinIcon {
-  color: #0a66c2;
-}
-
-.githubIcon {
-  color: #211f1f;
-}
-
-.youtubeIcon {
-  color: #ff0000;
-}
-
-.slackIcon {
-  width: 30px;
-  height: 30px;
-}
-
-.instagramIcon {
-  color: #e4405f;
-}
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index a4b290a7b6..ab63fb72f8 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -9,14 +9,16 @@ import ReCAPTCHA from 'react-google-recaptcha';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
+
 import {
-  FaFacebook,
-  FaLinkedin,
-  FaGithub,
-  FaYoutube,
-  FaInstagram,
-} from 'react-icons/fa';
-import { FaXTwitter } from 'react-icons/fa6';
+  FacebookLogo,
+  LinkedInLogo,
+  GithubLogo,
+  InstagramLogo,
+  SlackLogo,
+  TwitterLogo,
+  YoutubeLogo,
+} from 'assets/svgs/social-icons';
 
 import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant';
 import {
@@ -26,7 +28,6 @@ import {
 } from 'GraphQl/Mutations/mutations';
 import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import { ReactComponent as PalisadoesLogo } from 'assets/svgs/palisadoes.svg';
-import { ReactComponent as SlackLogo } from 'assets/svgs/Slack-mark.svg';
 import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
 import Loader from 'components/Loader/Loader';
 import { errorHandler } from 'utils/errorHandler';
@@ -239,63 +240,49 @@ function loginPage(): JSX.Element {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaFacebook
-                  className={`${styles.socialIcon} ${styles.facebookIcon}`}
-                />
+                <img src={FacebookLogo} />
               </a>
               <a
                 href="https://twitter.com/palisadoesorg?lang=en"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaXTwitter
-                  className={`${styles.socialIcon} ${styles.twitterIcon}`}
-                />
+                <img src={TwitterLogo} className={styles.socialIcon} />
               </a>
               <a
                 href="https://www.linkedin.com/company/palisadoes/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaLinkedin
-                  className={`${styles.socialIcon} ${styles.linkedinIcon}`}
-                />
+                <img src={LinkedInLogo} />
               </a>
               <a
                 href="https://github.com/PalisadoesFoundation"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaGithub
-                  className={`${styles.socialIcon} ${styles.githubIcon}`}
-                />
+                <img src={GithubLogo} />
               </a>
               <a
                 href="https://www.youtube.com/@PalisadoesOrganization"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaYoutube
-                  className={`${styles.socialIcon} ${styles.youtubeIcon}`}
-                />
+                <img src={YoutubeLogo} />
               </a>
               <a
-                href="https://join.slack.com/t/thepalisadoes-dyb6419/shared_invite/zt-29oltereu-qJ931LcKxswuCAy29iA9WA"
+                href="https://www.palisadoes.org/slack"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <SlackLogo
-                  className={`${styles.socialIcon} ${styles.slackIcon}`}
-                />
+                <img src={SlackLogo} />
               </a>
               <a
                 href="https://www.instagram.com/palisadoes/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FaInstagram
-                  className={`${styles.socialIcon} ${styles.instagramIcon}`}
-                />
+                <img src={InstagramLogo} />
               </a>
             </div>
           </Col>
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
index db36a01b2e..32858723ef 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
@@ -56,37 +56,3 @@ body::before {
   gap: 16px;
   justify-content: center;
 }
-
-.socialIcon {
-  font-size: 30px;
-  cursor: pointer;
-}
-
-.twitterIcon {
-  color: #000000;
-}
-
-.facebookIcon {
-  color: #1877f2;
-}
-
-.linkedinIcon {
-  color: #0a66c2;
-}
-
-.githubIcon {
-  color: #211f1f;
-}
-
-.youtubeIcon {
-  color: #ff0000;
-}
-
-.slackIcon {
-  width: 30px;
-  height: 30px;
-}
-
-.instagramIcon {
-  color: #e4405f;
-}
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
index ff9c0b8f62..559d088a9e 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
@@ -7,15 +7,16 @@ import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLang
 import Login from 'components/UserPortal/Login/Login';
 import Register from 'components/UserPortal/Register/Register';
 import styles from './UserLoginPage.module.css';
-import { ReactComponent as SlackLogo } from '../../../assets/svgs/Slack-mark.svg';
+
 import {
-  FaFacebook,
-  FaLinkedin,
-  FaGithub,
-  FaYoutube,
-  FaInstagram,
-} from 'react-icons/fa';
-import { FaXTwitter } from 'react-icons/fa6';
+  FacebookLogo,
+  LinkedInLogo,
+  GithubLogo,
+  InstagramLogo,
+  SlackLogo,
+  TwitterLogo,
+  YoutubeLogo,
+} from 'assets/svgs/social-icons';
 
 export default function userLoginPage(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
@@ -42,59 +43,49 @@ export default function userLoginPage(): JSX.Element {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaFacebook
-              className={`${styles.socialIcon} ${styles.facebookIcon}`}
-            />
+            <img src={FacebookLogo} />
           </a>
           <a
             href="https://twitter.com/palisadoesorg?lang=en"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaXTwitter
-              className={`${styles.socialIcon} ${styles.twitterIcon}`}
-            />
+            <img src={TwitterLogo} className={styles.socialIcon} />
           </a>
           <a
             href="https://www.linkedin.com/company/palisadoes/"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaLinkedin
-              className={`${styles.socialIcon} ${styles.linkedinIcon}`}
-            />
+            <img src={LinkedInLogo} />
           </a>
           <a
             href="https://github.com/PalisadoesFoundation"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaGithub className={`${styles.socialIcon} ${styles.githubIcon}`} />
+            <img src={GithubLogo} />
           </a>
           <a
             href="https://www.youtube.com/@PalisadoesOrganization"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaYoutube
-              className={`${styles.socialIcon} ${styles.youtubeIcon}`}
-            />
+            <img src={YoutubeLogo} />
           </a>
           <a
-            href="https://join.slack.com/t/thepalisadoes-dyb6419/shared_invite/zt-29oltereu-qJ931LcKxswuCAy29iA9WA"
+            href="https://www.palisadoes.org/slack"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <SlackLogo className={`${styles.socialIcon} ${styles.slackIcon}`} />
+            <img src={SlackLogo} />
           </a>
           <a
             href="https://www.instagram.com/palisadoes/"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <FaInstagram
-              className={`${styles.socialIcon} ${styles.instagramIcon}`}
-            />
+            <img src={InstagramLogo} />
           </a>
         </div>
       </div>