address styling issues #128

src/components/footer/Footer.module.scss

@@ -1,11 +1,12 @@
 .footer {
   box-sizing: border-box;
   display: grid;
-  grid-template-areas: 'logo copyright legal' 'logo disclaimer disclaimer';
+  grid-template-areas: 'logo copyright legal social' 'logo disclaimer disclaimer social';
   grid-template-rows: 1fr 1fr;
-  grid-template-columns: auto auto 1fr;
+  grid-template-columns: auto auto 1fr auto;
   row-gap: 2pt;
   column-gap: 8pt;
+  align-items: center;
   padding: $main-content-padding 0;
   margin: #{$container-padding} #{-$container-padding} 0 #{-$container-padding};
 
@@ -21,6 +22,7 @@
 .copyright {
   display: inline;
   grid-area: copyright;
+  margin-right: $main-content-padding;
   font-family: $font-major;
   font-size: 11pt;
   font-weight: 600;
@@ -57,9 +59,45 @@
   }
 }
 
+.social {
+  display: flex;
+  grid-area: social;
+  gap: 20pt;
+  justify-content: center;
+
+  a {
+    display: grid;
+    place-items: center;
+    width: 34pt;
+    height: 34pt;
+    margin: -8pt;
+    background-color: #ffffff00;
+    border-radius: 99pt;
+    transition: background-color 0.1s ease;
+
+    &:hover {
+      background-color: $bg-darker;
+
+      path {
+        fill: #111111;
+      }
+    }
+
+    svg {
+      width: 14pt;
+      height: 14pt;
+
+      path {
+        fill: #444444;
+        transition: fill 0.1s ease;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: $viewport-mobile-from) {
   .footer {
-    grid-template-areas: 'copyright' 'legal' 'disclaimer';
+    grid-template-areas: 'copyright' 'social' 'legal' 'disclaimer';
     grid-template-columns: 1fr;
     row-gap: 8pt;
     padding: 40pt 0;
@@ -83,4 +121,8 @@
   .footer p {
     text-align: center;
   }
+
+  .social {
+    margin: 5pt 0 10pt 0;
+  }
 }

src/components/footer/Footer.tsx

@@ -2,6 +2,8 @@ import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import React from 'react';
 
+import Icon from '../icon';
+
 import styles from './Footer.module.scss';
 
 const Footer = () => {
@@ -17,6 +19,17 @@ const Footer = () => {
         <Link href={'/privacy'}>{t('privacy-link-text')}</Link>
       </div>
       <p>{t('disclaimer')}</p>
+      <div className={styles.social}>
+        <a href="https://github.com/mensatt">
+          <Icon name="github" />
+        </a>
+        <a href="https://discord.gg/wjeYsQQQ3R">
+          <Icon name="discord" />
+        </a>
+        <a href="mailto://[email protected]">
+          <Icon name="mail" />
+        </a>
+      </div>
     </footer>
   );
 };

src/components/icon/Icon.tsx

@@ -3,17 +3,23 @@ import { useMemo } from 'react';
 import StarIcon, { StarIconProps } from '../../assets/icons/Star';
 import ARROW_LEFT from '../../assets/icons/arrow_left.svg';
 import ARROW_RIGHT from '../../assets/icons/arrow_right.svg';
+import DISCORD from '../../assets/icons/discord.svg';
 import FLAG_DE from '../../assets/icons/flag_de.svg';
 import FLAG_US from '../../assets/icons/flag_us.svg';
+import GITHUB from '../../assets/icons/github.svg';
 import LOGOUT from '../../assets/icons/logout.svg';
+import MAIL from '../../assets/icons/mail.svg';
 import MENU from '../../assets/icons/menu.svg';
 
 const icons = {
   arrow_left: () => <ARROW_LEFT />,
   arrow_right: () => <ARROW_RIGHT />,
+  discord: () => <DISCORD />,
   flag_de: () => <FLAG_DE />,
   flag_us: () => <FLAG_US />,
+  github: () => <GITHUB />,
   logout: () => <LOGOUT />,
+  mail: () => <MAIL />,
   menu: () => <MENU />,
   star: (args: StarIconProps) => <StarIcon {...args} />,
 };

src/components/navigation/Navigation.module.scss

@@ -91,6 +91,11 @@
       margin-left: calc(24pt * 1.3);
       font-size: 14pt;
       text-align: left;
+
+      &::before {
+        width: 20pt;
+        height: 20pt;
+      }
     }
   }
 
@@ -142,5 +147,6 @@
     flex-shrink: 0;
     width: 15pt;
     height: 15pt;
+    margin-bottom: 2px; // temporary, just to align the icon by eye
   }
 }

src/components/navigation/mensa-selection/MensaSelection.module.scss

@@ -19,3 +19,25 @@
     outline: 2px solid $color-blue !important;
   }
 }
