Reduce UI bundle size (#790)

* Do not import unused fonts, they are huuuge
* Change to much smaller PNG logos

.gitattributes

@@ -1,4 +1,5 @@
 # Always use LF for line endings
 * text eol=lf
 # Apart from font files
-*.[ot]tf binary
+*.[ot]tf binary
+*.png -text

frontend/src/assets/fonts/README.md

@@ -1,19 +1,26 @@
 # Export PDF Language Support
 
-To support multiple languages with special characters we need to register fonts and set the fontFamily (example in ExportContent.tsx)
-Download font families tts or otf files from https://fonts.google.com/noto to assets/fonts/
+To support multiple languages with special characters we need to register fonts and set the font-family:
+see [ExportContent.tsx](../../components/ExportChat/ExportContent.tsx). You can download additional font families
+(ttf or otf) from https://fonts.google.com/noto and place in src/assets/fonts.
 
-Currently can only use a single file at a time, so we can merge multiple using script from https://github.com/notofonts/nototools/blob/main/nototools/merge_fonts.py.
+Currently only a single font-family can be used at a time, so multiple fonts can be merged using this script:
+https://github.com/notofonts/nototools/blob/main/nototools/merge_fonts.py.
 
 The current CombinedFont.ttf contains:
 
 - NotoSans-Regular.ttf
-- NotoSerifDevanagari-Regular.ttf
 - NotoKufiArabic-Regular.ttf
+- NotoSansHebrew-Regular.ttf
 - NotoSansThai-Regular.ttf
 - NotoSerifBengali_Condensed-Regular.ttf
+- NotoSerifDevanagari-Regular.ttf
 - NotoSerifGurmukhi-Regular.ttf
-- NotoSansHebrew-Regular.ttf
+
+No [CJK](https://en.wikipedia.org/wiki/List_of_CJK_fonts) font packs are included in the CombinedFonts family, as they
+are rather large. If you are running the application locally and wish to export chats in a CJK font, you will need to
+download the font(s) you need, then either generate your own CombinedFonts.ttf or modify the code in
+[ExportContent.tsx](../../components/ExportChat/ExportContent.tsx) accordingly.
 
 ## License
 

frontend/src/components/ExportChat/ExportContent.tsx

@@ -8,20 +8,21 @@ import {
 } from '@react-pdf/renderer';
 
 import CombinedFonts from '@src/assets/fonts/CombinedFonts.ttf';
-import NotoSansSC from '@src/assets/fonts/NotoSansSC-Regular.ttf';
-import NotoSerifJP from '@src/assets/fonts/NotoSerifJP-Regular.otf';
 import { ChatMessage } from '@src/models/chat';
 import { EmailInfo } from '@src/models/email';
 import { LEVEL_NAMES } from '@src/models/level';
 
 import ExportChatBox from './ExportChatBox';
 import ExportEmailBox from './ExportEmailBox';
 
-Font.register({ family: 'CombinedFonts', src: CombinedFonts });
+/*
+To use your own downloaded font(s) for chat export, do either of the following:
+- register a single font here, then change fontFamily in StyleSheet.create()
+- produce your own CombinedFonts.ttf containing all the fonts you need
 
-// chinese and japanese - currently multi lang not supported
-Font.register({ family: 'NotoSerifJP', src: NotoSerifJP });
-Font.register({ family: 'NotoSansSC', src: NotoSansSC });
+See the README in src/assets/fonts/
+*/
+Font.register({ family: 'CombinedFonts', src: CombinedFonts });
 
 const styles = StyleSheet.create({
 	page: {

frontend/src/components/MainComponent/MainHeader.tsx

@@ -1,8 +1,8 @@
 import GettingStarted from '@src/assets/icons/GettingStarted.svg';
 import HandbookIcon from '@src/assets/icons/Handbook.svg';
 import ResetProgress from '@src/assets/icons/ResetProgressIcon.svg';
-import SpyLogicTitleLogo from '@src/assets/images/SpyLogicTitleLogo.svg';
-import SpyLogicTitleLogoAffirmative from '@src/assets/images/SpyLogicTitleLogo_Affirmative.svg';
+import SpyLogicLogo from '@src/assets/images/SpyLogicLogo.png';
+import SpyLogicLogoAffirmative from '@src/assets/images/SpyLogicLogo_Affirmative.png';
 import LevelSelectionBox from '@src/components/LevelSelectionBox/LevelSelectionBox';
 import ThemedButton from '@src/components/ThemedButtons/ThemedButton';
 import { LEVEL_NAMES } from '@src/models/level';
@@ -31,9 +31,7 @@ function MainHeader({
 			<span className="main-header-left">
 				<img
 					className="title-logo"
-					src={
-						isLevelComplete ? SpyLogicTitleLogoAffirmative : SpyLogicTitleLogo
-					}
+					src={isLevelComplete ? SpyLogicLogoAffirmative : SpyLogicLogo}
 					alt="Spy Logic"
 				/>
 				<h1 className="visually-hidden">Spy Logic</h1>