feat(frontend): revamp of some basics components (#3105)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.module.scss

@@ -24,7 +24,7 @@
       width: 80%;
       height: 15px;
       border-radius: Radius.$normal;
-      background: var(--primary-1);
+      background: var(--background-primary-1);
       outline: none;
       -webkit-transition: 0.2s;
       transition: opacity 0.2s;

frontend/lib/components/ui/MessageInfoBox/MessageInfoBox.module.scss

@@ -1,41 +1,38 @@
 @use "styles/Radius.module.scss";
 @use "styles/Spacings.module.scss";
+@use "styles/Typography.module.scss";
 
 .message_info_box_wrapper {
   padding: Spacings.$spacing03;
   display: flex;
   align-items: center;
   gap: Spacings.$spacing03;
   width: fit-content;
-  border: 1px solid var(--border-2);
   color: var(--text-3);
   border-radius: Radius.$normal;
+  font-size: Typography.$small;
 
   &.success {
-    border-color: var(--success);
     color: var(--success);
     background-color: var(--success-lightest);
   }
 
   &.info {
-    border-color: var(--primary-0);
     color: var(--primary-0);
     background-color: var(--primary-2);
   }
 
   &.warning {
-    border-color: var(--warning);
     color: var(--warning);
     background-color: var(--warning-lightest);
   }
 
   &.tutorial {
-    border-color: var(--gold);
     color: var(--gold);
     background-color: var(--gold-lightest);
   }
 
   &.dark {
-    background-color: var(--background-primary-0);
+    background-color: var(--background-1);
   }
 }

frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss

@@ -20,6 +20,17 @@
     text-transform: uppercase;
   }
 
+  &.dark {
+    background-color: var(--background-1);
+
+    &:hover,
+    &.important {
+      .label {
+        color: var(--white-0);
+      }
+    }
+  }
+
   &.hidden {
     display: none;
   }

frontend/lib/components/ui/QuivrButton/QuivrButton.tsx

@@ -35,7 +35,7 @@ export const QuivrButton = ({
 
   const useIconColor = () => {
     if ((hovered && !disabled) || (important && !disabled)) {
-      return "white";
+      return isDarkMode ? "black" : "white";
     }
     if (disabled) {
       return "grey";

frontend/lib/components/ui/SingleSelector/SingleSelector.module.scss

@@ -8,20 +8,20 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  background-color: var(--background-0);
   font-size: Typography.$small;
 
   .first_line_wrapper {
     display: flex;
     justify-content: space-between;
     border: 1px solid var(--border-2);
-    border-radius: Radius.$normal;
+    border-radius: Radius.$big;
     align-items: center;
+    background-color: var(--background-1);
     cursor: pointer;
     display: flex;
 
     &.unfolded {
-      border-radius: Radius.$normal Radius.$normal 0 0;
+      border-radius: Radius.$big Radius.$big 0 0;
     }
 
     .left {

frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss

@@ -6,10 +6,10 @@
   display: flex;
   border: 1px solid var(--border-0);
   gap: Spacings.$spacing03;
-  border-radius: Radius.$normal;
+  border-radius: Radius.$big;
   align-items: center;
   width: 100%;
-  background-color: var(--background-0);
+  background-color: var(--background-1);
 
   &.simple {
     border: none;
@@ -34,8 +34,8 @@
     resize: none;
     background-color: transparent;
     font-size: Typography.$small;
-    padding-block: Spacings.$spacing02;
-    padding-inline: Spacings.$spacing03;
+    padding-block: calc(Spacings.$spacing02 + Spacings.$spacing01);
+    padding-inline: Spacings.$spacing05;
 
     &:focus {
       box-shadow: none;

frontend/lib/components/ui/TextInput/TextInput.module.scss

@@ -6,12 +6,12 @@
   display: flex;
   border: 1px solid var(--border-2);
   gap: Spacings.$spacing02;
-  padding-block: Spacings.$spacing02;
-  padding-inline: Spacings.$spacing03;
-  border-radius: Radius.$normal;
+  padding-block: calc(Spacings.$spacing02 + Spacings.$spacing01);
+  padding-inline: Spacings.$spacing05;
+  border-radius: Radius.$big;
   align-items: center;
   width: 100%;
-  background-color: var(--background-0);
+  background-color: var(--background-1);
 
   &.simple {
     border: none;