Feature/add hint for community language support (#2793)

* Add hint

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added support to edit the currency of asset profiles with `MANUAL` data source in the asset profile details dialog of the admin control panel
+- Added a hint for the community languages in the user settings
 
 ### Changed
 

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -93,6 +93,10 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
     this.update();
   }
 
+  public isCommunityLanguage() {
+    return !(this.language === 'de' || this.language === 'en');
+  }
+
   public onChangeUserSetting(aKey: string, aValue: string) {
     this.dataService
       .putUserSetting({ [aKey]: aValue })

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -46,6 +46,18 @@
           <div class="align-items-center d-flex mb-2">
             <div class="pr-1 w-50">
               <div i18n>Language</div>
+              <div
+                *ngIf="isCommunityLanguage()"
+                class="hint-text text-muted"
+                i18n
+              >
+                If a translation is missing, kindly support us in extending it
+                <a
+                  href="https://github.com/ghostfolio/ghostfolio/blob/main/apps/client/src/locales/messages.{{language}}.xlf"
+                  target="_blank"
+                  >here</a
+                >.
+              </div>
             </div>
             <div class="pl-1 w-50">
               <mat-form-field appearance="outline" class="w-100 without-hint">

apps/client/src/app/components/user-account-settings/user-account-settings.scss

@@ -2,6 +2,15 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+
   .hint-text {
     font-size: 90%;
     line-height: 1.2;