toriis-portal · lizageorge · Jan 10, 2024 · Jan 17, 2024 · Jan 17, 2024 · Jan 17, 2024
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -5,8 +5,11 @@ import Link from 'next/link'
 import CapitalizedTitle from '../text/CapitalizedTitle'
 import InstagramIcon from '../icon/InstagramIcon'
 import FacebookIcon from '../icon/FacebookIcon'
-import TwitterIcon from '../icon/TwitterIcon'
+import XIcon from '../icon/XIcon'
 import GitHubIcon from '../icon/GitHubIcon'
+import MainIcon from '../icon/MailIcon'
+import LinkedInIcon from '../icon/LinkedIn'
+import ThreadsIcon from '../icon/ThreadsIcon'
 
 interface LinkSubsectionProps {
   title: string
@@ -16,6 +19,13 @@ interface LinkSubsectionProps {
   }[]
 }
 
+interface LinkCondensedListProps {
+  links: {
+    href: string
+    socialType: SocialType
+  }[]
+}
+
 const LinkSubsection = ({ title, links }: LinkSubsectionProps) => {
   return (
     <div className="mb-10 w-full flex-1 text-center lg:text-left">
@@ -36,72 +46,138 @@ const LinkSubsection = ({ title, links }: LinkSubsectionProps) => {
   )
 }
 
+const LinkCondensedList = ({ links }: LinkCondensedListProps) => {
+  return (
+    <div className="mt-4 flex items-center">
+      {links.map(({ href, socialType }) => (
+        <Link
+          key={href}
+          className="mr-3 w-fit transition duration-500 hover:text-clementine"
+          href={href}
+          target="_blank"
+        >
+          <SocialLink type={socialType} displayText={false} />
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+enum SocialType {
+  Instagram = 'instagram',
+  Facebook = 'facebook',
+  X = 'X',
+  Github = 'github',
+  Mail = 'mail',
+  LinkedIn = 'linkedin',
+  Threads = 'threads',
+}
+
 interface SocialLinkProps {
-  type: 'instagram' | 'facebook' | 'twitter' | 'github'
+  type: SocialType
+  displayText: boolean
 }
 
-const SocialLink = ({ type }: SocialLinkProps) => {
+const SocialLink = ({ type, displayText }: SocialLinkProps) => {
   const icon = {
-    instagram: <InstagramIcon className="mr-2" />,
-    facebook: <FacebookIcon className="mr-2" />,
-    twitter: <TwitterIcon className="mr-2" />,
-    github: <GitHubIcon className="mr-2" />,
+    instagram: <InstagramIcon className="" />,
+    facebook: <FacebookIcon className="" />,
+    X: <XIcon className="" />,
+    github: <GitHubIcon className="" />,
+    mail: <MainIcon className="" />,
+    linkedin: <LinkedInIcon className="" />,
+    threads: <ThreadsIcon className="" />,
   }
 
-  const displayText = {
+  const textToDisplay = {
     instagram: 'Instagram',
     facebook: 'Facebook',
-    twitter: 'Twitter',
+    X: 'X',
     github: 'GitHub',
+    mail: 'Mail',
+    linkedin: 'Linkedin',
+    threads: 'Threads',
   }
 
   return (
     <span className="group flex items-center">
       {icon[type]}
-      <span className="group-hover:fill-clementine">{displayText[type]}</span>
+      {displayText && (
+        <span className="ml-2 group-hover:fill-clementine">
+          {textToDisplay[type]}
+        </span>
+      )}
     </span>
   )
 }
 
+const FooterExternalLink: FC<{ org: string }> = ({ org }) => {
+  return (
+    <a
+      className="mt-4 flex underline underline-offset-4"
+      href={
+        org == 'secs'
+          ? 'https://secsatuiuc.web.illinois.edu/'
+          : 'https://uiuc.hack4impact.org/'
+      }
+    >
+      {org == 'secs' ? 'SECS' : 'Hack4Impact UIUC'}{' '}
+      <ArrowUpRightIcon className="ml-1 w-5" />
+    </a>
+  )
+}
+
 export const Footer: FC = () => (
   <footer>
     <div className="bg-darkTeal p-10 text-white">
       <div className="flex flex-wrap">
         <div className="mb-5 w-full text-center md:mb-0 lg:w-1/2 lg:pl-14 lg:text-left">
           <CapitalizedTitle className="justify-center pr-2 text-sm sm:text-base md:m-0 md:text-base lg:justify-start lg:text-xl" />
-
           <div className="mb-4">
             <p className="mt-8 text-sm">Can’t find what you are looking for?</p>
-            <p className="text-sm">Contact us through email to get in touch!</p>
+            <p className="text-sm">Get in touch!</p>
           </div>
-
-          <Link
-            className="bg-red text-clementine"
-            href="mailto:info@toriis.earth"
-          >
-            info@toriis.earth
-          </Link>
+          <LinkCondensedList
+            links={[
+              {
+                href: 'mailto:info@toriis.earth',
+                socialType: SocialType.Mail,
+              },
+              {
+                href: 'https://github.com/toriis-portal/toriis',
+                socialType: SocialType.Github,
+              },
+              {
+                href: 'https://www.linkedin.com/company/toriis/',
+                socialType: SocialType.LinkedIn,
+              },
+              {
+                href: 'https://twitter.com/toriis_earth',
+                socialType: SocialType.X,
+              },
+              {
+                href: 'https://www.instagram.com/toriis.earth',
+                socialType: SocialType.Instagram,
+              },
+              {
+                href: 'https://www.threads.net/@toriis.earth',
+                socialType: SocialType.Threads,
+              },
+            ]}
+          />
         </div>
 
         <div className="flex w-full flex-wrap lg:w-1/2">
           <LinkSubsection
-            title="About us"
+            title="About Our Collaborators"
             links={[
               {
                 href: 'https://secsatuiuc.web.illinois.edu',
-                text: (
-                  <span className="flex underline underline-offset-4">
-                    SECS <ArrowUpRightIcon className="ml-1 w-5" />
-                  </span>
-                ),
+                text: <FooterExternalLink org="secs" />,
               },
               {
                 href: 'https://uiuc.hack4impact.org/',
-                text: (
-                  <span className="flex underline underline-offset-4">
-                    Hack4Impact UIUC <ArrowUpRightIcon className="ml-1 w-5" />
-                  </span>
-                ),
+                text: <FooterExternalLink org="hack" />,
               },
             ]}
           />
@@ -110,15 +186,19 @@ export const Footer: FC = () => (
             links={[
               {
                 href: 'https://www.instagram.com/secsuiuc',
-                text: <SocialLink type="instagram" />,
+                text: (
+                  <SocialLink type={SocialType.Instagram} displayText={true} />
+                ),
               },
               {
                 href: 'https://twitter.com/secsuiuc',
-                text: <SocialLink type="twitter" />,
+                text: <SocialLink type={SocialType.X} displayText={true} />,
               },
               {
                 href: 'https://www.facebook.com/SECSUIUC',
-                text: <SocialLink type="facebook" />,
+                text: (
+                  <SocialLink type={SocialType.Facebook} displayText={true} />
+                ),
               },
             ]}
           />
@@ -127,15 +207,21 @@ export const Footer: FC = () => (
             links={[
               {
                 href: 'https://www.instagram.com/hack4impactuiuc/',
-                text: <SocialLink type="instagram" />,
+                text: (
+                  <SocialLink type={SocialType.Instagram} displayText={true} />
+                ),
               },
               {
                 href: 'https://github.com/hack4impact-uiuc',
-                text: <SocialLink type="github" />,
+                text: (
+                  <SocialLink type={SocialType.Github} displayText={true} />
+                ),
               },
               {
                 href: 'https://www.facebook.com/h4iuiuc/',
-                text: <SocialLink type="facebook" />,
+                text: (
+                  <SocialLink type={SocialType.Facebook} displayText={true} />
+                ),
               },
             ]}
           />

diff --git a/src/components/icon/FacebookIcon.tsx b/src/components/icon/FacebookIcon.tsx
@@ -9,7 +9,6 @@ const FacebookIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
     className={clsx(
       'w',
       'transition duration-500 group-hover:fill-clementine',
-      'w-5',
       className,
     )}
     viewBox="-5.5 0 32 32"

diff --git a/src/components/icon/GitHubIcon.tsx b/src/components/icon/GitHubIcon.tsx
@@ -4,7 +4,7 @@ const GitHubIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
-    width="28px"
+    width="32px"
     height="28px"
     viewBox="0 0 20 20"
     version="1.1"

diff --git a/src/components/icon/LinkedIn.tsx b/src/components/icon/LinkedIn.tsx
@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+
+const LinkedInIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="26"
+    height="26"
+    viewBox="-2 -1 16 14"
+    fill="none"
+    className={clsx('w', className)}
+    {...props}
+  >
+    <g clip-path="url(#clip0_3897_1733)">
+      <path
+        d="M11.1117 0H0.885937C0.396094 0 0 0.386719 0 0.864844V11.1328C0 11.6109 0.396094 12 0.885937 12H11.1117C11.6016 12 12 11.6109 12 11.1352V0.864844C12 0.386719 11.6016 0 11.1117 0ZM3.56016 10.2258H1.77891V4.49766H3.56016V10.2258ZM2.66953 3.71719C2.09766 3.71719 1.63594 3.25547 1.63594 2.68594C1.63594 2.11641 2.09766 1.65469 2.66953 1.65469C3.23906 1.65469 3.70078 2.11641 3.70078 2.68594C3.70078 3.25312 3.23906 3.71719 2.66953 3.71719ZM10.2258 10.2258H8.44687V7.44141C8.44687 6.77812 8.43516 5.92266 7.52109 5.92266C6.59531 5.92266 6.45469 6.64687 6.45469 7.39453V10.2258H4.67813V4.49766H6.38437V5.28047H6.40781C6.64453 4.83047 7.22578 4.35469 8.09063 4.35469C9.89297 4.35469 10.2258 5.54063 10.2258 7.08281V10.2258Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3897_1733">
+        <rect width="12" height="12" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default LinkedInIcon
diff --git a/src/components/icon/MailIcon.tsx b/src/components/icon/MailIcon.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx'
+
+const MainIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="28px"
+    height="22px"
+    viewBox="-2 -1 15 10"
+    className={clsx('w', className)}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M0 0V9H12V0H0ZM10.21 1L6 4.825L1.79 1H10.21ZM1 1.63L2.965 3.415L1 6.695V1.63ZM1.385 8L3.72 4.105L6 6.175L8.28 4.105L10.615 8H1.385ZM11 6.695L9.035 3.415L11 1.63V6.695Z"
+    />
+  </svg>
+)
+
+export default MainIcon
diff --git a/src/components/icon/ThreadsIcon.tsx b/src/components/icon/ThreadsIcon.tsx
@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+
+const ThreadsIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="28"
+    height="26"
+    viewBox="1 -1 12 15"
+    fill="none"
+    className={clsx('w', className)}
+    {...props}
+  >
+    <g clip-path="url(#clip0_3897_1731)">
+      <path
+        d="M8.84606 5.56177C8.79437 5.53699 8.74187 5.51315 8.68869 5.49032C8.59606 3.78364 7.6635 2.80656 6.09762 2.79656C6.09052 2.79652 6.08347 2.79652 6.07638 2.79652C5.13977 2.79652 4.36082 3.19631 3.88138 3.92379L4.74256 4.51455C5.10072 3.97114 5.66283 3.8553 6.07679 3.8553C6.08157 3.8553 6.08637 3.8553 6.0911 3.85534C6.60669 3.85863 6.99575 4.00854 7.24756 4.30088C7.43081 4.51371 7.55337 4.80781 7.61406 5.17899C7.15694 5.10129 6.66256 5.07741 6.13406 5.10771C4.64529 5.19346 3.68819 6.06174 3.75248 7.26825C3.78509 7.88025 4.08998 8.40675 4.61094 8.75069C5.0514 9.04144 5.61869 9.18363 6.20827 9.15144C6.98688 9.10875 7.59769 8.81169 8.02381 8.2685C8.34744 7.856 8.55212 7.32144 8.6425 6.64787C9.01356 6.87181 9.28856 7.1665 9.44044 7.52075C9.69869 8.12294 9.71375 9.1125 8.90631 9.91925C8.19888 10.626 7.3485 10.9318 6.06334 10.9412C4.63776 10.9306 3.55961 10.4734 2.85863 9.58231C2.20222 8.74788 1.86298 7.54262 1.85032 6C1.86298 4.45736 2.20222 3.2521 2.85863 2.41767C3.55961 1.52656 4.63774 1.06938 6.06332 1.05878C7.49925 1.06946 8.59619 1.52884 9.324 2.42425C9.68088 2.86335 9.94994 3.41555 10.1273 4.05939L11.1365 3.79014C10.9215 2.99764 10.5832 2.31473 10.1228 1.74838C9.18975 0.600418 7.82513 0.0121968 6.06684 0H6.05981C4.3051 0.0121544 2.95576 0.602612 2.04927 1.75496C1.24262 2.7804 0.826525 4.20723 0.812544 5.99578L0.8125 6L0.812544 6.00422C0.826525 7.79275 1.24262 9.21963 2.04927 10.2451C2.95576 11.3974 4.3051 11.9879 6.05981 12H6.06684C7.62688 11.9892 8.7265 11.5808 9.63237 10.6757C10.8176 9.49162 10.7819 8.00744 10.3912 7.09631C10.111 6.44294 9.57669 5.91226 8.84606 5.56177ZM6.15253 8.09419C5.50003 8.13094 4.82215 7.83806 4.78872 7.21075C4.76395 6.74563 5.11974 6.22662 6.19257 6.1648C6.31544 6.15771 6.436 6.15425 6.55444 6.15425C6.94413 6.15425 7.30869 6.19211 7.64012 6.26456C7.5165 7.80844 6.79138 8.05912 6.15253 8.09419Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3897_1731">
+        <rect width="12" height="12" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default ThreadsIcon
diff --git a/src/components/icon/TwitterIcon.tsx b/src/components/icon/TwitterIcon.tsx
@@ -6,7 +6,7 @@ const TwitterIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
     xmlnsXlink="http://www.w3.org/1999/xlink"
     width="28px"
     height="28px"
-    viewBox="0 -2 20 20"
+    viewBox="0 0 20 20"
     version="1.1"
     className={clsx('w', 'w-5', className)}
     {...props}

diff --git a/src/components/icon/XIcon.tsx b/src/components/icon/XIcon.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx'
+
+const XIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32px"
+    height="32px"
+    viewBox="0 0 13 13"
+    className={clsx('w', 'w-5', className)}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M10.9926 1.42578H12.8551L8.78621 6.07625L13.5729 12.4045H9.82496L6.88943 8.56645L3.5305 12.4045H1.66694L6.01901 7.43029L1.42709 1.42578H5.27021L7.92368 4.9339L10.9926 1.42578ZM10.339 11.2897H11.371L4.70945 2.48199H3.602L10.339 11.2897Z"
+    />
+  </svg>
+)
+
+export default XIcon
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -70,6 +70,7 @@ import PlugIcon from './icon/PlugIcon'
 import TrashIcon from './icon/TrashIcon'
 import TreeIcon from './icon/TreeIcon'
 import TwitterIcon from './icon/TwitterIcon'
+import XIcon from './icon/XIcon'
 export {
   AuthButton,
   ListItem,
@@ -128,4 +129,5 @@ export {
   TrashIcon,
   TreeIcon,
   TwitterIcon,
+  XIcon,
 }