Event Description Card: Logo update

components/EventDescriptionCard.module.css

@@ -14,8 +14,9 @@
 }
 
 .details {
-  position: relative;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .name {
@@ -31,21 +32,9 @@
   margin-top: calc(12rem / 16);
 }
 
-.spacer {
-  height: calc(35rem / 16);
-}
-
-.button {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
 .logo {
   width: calc(32rem / 16);
-  position: absolute;
+  margin-left: auto;
-  bottom: 0;
-  right: 0;
 }
 
 .setting {
@@ -55,6 +44,14 @@
   font-size: calc(14rem / 16);
 }
 
+.details > footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 1rem;
+  margin-top: auto;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     padding: 0;

components/EventDescriptionCard.tsx

@@ -3,6 +3,7 @@ import { Button } from "./Button";
 import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
+import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
 
 interface Props {
   name: string;
@@ -14,21 +15,6 @@ interface Props {
   children: ReactNode;
 }
 
-function getPlatformURL(platform: string) {
-  switch (platform) {
-    case "Twitch":
-      return "https://www.twitch.tv/uwcsclub";
-    case "Discord":
-      return "https://discord.gg/pHfYBCg";
-    case "Facebook":
-      return "https://www.facebook.com/uw.computerscienceclub";
-    case "Instagram":
-      return "https://www.instagram.com/uwcsclub/";
-    default:
-      return;
-  }
-}
-
 /**
  * @remarks
  * - Child elements will display as the event's description
@@ -48,7 +34,7 @@ export function EventDescriptionCard({
   registerLink,
   children,
 }: Props) {
-  const platformURL = getPlatformURL(location);
+  const Icon = getIcon(location);
 
   return (
     <article className={styles.card}>
@@ -60,7 +46,6 @@ export function EventDescriptionCard({
           <EventSetting date={date} online={online} location={location} />
         </h2>
         <div className={styles.desc}>{children}</div>
-        <div className={styles.spacer}></div>
 
         <footer>
           {registerLink && (
@@ -70,17 +55,28 @@ export function EventDescriptionCard({
               </Button>
             </div>
           )}
-          {online && platformURL && (
+          {online && Icon && (
-            <a target="_blank" href={platformURL} rel="noreferrer">
+            <div className={styles.logo}>
-              <Image
+              <Icon color="blue" size="small" />
-                className={styles.logo}
+            </div>
-                alt={location}
-                src={"logos/" + location + ".png"}
-              />
-            </a>
           )}
         </footer>
       </div>
     </article>
   );
 }
+
+function getIcon(platform: string) {
+  switch (platform) {
+    case "Twitch":
+      return Twitch;
+    case "Discord":
+      return Discord;
+    case "Instagram":
+      return Instagram;
+    case "Facebook":
+      return Facebook;
+    default:
+      return null;
+  }
+}

components/SocialLinks.module.css

@@ -13,3 +13,11 @@
   width: calc(40rem / 16);
   height: calc(40rem / 16);
 }
+
+.blue {
+  fill: var(--blue-1);
+}
+
+.white {
+  fill: var(--white);
+}

components/SocialLinks.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./SocialLinks.module.css";
 
 interface Props {
-  color: "white" | "gradient";
+  color: "white" | "gradient" | "blue";
   size: "small" | "big";
 }
 
@@ -75,10 +75,11 @@ function InstagramSvg(color: string) {
         <stop offset="100%" stopColor="#4ED4B2" />
       </linearGradient>
       <path
+        className={color !== "gradient" ? styles[color] : ""}
+        fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.60352 8.00008C3.60352 6.58559 4.16542 5.22904 5.16561 4.22885C6.16581 3.22865 7.52236 2.66675 8.93685 2.66675H24.9368C26.3513 2.66675 27.7079 3.22865 28.7081 4.22885C29.7083 5.22904 30.2702 6.58559 30.2702 8.00008V24.0001C30.2702 25.4146 29.7083 26.7711 28.7081 27.7713C27.7079 28.7715 26.3513 29.3334 24.9368 29.3334H8.93685C7.52236 29.3334 6.16581 28.7715 5.16561 27.7713C4.16542 26.7711 3.60352 25.4146 3.60352 24.0001V8.00008ZM8.93685 5.33341C8.22961 5.33341 7.55133 5.61437 7.05123 6.11446C6.55113 6.61456 6.27018 7.29284 6.27018 8.00008V24.0001C6.27018 24.7073 6.55113 25.3856 7.05123 25.8857C7.55133 26.3858 8.22961 26.6667 8.93685 26.6667H24.9368C25.6441 26.6667 26.3224 26.3858 26.8225 25.8857C27.3226 25.3856 27.6035 24.7073 27.6035 24.0001V8.00008C27.6035 7.29284 27.3226 6.61456 26.8225 6.11446C26.3224 5.61437 25.6441 5.33341 24.9368 5.33341H8.93685ZM16.9368 12.0001C15.876 12.0001 14.8586 12.4215 14.1084 13.1717C13.3583 13.9218 12.9368 14.9392 12.9368 16.0001C12.9368 17.0609 13.3583 18.0784 14.1084 18.8285C14.8586 19.5787 15.876 20.0001 16.9368 20.0001C17.9977 20.0001 19.0151 19.5787 19.7653 18.8285C20.5154 18.0784 20.9368 17.0609 20.9368 16.0001C20.9368 14.9392 20.5154 13.9218 19.7653 13.1717C19.0151 12.4215 17.9977 12.0001 16.9368 12.0001ZM10.2702 16.0001C10.2702 14.232 10.9726 12.5363 12.2228 11.286C13.473 10.0358 15.1687 9.33342 16.9368 9.33342C18.705 9.33342 20.4007 10.0358 21.6509 11.286C22.9011 12.5363 23.6035 14.232 23.6035 16.0001C23.6035 17.7682 22.9011 19.4639 21.6509 20.7141C20.4007 21.9644 18.705 22.6667 16.9368 22.6667C15.1687 22.6667 13.473 21.9644 12.2228 20.7141C10.9726 19.4639 10.2702 17.7682 10.2702 16.0001ZM24.2702 10.6667C24.8006 10.6667 25.3093 10.456 25.6844 10.081C26.0595 9.70589 26.2702 9.19718 26.2702 8.66675C26.2702 8.13632 26.0595 7.62761 25.6844 7.25253C25.3093 6.87746 24.8006 6.66675 24.2702 6.66675C23.7397 6.66675 23.231 6.87746 22.856 7.25253C22.4809 7.62761 22.2702 8.13632 22.2702 8.66675C22.2702 9.19718 22.4809 9.70589 22.856 10.081C23.231 10.456 23.7397 10.6667 24.2702 10.6667Z"
-        fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
       />
     </svg>
   );
@@ -104,7 +105,8 @@ function DiscordSvg(color: string) {
           fillRule="evenodd"
           clipRule="evenodd"
           d="M24.4845 0.872314C26.1684 0.872314 27.5394 2.20412 27.5394 3.85441V29.8247L24.3355 27.0742L22.5323 25.4529L20.6249 23.7302L21.4147 26.4083H4.51584C2.83192 26.4083 1.46094 25.0765 1.46094 23.4262V3.85441C1.46094 2.20412 2.83192 0.872314 4.51584 0.872314H24.4845V0.872314ZM18.7323 19.7782C22.0256 19.6769 23.2923 17.5778 23.2923 17.5778C23.2923 12.9165 21.1464 9.13822 21.1464 9.13822C19.0005 7.57479 16.959 7.61822 16.959 7.61822L16.7504 7.84984C19.2837 8.6026 20.4609 9.68831 20.4609 9.68831C18.9111 8.86317 17.3911 8.45784 15.9755 8.2986C14.9025 8.18279 13.8743 8.21174 12.9653 8.32755L12.7119 8.35651C12.1904 8.39993 10.9237 8.58812 9.32917 9.26851C8.7778 9.5146 8.44996 9.68831 8.44996 9.68831C8.44996 9.68831 9.68682 8.5447 12.3692 7.79193L12.2202 7.61822C12.2202 7.61822 10.1786 7.57479 8.0327 9.13822C8.0327 9.13822 5.88682 12.9165 5.88682 17.5778C5.88682 17.5778 7.13859 19.6769 10.4319 19.7782C10.4319 19.7782 10.9833 19.1268 11.4304 18.5767C9.5378 18.0266 8.82251 16.8685 8.82251 16.8685L9.23976 17.1146L9.29937 17.158L9.35774 17.1906L9.37512 17.1978L9.43349 17.2304C9.80604 17.4331 10.1786 17.5923 10.5213 17.7226C11.1323 17.9542 11.8625 18.1858 12.7119 18.3451C13.8296 18.5477 15.1409 18.6201 16.5715 18.3596C17.2719 18.2437 17.9872 18.0411 18.7323 17.7371C19.2539 17.5489 19.8351 17.2738 20.446 16.883C20.446 16.883 19.7009 18.07 17.7488 18.6056C18.1958 19.1557 18.7323 19.7782 18.7323 19.7782ZM11.8029 13.0178C10.9535 13.0178 10.2829 13.7416 10.2829 14.6247C10.2829 15.5077 10.9684 16.2316 11.8029 16.2316C12.6523 16.2316 13.3229 15.5077 13.3229 14.6247C13.3378 13.7416 12.6523 13.0178 11.8029 13.0178ZM17.2421 13.0178C16.3927 13.0178 15.7221 13.7416 15.7221 14.6247C15.7221 15.5077 16.4076 16.2316 17.2421 16.2316C18.0915 16.2316 18.7621 15.5077 18.7621 14.6247C18.7621 13.7416 18.0915 13.0178 17.2421 13.0178Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
       </g>
       <defs>
@@ -112,7 +114,8 @@ function DiscordSvg(color: string) {
           <rect
             width="29.8039"
             height="28.9524"
-            fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+            className={color !== "gradient" ? styles[color] : ""}
+            fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
             transform="translate(0.217773 0.872314)"
           />
         </clipPath>
@@ -137,15 +140,18 @@ function TwitchSvg(color: string) {
       <g clipPath="url(#clip0)">
         <path
           d="M5.83051 0.872314L0.535156 6.15123V25.1553H6.88958V30.4342L12.1849 25.1553H16.4212L25.9529 15.6533V0.872314H5.83051ZM23.8347 14.5975L19.5984 18.8206H15.3622L11.6554 22.5159V18.8206H6.88958V2.98388H23.8347V14.5975Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
         <path
           d="M20.6572 6.6792H18.5391V13.0139H20.6572V6.6792Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
         <path
           d="M14.832 6.6792H12.7139V13.0139H14.832V6.6792Z"
-          fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+          className={color !== "gradient" ? styles[color] : ""}
+          fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
         />
       </g>
       <defs>
@@ -153,7 +159,8 @@ function TwitchSvg(color: string) {
           <rect
             width="25.4177"
             height="29.5619"
-            fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+            className={color !== "gradient" ? styles[color] : ""}
+            fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
             transform="translate(0.535156 0.872314)"
           />
         </clipPath>
@@ -179,7 +186,8 @@ function FacebookSvg(color: string) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.33268 2.66675H26.666C28.1388 2.66675 29.3327 3.86066 29.3327 5.33342V26.6668C29.3327 28.1395 28.1388 29.3334 26.666 29.3334H5.33268C3.85992 29.3334 2.66602 28.1395 2.66602 26.6668V5.33342C2.66602 3.86066 3.85992 2.66675 5.33268 2.66675ZM5.3311 5.33333V26.6667H26.6644V5.33333H5.3311ZM14.8428 16.0059H17.332V24H19.9987V16.0059H22.6419V13.3392H19.9987V12C19.9987 11.2636 20.5957 10.6667 21.332 10.6667H22.6654V8H21.332C19.1229 8 17.332 9.79086 17.332 12V13.3392H14.8428V16.0059Z"
-        fill={color === "gradient" ? "url(#bluegreen-gradient)" : "white"}
+        className={color !== "gradient" ? styles[color] : ""}
+        fill={color === "gradient" ? "url(#bluegreen-gradient)" : ""}
       />
     </svg>
   );