diff --git a/src/assets/icons/discord.svg b/src/assets/icons/discord.svg new file mode 100644 index 0000000..6226f9b --- /dev/null +++ b/src/assets/icons/discord.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg new file mode 100644 index 0000000..73db284 --- /dev/null +++ b/src/assets/icons/github.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/mail.svg b/src/assets/icons/mail.svg new file mode 100644 index 0000000..f8f243d --- /dev/null +++ b/src/assets/icons/mail.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/footer/Footer.module.scss b/src/components/footer/Footer.module.scss index 411dc3c..c84f486 100644 --- a/src/components/footer/Footer.module.scss +++ b/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; + } } diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 1719e12..514500b 100644 --- a/src/components/footer/Footer.tsx +++ b/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 = () => { {t('privacy-link-text')}

{t('disclaimer')}

+
+ + + + + + + + + +
); }; diff --git a/src/components/icon/Icon.tsx b/src/components/icon/Icon.tsx index 842f22c..83ac735 100644 --- a/src/components/icon/Icon.tsx +++ b/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_right: () => , + discord: () => , flag_de: () => , flag_us: () => , + github: () => , logout: () => , + mail: () => , menu: () => , star: (args: StarIconProps) => , }; diff --git a/src/components/navigation/Navigation.module.scss b/src/components/navigation/Navigation.module.scss index 987a94b..a71cb9b 100644 --- a/src/components/navigation/Navigation.module.scss +++ b/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 } } diff --git a/src/components/navigation/mensa-selection/MensaSelection.module.scss b/src/components/navigation/mensa-selection/MensaSelection.module.scss index eeab848..12f0e69 100644 --- a/src/components/navigation/mensa-selection/MensaSelection.module.scss +++ b/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; +} diff --git a/src/components/navigation/mensa-selection/MensaSelection.tsx b/src/components/navigation/mensa-selection/MensaSelection.tsx index 4a3cff8..56b51d1 100644 --- a/src/components/navigation/mensa-selection/MensaSelection.tsx +++ b/src/components/navigation/mensa-selection/MensaSelection.tsx @@ -135,7 +135,7 @@ const MensaSelection = () => { > {isDev && data?.backends.map((backend, idx) => ( -