diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index 471b410..e89e840 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -8,7 +8,7 @@ import { NewsList } from "@/components/news/NewsList"; import { UpcomingEvents } from "@/components/events/UpcomingEvents"; import { Pig } from "@/components/general/Pig"; import Link from "next/link"; -import Icon from "@/components/general/Icon"; +import { Icon } from "@/components/general/Icon"; import { SectionHeader } from "@/components/general/SectionHeader"; const HomeFragmentDefinition = graphql(` diff --git a/web/src/components/associations/AssociationHeader.tsx b/web/src/components/associations/AssociationHeader.tsx index 095ee9f..11660be 100644 --- a/web/src/components/associations/AssociationHeader.tsx +++ b/web/src/components/associations/AssociationHeader.tsx @@ -2,7 +2,7 @@ import { AssociationFragment } from "@/gql/graphql"; import { Image } from "@/components/general/Image"; import styles from './associationHeader.module.scss'; import { Breadcrumb } from "../general/Breadcrumb"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; export const AssociationHeader = ({ association, diff --git a/web/src/components/blocks/ContactEntityBlock.tsx b/web/src/components/blocks/ContactEntityBlock.tsx index ff6a254..377dd69 100644 --- a/web/src/components/blocks/ContactEntityBlock.tsx +++ b/web/src/components/blocks/ContactEntityBlock.tsx @@ -1,7 +1,7 @@ import { ContactEntityBlock as ContactEntityBlockType } from "@/gql/graphql"; import styles from "./contactEntityBlock.module.scss"; import { formatNorwegianPhoneNumber, formatPhoneE164 } from "@/lib/common"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; export const ContactEntityBlock = ({ block, diff --git a/web/src/components/blocks/NeufAddressSectionBlock.tsx b/web/src/components/blocks/NeufAddressSectionBlock.tsx index 2f4d749..e41a663 100644 --- a/web/src/components/blocks/NeufAddressSectionBlock.tsx +++ b/web/src/components/blocks/NeufAddressSectionBlock.tsx @@ -1,4 +1,4 @@ -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; import styles from "./neufAddressSectionBlock.module.scss"; export const NeufAddressSectionBlock = () => { diff --git a/web/src/components/blocks/PageSection.tsx b/web/src/components/blocks/PageSection.tsx index bd51b8c..de13aaa 100644 --- a/web/src/components/blocks/PageSection.tsx +++ b/web/src/components/blocks/PageSection.tsx @@ -2,6 +2,7 @@ import { PageSectionBlock as PageSectionBlockType } from "@/gql/graphql"; import styles from "./pageSection.module.scss"; import { Blocks } from "./Blocks"; import slugify from "@sindresorhus/slugify"; +import { DecorativeIcon } from "../general/Icon"; export const PageSectionBlock = ({ block, @@ -17,7 +18,9 @@ export const PageSectionBlock = ({ >
-
+
+ {block.icon && } +

{block.title}

diff --git a/web/src/components/blocks/pageSection.module.scss b/web/src/components/blocks/pageSection.module.scss index 308ce88..624a552 100644 --- a/web/src/components/blocks/pageSection.module.scss +++ b/web/src/components/blocks/pageSection.module.scss @@ -55,7 +55,7 @@ align-items: center; justify-content: center; - img { + img, svg { width: 100%; } } \ No newline at end of file diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx index 9afe3b3..2c89bd6 100644 --- a/web/src/components/events/EventContainer.tsx +++ b/web/src/components/events/EventContainer.tsx @@ -21,7 +21,7 @@ import { parse, } from "date-fns"; import { unique } from "@/lib/common"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; import { useState } from "react"; import { VenueFragment } from "@/gql/graphql"; diff --git a/web/src/components/events/EventDetails.tsx b/web/src/components/events/EventDetails.tsx index b61c4ed..aeb396e 100644 --- a/web/src/components/events/EventDetails.tsx +++ b/web/src/components/events/EventDetails.tsx @@ -1,7 +1,7 @@ import { EventFragment } from "@/lib/event"; import styles from "./eventDetails.module.scss"; import { OrganizerList } from "./OrganizerList"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; import { DateList } from "./DateList"; function formatPrice(price: number | string): string { diff --git a/web/src/components/events/EventFilter.tsx b/web/src/components/events/EventFilter.tsx index fb80d4b..6566a3b 100644 --- a/web/src/components/events/EventFilter.tsx +++ b/web/src/components/events/EventFilter.tsx @@ -2,7 +2,7 @@ import { EventCategory, EventOrganizer } from "@/lib/event"; import styles from "./eventFilter.module.scss"; import { VenueFragment } from "@/gql/graphql"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; export const EventFilter = ({ eventCategories, diff --git a/web/src/components/events/EventHeader.tsx b/web/src/components/events/EventHeader.tsx index 528ad1f..008dfa5 100644 --- a/web/src/components/events/EventHeader.tsx +++ b/web/src/components/events/EventHeader.tsx @@ -2,7 +2,7 @@ import { EventFragment } from "@/lib/event"; import styles from "./eventHeader.module.scss"; import { ImageFigure } from "@/components/general/Image"; import { Breadcrumb } from "../general/Breadcrumb"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; export const EventHeader = ({ event }: { event: EventFragment }) => { // TODO: where should we show image attribution for the featured image? diff --git a/web/src/components/general/Icon.tsx b/web/src/components/general/Icon.tsx index b874385..b310d7e 100644 --- a/web/src/components/general/Icon.tsx +++ b/web/src/components/general/Icon.tsx @@ -1,6 +1,6 @@ import styles from "./icon.module.scss"; -export default function Icon({ +export function Icon ({ type, }: { type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "email" | "phone" | "instagram" | "facebook" | "flickr"; @@ -100,3 +100,34 @@ export default function Icon({
); } + + + +export function DecorativeIcon ({ + type, +}: { + type?: "pigHeadLogo" | "key" | "ticket" | "shield" | "bottle" | "lostProperty" | "pigsty" | "wheelchair" | "clock"; +}) { + return ( +
+ + + + + + +
+ ); +} diff --git a/web/src/components/general/icon.module.scss b/web/src/components/general/icon.module.scss index 56b086b..6e0ea48 100644 --- a/web/src/components/general/icon.module.scss +++ b/web/src/components/general/icon.module.scss @@ -5,6 +5,16 @@ vertical-align: middle; line-height: 1; + svg { + display: block; + width: 100%; + } +} + +.decorativeIcon { + width: var(--size-icon-large); + height: var(--size-icon-large); + svg { display: block; width: 100%; diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx index 2bc071c..a2fd27c 100644 --- a/web/src/components/layout/Footer.tsx +++ b/web/src/components/layout/Footer.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import styles from "./footer.module.scss"; import { NeonChillPig } from "../general/pigs/fun/NeonChillPig"; import { ToTop } from "./ToTop"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; import { getOpeningHours, getTodaysOpeningHoursForFunction, diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx index 7f5b76e..44e2800 100644 --- a/web/src/components/layout/Header.tsx +++ b/web/src/components/layout/Header.tsx @@ -4,7 +4,7 @@ import { usePathname, useRouter } from "next/navigation"; import Link from "next/link"; import styles from "./header.module.scss"; import { Logo, LogoIcon } from "@/components/general/Logo"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; import { useInView } from "react-intersection-observer"; import { getSearchPath } from "@/lib/common"; diff --git a/web/src/components/layout/ToTop.tsx b/web/src/components/layout/ToTop.tsx index d89ef33..47c167f 100644 --- a/web/src/components/layout/ToTop.tsx +++ b/web/src/components/layout/ToTop.tsx @@ -1,6 +1,6 @@ "use client"; import { useInView } from "react-intersection-observer"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; export const ToTop = () => { const scrollToTop = () => { diff --git a/web/src/components/search/SearchContainer.tsx b/web/src/components/search/SearchContainer.tsx index d5fe2c9..29873fc 100644 --- a/web/src/components/search/SearchContainer.tsx +++ b/web/src/components/search/SearchContainer.tsx @@ -3,8 +3,8 @@ import { useDebouncedCallback } from "use-debounce"; import { PageHeader } from "../general/PageHeader"; import { useSearchParams, usePathname, useRouter } from "next/navigation"; import { getSearchPath } from "@/lib/common"; -import styles from "./searchContainer.module.scss"; -import Icon from "../general/Icon"; +import styles from './searchContainer.module.scss'; +import { Icon } from "../general/Icon"; import Link from "next/link"; export function SearchContainer({ diff --git a/web/src/components/search/searchContainer.module.scss b/web/src/components/search/searchContainer.module.scss index 2eeee30..bb5fc40 100644 --- a/web/src/components/search/searchContainer.module.scss +++ b/web/src/components/search/searchContainer.module.scss @@ -1,6 +1,10 @@ .searchContainer { max-width: var(--size-width-lead); margin: 0 auto var(--spacing-section-bottom); + + a { + text-decoration: none; + } } .searchField { diff --git a/web/src/components/venues/VenueInfo.tsx b/web/src/components/venues/VenueInfo.tsx index aace188..ae3736b 100644 --- a/web/src/components/venues/VenueInfo.tsx +++ b/web/src/components/venues/VenueInfo.tsx @@ -2,7 +2,7 @@ import { VenueFragment } from "@/gql/graphql"; import styles from "./venueInfo.module.scss"; import Link from "next/link"; import { Image } from "@/components/general/Image"; -import Icon from "../general/Icon"; +import { Icon } from "../general/Icon"; export const VenueInfo = ({ venue }: { venue: VenueFragment }) => { return (