From 5eba5d684b7c8b6194ac1676b4559d189792ec44 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Thu, 16 Jan 2020 11:13:34 +0100
Subject: [PATCH] :art: visual help on clickable elements

---
 src/app/app.component.html                    |  7 +-
 .../create-or-retrieve.component.html         | 88 +++++++++----------
 .../create-or-retrieve.component.ts           |  5 +-
 src/assets/scss/atoms/_buttons.scss           |  3 +
 src/assets/scss/atoms/_forms.scss             | 22 ++++-
 5 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 09f418e1..f0e044df 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -43,14 +43,11 @@
             </select>
             <span (click)="toggleMenu()" class="menu_label">Menu</span>
         </div>
-        <h1 i18n>{{"Title"|translate}}</h1>
-        <div>
-            {{"Intro"|translate:user}}
-        </div>
+
     </div>
 
 </header>
-<framadate-navigation [step]="step"></framadate-navigation>
+<framadate-navigation *ngIf="menuVisible" [step]="step"></framadate-navigation>
 <main>
     <router-outlet></router-outlet>
 </main>
diff --git a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html b/src/app/pages/create-or-retrieve/create-or-retrieve.component.html
index 561c9383..4e47f575 100644
--- a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html
+++ b/src/app/pages/create-or-retrieve/create-or-retrieve.component.html
@@ -1,51 +1,51 @@
 <div class="container">
-<section class="creation">
-    <h1>
-        {{"creation.title"|translate}}
-    </h1>
-    <p class="description margin-btm-x5" i18n>
-       {{"config.description"|translate}}
-    </p>
-    <div class="btn-next">
+    <section class="creation">
+        <h1>
+            {{"creation.title"|translate}}
+        </h1>
+        <p class="description margin-btm-x5" i18n>
+            {{"config.description"|translate}}
+        </p>
+        <div class="btn-next">
 
-				<button class="btn btn--full btn--primary">{{"config.letsgo"|translate}}</button>
+            <button [routerLink]="'step/date'" class="btn btn--full btn--primary">
+                {{"config.letsgo"|translate}}
+            </button>
 
-    </div>
-</section>
+        </div>
+    </section>
 
-<section class="recuperation">
-    <h1 class="margin-top-x8">
-        {{"config.find_my_polls"|translate}}
-    </h1>
-
-
-    <form
-        (ngSubmit)="findMyPollsByEmail(config.myEmail)"
-    >
-        <label
-            class="description"
-            for="email"
-            i18n
+    <section class="recuperation">
+        <h1 class="margin-top-x8">
+            {{"config.find_my_polls"|translate}}
+        </h1>
+        <form
+            (ngSubmit)="findMyPollsByEmail(config.myEmail)"
         >
-            {{"config.find_helper"|translate}} :
-        </label>
-        <input
-            type="email"
-            name="mail"
-            id="email"
-            autofocus="autofocus"
-            [(ngModel)]="config.myEmail"
-            required="required"
-        />
-        <input
-            type="submit"
-            class="btn btn-block"
-            [ngClass]="{'btn-primary': config.myEmail}"
-            i18n-value="'config.find_button'|translate"
-            [disabled]="!config.myEmail"
-        />
-    </form>
-</section>
+            <label
+                class="description"
+                for="email"
+                i18n
+            >
+                {{"config.find_helper"|translate}} :
+            </label>
+            <input
+                [(ngModel)]="config.myEmail"
+                autofocus="autofocus"
+                id="email"
+                name="mail"
+                required="required"
+                type="email"
+            />
+            <input
+                [disabled]="!config.myEmail"
+                [ngClass]="{'btn-primary': config.myEmail}"
+                class="btn btn-block"
+                i18n-value="'config.find_button'|translate"
+                type="submit"
+            />
+        </form>
+    </section>
     <section class="list-my-polls" *ngIf="!config.loading">
         <ul class="poll-list" *ngFor="let poll of config.myPolls">
             <li> poll</li>
@@ -60,6 +60,4 @@
     </div>
 
 
-
-
 </div>
diff --git a/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts b/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts
index fdaefbc9..5b6271a6 100644
--- a/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts
+++ b/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts
@@ -16,7 +16,10 @@ export class CreateOrRetrieveComponent extends BaseComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.findMyPollsByEmail('tktest@tktest.com')
+        // if (!environment.production) {
+        //     this.findMyPollsByEmail('tktest@tktest.com')
+        // }
+
     }
 
     findMyPollsByEmail(email: string) {
diff --git a/src/assets/scss/atoms/_buttons.scss b/src/assets/scss/atoms/_buttons.scss
index 769acde6..8a520838 100644
--- a/src/assets/scss/atoms/_buttons.scss
+++ b/src/assets/scss/atoms/_buttons.scss
@@ -18,6 +18,9 @@
         }
     }
 }
+.clickable {
+    cursor: pointer;
+}
 
 .btn {
     margin: .5rem 0;
diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss
index 5180aa05..741bff52 100644
--- a/src/assets/scss/atoms/_forms.scss
+++ b/src/assets/scss/atoms/_forms.scss
@@ -86,6 +86,14 @@ input {
             color: $violet;
             display: block;
             padding: 1em;
+            background: yellow;
+            position: relative;
+            top: -1em;
+            z-index: 2;
+            margin-right: 0.5em;
+            right: 0;
+            border: solid red 2px;
+            box-shadow: 0 0 10px orange;
         }
     }
 }
@@ -143,10 +151,16 @@ textarea {
     margin-top: 50px;
 }
 
-label {
-    align-items: flex-start;
-}
-
 .nobold {
     font-weight: normal;
 }
+
+select, input, textarea {
+    @extend .clickable;
+
+    &:active,
+    &:focus,
+    &:hover {
+        color: $primary_color;
+    }
+}