chore: Final touches for portals (#5388)

* chore: Final touches for portals

* Review fixes

* Minor fixes

* Fixes styles for input and buttons

* Minor fixes

* Spacing fixes on header

* Minor fixes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -370,7 +370,7 @@ $input-font-weight: $global-weight-normal;
 $input-background: $white;
 $input-background-focus: $white;
 $input-background-disabled: $light-gray;
-$input-border: 1px solid $color-border;
+$input-border: 1px solid var(--s-200);
 $input-border-focus: 1px solid lighten($primary-color, 15%);
 $input-shadow: 0;
 $input-shadow-focus: 0;

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -20,7 +20,7 @@
   }
 
   .multiselect--active {
-    > .multiselect__tags {
+    >.multiselect__tags {
       border-color: $color-woot;
     }
   }
@@ -96,8 +96,8 @@
   }
 
   .multiselect__tags {
-    border: 1px solid $color-border;
-    border-color: $color-border;
+    border: 1px solid var(--s-200);
+    border-color: var(--s-200);
     margin: 0;
     min-height: 4.4rem;
     padding-top: $zero;
@@ -145,6 +145,7 @@
 }
 
 .sidebar-labels-wrap {
+
   &.has-edited,
   &:hover {
     .multiselect {
@@ -153,15 +154,15 @@
   }
 
   .multiselect {
-    > .multiselect__select {
+    >.multiselect__select {
       visibility: hidden;
     }
 
-    > .multiselect__tags {
+    >.multiselect__tags {
       border-color: transparent;
     }
 
-    &.multiselect--active > .multiselect__tags {
+    &.multiselect--active>.multiselect__tags {
       border-color: $color-woot;
     }
   }

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -44,6 +44,52 @@ $default-button-height: 4.0rem;
     padding-top: 0;
   }
 
+  &.hollow {
+    border-color: var(--s-200);
+    color: var(--w-700);
+
+    &.secondary {
+      border-color: var(--s-200);
+      color: var(--s-700)
+    }
+
+    &.success {
+      border-color: var(--s-200);
+      color: var(--g-700)
+    }
+
+    &.alert {
+      border-color: var(--s-200);
+      color: var(--r-700)
+    }
+
+    &.warning {
+      border-color: var(--s-200);
+      color: var(--y-700)
+    }
+
+    &:hover {
+      background: var(--s-75);
+      border-color: var(--s-100);
+
+      &.secondary {
+        border-color: var(--s-100);
+      }
+
+      &.success {
+        border-color: var(--s-100);
+      }
+
+      &.alert {
+        border-color: var(--s-100);
+      }
+
+      &.warning {
+        border-color: var(--s-100);
+      }
+    }
+  }
+
   // Smooth style
   &.smooth {
     @include button-style(var(--w-50), var(--w-100), var(--w-700));
@@ -67,11 +113,12 @@ $default-button-height: 4.0rem;
   }
 
   &.clear {
+
     &.warning {
       color: var(--y-600);
     }
 
-    &.button--only-icon:hover {
+    &:hover {
       background: var(--w-50);
 
       &.secondary {