Registration css fixes

2 files changed, 48 insertions, 9 deletions

diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
index 466d73ca4..94077fafa 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
@@ -3,17 +3,26 @@
 <div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
 
 <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
-  <ngb-panel *ngIf="panels.features" id="instance-features" i18n-title title="Features found on this instance">
+  <ngb-panel *ngIf="panels.features" id="instance-features">
+    <ng-template ngbPanelTitle>
+      <my-global-icon iconName="playlists"></my-global-icon>
+
+      <ng-container i18n>Features found on this instance</ng-container>
+    </ng-template>
+
     <ng-template ngbPanelContent>
       <my-instance-features-table></my-instance-features-table>
     </ng-template>
   </ngb-panel>
 
   <ng-container *ngIf="about">
-    <ngb-panel
-      *ngIf="getAdministratorsPanel()"
-      id="admin-sustainability" i18n-title title="Administrators & Sustainability"
-    >
+    <ngb-panel *ngIf="getAdministratorsPanel()" >
+      <ng-template ngbPanelTitle>
+        <my-global-icon iconName="playlists"></my-global-icon>
+
+        <ng-container i18n>Administrators & Sustainability</ng-container>
+      </ng-template>
+
       <ng-template ngbPanelContent>
         <div class="block">
           <strong i18n>Who are we?</strong>
@@ -32,25 +41,49 @@
       </ng-template>
     </ngb-panel>
 
-    <ngb-panel *ngIf="termsPanel" id="terms" [title]="getTermsTitle()">
+    <ngb-panel *ngIf="termsPanel" id="terms">
+      <ng-template ngbPanelTitle>
+        <my-global-icon iconName="playlists"></my-global-icon>
+
+        {{ getTermsTitle() }}
+      </ng-template>
+
       <ng-template ngbPanelContent>
         <div class="block" [innerHTML]="aboutHtml.terms"></div>
       </ng-template>
     </ngb-panel>
 
-    <ngb-panel *ngIf="moderationPanel" id="moderation-information" i18n-title title="Moderation information">
+    <ngb-panel *ngIf="moderationPanel" id="moderation-information">
+      <ng-template ngbPanelTitle>
+        <my-global-icon iconName="playlists"></my-global-icon>
+
+        <ng-container i18n>Moderation information</ng-container>
+      </ng-template>
+
       <ng-template ngbPanelContent>
         <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
       </ng-template>
     </ngb-panel>
 
-    <ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct" i18n-title title="Code of conduct">
+    <ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct">
+      <ng-template ngbPanelTitle>
+        <my-global-icon iconName="playlists"></my-global-icon>
+
+        <ng-container i18n>Code of conduct</ng-container>
+      </ng-template>
+
       <ng-template ngbPanelContent>
         <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
       </ng-template>
     </ngb-panel>
 
-    <ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id" [title]="pluginPanel.title">
+    <ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id">
+      <ng-template ngbPanelTitle>
+        <my-global-icon iconName="playlists"></my-global-icon>
+
+        <ng-container i18n>{{ pluginPanel.title }}</ng-container>
+      </ng-template>
+
       <ng-template ngbPanelContent>
         <div class="block" [innerHTML]="pluginPanel.html"></div>
       </ng-template>
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index c8e288462..9174f40c7 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -14,3 +14,9 @@
 .block {
   margin-bottom: 15px;
 }
+
+my-global-icon {
+  line-height: 24px;
+  margin-right: 15px;
+}
+