add colors variables from lib

my-workspace/projects/sae-lib/src/styles/_variables.scss

@@ -41,13 +41,28 @@ $main-bg-color-active: #6565ff;
 
 $event-blue: #2D559F;
 $notification-green: #315E5D;
-// find where --------------------
 
 $bg-color-button: #f4f6fc;
 $bg-color-nav: #1B1D27;
 $bg-color-chat: #f5f5f5;
 $shadow-color : #dedede;
 
+
+// CSC project variables
+
+$csc-light-yellow-color: #FFF3D8;
+$csc-magic-color: #EEA100;
+$csc-bg-color: #F5F5F5;
+$csc-title-color: #000;
+
+$csc-nav-color: $main-color-400;
+$csc-chips-bg-color: $main-color-400;
+
+$csc-textarea-color : #1B1D27;
+$csc-filters-box-color : #E3EAF1;
+
+$bot-bubble: $csc-light-yellow-color;
+
 // spacing --------------------------
 
 $spacing-0: 2px;

my-workspace/projects/sae-lib/translate-texts/translate-texts.html

@@ -5,7 +5,9 @@
 
 <!--      delete button from_text-->
       <button class="delete-button button" (click)="emptyText('fromText')">x</button>
-      <textarea name="from_text" id="from_text" cols="30" rows="10" [(ngModel)]="fromText"></textarea>
+      <textarea name="from_text" id="from_text" cols="30" rows="10"
+                placeholder=""
+                [(ngModel)]="fromText"></textarea>
     </div>
     <div class="column">
 

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

@@ -14,14 +14,24 @@
     <div id="translation_request">
 
       <div class="helper">
+        <span>
+
         Original question
+        </span>
         <i class="ri-arrow-right-line"></i>
+        <span>
+
+        Summarized question by AI
+        </span>
       </div>
 
       <sae-translate-texts></sae-translate-texts>
     </div>
     <!--  analyse de question-->
     <div id="question_alaysis">
+      <h2 class="title">
+        Question analysis
+      </h2>
       <!--filters-->
       <!--      advanced filters-->
       <sae-filters-group></sae-filters-group>

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

@@ -18,21 +18,24 @@
 
     <div id="navbarBasicExample" class="navbar-menu">
 
-      <div class="navbar-end">
+      <div class="navbar-start">
-        <a class="navbar-item" routerLink="home" routerLinkActive="active-link">
+        <a class="navbar-item" routerLink="home" routerLinkActive="is-active">
           <img src="csc_logo.svg" alt="logo">
-           CSC Solution Matcher
+          CSC Solution Matcher
         </a>
-        <a class="navbar-item">
+      </div>
-          Home
+      <div class="navbar-end">
-        </a>
-        <a class="navbar-item">
 
+<!--        <a class="navbar-item">-->
+<!--          Home-->
+<!--        </a>-->
+        <a class="navbar-item is-active">
+          <i class="ri-admin-line"></i>
           Admin
 
         </a>
         <a class="navbar-item">
-
+          <i class="ri-compass-3-line"></i>
           Quick Start
 
         </a>
@@ -42,6 +45,7 @@
         </a>
         <a class="navbar-item">
           <!--  user -->
+          <i class="ri-user-2-fill"></i>
           borhène
         </a>
 
@@ -49,5 +53,5 @@
     </div>
   </nav>
 
-  <app-alert-box></app-alert-box>
+<!--  <app-alert-box></app-alert-box>-->
 </div>

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

@@ -1,6 +1,9 @@
-// TODO importer les variables de la librairie
 @use '../../../../styles/variables-barrel' as variables;
 .top-navigation{
   background: variables.$bg-color-nav;
   color: white;
+  .is-active{
+  color: #7FB8E7;
+
+  }
 }

sae-csc/src/app/shared/navigation/top-navigation/top-navigation.ts

@@ -1,15 +1,14 @@
 import {Component} from '@angular/core';
 import {RouterLink, RouterLinkActive} from '@angular/router';
-import {AlertBox} from '../../../../../../my-workspace/projects/sae-lib/alert-box/alert-box';
+// import {AlertBox} from '../../../../../../my-workspace/projects/sae-lib/alert-box/alert-box';
 
