From 48056ca82ea3f9903bd6a284bead2fef94b8edd9 Mon Sep 17 00:00:00 2001 From: Bonnie Peng Date: Thu, 24 Jun 2021 02:10:51 +0000 Subject: [PATCH] Event Description Card: Logo update --- components/EventDescriptionCard.module.css | 25 +++++------ components/EventDescriptionCard.tsx | 46 ++++++++++----------- components/SocialLinks.module.css | 8 ++++ components/SocialLinks.tsx | 26 ++++++++---- public/logos/Discord.png | Bin 900 -> 0 bytes public/logos/Facebook.png | Bin 615 -> 0 bytes public/logos/Instagram.png | Bin 1077 -> 0 bytes public/logos/Twitch.png | Bin 575 -> 0 bytes 8 files changed, 57 insertions(+), 48 deletions(-) delete mode 100644 public/logos/Discord.png delete mode 100644 public/logos/Facebook.png delete mode 100644 public/logos/Instagram.png delete mode 100644 public/logos/Twitch.png diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css index 93364b1e..323fbfec 100644 --- a/components/EventDescriptionCard.module.css +++ b/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; - bottom: 0; - right: 0; + margin-left: auto; } .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; diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx index 0767c2a0..69e22887 100644 --- a/components/EventDescriptionCard.tsx +++ b/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 (
@@ -60,7 +46,6 @@ export function EventDescriptionCard({
{children}
-
{registerLink && ( @@ -70,17 +55,28 @@ export function EventDescriptionCard({ )} - {online && platformURL && ( - - {location} - + {online && Icon && ( +
+ +
)}
); } + +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; + } +} diff --git a/components/SocialLinks.module.css b/components/SocialLinks.module.css index 99ca6366..98f5e00b 100644 --- a/components/SocialLinks.module.css +++ b/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); +} diff --git a/components/SocialLinks.tsx b/components/SocialLinks.tsx index 7f8714d3..91847ac4 100644 --- a/components/SocialLinks.tsx +++ b/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) { ); @@ -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)" : ""} /> @@ -112,7 +114,8 @@ function DiscordSvg(color: string) { @@ -137,15 +140,18 @@ function TwitchSvg(color: string) { @@ -153,7 +159,8 @@ function TwitchSvg(color: string) { @@ -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)" : ""} /> ); diff --git a/public/logos/Discord.png b/public/logos/Discord.png deleted file mode 100644 index e231006c7cdcd5be8ea082c33e150e616189c983..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 900 zcmV-~1AF|5P)oR_~xUrcnFmu(jCAG+O7byf}~PpArNx?oI0kitX&q{Ey9J-3=n1pCKkXtN0B^H7<;ZmOjD7x6())5F#6w8EwJm8HK zuq3R>@z0n#HMYBS9W;@d2Skrf^Q!5CWcb#0z%qAv%jhD&$so*pv=l~X2XgP(!iP@$z7`XD3 z{UaD+5L_X4GB}v@y$$*a@ASP~8p&F7zd6ahq+Tz$gt`LnUBPXi?}G*rL?Y@A+=1;5bOriQL=Z{cL3dzXfpG@~A5z-n zj5BSOG*uz(B&C=il*}KRe4I09=F9;~z7Zllu;a^(UmPBT>@5@tM~^Xy_KjN!(o-`c zJ%8{3$Uj&DN=z^W*V95N**UmV7F?1*jRdN;6sPHNJJ}HewM4h4M!F~f30YNEtd2E^ zZS|NEYJdJ$(QUau>nH&4E^L74?6Y~o3a}C)ZRCs&Mk4D-sDM;~u>t00Yq!$K@{U|Z z9{Phz6%@y#(7^oU=5FtPcs3TeIQdzU`F$HvRt$jnf>`uoiZgF(xrp@qum-*UCWwen zT6=39%t;~9&1=pR7QmP#bz-s}^(RNFm`YA$IQZ+`hMT$_*$6&LB2a|L-`wAkHeG%+ zXIb#yoJPzi>T!h(lqZfUjJf-ToVJ60N4I}4YLXJJkGQVaqHgxd=^-P=M7CX_KRyzm zwxA$6r=$Dkzj(%+lxxxyrASkhB27_>G(|2VTW+Njfj8fN*9&aqn%pw;tm)WStagH- zOCO`kLJ^Sl50m?(oSgqj(zT%Ay{&6AUz9$~A``9I`qPxVZ8+!So88jr#fY2f!I}Ex zz8_XCiG~ogB@#EjyivyKGKS4-cfF8GUP;L!yaHe1pFdTIb4~yN002ovPDHLkV1lm` B5a|E_ diff --git a/public/logos/Instagram.png b/public/logos/Instagram.png deleted file mode 100644 index 83729cd354d1fa9cd16daf4667452b5cbd9cca55..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1077 zcmV-51j_q~P)xc&;}04AKDAfQowpK3(* zd+5QsB{R#=JHQSmJPztMh~3XdsulJylqivW0lgm*APbKOB-84HD1?#K!v>Hf10>sc zv~a36Bo3Lwzl?i@YwDmK<7FY(Yeb?StqykPm;N-snhrR|Ln@gS-g*akx$ZaGq7by% z5sB&oZIa*LCry&fDh>9I1euk>xu_YbifPGh8+v&dNLJUj@YGPp@!&*~sVZlUq$NqV z4qQhkvVo8+L{cMCJYv7-OVQ`fWlA4s_L>-55{g7S|Vjz}8 zmqpig80&aiG6HZVY2kQEoF`_>+ezF*Q*R&X6<~;dx`+7|(h94IT5_ z`AakjFktg1DnJ_wb+&z*8#l)Dbf28yP79{Q)I@8>0)@qUvbwf6Zj8?LE%jakZ^D#_ zsd{mwESoP{{RhbwzjX4reU<&*Ql7=h$YK%IVd)T5sbUD-w0g(tW==uDeF2@Ht79D| zOArIGh*JJ2un<$*D5g_ofQiTz9+zq8UC|2+4aC3@H@}VT^^}<-S&A@2&P8E0JVBAW zQGsC`X4;;JEXMWM!I(Y_$^k^-)NsuuHfGL8Jyn`$lODLUouEqE#=&OL#1>=x8-Ulqnw>u<&{lC)0@oTx)G`jW&NBd_F2sCRO!i`p`ds zIiq;i-&1!AIn3dXR_H*hcTN#U=|n|Z9W(T6NDz{1D>!#fU5iTeQ)6*8*f-Rfs4}E_ zXz(GxE7D4sF+-AIH1jap68c71-_Vt5%WKIC>xtkKEP vQL2!*VJ%=P)tb z!Y~v-uWyVLBqTCIM(7Cb2BiI|sz{|9umNF$c7yVP`qe6Bf-*uzNH^f46{%?K+CU^8 zG34O{q;h^@V{&s6KW-cX3U2+GZGh2-ieWJyQ&0#r06#cz8!E;i>=QvL05;SFJt)A~ zV06>;KqIa{y99Baq>g(9Y66cfu#h;mfP_*8U5>>Bx<0pJ7IkDf#yEI!TETj|`})%% zgjphfIC7d3RU8T>h#;~k;r)%GNo0*y@pXk5LEaaD`NJ^@)j*c}{=w(Q64-y<V{GTBwD&dDX@l0K#N3KfzlE> z1SEym34(af8MC3JfTZw~IP`X&RiKoFE&&PU$mNO^ssk?Ox0TjLQqB_sp%8Gg3asMn z$9$3<&{5Ajp N002ovPDHLkV1ig7>B0a2