Update My Program tab layout

client/src/components/ErrorMessage.tsx

@@ -7,19 +7,21 @@ interface Props {
   message: string;
   // If left undefined, a close button won't be shown
   closeError?: () => void;
+  className?: string;
 }
 
 export const ErrorMessage = ({
   message,
   closeError,
+  className,
 }: Props): ReactElement | null => {
   const { t } = useTranslation();
 
   if (!message) {
     return null;
   }
   return (
-    <p>
+    <p className={className}>
       <Container>
         <ErrorIcon icon={"circle-exclamation"} />
         {message}

client/src/components/InfoText.tsx

@@ -10,10 +10,15 @@ export enum InfoTextVariant {
 interface Props {
   children: ReactNode;
   variant?: InfoTextVariant;
+  className?: string;
 }
 
-export const InfoText = ({ children, variant }: Props): ReactElement => (
-  <p>
+export const InfoText = ({
+  children,
+  variant,
+  className,
+}: Props): ReactElement => (
+  <p className={className}>
     <Container $variant={variant ?? InfoTextVariant.INFO}>
       {variant === InfoTextVariant.WARNING && (
         <StyledIcon $color={`${variant}Icon`} icon={"triangle-exclamation"} />

client/src/components/PopularityInfo.tsx

@@ -19,6 +19,7 @@ interface Props {
   popularity: number;
   includeMsg: boolean;
   programType: ProgramType;
+  className?: string;
 }
 
 export const PopularityInfo = ({
@@ -27,6 +28,7 @@ export const PopularityInfo = ({
   popularity,
   includeMsg,
   programType,
+  className,
 }: Props): ReactElement => {
   const { t } = useTranslation();
 
@@ -47,7 +49,7 @@ export const PopularityInfo = ({
   }, [maxAttendance, minAttendance, popularity]);
 
   return (
-    <ProgramItemPopularityContainer>
+    <ProgramItemPopularityContainer className={className}>
       <ProgramItemPopularityIcon icon={icon} color={color} aria-hidden="true" />{" "}
       {includeMsg && (
         <span>

client/src/components/TertiaryButton.tsx

@@ -0,0 +1,42 @@
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
+import styled from "styled-components";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface Props {
+  children?: ReactNode;
+  onClick?: MouseEventHandler;
+  className?: string;
+  icon?: IconProp;
+}
+
+export const TertiaryButton = ({
+  children,
+  onClick,
+  className,
+  icon,
+}: Props): ReactElement => {
+  return (
+    <StyledButton className={className} onClick={onClick}>
+      {icon && <StyledIcon icon={icon} aria-hidden="true" />}
+      {children}
+    </StyledButton>
+  );
+};
+
+const StyledIcon = styled(FontAwesomeIcon)`
+  color: ${(props) => props.theme.textLink};
+  font-size: ${(props) => props.theme.iconSizeSmall};
+  padding-right: 4px;
+  vertical-align: middle;
+`;
+
+const StyledButton = styled.button`
+  font-size: ${(props) => props.theme.fontSizeSmall};
+  text-decoration: underline;
+  color: ${(props) => props.theme.textLink};
+  cursor: pointer;
+  border: none;
+  background-color: inherit;
+  padding-left: 0;
+`;

client/src/locales/en.ts

@@ -11,8 +11,10 @@ export const translationEN = {
     signup: "Save",
     cancelSignup: "Cancel sign-up",
     showAdmissionTicket: "Show admission ticket",
+    showInfo: "Show info",
     back: "Back",
     favorite: "Favorite",
+    unfavorite: "Remove from favorites",
     hideProgramItem: "Hide program item",
     showProgramItem: "Unhide program item",
     saveTime: "Save active time",

client/src/locales/fi.ts

@@ -11,8 +11,10 @@ export const translationFI = {
     signup: "Tallenna",
     cancelSignup: "Peru ilmoittautuminen",
     showAdmissionTicket: "Näytä pääsylippu",
+    showInfo: "Näytä tiedot",
     back: "Takaisin",
     favorite: "Lisää suosikkeihin",
+    unfavorite: "Poista suosikeista",
     hideProgramItem: "Piilota ohjelmanumero",
     showProgramItem: "Poista piilotus",
     saveTime: "Tallenna aktiivinen aika",

client/src/utils/icons.ts

@@ -21,7 +21,6 @@ import {
   faCircle as fasCircle,
   faDice as fasDice,
   faCalendarDays as fasCalendarDays,
-  faHeartCircleXmark as fasHeartCircleXmark,
   faCalendarXmark as fasCalendarXmark,
   faPersonChalkboard as fasPersonChalkboard,
   faArrowRight as fasArrowRight,
@@ -31,6 +30,8 @@ import {
   faCircleExclamation as fasCircleExclamation,
   faCircleCheck as fasCircleCheck,
   faBan as fasBan,
+  faCircleArrowRight as fasCircleArrowRight,
+  faTicket as fasTicket,
 } from "@fortawesome/free-solid-svg-icons";
 import {
   faHeart as farHeart,
@@ -62,7 +63,6 @@ export const getIconLibrary = (): void => {
     fasCircle,
     fasCalendarDays,
     fasDice,
-    fasHeartCircleXmark,
     fasCalendarXmark,
     fasPersonChalkboard,
     fasArrowRight,
@@ -72,5 +72,7 @@ export const getIconLibrary = (): void => {
     fasCircleExclamation,
     fasCircleCheck,
     fasBan,
+    fasCircleArrowRight,
+    fasTicket,
   );
 };

client/src/utils/timeFormatter.ts

@@ -58,3 +58,9 @@ export const formatProgramItemDuration = (mins: number): string => {
 
   return `${hoursStr} ${minutesStr}`;
 };
+
+export const formattedCurrentTime = (currentTime: Date): string => {
+  const timeFormat = "HH:mm:ss";
+  // eslint-disable-next-line no-restricted-syntax -- We want to call format here
+  return dayjs(currentTime).tz(TIMEZONE).format(timeFormat);
+};

client/src/views/admission-ticket/Admission.tsx

@@ -3,12 +3,14 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { capitalize } from "lodash-es";
-import dayjs from "dayjs";
-import { getTime, getWeekdayAndTime } from "client/utils/timeFormatter";
+import {
+  formattedCurrentTime,
+  getTime,
+  getWeekdayAndTime,
+} from "client/utils/timeFormatter";
 import { config } from "shared/config";
 import { ProgramItem } from "shared/types/models/programItem";
 import { RaisedCard } from "client/components/RaisedCard";
-import { TIMEZONE } from "shared/utils/initializeDayjs";
 
 interface Props {
   programItem: ProgramItem;
@@ -37,19 +39,13 @@ export const Admission = ({
     }, 1000);
   }, []);
 
-  const formattedCurrentTime = (): string => {
-    const timeFormat = "HH:mm:ss";
-    // eslint-disable-next-line no-restricted-syntax -- We want to call format here
-    return dayjs(currentTime).tz(TIMEZONE).format(timeFormat);
-  };
-
   return (
     <RaisedCard>
       <TextContainer>
         <Text>
           {eventName} {eventYear}
         </Text>
-        <TimeText>{formattedCurrentTime()}</TimeText>
+        <TimeText>{formattedCurrentTime(currentTime)}</TimeText>
 
         <BoldText>{programItem.title}</BoldText>
         <Text>{formatTime()}</Text>