Fix lint

4 files changed, 21 insertions, 25 deletions

diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html
index f43a46842..f2687e520 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.html
+++ b/client/src/app/+signup/+register/custom-stepper.component.html
@@ -2,9 +2,10 @@
   <header *ngIf="steps.length > 2">
     <div class="header-steps">
       <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
-        <div
-          class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step), 'c-hand': isAccessible(step) }" [attr.aria-current]="selectedIndex === i"
-          (click)="onClick(i)"
+        <button
+          class="step-info button-unstyle" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }"
+          [disabled]="!isAccessible(step)"
+          [attr.aria-current]="selectedIndex === i" (click)="onClick(i)"
         >
           <div class="step-index">
             <span class="visually-hidden" i18n>Step</span> {{ i + 1 }}
@@ -15,7 +16,7 @@
           </div>
 
           <div class="step-label">{{ step.label }}</div>
-        </div>
+        </button>
 
         <!-- Do no display if this is the last child -->
         <div *ngIf="!isLast" class="connector"></div>
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 919799716..264136b06 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -72,11 +72,6 @@ header {
   align-items: center;
   width: $index-block-height;
   opacity: 0.5;
-  cursor: default;
-
-  &.c-hand {
-    cursor: pointer;
-  }
 
   &.active,
   &.completed {
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index 86763e801..71bca63e3 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -92,9 +92,9 @@
             <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
 
             <div class="skip-step">
-              <span class="underline-orange" role="button" (click)="skipChannelCreation()">
+              <button class="underline-orange button-unstyle" (click)="skipChannelCreation()">
                 <strong i18n>I don't want to create a channel</strong>
-              </span>
+              </button>
 
               <div class="skip-step-description" i18n>You will be able to create a channel later</div>
             </div>
@@ -120,7 +120,7 @@
             [requiresEmailVerification]="requiresEmailVerification" [requiresApproval]="requiresApproval" [instanceName]="instanceName"
           ></my-signup-success-before-email>
 
-          <div *ngIf="signupError" class="steps-button">
+          <div *ngIf="signupError" class="step-buttons">
             <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
           </div>
         </cdk-step>
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 9904e4ab4..ae0fdbb6e 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -44,7 +44,19 @@ my-instance-about-accordion {
     }
   }
 
-  button,
+  > button {
+    @include peertube-button-big;
+
+    &[cdkStepperNext] {
+      @include orange-button;
+    }
+
+    &[cdkStepperPrevious] {
+      @include grey-button;
+    }
+  }
+
+  > button,
   .skip-step {
     margin-top: 20px;
     margin-bottom: 20px;
@@ -60,18 +72,6 @@ my-instance-about-accordion {
   }
 }
 
-button {
-  @include peertube-button-big;
-
-  &[cdkStepperNext] {
-    @include orange-button;
-  }
-
-  &[cdkStepperPrevious] {
-    @include grey-button;
-  }
-}
-
 .done-loader {
   display: flex;
   justify-content: center;