From 03d7a90d248ba13d766d664963703833ce4c6e9e Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 25 Sep 2025 16:22:43 +0200
Subject: [PATCH] login typo, loop in feedback

---
 .../feedback-button/feedback-button.css       | 172 ------------------
 .../feedback-button/feedback-button.html      |  52 +++---
 .../feedback-button/feedback-button.scss      |  22 ++-
 .../feedback-button/feedback-button.ts        |   6 +-
 .../inputs/multi-selector/multi-selector.html |  29 +--
 .../inputs/multi-selector/multi-selector.scss |  13 +-
 .../sae-lib/src/styles/_variables.scss        |   2 +
 sae-csc/src/app/pages/login/login.html        |   4 +-
 sae-csc/src/app/pages/login/login.scss        |  48 +++--
 sae-csc/src/app/pages/main/main.html          |  15 +-
 .../bottom-navigation/bottom-navigation.scss  |   2 +
 .../translate-texts/translate-texts.html      |   6 +-
 .../translate-texts/translate-texts.scss      |   6 +-
 .../shared/translate-texts/translate-texts.ts |  22 ++-
 .../src/styles/app/styles/pages/_main.scss    |   2 +-
 15 files changed, 143 insertions(+), 258 deletions(-)
 delete mode 100644 my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.css

diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.css b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.css
deleted file mode 100644
index dd36fe1..0000000
--- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.css
+++ /dev/null
@@ -1,172 +0,0 @@
-.feedback-button {
-
-  &:hover {
-    background: #d9e8f6;
-  }
-
-  i {
-    font-size: 16px;
-  }
-}
-
-.feedback-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.feedback-modal {
-  background: white;
-  border-radius: 8px;
-  width: 90%;
-  max-width: 500px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-  overflow: hidden;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #eee;
-
-  h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #083b7d;
-  }
-
-  .close-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 20px;
-    color: #666;
-    padding: 4px;
-
-    &:hover {
-      color: #333;
-    }
-  }
-}
-
-.modal-body {
-  padding: 20px;
-  overflow-y: auto;
-
-  .modal-description {
-    margin-bottom: 16px;
-    color: #555;
-  }
-
-  textarea {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    resize: vertical;
-    font-family: inherit;
-    font-size: 14px;
-
-    &:focus {
-      outline: none;
-      border-color: #083b7d;
-    }
-
-    &:disabled {
-      background-color: #f5f5f5;
-      cursor: not-allowed;
-    }
-  }
-
-  .success-message, .error-message {
-    margin-top: 16px;
-    padding: 10px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    i {
-      font-size: 18px;
-    }
-  }
-
-  .success-message {
-    background-color: #e6f7e6;
-    color: #2e7d32;
-  }
-
-  .error-message {
-    background-color: #fdecea;
-    color: #d32f2f;
-  }
-}
-
-.modal-footer {
-  padding: 16px 20px;
-  border-top: 1px solid #eee;
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-
-  button {
-    padding: 8px 16px;
-    border-radius: 4px;
-    font-weight: 500;
-    cursor: pointer;
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-  }
-
-  .cancel-button {
-    background: none;
-    border: 1px solid #ddd;
-    color: #555;
-
-    &:hover:not(:disabled) {
-      background-color: #f5f5f5;
-    }
-  }
-
-  .submit-button {
-    background-color: #083b7d;
-    color: white;
-    border: none;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    &:hover:not(:disabled) {
-      background-color: #062c5e;
-    }
-  }
-}
- 
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.html b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.html
index 920aa95..0e08552 100644
--- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.html
+++ b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.html
@@ -10,16 +10,16 @@
   <div class="feedback-modal-overlay">
     <div class="feedback-modal">
       <div class="modal-header">
