messages styling, add conversation dropdown, show tooltip on filters

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

@@ -46,7 +46,6 @@
   margin-bottom: 40px;
   margin-top: 10px;
   animation: fadeIn 0.5s ease-in-out;
-  width: 500px;
   max-width: 100%;
 
 
@@ -183,8 +182,6 @@
     min-width: 100vw !important;
     max-width: 100vw !important;
     position: static;
-    margin-right: 10px;
-    margin-left: 10px;
   }
 }
 

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

@@ -223,6 +223,34 @@
     .conversation-container {
       padding-left: 12px;
       min-height: 90vh;
+
+      .actions {
+        position: relative;
+        top: 0;
+        right: 0;
+        background: white;
+        width: 30%;
+        float: right;
+
+        button {
+          background: transparent;
+          border: none;
+          display: none;
+          cursor: pointer;
+
+          &:hover {
+            background: variables.$primary-color;
+            color: white;
+          }
+        }
+
+        &:hover {
+          button {
+          
+            display: block;
+          }
+        }
+      }
     }
 
     input {
@@ -381,7 +409,7 @@
     }
 
     .main-conversation-container {
-      
+
       height: 100vh;
       padding-top: 88px;
       border-radius: 10px;

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

@@ -1,28 +0,0 @@
-@use "shadows";
-
-
-app-main-button {
-  button {
-    background: shadows.$primary-color;
-    color: shadows.$neutral-white;
-    border-radius: shadows.$radius-main;
-    padding: 1rem 2rem;
-    cursor: pointer;
-    transition: all 0.25s ease;
-    border: 0;
-    width: 100%;
-    margin-top: 8px;
-
-    i {
-      margin-right: 1rem;
-    }
-
-    &:hover, &:active, &:focus {
-      background: shadows.$main-bg-color-active;
-      color: shadows.$main-color-active;
-      transition: all 0.25s ease;
-    }
-
-  }
-
-}

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

@@ -1,5 +1,5 @@
 @use "sass:color";
-@use "variables";
+@use "./variables";
 
 
 // state colors
@@ -31,7 +31,6 @@
   background: variables.$success-color;
   color: variables.$neutral-white;
   border-color: color.adjust(variables.$success-color, $lightness: -50%);
-
 }
 
 .is-error {

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

@@ -25,6 +25,5 @@
 @use '_states.scss';
 @use '_conversations.scss';
 @use '_layout_demo.scss';
-@use '_main_button.scss';