Found font! Also tests and styling

frontend-reactive/app/components/note/content.hbs

@@ -6,13 +6,13 @@
       type="button"
       class="note-content-toggle"
       {{on "click" this.expand}}
-    >Expand</div>
+    >{{t "note.expand"}}</div>
   {{else}}
     <div
       type="button"
       class="note-content-toggle"
       {{on "click" this.collapse}}
-    >Collapse</div>
+      >{{t "note.collapse"}}</div>
   {{/if}}
 
   {{/if}}

frontend-reactive/app/components/note/content.ts

@@ -6,6 +6,7 @@ export interface NoteContentSignature {
   // The arguments accepted by the component
   Args: {
     content: string;
+    preFormatted: boolean;
   };
   // Any blocks yielded by the component
   Blocks: {

frontend-reactive/app/components/note/interactions.hbs

@@ -1,8 +1,5 @@
+{{!-- TODO: Add translations --}}
 <div class="resource-preload">
-<link rel="preload" type="image" href="assets/svgs/reload-black.svg">
-<link rel="preload" type="image" href="assets/svgs/reload-coloured.svg">
-<link rel="preload" type="image" href="assets/svgs/heart-rainbow.svg">
-<link rel="preload" type="image" href="assets/svgs/heart-black-outline.svg">
 </div>
 <div class="note-interactions-wrapper">
 <div type="button" class="note-interactions-interaction-button" {{on "click" this.toggleBoost}}>
@@ -18,9 +15,7 @@
     <div
       type="button"
       class="note-interactions-interactions-button-like"
-      aria-label="Like or unlike"
-      aria-description="Send a like reaction or retract the current reaction"
-      {{on "click" this.toggleDefaultLike}}
+      aria-label="Like or unlike" {{on "click" this.toggleDefaultLike}}
     >
       {{#if this.hasReacted}}
         <Svgs::HeartOutline @class="note-interactions-interaction-icon"/>
@@ -32,9 +27,7 @@
     </div>
     <div
       class="note-interactions-interactions-button-custom"
-      aria-label="Send a custom reaction"
-      aria-description="Choose an emote and send that as custom reaction"
-      type="button"
+      aria-label="Send a custom reaction" type="button"
       {{on "click" this.openCustomReactionSelector}}
     >
       <Svgs::PlusBlack @class="note-interactions-interaction-icon"/>

frontend-reactive/app/components/note/interactions.ts

@@ -1,53 +1,53 @@
-import { action } from "@ember/object";
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import isLandscape from "frontend-reactive/helpers/isLandscape";
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import isLandscape from 'frontend-reactive/helpers/isLandscape';
 
 export interface NoteInteractionsSignature {
-	// The arguments accepted by the component
-	Args: {
-		boostCount: number;
-		totalLikeCount: number;
-		reactions: {
-			[key: string]: number;
-		};
-		hasBoosted: boolean;
-		hasReacted: boolean;
-	};
-	// Any blocks yielded by the component
-	Blocks: {
-		default: [];
-	};
-	// The element to which `...attributes` is applied in the component template
-	Element: null;
+  // The arguments accepted by the component
+  Args: {
+    boostCount: number;
+    totalLikeCount: number;
+    reactions: {
+      [key: string]: number;
+    };
+    hasBoosted: boolean;
+    hasReacted: boolean;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
 }
 
 export default class NoteInteractions extends Component<NoteInteractionsSignature> {
-	@tracked hasBoosted = this.args.hasBoosted;
-	@tracked hasReacted = this.args.hasReacted;
-	@tracked expandReactions = false;
+  @tracked hasBoosted = this.args.hasBoosted;
+  @tracked hasReacted = this.args.hasReacted;
+  @tracked expandReactions = false;
 
-	@action
-	toggleBoost() {
-		this.hasBoosted = !this.hasBoosted;
-		console.log("boosted", this.hasBoosted);
-	}
+  @action
+  toggleBoost() {
+    this.hasBoosted = !this.hasBoosted;
+    console.log('boosted', this.hasBoosted);
+  }
 
-	@action
-	toggleDefaultLike() {
-		this.hasReacted = !this.hasReacted;
-		console.log("reacted", this.hasReacted);
-	}
+  @action
+  toggleDefaultLike() {
+    this.hasReacted = !this.hasReacted;
+    console.log('reacted', this.hasReacted);
+  }
 
-	@action
-	openCustomReactionSelector() {
-		this.hasReacted = !this.hasReacted;
-		console.log("sent custom reaction", this.hasReacted);
-	}
+  @action
+  openCustomReactionSelector() {
+    this.hasReacted = !this.hasReacted;
+    console.log('sent custom reaction', this.hasReacted);
+  }
 
-	@action
-	openAllReactions() {
-		console.log("Toggle all reactions overview");
-		this.expandReactions = !this.expandReactions;
-	}
+  @action
+  openAllReactions() {
+    console.log('Toggle all reactions overview');
+    this.expandReactions = !this.expandReactions;
+  }
 }