Mobile Footer (#240)

* Fix texts

* Replace Twitter with X

* Add condensed list component with displayText prop in SocialLinkProps

* Fix styling of LinkCondensedList

* Create remaining Icon componenents

* Fix sizing and spacing of icons

* Fix links for condensed links section

* Create separate mobile and non-mobile sections

* Fix links

* Fix spacing for both mobile and desktop

src/components/footer/Footer.tsx

@@ -1,12 +1,16 @@
+import clsx from 'clsx'
 import type { FC, ReactNode } from 'react'
 import { ArrowUpRightIcon, HeartIcon } from '@heroicons/react/24/solid'
 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,11 +20,18 @@ 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">
-      <h3 className="text-lg">{title}</h3>
-      <div className="mt-8 flex flex-col items-center lg:items-start">
+    <div className="w-full flex-1 text-center md:mb-10 lg:text-left">
+      <h3 className="hidden text-lg md:inline">{title}</h3>
+      <div className="mt-4 flex flex-col md:mt-8 md:items-center lg:items-start">
         {links.map(({ href, text }) => (
           <Link
             key={href}
@@ -36,110 +47,289 @@ 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="w-5 md:w-5" />,
+    facebook: <FacebookIcon className="w-7 md:w-7" />,
+    X: <XIcon className="w-5 md:w-5" />,
+    github: <GitHubIcon className="ml-0.5 w-3 md:w-5" />,
+    mail: <MainIcon className="w-5 md:w-7" />,
+    linkedin: <LinkedInIcon className="w-5 md:w-6" />,
+    threads: <ThreadsIcon className="w-5 md:w-6" />,
   }
 
-  const displayText = {
+  const textToDisplay = {
     instagram: 'Instagram',
     facebook: 'Facebook',
-    twitter: 'Twitter',
+    X: 'X',
     github: 'GitHub',
+    mail: 'info@toriis.earth',
+    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 FooterMobileHeader: FC<{ text: string; className?: string }> = ({
+  text,
+  className,
+}) => {
+  return (
+    <p
+      className={clsx(
+        'mb-2 pb-3 uppercase underline decoration-clementine  underline-offset-[14px]',
+        className,
+      )}
+    >
+      {text}
+    </p>
+  )
+}
+
+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>
-          </div>
-
-          <Link
-            className="bg-red text-clementine"
-            href="mailto:info@toriis.earth"
-          >
-            info@toriis.earth
-          </Link>
-        </div>
-
-        <div className="flex w-full flex-wrap lg:w-1/2">
+        <div className="flex-col md:hidden">
+          <FooterMobileHeader text="Contact Us" />
+          <p className="text-sm">Can’t find what you are looking for?</p>
+          <p className="text-sm">Get in touch!</p>
           <LinkSubsection
-            title="About us"
+            title="Follow SECS"
+            links={[
+              {
+                href: 'mailto:info@toriis.earth',
+                text: <SocialLink type={SocialType.Mail} displayText={true} />,
+              },
+            ]}
+          />
+          <FooterMobileHeader text="Follow Us" className="mt-8" />
+          <LinkCondensedList
             links={[
               {
-                href: 'https://secsatuiuc.web.illinois.edu',
-                text: (
-                  <span className="flex underline underline-offset-4">
-                    SECS <ArrowUpRightIcon className="ml-1 w-5" />
-                  </span>
-                ),
+                href: 'https://github.com/toriis-portal/toriis',
+                socialType: SocialType.Github,
+              },
+              {
+                href: 'https://www.linkedin.com/company/toriis/',
+                socialType: SocialType.LinkedIn,
               },
               {
-                href: 'https://uiuc.hack4impact.org/',
-                text: (
-                  <span className="flex underline underline-offset-4">
-                    Hack4Impact UIUC <ArrowUpRightIcon className="ml-1 w-5" />
-                  </span>
-                ),
+                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,
               },
             ]}
           />
-          <LinkSubsection
-            title="Follow SECS"
+          <FooterMobileHeader
+            text="About our collaborators"
+            className="mt-11"
+          />
+          <FooterExternalLink org="secs" />
+          <LinkCondensedList
             links={[
               {
-                href: 'https://www.instagram.com/secsuiuc',
-                text: <SocialLink type="instagram" />,
+                href: 'https://instagram.com/secsuiuc',
+                socialType: SocialType.Instagram,
               },
               {
-                href: 'https://twitter.com/secsuiuc',
-                text: <SocialLink type="twitter" />,
+                href: 'https://x.com/secsuiuc',
+                socialType: SocialType.X,
               },
               {
                 href: 'https://www.facebook.com/SECSUIUC',
-                text: <SocialLink type="facebook" />,
+                socialType: SocialType.Facebook,
               },
             ]}
           />
-          <LinkSubsection
-            title="Follow Hack4Impact UIUC"
+          <FooterExternalLink org="hack" />
+          <LinkCondensedList
             links={[
               {
                 href: 'https://www.instagram.com/hack4impactuiuc/',
-                text: <SocialLink type="instagram" />,
+                socialType: SocialType.Instagram,
               },
               {
                 href: 'https://github.com/hack4impact-uiuc',
-                text: <SocialLink type="github" />,
+                socialType: SocialType.Github,
               },
               {
-                href: 'https://www.facebook.com/h4iuiuc/',
-                text: <SocialLink type="facebook" />,
+                href: 'https://www.facebook.com/h4iuiuc',
+                socialType: SocialType.Facebook,
               },
             ]}
           />
         </div>
+        <div className="hidden md:flex">
+          <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">Get in touch!</p>
+            </div>
+            <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 Our Collaborators"
+              links={[
+                {
+                  href: 'https://secsatuiuc.web.illinois.edu',
+                  text: <FooterExternalLink org="secs" />,
+                },
+                {
+                  href: 'https://uiuc.hack4impact.org/',
+                  text: <FooterExternalLink org="hack" />,
+                },
+              ]}
+            />
+            <LinkSubsection
+              title="Follow SECS"
+              links={[
+                {
+                  href: 'https://www.instagram.com/secsuiuc',
+                  text: (
+                    <SocialLink
+                      type={SocialType.Instagram}
+                      displayText={true}
+                    />
+                  ),
+                },
+                {
+                  href: 'https://twitter.com/secsuiuc',
+                  text: <SocialLink type={SocialType.X} displayText={true} />,
+                },
+                {
+                  href: 'https://www.facebook.com/SECSUIUC',
+                  text: (
+                    <SocialLink type={SocialType.Facebook} displayText={true} />
+                  ),
+                },
+              ]}
+            />
+            <LinkSubsection
+              title="Follow Hack4Impact UIUC"
+              links={[
+                {
+                  href: 'https://www.instagram.com/hack4impactuiuc/',
+                  text: (
+                    <SocialLink
+                      type={SocialType.Instagram}
+                      displayText={true}
+                    />
+                  ),
+                },
+                {
+                  href: 'https://github.com/hack4impact-uiuc',
+                  text: (
+                    <SocialLink type={SocialType.Github} displayText={true} />
+                  ),
+                },
+                {
+                  href: 'https://www.facebook.com/h4iuiuc/',
+                  text: (
+                    <SocialLink type={SocialType.Facebook} displayText={true} />
+                  ),
+                },
+              ]}
+            />
+          </div>
+        </div>
       </div>
     </div>
 

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"

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"