csc multiple selectors

my-workspace/projects/sae-lib/filters/filters-group/filters-group.html

@@ -1,8 +1,11 @@
 <div class="filter-group">
   <div class="selectors">
-
+    <sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
-
+    <sae-multi-selector [label]="'Findings'"></sae-multi-selector>
-    <sae-multi-selector></sae-multi-selector>
+    <sae-multi-selector [label]="'ATA'"></sae-multi-selector>
+    <sae-multi-selector [label]="'Part number'"></sae-multi-selector>
+    <sae-multi-selector [label]="'Technical Manual'"></sae-multi-selector>
+    <sae-multi-selector [label]="'On-wing/off-wing'"></sae-multi-selector>
   </div>
   <div class="chips-listing">
     <!--    liste de chips-->

my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss

@@ -1,5 +1,11 @@
 @use '../../src/styles/variables';
 
+.selectors {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
 .dropdown {
   .dropdown-button {
     padding: 10px;

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html

@@ -1,8 +1,8 @@
 <!--    sélecteurs-->
 <div class="input-box">
   <i class="ri-search-line"></i>
-  <!--      <div class="label">Engine type</div>-->
+  <div class="label">{{ label }}</div>
-  <input class="is-hidden" placeholder="Engine type" type="text">
+  <input class="is-hidden" placeholder="{{label}}" type="text">
   <div class="dropdown">
     <div class="dropdown-button">
 

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'sae-multi-selector',
@@ -7,5 +7,6 @@ import {Component} from '@angular/core';
   styleUrl: './multi-selector.scss'
 })
 export class MultiSelector {
+  @Input() label!: string;
 
 }

sae-csc/src/app/app.routes.ts

@@ -8,13 +8,25 @@ export const routes: Routes = [{
   path: '',
   component: Main
 },
+  {
+    path: 'login',
+    component: Login
+  },
   {
     path: 'admin',
     component: Admin
   },
   {
-    path: 'login',
+    path: 'home',
-    component: Login
+    component: Main
+  },
+  {
+    path: 'main',
+    component: Main
+  },
+  {
+    path: 'login/home',
+    component: Main
   },
   {
     path: 'similar-cases',

sae-csc/src/app/pages/login/login.html

@@ -26,12 +26,15 @@
           </a>
         </p>
         <p>
-          <button class="button has-gradient">
+          <a class="button has-gradient" routerLink="/home">
           <span class="label">
-          Login to start |
+          Login to start
           </span>
+            <span class="pipe">
+              |
+            </span>
             <i class="ri-arrow-right-line"></i>
-          </button>
+          </a>
         </p>
 
       </div>

sae-csc/src/app/pages/login/login.scss

@@ -25,7 +25,6 @@
     margin-bottom: 40px;
 
     a {
-      color: var(--Dark-brand-primary-400, #337DC3);
 
       /* Body/Body 4/Sb */
       font-family: Barlow;
@@ -36,6 +35,8 @@
       &:hover {
         color: white;
       }
+
+      text-decoration: none;
     }
   }
 

sae-csc/src/app/pages/login/login.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {LoginForm} from 'sae-lib/forms/login-form/login-form';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-login',
   imports: [
-    LoginForm
+    RouterLink
   ],
   templateUrl: './login.html',
   styleUrl: './login.scss'

sae-csc/src/app/pages/main/main.html

@@ -32,7 +32,10 @@
       </h2>
       <!--filters-->
       <!--      advanced filters-->
-      <sae-filters-group></sae-filters-group>
+      <div class="filters-container">
+
+        <sae-filters-group></sae-filters-group>
+      </div>
     </div>
   </main>
   <footer>

sae-csc/src/app/pages/main/main.scss

@@ -14,7 +14,8 @@
 
 #translation_request {
   .helper {
-    padding-left: 4.5%;
+    padding-left: 5.3vw;
+    padding-bottom: 16px;
   }
 }
 

sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html

@@ -9,7 +9,14 @@
   </nav>
   <div class="fixed-navigation">
     <button class="next-step" routerLink="similar-cases">
+      <span class="label">
+
       Search similar cases
+      </span>
+      <span class="pipe">
+        |
+      </span>
+      <i class="ri-arrow-right-line"></i>
     </button>
   </div>
 </div>

sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss

@@ -1,14 +1,48 @@
-.next-step{
+.bottom-navigation {
-  color: var(--color-text-invert, #FFF);
+  padding: 0 60px 16px;
+
+  .nav-item {
+    display: inline-flex;
+    padding: 12px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-text-title, #255B8E);
+    leading-trim: both;
+    text-edge: cap;
+
+    /* Text/text-button */
+    font-family: var(--Fonts-Font-text, Barlow);
+    font-size: var(--Font-Base, 14px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%; /* 14px */
+    letter-spacing: 1.12px;
+    text-transform: uppercase;
+    margin-left: -12px;
+    cursor: pointer;
+
+    &:hover {
+      color: white;
+      background: var(--color-primary, #073A7C);
+    }
+  }
+}
+
+.next-step {
   text-align: center;
   leading-trim: both;
   text-edge: cap;
+  min-width: 230px;
+  padding: 14px 16px;
+  border-radius: 10px;
 
-  /* Text/text-button */
+  color: var(--Light-base-solid-white, #FFF);
-  font-family: var(--Fonts-Font-text, Barlow);
+
-  font-size: var(--Font-Base, 14px);
+  font-size: 16px;
-  font-style: normal;
   font-weight: 600;
-  line-height: 100%; /* 14px */
+  line-height: 24px;
-  letter-spacing: 1.12px;
+
+  background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+
 }

sae-csc/src/styles/app/styles/pages/_main.scss

@@ -58,30 +58,6 @@
 }
 
 
-.bottom-navigation {
-  .nav-item {
-
-    display: inline-flex;
-    padding: 12px 16px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-
-    color: var(--color-text-title, #255B8E);
-    leading-trim: both;
-    text-edge: cap;
-
-    /* Text/text-button */
-    font-family: var(--Fonts-Font-text, Barlow);
-    font-size: var(--Font-Base, 14px);
-    font-style: normal;
-    font-weight: 600;
-    line-height: 100%; /* 14px */
-    letter-spacing: 1.12px;
-
-  }
-}
-
 .fixed-navigation {
   display: flex;
   position: fixed;
@@ -97,24 +73,4 @@
   box-shadow: 0 -10px 20px 0 rgba(30, 31, 34, 0.05);
 
 
-  .next-step {
-    display: flex;
-    padding: 12px;
-    align-items: center;
-    gap: 5px;
-    border: 1px solid white;
-    border-radius: 8px;
-    background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%), #FFF;
-    min-width: 200px;
-
-
-    color: var(--color-text-invert, #FFF);
-    text-align: center;
-    font-size: var(--Font-Base, 14px);
-    font-style: normal;
-    font-weight: 600;
-
-    letter-spacing: 1.12px;
-
-  }
 }