feat: Update Captain pages UI (#13184)

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -20,11 +20,11 @@ const emit = defineEmits(['action']);
 
 const bannerClass = computed(() => {
   const classMap = {
-    slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
+    slate: 'bg-n-slate-1 outline-n-slate-5 text-n-slate-12',
+    amber: 'bg-n-amber-1 outline-n-amber-5 text-n-amber-12',
+    teal: 'bg-n-teal-1 outline-n-teal-5 text-n-teal-12',
+    ruby: 'bg-n-ruby-1 outline-n-ruby-5 text-n-ruby-12',
+    blue: 'bg-n-blue-1 outline-n-blue-5 text-n-blue-12',
   };
 
   return classMap[props.color];
@@ -32,11 +32,11 @@ const bannerClass = computed(() => {
 
 const buttonClass = computed(() => {
   const classMap = {
-    slate: 'bg-n-slate-4 hover:bg-n-slate-5 text-n-slate-11',
-    amber: 'bg-n-amber-4 hover:bg-n-amber-5 text-n-amber-11',
-    teal: 'bg-n-teal-4 hover:bg-n-teal-5 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 hover:bg-n-ruby-5 text-n-ruby-11',
-    blue: 'bg-n-blue-4 hover:bg-n-blue-5 text-n-blue-11',
+    slate: 'hover:bg-n-slate-4 text-n-slate-11',
+    amber: 'hover:bg-n-amber-4 text-n-amber-11',
+    teal: 'hover:bg-n-teal-4 text-n-teal-11',
+    ruby: 'hover:bg-n-ruby-4 text-n-ruby-11',
+    blue: 'hover:bg-n-blue-4 text-n-blue-11',
   };
 
   return classMap[props.color];
@@ -49,7 +49,7 @@ const triggerAction = () => {
 
 <template>
   <div
-    class="text-sm rounded-xl flex items-center justify-between gap-2 border"
+    class="text-sm rounded-xl flex items-center justify-between min-h-12 gap-2 outline outline-1 -outline-offset-1"
     :class="[
       bannerClass,
       {
@@ -64,11 +64,11 @@ const triggerAction = () => {
     <div>
       <button
         v-if="actionLabel"
-        class="px-3 py-1 w-auto grid place-content-center rounded-lg"
+        class="px-3 py-1 w-auto flex items-center justify-center rounded-lg flex-shrink-0"
         :class="buttonClass"
         @click="triggerAction"
       >
-        {{ actionLabel }}
+        <span class="line-clamp-2 text-button">{{ actionLabel }}</span>
       </button>
     </div>
   </div>