Final design for connect form.

frontend/app/features/settings/pages/clients/client-connect-form.component.html

@@ -9,11 +9,20 @@
                 <li class="breadcrumb-item breadcrumb-item-done">
                     <i class="icon-checkmark"></i> Setup client
                 </li>
-                <li class="breadcrumb-item breadcrumb-item-active"
+                <ng-container *ngIf="isStart; else noStart">
-                    [class.breadcrumb-item-active]="isStart"
+                    <li class="breadcrumb-item breadcrumb-item-active">
-                    [class.breadcrumb-item-done]="!isStart">
+                        <span>
-                    <i class="icon-checkmark"></i> Choose connection method
+                            <i class="icon-checkmark"></i> Choose connection method
-                </li>
+                        </span>
+                    </li>
+                </ng-container>
+                <ng-template #noStart>
+                    <li class="breadcrumb-item breadcrumb-item-done">
+                        <a class="force" (click)="go('Start')">
+                            <i class="icon-checkmark"></i> Choose connection method
+                        </a>
+                    </li>
+                </ng-template>
                 <li class="breadcrumb-item"
                     [class.breadcrumb-item-active]="!isStart">
                     <i class="icon-checkmark"></i> Connect

frontend/app/features/settings/pages/clients/client-connect-form.component.scss

@@ -4,6 +4,8 @@
 .breadcrumb {
     & {
         margin-bottom: 2rem;
+        background: none;
+        border: 1px solid $color-border;
     }
 
     &-item {
@@ -11,9 +13,17 @@
             display: none;
         }
 
+        &::before {
+            color: darken($color-border, 10%);
+        }
+
         &-done {
             color: $color-theme-green;
 
+            a {
+                color: $color-theme-green !important;
+            }
+
             i {
                 display: inline-block;
             }