-// import {SaeLib} from 'sae-lib';
 
 @Component({
   selector: 'app-top-navigation',
   imports: [
     RouterLink,
     RouterLinkActive,
-    AlertBox
+    // AlertBox
   ],
   templateUrl: './top-navigation.html',
   styleUrl: './top-navigation.scss'

sae-csc/src/styles/_sae-lib-imports.scss

@@ -1,9 +0,0 @@
-/**
- * Fichier centralisé pour importer les styles de sae-lib
- * À utiliser dans les composants avec: @use '@sae-lib/src/styles/_variables' as variables;
- */
-
-@forward '@sae-lib/src/styles/_variables.scss';
-@forward '@sae-lib/src/styles/_forms.scss';
-@forward '@sae-lib/src/styles/_global.scss';
-@forward '@sae-lib/src/styles/_shadows.scss';

sae-csc/src/styles/_variables-barrel.scss

@@ -1,5 +1,2 @@
 // Ce fichier regroupe toutes les variables de sae-lib pour faciliter l'importation
-@forward 'sae-lib/src/styles/_variables.scss';
+@forward 'sae-lib/src/styles/variables.scss';
-//@forward '../../my-workspace/projects/sae-lib/src/styles/_forms';
-//@forward '../../my-workspace/projects/sae-lib/src/styles/_global';
-//@forward '../../my-workspace/projects/sae-lib/src/styles/_shadows';

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

@@ -0,0 +1,125 @@
+@use '../../../../styles/variables-barrel' as variables;
+
+#main_page {
+  main {
+    padding: 50px 64px;
+
+    .title {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .helper {
+      text-align: center;
+      margin-bottom: 16px;
+
+      color: #000;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%; /* 22.4px */
+
+      span {
+        margin-right: 12px;
+        margin-left: 12px;
+
+      }
+    }
+
+    .delete-button{
+      border: 0;
+      border-radius: 100%;
+      background: #F2F2F2;
+      color: grey;
+      cursor: pointer;
+      padding: 10px;
+      position: relative;
+      left: 92%;
+      top: 50px;
+      width: 37px;
+      &:hover{
+        background: #888;
+        color: #222;
+      }
+    }
+    textarea {
+      width: 648px;
+      height: 236px;
+      flex-shrink: 0;
+      border-radius: 4px;
+      background: #FFF;
+      box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+      border-width: 0;
+      padding: 11px 14px;
+    }
+
+  }
+
+  #question_alaysis {
+    margin-top: 50px;
+  }
+}
+
+
+.filter-group {
+
+  .search{
+    display: flex;
+    min-height: 42px;
+    max-height: 42px;
+    padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px);
+    align-items: center;
+    gap: var(--Spacing-Spacing-20, 8px);
+    align-self: stretch;
+  }
+  .chips-listing {
+    margin-top: 16px;
+    border-radius: 4px;
+    background: variables.$csc-filters-box-color;
+    width: 100%;
+    height: 400px;
+    padding: 12px;
+
+
+    .chips {
+      background: variables.$csc-chips-bg-color;
+      color: white;
+      border-radius: 100px;
+      padding: 12px 16px;
+      border: solid 1px variables.$csc-chips-bg-color;
+      width: 100%;
+    }
+  }
+}
+
+.fixed-navigation {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 16px 64px 16px 1181px;
+  justify-content: flex-end;
+  align-items: center;
+  background: white;
+
+  .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;
+
+  }
+}

sae-csc/src/styles/main.scss

@@ -1,45 +1,2 @@
-/*
- * Fichier principal pour les styles globaux
- * Il contient les variables et styles réutilisables dans toute l'application
- */
 
-// Définir les couleurs de base de l'application
+@use  "app/styles/pages/main.scss";
-$primary-color: #3f51b5;
-$secondary-color: #ff4081;
-$bg-color-nav: #333333;
-$text-color: #ffffff;
-
-// Autres variables globales
-$spacing-unit: 8px;
-$border-radius: 4px;
-
-// Mixins utiles
-@mixin flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin shadow-light {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-// Styles globaux
-body {
-  font-family: 'Roboto', sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-// Classes d'utilité
-.text-center {
-  text-align: center;
-}
-
-.mt-1 {
-  margin-top: $spacing-unit;
-}
-
-.mb-1 {
-  margin-bottom: $spacing-unit;
-}