styling fake inputs of csc selector

my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss

@@ -89,6 +89,7 @@
     width: 32px;
     height: 32px;
     border-radius: 8px;
+    margin-right: 10px;
   }
 
   app-copy button.copy {

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

@@ -67,7 +67,7 @@
     .chips-listing {
       display: flex;
       position: absolute;
-      top: 560px;
+      top: 595px;
       margin-top: 16px;
       border-radius: 4px;
       background: variables.$csc-filters-box-color;

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

@@ -199,8 +199,16 @@
 
   .placeholder, .fake-input {
     border: solid 1px grey;
-    padding: 16px;
-    border-radius: 6px;
+    border-radius: 8px;
+    background-color: white;
+    padding: 10px 40px;
+    width: 100%;
+    height: 42px;
+    overflow: hidden;
+    color: var(--color-text-secondary, #525668);
+    text-overflow: ellipsis;
+    font-size: var(--Font-Base, 14px);
+
 
     .is-disabled & {
       color: grey;

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

@@ -9,11 +9,18 @@
       font-size: 16px;
 
       line-height: 140%;
+      color: #000;
+      font-family: Barlow;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%; /* 22.4px */
+
     }
 
     sae-bot-talks {
-      top: -50px;
-      left: 67px;
+      top: -68px;
+      left: 10px;
       position: relative;
     }
   }
@@ -34,6 +41,8 @@
 
   #translation_request {
 
+    margin-bottom: 80px;
+
     .helper {
       display: flex;
       flex-direction: row;

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

@@ -59,7 +59,7 @@
   <main>
 
 
-    <section class="padded-section">
+    <section class="listing">
       <div class="row-bot-talks">
         <sae-bot-talks
           [appState]="appState"

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

@@ -15,6 +15,8 @@
 
 
   <div class="fixed-navigation">
+    <div class="container-fixed">
+
     <sae-m-button routerLink="/similar-cases"
     label="Search similar cases"
                   inconPosition="right"
@@ -24,15 +26,7 @@
 
                   icon="arrow-right-line"
     > </sae-m-button>
-<!--    <a class="next-step" routerLink="/similar-cases">-->
-<!--      <span class="label">-->
-<!--      Search similar cases-->
-<!--      </span>-->
-<!--      <span class="pipe">-->
-<!--        |-->
-<!--      </span>-->
-<!--      <i class="ri-arrow-right-line"></i>-->
-<!--    </a>-->
+    </div>
   </div>
 
   }

sae-csc/src/app/shared/translate-texts/translate-texts.html

@@ -1,20 +1,23 @@
 <div class="translate-texts is-{{disabled? 'disabled' : 'enabled'}} {{fromTextFocused? 'is-focused' : ''}} ">
 
-
+  <!--  showFileUploadButton :-->
+  <!--  {{ showFileUploadButton }}-->
   <div class="{{!researchLaunched? 'has-shadow' : ''}}" id="fromText">
 
     @if (!fileIsUploaded || !appState.fromText.length || !fromTextFocused) {
-      <!--      @if (appState.fromText.length == 0) {-->
+      @if (showFileUploadButton) {
         <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
             <span class="label">
           Upload .csv file
         </span>
           <i class="ri-upload-cloud-2-line"></i>
         </button>
-      <!--      }-->
+      }
       <!--          hidden text input-->
       <input #fileUpload
+             (blur)="showFileUploadButton = !showFileUploadButton"
              (change)="onFileSelected($event)"
+             (focus)="showFileUploadButton = !showFileUploadButton"
              accept=".csv" class="is-outlined" id="fileUploadTranslator"
              type="file">
     }

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 showFileUploadButton: boolean = true;
   public researchLaunched: boolean = false;
   public fromText: string = '';
   public toText: string = 'résumé ici'

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

@@ -52,7 +52,7 @@ body {
   position: fixed;
   bottom: 0;
   width: 100%;
-  padding: 16px 64px 16px 1181px;
+  padding: 16px 64px;
   justify-content: flex-end;
   align-items: center;
   background: white;
@@ -61,5 +61,11 @@ body {
 
   box-shadow: 0 -10px 20px 0 rgba(30, 31, 34, 0.05);
 
+  .container-fixed {
+    margin: 0 auto;
+    width: 1330px;
+    text-align: right;
+  }
+
 
 }

sae-csc/src/styles/app/styles/pages/_similar-cases.scss

@@ -49,7 +49,4 @@
     }
   }
 
-  .bot-avatar {
-    background: transparent url('/public/chatbot.png') center center no-repeat;
-  }
 }

sae-csc/src/styles/main.scss

@@ -1,4 +1,9 @@
-
 @use "app/styles/pages/main.scss";
 @use "app/styles/pages/similar-cases.scss";
 @use "app/styles/pages/admin.scss";
+
+.bot-avatar {
+  background: transparent url('public/chatbot.png') center center no-repeat !important;
+  background-size: contain;
+
+}