Registration css fixes

client/src/app/+signup/+register/custom-stepper.component.scss

@@ -5,8 +5,8 @@
 $index-block-height: 40px;
 
 header {
-  margin-bottom: 40px;
+  margin-bottom: 30px;
-  padding-bottom: 60px;
+  padding-bottom: 25px;
   width: 100%;
   background-color: pvar(--mainColorVeryLight);
 }

client/src/app/+signup/+register/register.component.html

@@ -27,7 +27,7 @@
               <strong>I already have an account</strong>, I log in
             </a>
 
-            <button i18n cdkStepperNext>I create an account</button>
+            <button i18n cdkStepperNext>Create an account</button>
           </div>
         </cdk-step>
 

client/src/app/+signup/+register/register.component.scss

@@ -1,6 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+my-signup-step-title strong {
+  font-weight: $font-bold;
+}
+
 .signup-disabled {
   padding-top: 30vh;
 }
@@ -8,11 +12,12 @@
 .title-page-v2 {
   background-color: pvar(--mainColorVeryLight);
   margin: 0;
+  padding-bottom: 10px;
 }
 
 my-instance-about-accordion {
   display: block;
-  margin-bottom: 25px;
+  margin-bottom: 30px;
 }
 
 .step-buttons {

client/src/app/+signup/+register/register.component.ts

@@ -42,8 +42,8 @@ export class RegisterComponent implements OnInit {
     moderation: false
   }
 
-  defaultPreviousStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Go to the previous step`
+  defaultPreviousStepButtonLabel = $localize`Go to the previous step`
-  defaultNextStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Go to the next step`
+  defaultNextStepButtonLabel = $localize`Go to the next step`
   stepUserButtonLabel = this.defaultNextStepButtonLabel
 
   signupDisabled = false

client/src/app/+signup/+register/steps/register-step-terms.component.html

@@ -5,7 +5,7 @@
         <ng-container i18n>
           I am at least {{ minimumAge }} years old and agree
           to the <a class="link-orange" (click)="onTermsClick($event)" href='#'>Terms</a>
-          <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
+          <ng-container *ngIf="hasCodeOfConduct"> and to the <a class="link-orange" (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
           of this instance
         </ng-container>
       </ng-template>

client/src/app/+signup/shared/signup-mascot.component.scss

@@ -3,7 +3,7 @@
 
 .root {
   display: inline-block;
-  width: 270px;
+  width: 230px;
 }
 
 div ::ng-deep svg {

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
+    <ngb-panel *ngIf="getAdministratorsPanel()" >
-      *ngIf="getAdministratorsPanel()"
+      <ng-template ngbPanelTitle>
-      id="admin-sustainability" i18n-title title="Administrators & Sustainability"
+        <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>

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;
+}
+

client/src/sass/bootstrap.scss

@@ -249,6 +249,18 @@
   }
 }
 
+.accordion-button {
+  font-size: 18px;
+
+  &:not(.collapsed) {
+    font-weight: $font-bold;
+
+    my-global-icon {
+      color: pvar(--mainColorLighter);
+    }
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Buttons & form controls
 // ---------------------------------------------------------------------------

client/src/sass/class-helpers.scss

@@ -5,10 +5,10 @@
 
 .link-orange {
   color: pvar(--mainForegroundColor);
-  font-weight: $font-bold;
+  font-weight: $font-semibold;
-  border-bottom: 0.19em solid pvar(--mainColor);
+  border-bottom: 0.18em solid pvar(--mainColor);
   display: inline-block;
-  line-height: 1.2;
+  line-height: 1.1;
 
   &:hover {
     color: pvar(--mainForegroundColor);

client/src/sass/include/_bootstrap-variables.scss

@@ -49,3 +49,5 @@ $dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
 
 $accordion-button-active-bg: pvar(--mainColorVeryLight);
 $accordion-button-active-color: pvar(--mainForegroundColor);
+$accordion-button-focus-border-color: pvar(--mainColorLightest);
+$accordion-button-focus-box-shadow: 0 0 0 .15rem pvar(--mainColorLightest);