From 00ffa764278d557965359daae28a2f9e0795defd Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Sat, 9 Nov 2019 23:00:38 +0100
Subject: [PATCH] Final design for connect form.

---
 .../client-connect-form.component.html        | 19 ++++++++++++++-----
 .../client-connect-form.component.scss        | 10 ++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.html b/frontend/app/features/settings/pages/clients/client-connect-form.component.html
index 0e9548482..d5fa6c8aa 100644
--- a/frontend/app/features/settings/pages/clients/client-connect-form.component.html
+++ b/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"
-                    [class.breadcrumb-item-active]="isStart"
-                    [class.breadcrumb-item-done]="!isStart">
-                    <i class="icon-checkmark"></i> Choose connection method
-                </li>
+                <ng-container *ngIf="isStart; else noStart">
+                    <li class="breadcrumb-item breadcrumb-item-active">
+                        <span>
+                            <i class="icon-checkmark"></i> Choose connection method
+                        </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
diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.scss b/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
index 03f2c2b9a..f285a6d73 100644
--- a/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
+++ b/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;
             }