style: adjust wc-styling messages to make translation easier

Author: joanise

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.html

@@ -60,7 +60,7 @@ <h1 i18n="Title for style box" class="title">
     <div class="d-flex flex-row justify-content-between p-0">
       <span class="p-0"
         ><h2 i18n="Title for style writing box" class="subtitle">
-          Write or paste your style here
+          Write or paste your style sheet here
         </h2></span
       >
       <button mat-button (click)="updateStyle()">
@@ -87,7 +87,7 @@ <h1 i18n="Title for style box" class="title">
           i18n="Instructions for uploading font"
           for="defaultFont"
           class="form-label"
-          >Select an optional font (.woff2)</label
+          >Optional: use a custom font (.woff2)</label
         >
         <input
           #fontInputElement

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.ts

@@ -36,9 +36,8 @@ export class WcStylingComponent implements OnDestroy, OnInit {
     if (file.size > 10048576) {
       //10MB
       this.toastr.error(
-        $localize`File
-        ${file.name} could not be processed `,
-        $localize`File is too big`,
+        $localize`File ` + file.name + $localize` could not be processed.`,
+        $localize`File is too big.`,
         { timeOut: 2000 },
       );
 
@@ -55,15 +54,14 @@ export class WcStylingComponent implements OnDestroy, OnInit {
         );
         this.updateStyle();
         this.toastr.success(
-          $localize`File ` + file.name + $localize` processed. `,
+          $localize`File ` + file.name + $localize` processed.`,
           $localize`Great!`,
           { timeOut: 10000 },
         );
       })
       .catch((err) => {
         this.toastr.error(
-          $localize`Font
-        ${file.name} could not be processed `,
+          $localize`File ` + file.name + $localize` could not be processed.`,
           err,
           { timeOut: 2000 },
         );
@@ -75,9 +73,8 @@ export class WcStylingComponent implements OnDestroy, OnInit {
     if (file.size > 1048576) {
       //1MB
       this.toastr.error(
-        $localize`File
-        ${file.name} could not be processed `,
-        $localize`File is too big`,
+        $localize`File ` + file.name + $localize` could not be processed.`,
+        $localize`File is too big.`,
         { timeOut: 2000 },
       );
 
@@ -93,15 +90,15 @@ export class WcStylingComponent implements OnDestroy, OnInit {
         this.toastr.success(
           $localize`File ` +
             file.name +
-            $localize` processed. Content added to the text box.`,
+            $localize` processed.` +
+            $localize` Content loaded in the text box.`,
           $localize`Great!`,
           { timeOut: 10000 },
         );
       })
       .catch((err) => {
         this.toastr.error(
-          $localize`File
-        ${file.name} could not be processed `,
+          $localize`File ` + file.name + $localize` could not be processed.`,
           err,
           { timeOut: 2000 },
         );