adjust help component, fix its instances in video-edit

2 files changed, 17 insertions, 5 deletions

diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index c11a60dce..4d3b84626 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -23,7 +23,7 @@
                   <ng-container i18n>
                     Tags could be used to suggest relevant recommendations. <br />
                     There is a maximum of 5 tags. <br />
-                    Press Enter to add a new tag.
+                    Press <kbd>Enter</kbd> to add a new tag.
                   </ng-container>
                 </ng-template>
               </my-help>
@@ -230,7 +230,13 @@
 
             <div class="form-group">
               <label i18n for="support">Support</label>
-              <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
+              <my-help helpType="markdownEnhanced">
+                <ng-template ptTemplate="preHtml">
+                  <ng-container i18n>
+                    Short text to tell people how they can support you (membership platform...).
+                  </ng-container>
+                </ng-template>
+              </my-help>
               <my-markdown-textarea
                 id="support" formControlName="support" markdownType="enhanced"
                 [classes]="{ 'input-error': formErrors['support'] }"
@@ -244,7 +250,13 @@
           <div class="col-md-12 col-xl-4">
             <div class="form-group originally-published-at">
               <label i18n for="originallyPublishedAt">Original publication date</label>
-              <my-help i18n-preHtml preHtml="This is the date when the content was originally published (e.g. the release date for a film)"></my-help>
+              <my-help>
+                <ng-template ptTemplate="preHtml">
+                  <ng-container i18n>
+                    This is the date when the content was originally published (e.g. the release date for a film)
+                  </ng-container>
+                </ng-template>
+              </my-help>
               <p-calendar
                 id="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat"
                 [locale]="calendarLocale" [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="myYearRange"
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 43f33a53a..1e7fb4fc6 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -8,10 +8,10 @@
   my-global-icon {
     width: 17px;
     position: relative;
-    top: -2px;
+    top: -1px;
     margin: 5px;
 
-    @include apply-svg-color(pvar(--mainForegroundColor))
+    @include apply-svg-color(pvar(--greyForegroundColor))
   }
 }