CSC up similar cases pages

my-workspace/projects/sae-lib/buttons/main-button/main-button.scss

@@ -1,6 +1,6 @@
-@use "sae-lib/src/styles/shadows.scss";
+@use "../../src/styles/shadows.scss";
-@use "sae-lib/src/styles/states.scss";
+@use "../../src/styles/states.scss";
-@use "sae-lib/src/styles/variables.scss";
+@use "../../src/styles/variables.scss";
 @use "sass:color";
 
 

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

@@ -26,25 +26,28 @@
       filters:
       {{ appState.filters }}
     </pre>
-    <div class="chips-column">
+    @if (!hideChipsList) {
-      <!--      @for( elem in appState.filters.engineType.selectedChoices; track elem.label ){-->
+      <div class="chips-column">
-      <!--        <button class="button chips is-rounded is-small">-->
+        <!--      @for( elem in appState.filters.engineType.selectedChoices; track elem.label ){-->
+        <!--        <button class="button chips is-rounded is-small">-->
 
-      <!--          {{elem.label}}-->
+        <!--          {{elem.label}}-->
-      <!--          <span class="post-button">-->
+        <!--          <span class="post-button">-->
-      <!--       x-->
+        <!--       x-->
-      <!--     </span>-->
+        <!--     </span>-->
-      <!--        </button>-->
+        <!--        </button>-->
-      <!--      }-->
+        <!--      }-->
-    </div>
+
+        <button class="button chips is-rounded is-small">
+          filtre col 2
+          <span class="post-button">
+           x
+         </span>
+        </button>
+      </div>
+    }
     <!--    <div class="chips-column">-->
+    <!--      </div>-->
 
-    <!--      <button class="button chips is-rounded is-small">-->
-    <!--        filtre col 2-->
-    <!--        <span class="post-button">-->
-    <!--       x-->
-    <!--     </span>-->
-    <!--      </button>-->
-    <!--    </div>-->
   </div>
 </div>

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

@@ -18,6 +18,7 @@ export class FiltersGroup {
   @Input() store: any;
   @Input() actionTypes: any;
   @Input() disabled!: boolean;
+  @Input() hideChipsList: boolean = false;
 
   constructor() {
     console.log('constructor filters group', this.appState, this.store, this.actionTypes);

sae-csc/src/app/pages/similar-cases/similar-cases.html

@@ -1,13 +1,16 @@
 <div class="similar-cases">
 
   <header>
-    <div class="row">
+    <div class="simimlar-cases-header">
-      <div (click)="displayHeaderTabs = !displayHeaderTabs" class="title-box">
+      <div (click)="displayHeaderTabs = !displayHeaderTabs" class="title-box is-clickable">
         {{ appState.resumeTitle }}
+
+        <i class="ri-arrow-down-s-line"></i>
       </div>
       <div class="actions">
         <button class="button">
-          new question
+          New question
+          <i class="ri-chat-ai-line"></i>
         </button>
         <button class="button">
           Search solutions
@@ -44,9 +47,9 @@
       </div>
     }
 
-    <div class="row filters-row">
+    <!--    <div class="row filters-row">-->
-      <sae-filters-group></sae-filters-group>
+    <!--      <sae-filters-group [hideChipsList]="true"></sae-filters-group>-->
-    </div>
+    <!--    </div>-->
   </header>
   <main>
 

sae-csc/src/app/pages/similar-cases/similar-cases.scss

@@ -9,22 +9,30 @@
     font-size: 20px;
     font-style: normal;
     font-weight: 600;
-    line-height: 140%; /* 28px */
+    line-height: 140%;
 
     margin-bottom: 24px;
+
+    &:hover {
+      color: white;
+    }
   }
 
   header {
+    .simimlar-cases-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
     button {
       color: #255B8E;
       color: var(--Colors-Principal-Normal, #255B8E);
 
-      /* Body/Body 3/Sb */
-      font-family: Barlow;
       font-size: 16px;
       font-style: normal;
       font-weight: 600;
-      line-height: 24px; /* 150% */
+      line-height: 24px;
 
       display: inline-flex;
       height: 44px;
@@ -88,12 +96,12 @@
 
     .body {
       color: #1B1D27;
-      font-family: Barlow;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
       line-height: 140%; /* 22.4px */
       min-height: 100px;
+      padding-top: 10px;
     }
   }
 
@@ -134,6 +142,7 @@
   }
 
   .tab-button {
+    cursor: pointer;
     padding: 16px;
     text-align: center;
     border-radius: 8px;
@@ -141,16 +150,18 @@
     font-family: Barlow;
     font-size: 20px;
     font-weight: 400;
-    line-height: 140%;
 
     &.is-active {
       background: #E3EAF1;
       color: #000;
       font-size: 20px;
       font-weight: 600;
-      line-height: normal;
 
     }
+
+    &:hover {
+      background: #D8E7F1;
+    }
   }
 
   .indicator {

sae-csc/src/app/pages/similar-cases/similar-cases.ts

@@ -4,8 +4,8 @@ import {CaseResult} from './case-result/case-result';
 import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
 import {StateInterface} from '../../redux/reducers';
 import {Store} from '@ngrx/store';
-import {FiltersGroup} from 'sae-lib/filters/filters-group/filters-group';
 import {NgClass} from '@angular/common';
+import {MainButton} from 'sae-lib/buttons/main-button/main-button';
 
 @Component({
   selector: 'app-similar-cases',
@@ -13,8 +13,8 @@ import {NgClass} from '@angular/common';
     BotTalks,
     CaseResult,
     BottomNavigation,
-    FiltersGroup,
     NgClass,
+    MainButton,
   ],
   templateUrl: './similar-cases.html',
   styleUrl: './similar-cases.scss'