Print queries

crabfit-frontend/src/App.tsx

@@ -93,6 +93,7 @@ const App = () => {
           styles={theme => ({
             html: {
               scrollBehavior: 'smooth',
+              '-webkit-print-color-adjust': 'exact',
             },
             body: {
               backgroundColor: theme.background,

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -29,6 +29,7 @@ import {
   People,
   Person,
   StyledMain,
+  Info,
 } from './availabilityViewerStyle';
 
 import locales from 'res/dayjs_locales';
@@ -162,10 +163,10 @@ const AvailabilityViewer = ({
           total={people.filter(p => p.availability.length > 0).length}
           onSegmentFocus={count => setFocusCount(count)}
         />
-        <Center style={{textAlign: 'center'}}>{t('event:group.info1')}</Center>
+        <Info>{t('event:group.info1')}</Info>
         {people.length > 1 && (
           <>
-            <Center style={{textAlign: 'center'}}>{t('event:group.info2')}</Center>
+            <Info>{t('event:group.info2')}</Info>
             <People>
               {people.map((person, i) =>
                 <Person

crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts

@@ -220,3 +220,12 @@ export const Person = styled.button`
     border-color: ${props.theme.primary};
   `}
 `;
+
+export const Info = styled.span`
+  display: block;
+  text-align: center;
+
+  @media print {
+    display: none;
+  }
+`;

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -121,4 +121,14 @@ export const Pressable = styled.button`
       transform: none;
     }
   `}
+
+  @media print {
+    ${props => !props.secondary && `
+      box-shadow: 0 4px 0 0 ${props.secondaryColor || props.theme.primaryDark};
+    `}
+
+    &::before {
+      display: none;
+    }
+  }
 `;

crabfit-frontend/src/components/Footer/footerStyle.ts

@@ -19,4 +19,8 @@ export const Wrapper = styled.footer`
       margin-bottom: 20px;
     }
   `}
+
+  @media print {
+    display: none;
+  }
 `;

crabfit-frontend/src/components/Logo/logoStyle.ts

@@ -62,4 +62,8 @@ export const Tagline = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @media print {
+    display: none;
+  }
 `;

crabfit-frontend/src/components/Recents/Recents.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { AboutSection, StyledMain } from '../../pages/Home/homeStyle';
-import { Recent } from './recentsStyle';
+import { Wrapper, Recent } from './recentsStyle';
 
 dayjs.extend(relativeTime);
 
@@ -14,17 +14,19 @@ const Recents = ({ target }) => {
   const { t } = useTranslation(['home', 'common']);
 
   return !!recents.length && (
-    <AboutSection id="recents">
+    <Wrapper>
-      <StyledMain>
+      <AboutSection id="recents">
-        <h2>{t('home:recently_visited')}</h2>
+        <StyledMain>
-        {recents.map(event => (
+          <h2>{t('home:recently_visited')}</h2>
-          <Recent href={`/${event.id}`} target={target} key={event.id}>
+          {recents.map(event => (
-            <span className="name">{event.name}</span>
+            <Recent href={`/${event.id}`} target={target} key={event.id}>
-            <span locale={locale} className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created', { date: dayjs.unix(event.created).fromNow() })}</span>
+              <span className="name">{event.name}</span>
-          </Recent>
+              <span locale={locale} className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created', { date: dayjs.unix(event.created).fromNow() })}</span>
-        ))}
+            </Recent>
-      </StyledMain>
+          ))}
-    </AboutSection>
+        </StyledMain>
+      </AboutSection>
+    </Wrapper>
   );
 };
 

crabfit-frontend/src/components/Recents/recentsStyle.ts

@@ -1,5 +1,11 @@
 import styled from '@emotion/styled';
 
+export const Wrapper = styled.div`
+  @media print {
+    display: none;
+  }
+`;
+
 export const Recent = styled.a`
   text-decoration: none;
   display: flex;

crabfit-frontend/src/components/Settings/settingsStyle.ts

@@ -33,6 +33,9 @@ export const OpenButton = styled.button`
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
+  @media print {
+    display: none;
+  }
 `;
 
 export const Cover = styled.div`
@@ -81,6 +84,9 @@ export const Modal = styled.div`
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
+  @media print {
+    display: none;
+  }
 `;
 
 export const Heading = styled.span`

crabfit-frontend/src/pages/Event/Event.tsx

@@ -47,6 +47,7 @@ const Event = (props) => {
   const weekStart = useSettingsStore(state => state.weekStart);
 
   const addRecent = useRecentsStore(state => state.addRecent);
+  const removeRecent = useRecentsStore(state => state.removeRecent);
   const locale = useLocaleUpdateStore(state => state.locale);
 
   const { t } = useTranslation(['common', 'event']);
@@ -86,6 +87,9 @@ const Event = (props) => {
         document.title = `${response.data.name} | Crab Fit`;
       } catch (e) {
         console.error(e);
+        if (e.status === 404) {
+          removeRecent(id);
+        }
       } finally {
         setIsLoading(false);
       }
@@ -302,7 +306,7 @@ const Event = (props) => {
               }
               title={!!navigator.clipboard ? t('event:nav.title') : ''}
             >{copied ?? `https://crab.fit/${id}`}</ShareInfo>
-            <ShareInfo isLoading={isLoading}>
+            <ShareInfo isLoading={isLoading} className="instructions">
               {!!event?.name &&
                 <Trans i18nKey="event:nav.shareinfo">Copy the link to this page, or share via <a onClick={() => gtag('event', 'send_email', { 'event_category': 'event' })} href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event?.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://crab.fit/${id}`)}`}>email</a>.</Trans>
               }

crabfit-frontend/src/pages/Event/eventStyle.ts

@@ -38,6 +38,12 @@ export const EventDate = styled.span`
       border-radius: 3px;
     }
   `}
+
+  @media print {
+    &::after {
+      content: ' - ' attr(title);
+    }
+  }
 `;
 
 export const LoginForm = styled.form`
@@ -61,6 +67,10 @@ export const LoginForm = styled.form`
 export const LoginSection = styled.section`
   background-color: ${props => props.theme.primaryBackground};
   padding: 10px 0;
+
+  @media print {
+    display: none;
+  }
 `;
 
 export const Info = styled.p`
@@ -93,6 +103,12 @@ export const ShareInfo = styled.p`
       color: ${props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
     }
   `}
+
+  @media print {
+    &.instructions {
+      display: none;
+    }
+  }
 `;
 
 export const Tabs = styled.div`
@@ -100,6 +116,10 @@ export const Tabs = styled.div`
   align-items: center;
   justify-content: center;
   margin: 30px 0 20px;
+  
+  @media print {
+    display: none;
+  }
 `;
 
 export const Tab = styled.a`

crabfit-frontend/src/pages/Help/Help.tsx

@@ -20,6 +20,7 @@ import {
   Step,
   FakeCalendar,
   FakeTimeRange,
+  ButtonArea,
 } from './helpStyle';
 
 const Help = () => {
@@ -82,11 +83,13 @@ const Help = () => {
         />
       </StyledMain>
 
-      <AboutSection id="about">
+      <ButtonArea>
-        <StyledMain>
+        <AboutSection id="about">
-          <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
+          <StyledMain>
-        </StyledMain>
+            <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
-      </AboutSection>
+          </StyledMain>
+        </AboutSection>
+      </ButtonArea>
 
       <Footer />
     </>

crabfit-frontend/src/pages/Help/helpStyle.ts

@@ -108,3 +108,9 @@ export const FakeTimeRange = styled.div`
     border-radius: 2px;
   }
 `;
+
+export const ButtonArea = styled.div`
+  @media print {
+    display: none;
+  }
+`;

crabfit-frontend/src/pages/Privacy/Privacy.tsx

@@ -14,7 +14,7 @@ import {
   AboutSection,
   P,
 } from '../Home/homeStyle';
-import { Note } from './privacyStyle';
+import { Note, ButtonArea } from './privacyStyle';
 
 const translationDisclaimer = 'While the translated document is provided for your convenience, the English version as displayed at https://crab.fit is legally binding.';
 
@@ -98,11 +98,13 @@ const Privacy = () => {
         </div>
       </StyledMain>
 
-      <AboutSection id="about">
+      <ButtonArea>
-        <StyledMain>
+        <AboutSection>
-          <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
+          <StyledMain>
-        </StyledMain>
+            <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
-      </AboutSection>
+          </StyledMain>
+        </AboutSection>
+      </ButtonArea>
 
       <Footer />
     </>

crabfit-frontend/src/pages/Privacy/privacyStyle.ts

@@ -14,3 +14,9 @@ export const Note = styled.p`
     color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
   }
 `;
+
+export const ButtonArea = styled.div`
+  @media print {
+    display: none;
+  }
+`;