Merge pull request #2 from code-star/main

restyle

Author: mdvanes

components/MeetupCard/MeetupCard.module.scss

@@ -13,10 +13,15 @@
   & > ul {
     list-style-type: none;
     padding: 0;
+    
+    & > li > a:hover {
+      text-decoration: underline;
+    }
 
     & > li {
       overflow: hidden;
 
+
       // &:hover h3 {
       //   // color: blue;
       //   text-shadow: 2px 2px 2px black;

components/PlaylistItemCard/PlaylistItemCard.module.scss

@@ -7,6 +7,10 @@
   flex-direction: column;
   gap: 10px;
 
+  &:hover {
+    background-color: lighten($highlight-card-bg, 10%);
+  }
+
   & > :global(.img) {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;

components/PublicationCard/PublicationCard.module.scss

@@ -6,7 +6,7 @@
   padding: 0 10px;
 
   &:hover {
-    background-color: #213c5e;
+    background-color: lighten($highlight-card-bg, 10%);
   }
 
   & > section {
@@ -25,12 +25,14 @@
 
 .publication-card--avatar {
   background-color: $orange;
+  background-size: 50px;
   border-radius: 50%;
   color: black;
-  height: 20px;
-  min-width: 20px;
+  height: 50px;
+  min-width: 50px;
   position: relative;
   text-align: center;
+  font-size: 40px;
 }
 
 .publication-card--author {

components/PublicationCard/PublicationCard.tsx

@@ -1,23 +1,42 @@
 import { FC } from "react";
 import { formatDate } from "../../lib/formatDate";
 import { IPublication } from "../../lib/publications/publications.types";
-// import { IPublication } from "../../lib/publications/getPublications";
 // import SanitizedHTML from 'react-sanitized-html';
 import styles from "./PublicationCard.module.scss";
 
 interface IPublicationCardProps {
   publication: IPublication;
 }
 
+const avatars: Record<string, string> = {
+  mdworld: "https://miro.medium.com/fit/c/176/176/0*gTl35Xy5zRcgu5wJ.png",
+  "nathan perdijk":
+    "https://miro.medium.com/fit/c/88/88/0*Bqr-dMZplB-namyY.jpg",
+  "bjorn ‘bjeaurn’":
+    "https://miro.medium.com/fit/c/176/176/0*o9UzuQyUwobacrCt.jpeg",
+  "hamza haiken":
+    "https://miro.medium.com/fit/c/176/176/2*1JTGoMi8_nuGQVO1EoItXg.png",
+  "nick ten veen":
+    "https://miro.medium.com/fit/c/88/88/2*k7vMxGfKwfqJ86TcprDA_Q.jpeg",
+};
+
 const PublicationCard: FC<IPublicationCardProps> = ({ publication }) => {
-  const { title, author, uniqueSlug, paragraphs, latestPublishedAt } =
-    publication;
+  const { title, author, uniqueSlug, latestPublishedAt } = publication;
+  const avatar = avatars[author.toLowerCase()];
   return (
     <a href={uniqueSlug} className={styles["publication-card"]}>
       <section>
-        {/* TODO map avatars */}
-        <div className={styles["publication-card--avatar"]}>
-          {author.slice(0, 1).toUpperCase()}
+        <div
+          className={styles["publication-card--avatar"]}
+          style={
+            avatar
+              ? {
+                  backgroundImage: `url(${avatar})`,
+                }
+              : {}
+          }
+        >
+          {avatar ? "" : author.slice(0, 1).toUpperCase()}
         </div>
         <div>
           <p className={styles["publication-card--author"]}>{author}</p>

components/UpcomingMeetupCard/UpcomingMeetupCard.module.scss

@@ -4,23 +4,36 @@
   border-radius: 4px;
   background-color: $highlight-card-bg;
   padding: 1rem;
+  text-align: center;
 
-  h3 {
-    margin: 0;
+  &:hover {
+    background-color: lighten($highlight-card-bg, 10%);
   }
 
-  p {
-    font-size: 80%;
-    margin-top: 2px;
-    color: $underline-text;
+  h2, h3 {
+    margin-top: 0;
   }
 
-  > a {
+  // h2 {
+  //   background-color: black;
+  //   padding: 1rem;
+  // }
+
+  > p > a {
     display: inline-block;
     background-color: $orange;
     border-radius: 4px;
     padding: 8px;
     font-weight: bold;
     color: black;
+    width: 100%;
+    max-width: $aside-width;
+    text-align: center;
+
+    @media (min-width: $main-width) {
+      // width: $aside-width - 30px;
+      max-width: auto;
+      // width: 100%;
+    }
   }
 }

components/UpcomingMeetupCard/UpcomingMeetupCard.tsx

@@ -1,18 +1,27 @@
 import { FC } from "react";
 import { IMeetupEvent } from "../../lib/meetup/meetup.types";
 import Image from "next/image";
-import { formatDate } from "../../lib/formatDate";
+
 import styles from "./UpcomingMeetupCard.module.scss";
 
 interface IUpcomingMeetupCardProps {
   meetup: IMeetupEvent;
 }
 
+const formatDate = (time: string) =>
+  new Date(time).toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+
 const UpcomingMeetupCard: FC<IUpcomingMeetupCardProps> = ({ meetup }) => {
   const { link, featured_photo, name, time } = meetup;
   return (
     <a href={link}>
       <section className={styles["upcoming-meetup-card"]}>
+        <h2>MEETUP</h2>
+        <h3>{name}</h3>
         {featured_photo && (
           <Image
             alt=""
@@ -21,9 +30,9 @@ const UpcomingMeetupCard: FC<IUpcomingMeetupCardProps> = ({ meetup }) => {
             height={200}
           />
         )}
-        <h3>{name}</h3>
-        <p>{formatDate(time)}</p>
-        <a href={link}>SIGN UP!</a>
+        <p>
+          <a href={link}>SIGN UP FOR {formatDate(time).toUpperCase()}</a>
+        </p>
       </section>
     </a>
   );

components/UpcomingMeetupList/UpcomingMeetupList.module.scss

@@ -4,6 +4,10 @@
   padding: 1rem;
   width: 100%;
 
+  & > :global(a) {
+    width: 100%;
+  }
+  
   @media (min-width: $main-width) {
     padding: 0;
     width: $aside-width;