Feature: Social Icons Integration on Login and Signup Page (Palisadoe…

…sFoundation#1326)

* Feature: Social Icons Integration on Login and Signup Page

* Changes social icons color

* Added Instagram and Slack Icon

* Fixes Color of Twitter Icon

* Added Social Icons from figma design

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,
+};

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;
+}

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 {
               <PalisadoesLogo className={styles.palisadoes_logo} />
               <p className="text-center">{t('fromPalisadoes')}</p>
             </div>
+
+            <div className={styles.socialIcons}>
+              <a
+                href="https://www.facebook.com/palisadoesproject"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={FacebookLogo} />
+              </a>
+              <a
+                href="https://twitter.com/palisadoesorg?lang=en"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={TwitterLogo} className={styles.socialIcon} />
+              </a>
+              <a
+                href="https://www.linkedin.com/company/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={LinkedInLogo} />
+              </a>
+              <a
+                href="https://github.com/PalisadoesFoundation"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={GithubLogo} />
+              </a>
+              <a
+                href="https://www.youtube.com/@PalisadoesOrganization"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={YoutubeLogo} />
+              </a>
+              <a
+                href="https://www.palisadoes.org/slack"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={SlackLogo} />
+              </a>
+              <a
+                href="https://www.instagram.com/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={InstagramLogo} />
+              </a>
+            </div>
           </Col>
           <Col sm={12} md={6} lg={5}>
             <div className={styles.right_portion}>

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;
 }

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 {
         <h6 style={{ textAlign: `center` }}>
           <p>{t('fromPalisadoes')}</p>
         </h6>
+        <div className={styles.socialIcons}>
+          <a
+            href="https://www.facebook.com/palisadoesproject"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={FacebookLogo} />
+          </a>
+          <a
+            href="https://twitter.com/palisadoesorg?lang=en"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={TwitterLogo} className={styles.socialIcon} />
+          </a>
+          <a
+            href="https://www.linkedin.com/company/palisadoes/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={LinkedInLogo} />
+          </a>
+          <a
+            href="https://github.com/PalisadoesFoundation"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={GithubLogo} />
+          </a>
+          <a
+            href="https://www.youtube.com/@PalisadoesOrganization"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={YoutubeLogo} />
+          </a>
+          <a
+            href="https://www.palisadoes.org/slack"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={SlackLogo} />
+          </a>
+          <a
+            href="https://www.instagram.com/palisadoes/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={InstagramLogo} />
+          </a>
+        </div>
       </div>
       <div className={`${styles.contentContainer} py-5`}>
         <ChangeLanguageDropDown parentContainerStyle="m-0" />