+
+.backend {
+  padding: 2pt;
+  cursor: pointer;
+  border-radius: $header-element-br;
+  transition: background-color 0.1s ease-out;
+
+  &:hover {
+    background-color: $bg-light;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $color-blue !important;
+  }
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 2px 0;
+  background-color: #dedede;
+}

src/components/navigation/mensa-selection/MensaSelection.tsx

@@ -135,7 +135,7 @@ const MensaSelection = () => {
     >
       {isDev &&
         data?.backends.map((backend, idx) => (
-          <label key={idx}>
+          <label key={idx} className={styles.backend}>
             <input
               type="radio"
               checked={data.activeBackendIdx === idx}
@@ -147,6 +147,7 @@ const MensaSelection = () => {
             {backend.name}
           </label>
         ))}
+      {isDev && <div className={styles.divider} />}
 
       {filteredLocations?.map((location) => (
         <button

src/components/occurrence/Occurrence.tsx

@@ -124,6 +124,8 @@ const Occurrence = ({ occurrence }: Props) => {
 
   const [popupOpen, setPopupOpen] = useState(false);
 
+  const canReview = dayjs(occurrence.date, DATE_FORMAT) <= currentDate;
+
   return (
     <div className={styles.content}>
       <div className={styles.image}>
@@ -145,7 +147,10 @@ const Occurrence = ({ occurrence }: Props) => {
         <h2>{occurrenceName}</h2>
         <div className={styles.priceAndRatingWrapper}>
           <div className={styles.pillsWrapper}>
-            <OccurrenceRating metadata={occurrence.dish.reviewData.metadata} />
+            <OccurrenceRating
+              metadata={occurrence.dish.reviewData.metadata}
+              onClick={canReview ? () => setPopupOpen(true) : undefined}
+            />
             <OccurrenceTags tags={occurrence.tags} />
           </div>
           {prices}
@@ -166,7 +171,7 @@ const Occurrence = ({ occurrence }: Props) => {
                     even replace popups with own implementation
           */}
           <button
-            disabled={dayjs(occurrence.date, DATE_FORMAT) > currentDate}
+            disabled={!canReview}
             className={styles.rate}
             onClick={() => setPopupOpen(true)}
           >

src/components/occurrence/rating/OccurrenceRating.tsx

@@ -9,13 +9,15 @@ type Props = {
   metadata?: GetOccurrencesByDateQuery['occurrences'][number]['dish']['reviewData']['metadata'];
   onSetSelectedStars?: (stars: number) => void;
   className?: string;
+  onClick?: () => void;
 };
 
 const OccurrenceRating = ({
   metadata,
   onSetSelectedStars,
   className,
   hideAmount = false,
+  onClick,
 }: Props) => {
   const [hoverStarAmount, setHoverStarAmount] = useState(0);
   const [selectedStars, setSelectedStars] = useState(0);
@@ -54,7 +56,10 @@ const OccurrenceRating = ({
           onMouseEnter={() => isInteractive && setHoverStarAmount(idx + 1)}
           onMouseLeave={() => isInteractive && setHoverStarAmount(0)}
           onClick={() => {
-            if (!isInteractive) return;
+            if (!isInteractive) {
+              onClick?.();
+              return;
+            }
             setSelectedStars(idx + 1);
             if (onSetSelectedStars) {
               onSetSelectedStars(idx + 1);
@@ -64,7 +69,7 @@ const OccurrenceRating = ({
           <Icon name="star" percentage={determineStarPercentage(idx)} />
         </div>
       )),
-    [determineStarPercentage, isInteractive, onSetSelectedStars],
+    [determineStarPercentage, isInteractive, onClick, onSetSelectedStars],
   );
 
   return (

src/components/occurrence/tags/OccurrenceTags.module.scss

@@ -29,6 +29,7 @@
   padding: 5px;
   color: #ffffff;
   text-align: center;
+  pointer-events: none;
   visibility: hidden;
   background-color: black;
   border-radius: 6px;

src/components/occurrence/tags/OccurrenceTags.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from 'next-i18next';
 import React, { useMemo } from 'react';
 import { GetOccurrencesByDateQuery, Priority } from 'src/graphql/graphql-types';
 
@@ -28,7 +27,6 @@ const sortTags = (a: Tag, b: Tag) => {
 };
 
 const OccurrenceTags = ({ tags }: Props) => {
-  const { t } = useTranslation('common');
   const tagsClone = useMemo(() => [...tags], [tags]);
   const sortedByPriority = useMemo(
     () =>
@@ -56,7 +54,7 @@ const OccurrenceTags = ({ tags }: Props) => {
       {sortedByPriority.length > TAG_LIMIT && (
         // TODO: Enable once feature is implemented
         <button className={styles.showMore} disabled>
-          {t('showMore')}
+          +{sortedByPriority.length - TAG_LIMIT}
         </button>
       )}
     </>