diff --git a/apps/site/src/assets/icons/Instagram_Glyph_White.svg b/apps/site/src/assets/icons/Instagram_Glyph_White.svg new file mode 100644 index 00000000..d9823da6 --- /dev/null +++ b/apps/site/src/assets/icons/Instagram_Glyph_White.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/site/src/assets/icons/facebook.svg b/apps/site/src/assets/icons/facebook.svg new file mode 100644 index 00000000..79459adc --- /dev/null +++ b/apps/site/src/assets/icons/facebook.svg @@ -0,0 +1 @@ +Facebook \ No newline at end of file diff --git a/apps/site/src/assets/icons/facebook_icon.svg b/apps/site/src/assets/icons/facebook_icon.svg deleted file mode 100644 index 8061b786..00000000 --- a/apps/site/src/assets/icons/facebook_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/site/src/assets/icons/instagram_icon.svg b/apps/site/src/assets/icons/instagram_icon.svg deleted file mode 100644 index fe6bf26e..00000000 --- a/apps/site/src/assets/icons/instagram_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/site/src/assets/icons/tiktok.svg b/apps/site/src/assets/icons/tiktok.svg new file mode 100644 index 00000000..0d34969b --- /dev/null +++ b/apps/site/src/assets/icons/tiktok.svg @@ -0,0 +1 @@ +TikTok \ No newline at end of file diff --git a/apps/site/src/assets/icons/tiktok_icon.svg b/apps/site/src/assets/icons/tiktok_icon.svg deleted file mode 100644 index cf396576..00000000 --- a/apps/site/src/assets/icons/tiktok_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss index 35ee0616..04b33820 100644 --- a/apps/site/src/components/Footer/Footer.module.scss +++ b/apps/site/src/components/Footer/Footer.module.scss @@ -5,7 +5,7 @@ text-align: left; } -.left_footer_text{ +.left_footer_text { color: white; margin-right: 10px; margin-left: 5px; @@ -13,11 +13,11 @@ font-weight: 500; } -.left_footer_text:hover{ +.left_footer_text:hover { text-decoration: underline; } -.button{ +.button { background-color: white; border: none; color: hsl(189, 100%, 38%); @@ -31,7 +31,7 @@ font-weight: 500; } -.button:hover{ +.button:hover { transform: scale(1.025); filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4)); } @@ -47,7 +47,6 @@ flex-wrap: wrap; } - .text { font-size: 1.5rem; font-weight: 500; @@ -71,7 +70,6 @@ filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4)); } - @media only screen and (max-width: 600px) { .buttons { text-align: center; @@ -80,16 +78,16 @@ flex-wrap: nowrap; } - #box{ + #box { justify-content: center; text-align: center; } - .button{ + .button { margin-top: 0.7rem; } - .socials{ + .socials { margin-left: 15px; margin-right: 15px; margin-bottom: 10px; @@ -97,12 +95,12 @@ padding: 0; } - .text{ + .text { font-size: 1rem; margin-top: 1.5rem; } - .left_footer{ + .left_footer { text-align: center; } -} \ No newline at end of file +} diff --git a/apps/site/src/components/Footer/Footer.tsx b/apps/site/src/components/Footer/Footer.tsx index 2b209773..8568f9ae 100644 --- a/apps/site/src/components/Footer/Footer.tsx +++ b/apps/site/src/components/Footer/Footer.tsx @@ -6,12 +6,11 @@ import clsx from "clsx"; import styles from "./Footer.module.scss"; - import Mail from "@/assets/icons/mail_icon.svg"; -import Facebook from "@/assets/icons/facebook_icon.svg"; -import Instagram from "@/assets/icons/instagram_icon.svg"; +import Facebook from "@/assets/icons/facebook.svg"; +import Instagram from "@/assets/icons/Instagram_Glyph_White.svg"; import Hack from "@/assets/icons/HACK LOGO.svg"; -import TikTok from "@/assets/icons/tiktok_icon.svg"; +import TikTok from "@/assets/icons/tiktok.svg"; type Social = { icon: any; @@ -24,7 +23,7 @@ const LEFT_SOCIALS: Social[] = [ icon: Hack, link: "https://hack.ics.uci.edu/", alt: "Hack at UCI logo that links to Hack at UCI's club website", - } + }, ]; const RIGHT_SOCIALS: Social[] = [ @@ -53,62 +52,64 @@ const RIGHT_SOCIALS: Social[] = [ export default function Footer() { return ( );