fix: ELECTRON-1171 (Sets font-family dynamically based on locale) (#765)

* ELECTRON-1171 - Apply font-family dynamically based on locale

* ELECTRON-1171 - Reset font family for network error

spec/__snapshots__/basicAuth.spec.ts.snap

@@ -3,6 +3,7 @@
 exports[`basic auth should render correctly 1`] = `
 <div
   className="container"
+  lang="en-US"
 >
   <span>
     Please provide your login credentials for:

src/renderer/components/basic-auth.tsx

@@ -48,7 +48,7 @@ export default class BasicAuth extends React.Component<{}, IState> {
         const { hostname, isValidCredentials } = this.state;
         const shouldShowError = classNames('credentials-error', { 'display-error': !isValidCredentials });
         return (
-            <div className='container'>
+            <div className='container' lang={i18n.getLocale()}>
                 <span>{i18n.t('Please provide your login credentials for:', BASIC_AUTH_NAMESPACE)()}</span>
                 <span className='hostname'>{hostname}</span>
                 <span id='credentialsError' className={shouldShowError}>{i18n.t('Invalid user name/password', BASIC_AUTH_NAMESPACE)()}</span>

src/renderer/components/network-error.tsx

@@ -57,7 +57,7 @@ export default class NetworkError extends React.Component<IProps, {}> {
                         </defs>
                     </svg>
                 </div>
-                <div className='main-message'>
+                <div className='main-message' lang={i18n.getLocale()}>
                     <p className='NetworkError-header'>
                         {i18n.t('Problem connecting to Symphony', NETWORK_ERROR_NAMESPACE)()}
                     </p>

src/renderer/styles/basic-auth.less

@@ -5,24 +5,27 @@
 html {
   margin: 0;
   height: 100%;
-  font-family: @font-family;
   font-size: 14px;
 }
 
 body {
   margin: 0;
   height: 100%;
-  font-family: @font-family;
   font-size: 14px;
 }
 
 .container {
   display: flex;
   flex-direction: column;
+  font-family: @font-family;
   text-align: center;
   padding: 20px;
 }
 
+.container:lang(ja-JP) {
+  font-family: @font-family-ja;
+}
+
 span {
   padding-top: 10px;
   text-align: start;

src/renderer/styles/network-error.less

@@ -7,6 +7,14 @@ body {
   margin: 0;
 }
 
+.main-message {
+  font-family: @font-family;
+}
+
+.main-message:lang(ja-JP) {
+  font-family: @font-family-ja;
+}
+
 a {
   color: rgb(17, 85, 204);
   text-decoration: none;
@@ -63,12 +71,12 @@ a {
   font-size: .8em;
   margin-top: 10px;
   text-transform: uppercase;
+  font-family: @font-family;
 }
 
 .content-wrapper {
   -webkit-text-size-adjust: 100%;
   box-sizing: border-box;
-  font-family: @font-family;
   font-size: 100%;
   line-height: 1.6em;
   margin: 14vh auto 0;

src/renderer/styles/theme.less

@@ -1,4 +1,5 @@
 @font-family: "Segoe UI", "Helvetica Neue", "Verdana", "Arial", sans-serif;
+@font-family-ja: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 @text-color-primary: #FFFFFF;
 @text-color-primary-dark: #2F3237;
 @text-color-secondary: #6A707C;