-        <h3>Send Feedback</h3>
-        <button class="close-button" (click)="toggleModal()">
-          <i class="ri-close-line"></i>
-        </button>
+        <h3>Share us your feedback !</h3>
+<!--        <button class="close-button" (click)="toggleModal()">-->
+<!--          <i class="ri-close-line"></i>-->
+<!--        </button>-->
+
+        <sae-m-button [label]="'Soumettre'" [kind]="'primary'" [size]="'large'"></sae-m-button>
       </div>
 
       <div class="modal-body">
-        <p class="modal-description">
-          Help us improve by sharing your feedback, suggestions, or reporting issues.
-        </p>
+
 
         <textarea
           [(ngModel)]="feedbackText"
@@ -42,25 +42,27 @@
       </div>
 
       <div class="modal-footer">
-        <button
-          class="cancel-button"
-          (click)="toggleModal()"
-          [disabled]="isSubmitting"
-        >
-          Cancel
-        </button>
+<!--        <button-->
+<!--          class="cancel-button"-->
+<!--          (click)="toggleModal()"-->
+<!--          [disabled]="isSubmitting"-->
+<!--        >-->
+<!--          Cancel-->
+<!--        </button>-->
 
-        <button
-          class="submit-button"
-          (click)="submitFeedback()"
-          [disabled]="isSubmitting || !feedbackText.trim()"
-        >
-          @if (isSubmitting) {
-            <i class="ri-loader-4-line spinning"></i> Sending...
-          } @else {
-            Send Feedback
-          }
-        </button>
+<!--        <button-->
+<!--          class="submit-button"-->
+<!--          (click)="submitFeedback()"-->
+<!--          [disabled]="isSubmitting || !feedbackText.trim()"-->
+<!--        >-->
+<!--          -->
+<!--        </button>-->
+
+        @if (isSubmitting) {
+        <i class="ri-loader-4-line spinning"></i> Sending...
+      } @else {
+<!--        Send Feedback-->
+      }
       </div>
     </div>
   </div>
diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss
index 9887296..cdc7cda 100644
--- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss
+++ b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss
@@ -1,10 +1,10 @@
 @use "sass:color";
