Make a good part of the app localizable and add French translations (#325)

Co-authored-by: Yohan Boniface <yohanboniface@free.fr>

app/client/ui/OnBoardingPopups.ts

@@ -25,6 +25,7 @@
 import { Disposable, dom, DomElementArg, Holder, makeTestId, styled, svg } from "grainjs";
 import { createPopper, Placement } from '@popperjs/core';
 import { FocusLayer } from 'app/client/lib/FocusLayer';
+import {makeT} from 'app/client/lib/localization';
 import * as Mousetrap from 'app/client/lib/Mousetrap';
 import { bigBasicButton, bigPrimaryButton } from "app/client/ui2018/buttons";
 import { theme, vars } from "app/client/ui2018/cssVars";
@@ -35,6 +36,8 @@ import {delay} from "app/common/delay";
 import {reportError} from "app/client/models/errors";
 import {cssBigIcon, cssCloseButton} from "./ExampleCard";
 
+const t = makeT('OnBoardingPopups');
+
 const testId = makeTestId('test-onboarding-');
 
 // Describes an onboarding popup. Each popup is uniquely identified by its id.
@@ -296,7 +299,7 @@ class OnBoardingPopupsCtl extends Disposable {
           {style: `margin-right: 8px; visibility: ${isFirstStep ? 'hidden' : 'visible'}`},
         ),
         bigPrimaryButton(
-          isLastStep ? 'Finish' : 'Next', testId('next'),
+          isLastStep ? t('Finish') : t('Next'), testId('next'),
           dom.on('click', () => this._move(+1, true)),
         ),
       )