privacy policy style

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

@@ -1,4 +1,4 @@
-<div class="filter-group">
+<div [ngClass]="{highlighted}" class="filter-group">
   <div class="selectors">
     <sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
     <sae-multi-selector [label]="'Findings'"></sae-multi-selector>
@@ -7,7 +7,7 @@
     <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">
+  <div (click)="highlighted = !highlighted" class="chips-listing">
     <!--    liste de chips-->
     <div class="chips-column">
 

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

@@ -79,16 +79,32 @@
       background: variables.$csc-chips-bg-color;
       color: white;
       border: solid 1px variables.$csc-chips-bg-color;
-      width: 100%;
       border-radius: 20px;
       margin-bottom: 10px;
       display: flex;
       padding: 8px 10px 10px 12px;
+
+      text-align: center;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 14px;
+
       justify-content: center;
       align-items: center;
       gap: 5px;
       align-self: stretch;
       padding-right: 10px;
-    }
+
+
+    }
+
+
+  }
+
+  &.highlighted .chips-listing {
+    border-radius: 8px;
+    border: 1px solid #C2A9FD;
+    background: #E3EAF1;
+    box-shadow: 0 0 10px 0 #A86CFD;
   }
 }

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

@@ -1,14 +1,16 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'sae-filters-group',
   imports: [
-    MultiSelector
+    MultiSelector,
+    NgClass
   ],
   templateUrl: './filters-group.html',
   styleUrl: './filters-group.scss'
 })
 export class FiltersGroup {
-
+  @Input() highlighted = false;
 }

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

@@ -6,7 +6,11 @@
     {{ label }}
     </span>
   </div>
-  <input class="is-hidden" placeholder="{{label}}" type="text">
+  <input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
+         class="is-hidden" placeholder="{{label}}"
+         type="text">
+  @if (displayDropdown) {
+
     <div class="dropdown">
       <div class="dropdown-button selector-button">
         <!--          bouton-->
@@ -16,21 +20,26 @@
         <!--      selected:-->
         <div class="selected-items">
 
+          @for (sc of selectedChoices; track sc) {
+            <div class="dropdown-item">
+
+              <i class="ri-checkbox-line"></i>
+              {{ sc }}
+            </div>
+          }
         </div>
         <hr>
         <div class="available-items">
           <!--      available:-->
+          @for (c of choices; track c) {
             <div class="dropdown-item">
-          <div class="label">
+              <i class="ri-checkbox-blank-line"></i>
-            choix 1
+              {{ c }}
-          </div>
-        </div>
-        <div class="dropdown-item">
-          <div class="label">
-            choix 2
-          </div>
             </div>
+          }
         </div>
       </div>
     </div>
+
+  }
 </div>

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

@@ -61,4 +61,22 @@
       border-color: #525668;
     }
   }
+
+  .dropdown {
+    background: white;
+    padding: 1rem;
+    border-radius: 8px;
+    position: relative;
+    display: block;
+
+    .dropdown-item {
+      padding: 4px;
+      cursor: pointer;
+
+      &:hover {
+        background: #525668;
+        color: white;
+      }
+    }
+  }
 }

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

@@ -8,5 +8,8 @@ import {Component, Input} from '@angular/core';
 })
 export class MultiSelector {
   @Input() label!: string;
+  @Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
+  @Input() selectedChoices: any = ['choix 4'];
+  displayDropdown = true;
 
 }

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

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

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

@@ -28,21 +28,34 @@
           <span>×</span>
         </button>
         <div class="popup-body">
-          <h2>Privacy Policy</h2>
+          <h2 class="title">Privacy Policy</h2>
           <p>
-            This privacy policy explains how we collect, use, and protect your personal information when you use our
+            Personal Data Protection Policy
-            services.
           </p>
           <p>
-            We collect information to provide better services to all our users. This includes information you provide to
+            We are committed to protecting your data in accordance with the General Data Protection Regulation (GDPR).
-            us, such as your name, email address, and other personal details.
           </p>
           <p>
-            We use this information to provide, maintain, and improve our services, develop new ones, and protect our
+            Key Principles: To facilitate the search for similar cases when a customer requests support, Safran Aircraft Engines (www.safran-group.com) processes personal data based on its legitimate interest in saving time when handling customer requests and meeting its commitments regarding response times.
-            users.
           </p>
           <p>
-            We will not share your personal information with anyone except as described in this Privacy Policy.
+            The company processes the following personal data of CSC employees, customers, and partners (GE):
+            Identification data: first name, last name
+            Professional data: employee ID (for internal staff), email address, phone number, postal address, affiliated company, or any other information contained in email signatures
+            Connection data: login logs containing employee ID, IP address, actions performed, date and time of connection, technical status (technical error)
+            User account data comes from the CRM and is retained based on the onboarding and offboarding of CSC employees. This data is only accessible to individuals who need it to perform their duties, including the CSC team, IT service providers, and technical and functional administrators.
+          </p>
+          <p>
+            As part of Safran's legitimate interest in securing its information system by ensuring traceability, login logs are also processed and retained for 3 months; they are only accessible to administrators and the IT security team.
+          </p>
+          <p>
+            Data subjects have the right to access, rectify, erase, restrict, and port their data, as well as the right to object. These rights can be exercised by contacting the Data Protection Officer of Safran Aircraft Engines at: dpo.sae@safrangroup.com.
+          </p>
+          <p>
+            Data subjects may also file a complaint with the French data protection authority (www.cnil.fr).
+          </p>
+          <p>
+            Last updated: March 2025
           </p>
         </div>
         <div class="popup-footer">

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

@@ -57,6 +57,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #1B1D27;
 
   .popup-overlay {
     position: absolute;
@@ -96,7 +97,6 @@
     align-items: center;
     cursor: pointer;
     font-size: 24px;
-    color: var(--color-text-title, #255B8E);
 
     &:hover {
       background-color: rgba(0, 0, 0, 0.05);
@@ -107,20 +107,25 @@
     padding: 30px;
     overflow-y: auto;
 
-    h2 {
+    .title {
-      color: var(--color-text-title, #255B8E);
+      color: #000;
-      font-family: var(--Fonts-Font-text, Barlow);
+      leading-trim: both;
-      font-size: 24px;
+      text-edge: cap;
+      font-family: Barlow;
+      font-size: 20px;
+      font-style: normal;
       font-weight: 600;
-      margin-bottom: 20px;
+      line-height: 20px; /* 100% */
     }
 
     p {
-      color: var(--color-text, #333);
+      color: #000;
-      font-family: var(--Fonts-Font-text, Barlow);
+      font-family: Barlow;
-      font-size: 16px;
+      font-size: 14px;
-      line-height: 1.5;
+      font-style: normal;
-      margin-bottom: 15px;
+      font-weight: 400;
+      line-height: 120%; /* 16.8px */
+      margin-bottom: 1rem;
     }
   }
 
@@ -133,9 +138,10 @@
 
   .agree-button {
     padding: 12px 30px;
-    border-radius: 10px;
     border: none;
-    background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+
+    border-radius: 8px;
+    background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%), #FFF;
     color: white;
     font-family: var(--Fonts-Font-text, Barlow);
     font-size: 16px;