Formatting and element positioning adjustments

Author: Domin0de

frontend/src/components/Contacts/index.tsx

@@ -1,15 +1,18 @@
 import Image from 'next/image';
 
-const boxStyling =
-  'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
 const socialsBoxStyling =
   'xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
+const socialsStyling =
+  'flex justify-center';
 
 const Contacts = () => {
   return (
     <div className="md:mt-10 mt-5">
     <div className="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-10">
-      <a href="https://bit.ly/CSESocDiscord" target="_blank" className={socialsBoxStyling}>
+      <a href="https://bit.ly/CSESocDiscord"
+         target="_blank"
+         className={socialsBoxStyling}
+      >
         <Image
           src="assets/discord_logo.svg"
           alt="discord logo"
@@ -50,7 +53,10 @@ const Contacts = () => {
     </div>
 
     <div className="flex 1 justify-around xl:mx-40">
-      <a href="https://x.com/csesoc?lang=en" target="_blank">
+      <a href="https://x.com/csesoc?lang=en"
+         target="_blank"
+         className={socialsStyling}
+      >
         <Image
           src="assets/x_twitter_icon.svg"
           alt="X/Twitter"
@@ -59,7 +65,10 @@ const Contacts = () => {
           className="mr-1 fill-white hover:scale-105 transition-all"
         />
       </a>
-      <a href="https://www.youtube.com/@CSESocUNSW" target="_blank">
+      <a href="https://www.youtube.com/@CSESocUNSW"
+         target="_blank"
+         className={socialsStyling}
+      >
         <Image
           src="assets/youtube_logo.svg"
           alt="Youtube"
@@ -68,7 +77,10 @@ const Contacts = () => {
           className="mr-1 fill-white hover:scale-105 transition-all"
         />
       </a>
-      <a href="https://www.instagram.com/csesoc_unsw/?hl=en" target="_blank">
+      <a href="https://www.instagram.com/csesoc_unsw/?hl=en"
+         target="_blank"
+         className={socialsStyling}
+      >
         <Image
           src="assets/instagram_logo.svg"
           alt="Instagram"
@@ -77,7 +89,10 @@ const Contacts = () => {
           className="mr-1 fill-white hover:scale-105 transition-all"
         />
       </a>
-      <a href="https://www.tiktok.com/@csesoc?lang=en" target="_blank">
+      <a href="https://www.tiktok.com/@csesoc?lang=en"
+         target="_blank"
+         className={socialsStyling}
+      >
         <Image
           src="assets/tiktok_logo.svg"
           alt="TikTok"
@@ -86,7 +101,10 @@ const Contacts = () => {
           className="mr-1 fill-white hover:scale-105 transition-all"
         />
       </a>
-      <a href="https://www.linkedin.com/company/csesoc?originalSubdomain=au" target="_blank">
+      <a href="https://www.linkedin.com/company/csesoc?originalSubdomain=au"
+         target="_blank"
+         className={socialsStyling}
+      >
         <Image
           src="assets/linkedin_logo.svg"
           alt="LinkedIn"
@@ -95,7 +113,10 @@ const Contacts = () => {
           className="mr-1 fill-white hover:scale-105 transition-all"
         />
       </a>
-      <a href="https://member.arc.unsw.edu.au/s/clubdetail?clubid=0016F0000371VxAQAU" target="_blank">
+      <a href="https://member.arc.unsw.edu.au/s/clubdetail?clubid=0016F0000371VxAQAU"
+         target="_blank"
+         className={socialsStyling}
+      >
         <Image
           src="assets/arc_logo.svg"
           alt="Arc Membership Portal"