🎨 visual help on clickable elements

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>

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>

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) {

src/assets/scss/atoms/_buttons.scss

@@ -18,6 +18,9 @@
         }
     }
 }
+.clickable {
+    cursor: pointer;
+}
 
 .btn {
     margin: .5rem 0;

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