From ec03a7cc5ac2de043948c40d8f4ea11726e5f481 Mon Sep 17 00:00:00 2001 From: Liza George Date: Tue, 9 Jan 2024 19:30:34 -0800 Subject: [PATCH 1/8] Fix texts --- src/components/footer/Footer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 0d33d247..b446f6c4 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -5,7 +5,7 @@ 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 TwitterIcon from '../icon/TwitterIcon' // TODO: update to X import GitHubIcon from '../icon/GitHubIcon' interface LinkSubsectionProps { @@ -72,7 +72,7 @@ export const Footer: FC = () => (

Can’t find what you are looking for?

-

Contact us through email to get in touch!

+

Get in touch!

(
Date: Tue, 16 Jan 2024 19:42:02 -0600 Subject: [PATCH 2/8] Replace Twitter with X --- src/components/footer/Footer.tsx | 12 +++--- src/components/icon/MailIcon.tsx | 15 ++++++++ src/components/icon/XIcon.tsx | 64 ++++++++++++++++++++++++++++++++ src/components/index.ts | 2 + 4 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 src/components/icon/MailIcon.tsx create mode 100644 src/components/icon/XIcon.tsx diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index b446f6c4..fcd413a3 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -5,7 +5,7 @@ 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' // TODO: update to X +import XIcon from '../icon/XIcon' import GitHubIcon from '../icon/GitHubIcon' interface LinkSubsectionProps { @@ -37,21 +37,21 @@ const LinkSubsection = ({ title, links }: LinkSubsectionProps) => { } interface SocialLinkProps { - type: 'instagram' | 'facebook' | 'twitter' | 'github' + type: 'instagram' | 'facebook' | 'X' | 'github' } const SocialLink = ({ type }: SocialLinkProps) => { const icon = { instagram: , facebook: , - twitter: , + X: , github: , } const displayText = { instagram: 'Instagram', facebook: 'Facebook', - twitter: 'Twitter', + X: 'X', github: 'GitHub', } @@ -113,8 +113,8 @@ export const Footer: FC = () => ( text: , }, { - href: 'https://twitter.com/secsuiuc', - text: , + href: 'https://X.com/secsuiuc', + text: , }, { href: 'https://www.facebook.com/SECSUIUC', diff --git a/src/components/icon/MailIcon.tsx b/src/components/icon/MailIcon.tsx new file mode 100644 index 00000000..4fa20cfc --- /dev/null +++ b/src/components/icon/MailIcon.tsx @@ -0,0 +1,15 @@ +const MainIcon = () => ( + + + +) + +export default MainIcon diff --git a/src/components/icon/XIcon.tsx b/src/components/icon/XIcon.tsx new file mode 100644 index 00000000..2b3537a0 --- /dev/null +++ b/src/components/icon/XIcon.tsx @@ -0,0 +1,64 @@ +// const XIcon = () => ( +// +// +// +// ) + +import clsx from 'clsx' + +const XIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( + // + // instagram [#167] + // Created with Sketch. + // + // + // + // + // + // + // + // + // + + + +) + +export default XIcon diff --git a/src/components/index.ts b/src/components/index.ts index 10c210ef..b49fa713 100644 --- 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, } From 796b15f170325b7e24f49113cbe6f0e33779cbd8 Mon Sep 17 00:00:00 2001 From: Liza George Date: Tue, 16 Jan 2024 20:12:17 -0600 Subject: [PATCH 3/8] Add condensed list component with displayText prop in SocialLinkProps --- src/components/footer/Footer.tsx | 107 +++++++++++++++++++++++++------ 1 file changed, 89 insertions(+), 18 deletions(-) diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index fcd413a3..35c180eb 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -16,6 +16,13 @@ interface LinkSubsectionProps { }[] } +interface LinkCondensedListProps { + links: { + href: string + socialType: SocialType + }[] +} + const LinkSubsection = ({ title, links }: LinkSubsectionProps) => { return (
@@ -36,29 +43,67 @@ const LinkSubsection = ({ title, links }: LinkSubsectionProps) => { ) } +const LinkCondensedList = ({ links }: LinkCondensedListProps) => { + return ( +
+
+ {links.map(({ href, socialType }) => ( + + + + ))} +
+
+ ) +} + +enum SocialType { + Instagram = 'instagram', + Facebook = 'facebook', + X = 'X', + Github = 'github', + Mail = 'mail', + LinkedIn = 'linkedin', +} + interface SocialLinkProps { - type: 'instagram' | 'facebook' | 'X' | 'github' + type: SocialType + displayText: boolean } -const SocialLink = ({ type }: SocialLinkProps) => { +const SocialLink = ({ type, displayText }: SocialLinkProps) => { const icon = { instagram: , facebook: , X: , github: , + mail: , // TODO + linkedin: , // TODO } - const displayText = { + const textToDisplay = { instagram: 'Instagram', facebook: 'Facebook', X: 'X', github: 'GitHub', + mail: 'Mail', + linkedin: 'Linkedin', // TODO } + console.log(type, displayText) return ( {icon[type]} - {displayText[type]} + {displayText && ( + + {textToDisplay[type]} + + )} ) } @@ -69,18 +114,34 @@ export const Footer: FC = () => (
-

Can’t find what you are looking for?

Get in touch!

- - - info@toriis.earth - +
@@ -110,15 +171,19 @@ export const Footer: FC = () => ( links={[ { href: 'https://www.instagram.com/secsuiuc', - text: , + text: ( + + ), }, { href: 'https://X.com/secsuiuc', - text: , + text: , }, { href: 'https://www.facebook.com/SECSUIUC', - text: , + text: ( + + ), }, ]} /> @@ -127,15 +192,21 @@ export const Footer: FC = () => ( links={[ { href: 'https://www.instagram.com/hack4impactuiuc/', - text: , + text: ( + + ), }, { href: 'https://github.com/hack4impact-uiuc', - text: , + text: ( + + ), }, { href: 'https://www.facebook.com/h4iuiuc/', - text: , + text: ( + + ), }, ]} /> From 050b9d97939343dad5ef34fda5fe85015f4b86c1 Mon Sep 17 00:00:00 2001 From: Liza George Date: Tue, 16 Jan 2024 20:33:15 -0600 Subject: [PATCH 4/8] Fix styling of LinkCondensedList --- src/components/footer/Footer.tsx | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 35c180eb..424c659a 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -45,19 +45,17 @@ const LinkSubsection = ({ title, links }: LinkSubsectionProps) => { const LinkCondensedList = ({ links }: LinkCondensedListProps) => { return ( -
-
- {links.map(({ href, socialType }) => ( - - - - ))} -
+
+ {links.map(({ href, socialType }) => ( + + + + ))}
) } @@ -95,7 +93,6 @@ const SocialLink = ({ type, displayText }: SocialLinkProps) => { linkedin: 'Linkedin', // TODO } - console.log(type, displayText) return ( {icon[type]} From 7afdcb36265c4db9bc3453b664381a6e4bd74888 Mon Sep 17 00:00:00 2001 From: Liza George Date: Wed, 24 Jan 2024 14:50:47 -0600 Subject: [PATCH 5/8] Create remaining Icon componenents --- src/components/footer/Footer.tsx | 16 ++++++++-- src/components/icon/LinkedIn.tsx | 27 +++++++++++++++++ src/components/icon/MailIcon.tsx | 12 +++++--- src/components/icon/ThreadsIcon.tsx | 27 +++++++++++++++++ src/components/icon/XIcon.tsx | 45 ----------------------------- 5 files changed, 75 insertions(+), 52 deletions(-) create mode 100644 src/components/icon/LinkedIn.tsx create mode 100644 src/components/icon/ThreadsIcon.tsx diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 424c659a..8270adee 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -7,6 +7,9 @@ import InstagramIcon from '../icon/InstagramIcon' import FacebookIcon from '../icon/FacebookIcon' 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 @@ -67,6 +70,7 @@ enum SocialType { Github = 'github', Mail = 'mail', LinkedIn = 'linkedin', + Threads = 'threads', } interface SocialLinkProps { @@ -80,8 +84,9 @@ const SocialLink = ({ type, displayText }: SocialLinkProps) => { facebook: , X: , github: , - mail: , // TODO - linkedin: , // TODO + mail: , + linkedin: , + threads: , } const textToDisplay = { @@ -90,7 +95,8 @@ const SocialLink = ({ type, displayText }: SocialLinkProps) => { X: 'X', github: 'GitHub', mail: 'Mail', - linkedin: 'Linkedin', // TODO + linkedin: 'Linkedin', + threads: 'Threads', } return ( @@ -137,6 +143,10 @@ export const Footer: FC = () => ( href: 'mailto:info@toriis.earth', // TODO socialType: SocialType.Instagram, }, + { + href: 'mailto:info@toriis.earth', // TODO + socialType: SocialType.Threads, + }, ]} />
diff --git a/src/components/icon/LinkedIn.tsx b/src/components/icon/LinkedIn.tsx new file mode 100644 index 00000000..e33a4d5e --- /dev/null +++ b/src/components/icon/LinkedIn.tsx @@ -0,0 +1,27 @@ +import clsx from 'clsx' + +const LinkedInIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( + + + + + + + + + + +) + +export default LinkedInIcon diff --git a/src/components/icon/MailIcon.tsx b/src/components/icon/MailIcon.tsx index 4fa20cfc..1a0231db 100644 --- a/src/components/icon/MailIcon.tsx +++ b/src/components/icon/MailIcon.tsx @@ -1,9 +1,13 @@ -const MainIcon = () => ( +import clsx from 'clsx' + +const MainIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( ) => ( + + + + + + + + + + +) + +export default ThreadsIcon diff --git a/src/components/icon/XIcon.tsx b/src/components/icon/XIcon.tsx index 2b3537a0..24721b26 100644 --- a/src/components/icon/XIcon.tsx +++ b/src/components/icon/XIcon.tsx @@ -1,51 +1,6 @@ -// const XIcon = () => ( -// -// -// -// ) - import clsx from 'clsx' const XIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( - // - // instagram [#167] - // Created with Sketch. - // - // - // - // - // - // - // - // - // Date: Wed, 24 Jan 2024 15:16:40 -0600 Subject: [PATCH 6/8] Fix sizing and spacing of icons --- src/components/footer/Footer.tsx | 20 ++++++++++---------- src/components/icon/FacebookIcon.tsx | 1 - src/components/icon/GitHubIcon.tsx | 2 +- src/components/icon/LinkedIn.tsx | 2 +- src/components/icon/MailIcon.tsx | 6 +++--- src/components/icon/ThreadsIcon.tsx | 2 +- src/components/icon/TwitterIcon.tsx | 2 +- src/components/icon/XIcon.tsx | 6 +++--- 8 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 8270adee..ca853247 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -48,11 +48,11 @@ const LinkSubsection = ({ title, links }: LinkSubsectionProps) => { const LinkCondensedList = ({ links }: LinkCondensedListProps) => { return ( -
+
{links.map(({ href, socialType }) => ( @@ -80,13 +80,13 @@ interface SocialLinkProps { const SocialLink = ({ type, displayText }: SocialLinkProps) => { const icon = { - instagram: , - facebook: , - X: , - github: , - mail: , - linkedin: , - threads: , + instagram: , + facebook: , + X: , + github: , + mail: , + linkedin: , + threads: , } const textToDisplay = { @@ -103,7 +103,7 @@ const SocialLink = ({ type, displayText }: SocialLinkProps) => { {icon[type]} {displayText && ( - + {textToDisplay[type]} )} diff --git a/src/components/icon/FacebookIcon.tsx b/src/components/icon/FacebookIcon.tsx index af7ec197..54a2f0dc 100644 --- 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 index 73fb1c08..032d8901 100644 --- a/src/components/icon/GitHubIcon.tsx +++ b/src/components/icon/GitHubIcon.tsx @@ -4,7 +4,7 @@ const GitHubIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( ) => ( xmlns="http://www.w3.org/2000/svg" width="26" height="26" - viewBox="0 -2 15 15" + viewBox="-2 -1 16 14" fill="none" className={clsx('w', className)} {...props} diff --git a/src/components/icon/MailIcon.tsx b/src/components/icon/MailIcon.tsx index 1a0231db..fb3f2498 100644 --- a/src/components/icon/MailIcon.tsx +++ b/src/components/icon/MailIcon.tsx @@ -3,9 +3,9 @@ import clsx from 'clsx' const MainIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( diff --git a/src/components/icon/ThreadsIcon.tsx b/src/components/icon/ThreadsIcon.tsx index 858ceefd..2a15b9dc 100644 --- a/src/components/icon/ThreadsIcon.tsx +++ b/src/components/icon/ThreadsIcon.tsx @@ -5,7 +5,7 @@ const ThreadsIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( xmlns="http://www.w3.org/2000/svg" width="28" height="26" - viewBox="0 -2 12 15" + viewBox="1 -1 12 15" fill="none" className={clsx('w', className)} {...props} diff --git a/src/components/icon/TwitterIcon.tsx b/src/components/icon/TwitterIcon.tsx index e01ad3e1..6f6481dd 100644 --- 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 index 24721b26..effd67be 100644 --- a/src/components/icon/XIcon.tsx +++ b/src/components/icon/XIcon.tsx @@ -3,9 +3,9 @@ import clsx from 'clsx' const XIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => ( From b8a688b95c237620aaa0599eb91ee61d992313cd Mon Sep 17 00:00:00 2001 From: Liza George Date: Wed, 24 Jan 2024 15:32:16 -0600 Subject: [PATCH 7/8] Fix links for condensed links section --- src/components/footer/Footer.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index ca853247..2445cd57 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -128,23 +128,23 @@ export const Footer: FC = () => ( socialType: SocialType.Mail, }, { - href: 'mailto:info@toriis.earth', // TODO + href: 'https://github.com/toriis-portal/toriis', socialType: SocialType.Github, }, { - href: 'mailto:info@toriis.earth', // TODO + href: 'https://www.linkedin.com/company/toriis/', socialType: SocialType.LinkedIn, }, { - href: 'mailto:info@toriis.earth', // TODO + href: 'https://twitter.com/toriis_earth', socialType: SocialType.X, }, { - href: 'mailto:info@toriis.earth', // TODO + href: 'https://www.instagram.com/toriis.earth', socialType: SocialType.Instagram, }, { - href: 'mailto:info@toriis.earth', // TODO + href: 'https://www.threads.net/@toriis.earth', socialType: SocialType.Threads, }, ]} @@ -183,7 +183,7 @@ export const Footer: FC = () => ( ), }, { - href: 'https://X.com/secsuiuc', + href: 'https://twitter.com/secsuiuc', text: , }, { From 01741621908f3d8ba1a8a4617d20594822e905a3 Mon Sep 17 00:00:00 2001 From: Liza George Date: Wed, 24 Jan 2024 16:57:05 -0600 Subject: [PATCH 8/8] Fix links to external secs and hack homepages --- src/components/footer/Footer.tsx | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 2445cd57..c82e6220 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -111,6 +111,22 @@ const SocialLink = ({ type, displayText }: SocialLinkProps) => { ) } +const FooterExternalLink: FC<{ org: string }> = ({ org }) => { + return ( + + {org == 'secs' ? 'SECS' : 'Hack4Impact UIUC'}{' '} + + + ) +} + export const Footer: FC = () => (
@@ -157,19 +173,11 @@ export const Footer: FC = () => ( links={[ { href: 'https://secsatuiuc.web.illinois.edu', - text: ( - - SECS - - ), + text: , }, { href: 'https://uiuc.hack4impact.org/', - text: ( - - Hack4Impact UIUC - - ), + text: , }, ]} />