⚡ lang input placement

src/app/app.component.html

@@ -29,7 +29,7 @@
             >
             <select
                 name="language"
-                class="Language-"
+                class="language-selector"
                 (change)="switchLanguage(currentLang)"
                 [(ngModel)]="currentLang"
             >

src/app/app.component.scss

@@ -1,15 +1,19 @@
 @charset "UTF-8";
 
 header {
-  h1,
+    h1,
-  a {
+    a {
-    &::before,
+        &::before,
-    &::after {
+        &::after {
-      display: none;
+            display: none;
+        }
     }
-  }
 }
 
 i {
-  display: block;
+    display: block;
-}
+}
+
+.language-selector {
+    width: auto;
+}

src/app/pages/resume/resume.component.html

@@ -31,20 +31,11 @@
 
 </div >
 
-<button
+<button [routerLink]="'/step/visibility'"
-    (click)='submitCreationAndGoToEnd()'
+        class="btn btn--primary btn--full">
-    class="btn btn--primary btn--full"
-    i18n="@@confirm" >
     C'est parfait!
-    <i
+</button>
-        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

src/app/pages/resume/resume.component.ts

@@ -15,7 +15,4 @@ export class ResumeComponent extends BaseComponent {
         super(config);
     }
 
-    submitCreationAndGoToEnd() {
-        this.config.createPoll();
-    }
 }

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
+<button
-    [routerLink]="'/step/end'"
+    (click)='submitCreationAndGoToEnd()'
-    class="btn btn-link btn--primary" >
+    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

src/app/pages/visibility/visibility.component.scss

@@ -0,0 +1,5 @@
+:host {
+    h2 {
+        margin-top: 1em;
+    }
+}

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

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;

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;
+    position: relative;
-    height: 1rem;
+    font-family: $default_font;
-    border-bottom: 2px solid #000;
+    font-weight: 600;
-  }
+    font-size: 1.6rem;
+    color: $font_color !important;
 
-  &.next::after {
+    &,
-    margin-right: 1rem;
+    &:hover {
-    border-right: 2px solid #000;
+        text-decoration: none;
-    transform: rotate(-45deg);
+    }
-  }
 
-  &.prev::before {
+    &::before,
-    margin-left: 1rem;
+    &::after {
-    border-left: 2px solid #000;
+        content: "";
-    transform: rotate(45deg);
+    }
-  }
 
-  &: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 {
+    &.next::after,
-    padding-right: 1rem;
+    &.prev::before {
-    padding-left: 1rem;
+        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;
+    }
 }

src/assets/scss/molecules/_logo.scss

@@ -1,64 +1,70 @@
 .logo_first, .logo_second {
-  padding-left: 0;
+    padding-left: 0;
-  padding-right: 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;
+    display: grid;
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
-  width: 80px;
+    width: 20em;
-  margin-top: 1rem;
+    margin-top: 1rem;
+
+    select {
+        float: right;
+    }
 }
 
 .lang_icon {
-  grid-column: 1;
+    grid-column: 1;
-  grid-row: 1;
+    grid-row: 1;
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
+    margin-bottom: 1ch;
 }
 
 .menu_icon {
-  grid-column: 2;
+    grid-column: 2;
-  grid-row: 1;
+    grid-row: 1;
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
 }
 
 .lang_label {
-  grid-column: 1;
+    grid-column: 1;
-  grid-row: 2;
+    grid-row: 2;
 }
 
 .menu_label {
-  grid-column: 2;
+    grid-column: 2;
-  grid-row: 2;
+    grid-row: 2;
-  font-family: SourceSansPro;
+    font-family: SourceSansPro;
-  font-size: 11px;
+    font-size: 11px;
-  padding-top: 10px;
+    padding-top: 10px;
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
 }
 
 .legend_first {
-  color: $legend_color;
+    color: $legend_color;
-  padding-right: 0rem;
+    padding-right: 0rem;
-  padding-left: 0rem;
+    padding-left: 0rem;
 }
 
 .legend_second {
- color: $legend_color_2;
+    color: $legend_color_2;
- padding-right: 0rem;
+    padding-right: 0rem;
- padding-left: 0rem;
+    padding-left: 0rem;
 }
 
 .legend {
-  font-size: 10px;
+    font-size: 10px;
 }