-//@use "../src/styles/variables.scss";
+@use "../../src/styles/variables.scss";
 
 .feedback-button {
-  background: #ecf3fa;
-  color: #083b7d;
-  padding: 8px;
+  font-family: variables.$font-family;
+  background: #E3EAF1;
+  color: #005AA2;
   border-radius: 8px 8px 0 0;
   transform: rotate(270deg);
   cursor: pointer;
@@ -18,6 +18,14 @@
   top: 240px;
   z-index: 100;
   border: 0;
+  padding: 10px;
+  text-align: center;
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 8px; /* 57.143% */
+
 
   &:hover {
     background: #d9e8f6;
@@ -30,7 +38,7 @@
   // Modal styles
   .feedback-modal-overlay {
     position: fixed;
-    top: 0;
+    top: 92px;
     left: 0;
     right: 0;
     bottom: 0;
@@ -42,7 +50,7 @@
   }
 
   .feedback-modal {
-    background: white;
+    background: #E3EAF1;
     border-radius: 8px;
     width: 90%;
     max-width: 500px;
@@ -54,6 +62,7 @@
   }
 
   .modal-header {
+    background: transparent;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -84,6 +93,7 @@
   .modal-body {
     padding: 20px;
     overflow-y: auto;
+    background: transparent;
 
     .modal-description {
       margin-bottom: 16px;
diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts
index 4b02f5a..4598f06 100644
--- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts
+++ b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts
@@ -1,13 +1,15 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {MainButton} from '../main-button/main-button';
 
 @Component({
   selector: 'sae-feedback-button',
   imports: [
-    FormsModule
+    FormsModule,
+    MainButton
   ],
   templateUrl: './feedback-button.html',
-  styleUrl: './feedback-button.css'
+  styleUrl: './feedback-button.scss'
 })
 
 export class FeedbackButton {
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
index c36fd69..d8cd4b7 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
@@ -4,7 +4,7 @@
 }"
      class="input-box"
 >
-
+  displayDropdown {{displayDropdown}}
 
   <i class="ri-search-line search-placeholder"></i>
   <div class="label">
@@ -27,7 +27,7 @@
     <i class="ri-arrow-down-s-line"></i>
   </div>
 
-  @if (displayDropdown && availableChoices?.length) {
+  @if (displayDropdown ) {
 
 
     <div class="dropdown">
@@ -35,26 +35,33 @@
         <!--      selected:-->
         @if (selectedChoices?.length && availableChoices?.length) {
           <div class="selected-items">
+
+            @for(sc of selectedChoices; track sc.value){
             <div (click)="selectedChoicesChangeToggleItem(sc)"
-                 *ngFor="let sc of selectedChoices"
+
                  class="dropdown-item"
             >
               <i class="ri-checkbox-line"></i>
-              {{ sc }}
+              {{ sc.label }}
             </div>
+            }
           </div>
 
           <hr>
         }
         <div class="available-items">
+
           <!--      available:-->
-          <div (click)="availableChoicesChangeToggleItem(ac)"
-               *ngFor="let ac of availableChoices"
-               class="dropdown-item"
-          >
-            <i class="ri-checkbox-blank-line"></i>
-            {{ ac }}
-          </div>
+          @for(sc of availableChoices; track sc.value){
+            <div (click)="availableChoicesChangeToggleItem(sc)"
+
+                 class="dropdown-item"
+            >
+              <i class="ri-checkbox-line"></i>
+              {{ sc.label }}
+            </div>
+          }
+
         </div>
       </div>
     </div>
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
index 813dfbb..b6598d6 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
@@ -81,8 +81,12 @@
 
 
       .is-disabled & {
-        border-color: #525668;
-        background: #8D91A4;
+        border-color: #8D91A4;
+        background: #fff;
+        color: #8D91A4;
+        i{
+          color: #525668;
+        }
       }
     }
 
@@ -95,9 +99,8 @@
       z-index: 100;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
-      width: 210px;
-
-      top: 42px;
+      width: 218px;
+      top: -57px;
       left: 0;
       border-left: 1px solid #8D91A4;
       border-bottom: 1px solid #8D91A4;
diff --git a/my-workspace/projects/sae-lib/src/styles/_variables.scss b/my-workspace/projects/sae-lib/src/styles/_variables.scss
index 41f7f61..33b3540 100644
--- a/my-workspace/projects/sae-lib/src/styles/_variables.scss
+++ b/my-workspace/projects/sae-lib/src/styles/_variables.scss
@@ -1,3 +1,5 @@
+// typo suites --------------------------
+$font-family: Barlow, Ubuntu Sans, Noto Sans, Calibri, Arial, sans-serif;
 // gradient --------------------------
 $degrade: #0069B4;
 $degrade-hover: #0069B4;
diff --git a/sae-csc/src/app/pages/login/login.html b/sae-csc/src/app/pages/login/login.html
index b6d1f79..6ba4c31 100644
--- a/sae-csc/src/app/pages/login/login.html
+++ b/sae-csc/src/app/pages/login/login.html
@@ -43,12 +43,12 @@
 
       </div>
       <div class="Aligner-item Aligner-item--bottom technical-contact">
-        <a class="external-link"
+        <a class="external-link bottom"
            href="mailto:amal.ouiyzme@safrangroup.com?subject=Issue with the Solution Matcher Application&Hello, i enncountered an issue while using the application. \n Description, steps to reproduce, expected behavior, actual behavior: \n\nPlease help me. Best regards.">
         <span class="label">
           Contact for a technical issue
         </span>
-          <i class="ri-open-arm-line"></i>
+          <i class="ri-arrow-right-up-box-line"></i>
         </a>
       </div>
     </div>
diff --git a/sae-csc/src/app/pages/login/login.scss b/sae-csc/src/app/pages/login/login.scss
index bfb13fa..1d24e7e 100644
--- a/sae-csc/src/app/pages/login/login.scss
+++ b/sae-csc/src/app/pages/login/login.scss
@@ -2,7 +2,8 @@
 
 
 #cscLogin {
-  background: #1b1d27;
+  font-family: variables.$font-family;
+  background: variables.$neutral-blue;
   color: white;
   display: flex;
   width: 100vw;
@@ -17,8 +18,8 @@
   }
 
   .sub-title {
-    color: #FFF;
-    font-family: Barlow;
+    color: variables.$neutral-white;
+    font-family: variables.$font-family;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
@@ -34,13 +35,13 @@
     a {
 
       /* Body/Body 4/Sb */
-      font-family: Barlow;
+      font-family: variables.$font-family;
       font-size: 14px;
       font-style: normal;
       font-weight: 600;
       line-height: 20px; /* 142.857% */
       &:hover {
-        color: white;
+        color: variables.$neutral-white;
       }
 
       text-decoration: none;
@@ -48,37 +49,56 @@
   }
 
   .external-link {
-    color: #337DC3;
+    text-decoration: none;
+    color: variables.$main-color-300;
     width: 100%;
+    margin-left: 24px;
+    .label{
+    font-size: variables.$spacing-4;
+    text-decoration: underline;
+    }
+    &.bottom{
+      margin-left: 10px;
+      font-size: 14px;
+    }
   }
 
   .magic-text {
     color: variables.$csc-magic-color;
+    i{
+      font-size: 24px;
+    }
   }
 
   .button {
     display: inline-flex;
     height: 44px;
-    padding: 14px 16px;
+    padding: 14px variables.$spacing-4;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
     background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%);
-    color: var(--Light-base-solid-white, #FFF);
+    color: var(--Light-base-solid-white, variables.$neutral-white);
     border-radius: 10px;
     border: 0;
 
 
+
     /* Body/Body 3/Sb */
-    font-family: Barlow;
-    font-size: 16px;
+
+    font-size: variables.$spacing-4;
     font-style: normal;
     font-weight: 600;
-    line-height: 24px; /* 150% */
+    line-height: 24px;
   }
 
   .request_access {
     margin-top: 32px;
+    color: variables.$neutral-white;
+    font-size: variables.$spacing-4;
+    font-weight: 600;
+    line-height: 24px;
+
   }
 
   .technical-contact {
@@ -90,6 +110,10 @@
       color: white;
     }
   }
+
+  i{
+    font-size: variables.$spacing-4;
+  }
 }
 
 .Aligner {
@@ -107,7 +131,7 @@
 }
 
 .bg-login {
-  background: url(/safran_bg.jpg) center no-repeat;
+  background: url('/safran_bg.jpg') center no-repeat;
   background-size: cover;
   width: 591px;
   height: 100%;
diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html
index 1272cd9..2ce8c69 100644
--- a/sae-csc/src/app/pages/main/main.html
+++ b/sae-csc/src/app/pages/main/main.html
@@ -32,13 +32,11 @@
       <h2 class="title">
         Question analysis
       </h2>
-      <!--      @if (displayBotWarning) {-->
 
       <sae-bot-talks
         [message]="appState.botMessage"
-        [ngClass]="{ 'is-visible' : displayBotWarning }"></sae-bot-talks>
-      <!--      }-->
-      <!--filters-->
+        [ngClass]="{ 'is-visible' : displayBotWarning || appState.loadingResume }"></sae-bot-talks>
+
       <!--      advanced filters-->
       <div class="filters-container">
         <sae-filters-group (selectionchange)="onSelectedChoicesChange()" [appState]="appState"
@@ -47,19 +45,10 @@
     </div>
     <app-bottom-navigation></app-bottom-navigation>
 
-    fromText:
-    {{ appState.fromText }}
-    <br>
-    totext:
-    {{ appState.toText }}
-
 
   </main>
   <footer>
 
-    <!--  bottom nav -->
-    <!--  bottom fixed bar -->
-    <!--  search button-->
 
   </footer>
   <sae-feedback-button></sae-feedback-button>
diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
index d081a81..82639b7 100644
--- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
+++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/variables-barrel' as variables;
+
 .bottom-navigation {
   position: relative;
   top: 280px;
diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.html b/sae-csc/src/app/shared/translate-texts/translate-texts.html
index 69cd684..2e50357 100644
--- a/sae-csc/src/app/shared/translate-texts/translate-texts.html
+++ b/sae-csc/src/app/shared/translate-texts/translate-texts.html
@@ -1,10 +1,8 @@
 <div class="translate-texts is-{{disabled? 'disabled' : 'enabled'}}">
 
-  <!--  <button (click)="onRemoveFileSelected()" class="remove-file-upload">-->
-  <!--    onRemoveFileSelected-->
-  <!--  </button>-->
   <div [ngClass]="{
-  'is-focused' : fromTextFocused
+  'is-focused' : fromTextFocused,
+  'has-shadow' : !researchLaunched,
   }" id="fromText">
 
     @if (!fileIsUploaded || !appState.fromText.length || !fromTextFocused) {
diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.scss b/sae-csc/src/app/shared/translate-texts/translate-texts.scss
index 0e13495..58ecc66 100644
--- a/sae-csc/src/app/shared/translate-texts/translate-texts.scss
+++ b/sae-csc/src/app/shared/translate-texts/translate-texts.scss
@@ -10,10 +10,14 @@
     gap: 16px;
   }
 
+  .has-shadow {
+    box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+  }
+
   #fromText,
   #toText {
 
-    box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+
     background: white;
     height: 235px;
     width: 648px;
diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.ts b/sae-csc/src/app/shared/translate-texts/translate-texts.ts
index 551e41a..308641f 100644
--- a/sae-csc/src/app/shared/translate-texts/translate-texts.ts
+++ b/sae-csc/src/app/shared/translate-texts/translate-texts.ts
@@ -12,6 +12,7 @@ import {ActionTypes, StateInterface} from './../../redux/reducers';
 })
 export class TranslateTexts {
   public disabled: boolean = false;
+  public researchLaunched: boolean = false;
   public fromText: string = '';
   public toText: string = 'résumé ici'
   public loadingResume: boolean = false;
@@ -142,14 +143,18 @@ export class TranslateTexts {
     this.store.dispatch({
       type: ActionTypes.UPDATE_APP,
       payload: {
-        fromText: this.fromText
+        fromText: this.fromText,
+        botMessage:  "Generating a summary...analyzing client’s question...",
+        loadingResume: true
       }
     });
-
     // run research after a delay
     if (this.mode !== 'production') {
       this.loadingResume = true;
 
+
+
+
       // Clear any existing timeout to reset the debounce
       if (this.fromTimeout) {
         clearTimeout(this.fromTimeout);
@@ -162,13 +167,22 @@ export class TranslateTexts {
 
           this.loadingResume = false;
 
+          this.researchLaunched = true;
+
+          const ref = this.document.getElementById('toText')
+          console.log('ref', ref)
+          if (ref) {
+            ref.focus();
+          }
+
           this.store.dispatch({
             type: ActionTypes.UPDATE_APP,
             payload: {
               displayBot: true,
-              toText: "Résumé de démo à titre d'exemple"
+              toText: "Résumé de démo à titre d'exemple",
+              botMessage:  "Here’s AI analysis about client’s question ! Please make sure if my analysis is correct to get the most relevent results."
             }
-          })
+          });
 
           // Emit updateFilters event to trigger onSelectedChoicesChange
           this.updateFilters.emit();
diff --git a/sae-csc/src/styles/app/styles/pages/_main.scss b/sae-csc/src/styles/app/styles/pages/_main.scss
index e3f08e1..11bc01f 100644
--- a/sae-csc/src/styles/app/styles/pages/_main.scss
+++ b/sae-csc/src/styles/app/styles/pages/_main.scss
@@ -2,7 +2,7 @@
 
 body {
 
-  font-family: Barlow;
+  font-family: variables.$font-family;
   background: #F5F5F5;
 }