From ff5c11e79c42926296516f27cc95aa660e34a50d Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Mon, 20 Jan 2020 15:35:33 +0100
Subject: [PATCH] :zap: lang input placement

---
 src/app/app.component.html                    |   2 +-
 src/app/app.component.scss                    |  20 ++--
 src/app/pages/resume/resume.component.html    |  17 +--
 src/app/pages/resume/resume.component.ts      |   3 -
 .../visibility/visibility.component.html      |  20 +++-
 .../visibility/visibility.component.scss      |   5 +
 .../pages/visibility/visibility.component.ts  |   3 +
 src/assets/scss/atoms/_forms.scss             |   4 -
 src/assets/scss/atoms/_links.scss             | 108 +++++++++---------
 src/assets/scss/molecules/_logo.scss          |  72 ++++++------
 10 files changed, 133 insertions(+), 121 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 03679757..4ed856c6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -29,7 +29,7 @@
             >
             <select
                 name="language"
-                class="Language-"
+                class="language-selector"
                 (change)="switchLanguage(currentLang)"
                 [(ngModel)]="currentLang"
             >
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 68a285a8..bfbfe33c 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,15 +1,19 @@
 @charset "UTF-8";
 
 header {
-  h1,
-  a {
-    &::before,
-    &::after {
-      display: none;
+    h1,
+    a {
+        &::before,
+        &::after {
+            display: none;
+        }
     }
-  }
 }
 
 i {
-  display: block;
-}
\ No newline at end of file
+    display: block;
+}
+
+.language-selector {
+    width: auto;
+}
diff --git a/src/app/pages/resume/resume.component.html b/src/app/pages/resume/resume.component.html
index 70589446..1ab2dfee 100644
--- a/src/app/pages/resume/resume.component.html
+++ b/src/app/pages/resume/resume.component.html
@@ -31,20 +31,11 @@
 
 </div >
 
-<button
-    (click)='submitCreationAndGoToEnd()'
-    class="btn btn--primary btn--full"
-    i18n="@@confirm" >
+<button [routerLink]="'/step/visibility'"
+        class="btn btn--primary btn--full">
     C'est parfait!
-    <i
-        class='fa fa-paper-plane'
-        *ngIf="!config.loading" ></i >
-    <span
-        class="loading"
-        *ngIf="config.loading" >
-    <i class="fa fa-refresh fa-spin fa-fw" ></i >
-</span >
-</button >
+</button>
+
 
 <div class="back" >
     <a
diff --git a/src/app/pages/resume/resume.component.ts b/src/app/pages/resume/resume.component.ts
index ad7579ba..97c84e6a 100644
--- a/src/app/pages/resume/resume.component.ts
+++ b/src/app/pages/resume/resume.component.ts
@@ -15,7 +15,4 @@ export class ResumeComponent extends BaseComponent {
         super(config);
     }
 
-    submitCreationAndGoToEnd() {
-        this.config.createPoll();
-    }
 }
diff --git a/src/app/pages/visibility/visibility.component.html b/src/app/pages/visibility/visibility.component.html
index 3a47ec40..f84ca772 100644
--- a/src/app/pages/visibility/visibility.component.html
+++ b/src/app/pages/visibility/visibility.component.html
@@ -94,7 +94,7 @@
 
 </section >
 <section class="access" >
-    <h2 >
+    <h2 class='title' >
         {{"visibility.access"|translate}}
     </h2 >
     <label for="url" >
@@ -159,11 +159,21 @@
     </div >
 </section >
 
-<a
-    [routerLink]="'/step/end'"
-    class="btn btn-link btn--primary" >
+<button
+    (click)='submitCreationAndGoToEnd()'
+    class="btn btn--primary btn--full"
+    i18n="@@confirm" >
     {{"visibility.validate_btn"|translate}}
-</a >
+    <i
+        class='fa fa-paper-plane'
+        *ngIf="!config.loading" ></i >
+    <span
+        class="loading"
+        *ngIf="config.loading" >
+        <i class="fa fa-refresh fa-spin fa-fw" ></i >
+    </span >
+</button >
+
 <div class="back" >
 
     <a
diff --git a/src/app/pages/visibility/visibility.component.scss b/src/app/pages/visibility/visibility.component.scss
index e69de29b..9d21b95a 100644
--- a/src/app/pages/visibility/visibility.component.scss
+++ b/src/app/pages/visibility/visibility.component.scss
@@ -0,0 +1,5 @@
+:host {
+    h2 {
+        margin-top: 1em;
+    }
+}
diff --git a/src/app/pages/visibility/visibility.component.ts b/src/app/pages/visibility/visibility.component.ts
index 323c4e5f..9f1c3224 100644
--- a/src/app/pages/visibility/visibility.component.ts
+++ b/src/app/pages/visibility/visibility.component.ts
@@ -21,5 +21,8 @@ export class VisibilityComponent extends BaseComponent implements OnInit {
         this.config.expirationDate = (this.config.addDaysToDate(this.config.expiracyDateDefaultInDays, new Date())).toISOString().substring(0, 10);
     }
 
+    submitCreationAndGoToEnd() {
+        this.config.createPoll();
+    }
 
 }
diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss
index ad9328f0..b305701a 100644
--- a/src/assets/scss/atoms/_forms.scss
+++ b/src/assets/scss/atoms/_forms.scss
@@ -97,10 +97,6 @@ input {
     }
 }
 
-label {
-    font-weight: 600;
-    font-size: 18px;
-}
 
 .comment {
     border-left: 6px solid $ugly-purple;
diff --git a/src/assets/scss/atoms/_links.scss b/src/assets/scss/atoms/_links.scss
index 561103c8..d8244357 100644
--- a/src/assets/scss/atoms/_links.scss
+++ b/src/assets/scss/atoms/_links.scss
@@ -1,66 +1,66 @@
 @charset "UTF-8";
 
 a {
-  display: inline-block;
-  position: relative;
-  font-family: $default_font;
-  font-weight: 600;
-  font-size: 1.6rem;
-  color: $font_color;
-
-  &,
-  &:hover {
-    text-decoration: none;
-  }
-
-  &::before,
-  &::after {
-    content: "";
-  }
-
-  &.next::before,
-  &.prev::after {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    display: block;
-    width: 100%;
-    height: 0.6rem;
-    margin: auto;
-    background-color: $secondary_color;
-    z-index: -1;
-  }
-
-  &.next::after,
-  &.prev::before {
     display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    border-bottom: 2px solid #000;
-  }
+    position: relative;
+    font-family: $default_font;
+    font-weight: 600;
+    font-size: 1.6rem;
+    color: $font_color !important;
 
-  &.next::after {
-    margin-right: 1rem;
-    border-right: 2px solid #000;
-    transform: rotate(-45deg);
-  }
+    &,
+    &:hover {
+        text-decoration: none;
+    }
 
-  &.prev::before {
-    margin-left: 1rem;
-    border-left: 2px solid #000;
-    transform: rotate(45deg);
-  }
+    &::before,
+    &::after {
+        content: "";
+    }
 
-  &:hover {
     &.next::before,
     &.prev::after {
-      background-color: rgba($primary_color,0.7);
-
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        display: block;
+        width: 100%;
+        height: 0.6rem;
+        margin: auto;
+        background-color: $secondary_color;
+        z-index: -1;
     }
-  }
 
-  span {
-    padding-right: 1rem;
-    padding-left: 1rem;
-  }
+    &.next::after,
+    &.prev::before {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        border-bottom: 2px solid #000;
+    }
+
+    &.next::after {
+        margin-right: 1rem;
+        border-right: 2px solid #000;
+        transform: rotate(-45deg);
+    }
+
+    &.prev::before {
+        margin-left: 1rem;
+        border-left: 2px solid #000;
+        transform: rotate(45deg);
+    }
+
+    &:hover {
+        &.next::before,
+        &.prev::after {
+            background-color: rgba($primary_color, 0.7);
+
+        }
+    }
+
+    span {
+        padding-right: 1rem;
+        padding-left: 1rem;
+    }
 }
diff --git a/src/assets/scss/molecules/_logo.scss b/src/assets/scss/molecules/_logo.scss
index 06466ec7..2c9e2c72 100644
--- a/src/assets/scss/molecules/_logo.scss
+++ b/src/assets/scss/molecules/_logo.scss
@@ -1,64 +1,70 @@
 .logo_first, .logo_second {
-  padding-left: 0;
-  padding-right: 0;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .logo_first {
-  color: $logo_color;
+    color: $logo_color;
 }
 
 .logo_second {
-  color: $logo_color_2;
+    color: $logo_color_2;
 }
+
 .wrapper {
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  width: 80px;
-  margin-top: 1rem;
+    display: grid;
+    margin-left: auto;
+    margin-right: auto;
+    width: 20em;
+    margin-top: 1rem;
+
+    select {
+        float: right;
+    }
 }
 
 .lang_icon {
-  grid-column: 1;
-  grid-row: 1;
-  margin-left: auto;
-  margin-right: auto;
+    grid-column: 1;
+    grid-row: 1;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1ch;
 }
 
 .menu_icon {
-  grid-column: 2;
-  grid-row: 1;
-  margin-left: auto;
-  margin-right: auto;
+    grid-column: 2;
+    grid-row: 1;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .lang_label {
-  grid-column: 1;
-  grid-row: 2;
+    grid-column: 1;
+    grid-row: 2;
 }
 
 .menu_label {
-  grid-column: 2;
-  grid-row: 2;
-  font-family: SourceSansPro;
-  font-size: 11px;
-  padding-top: 10px;
-  margin-left: auto;
-  margin-right: auto;
+    grid-column: 2;
+    grid-row: 2;
+    font-family: SourceSansPro;
+    font-size: 11px;
+    padding-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .legend_first {
-  color: $legend_color;
-  padding-right: 0rem;
-  padding-left: 0rem;
+    color: $legend_color;
+    padding-right: 0rem;
+    padding-left: 0rem;
 }
 
 .legend_second {
- color: $legend_color_2;
- padding-right: 0rem;
- padding-left: 0rem;
+    color: $legend_color_2;
+    padding-right: 0rem;
+    padding-left: 0rem;
 }
 
 .legend {
-  font-size: 10px;
+    font-size: 10px;
 }