From 560c92e67bd5152a1622e53d60fad6c0b69537ec Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 1 Oct 2024 10:48:21 +0800
Subject: [PATCH] styling and functionality improvements

---
 addon/components/badge.hbs                    |  19 ++-
 addon/components/checkbox.js                  |   4 +-
 addon/components/info-block.hbs               |  16 +-
 addon/components/layout/header.js             |  14 +-
 .../layout/header/dropdown/item.hbs           |  65 +++++++-
 addon/components/toggle.hbs                   |   2 +-
 addon/components/toggle.js                    |   5 +-
 addon/modifiers/set-max-height.js             |  34 ++++
 addon/styles/components/badge.css             | 157 ++++--------------
 addon/styles/components/input.css             |   5 +
 addon/styles/layout/legacy.css                |  99 ++++++++---
 addon/styles/layout/next.css                  |  11 +-
 app/modifiers/set-max-height.js               |   1 +
 .../modifiers/set-max-height-test.js          |  15 ++
 14 files changed, 265 insertions(+), 182 deletions(-)
 create mode 100644 addon/modifiers/set-max-height.js
 create mode 100644 app/modifiers/set-max-height.js
 create mode 100644 tests/integration/modifiers/set-max-height-test.js

diff --git a/addon/components/badge.hbs b/addon/components/badge.hbs
index 1945407..643525e 100644
--- a/addon/components/badge.hbs
+++ b/addon/components/badge.hbs
@@ -1,16 +1,21 @@
-<div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
-    <span class="inline-flex items-center {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
-        <svg class="{{unless @hideText 'mr-1.5'}} h-2 w-2 {{if @hideStatusDot 'hidden'}}" fill="currentColor" viewBox="0 0 8 8">
-            <circle cx="4" cy="4" r="3"></circle>
-        </svg>
+<div class="status-badge {{safe-dasherize (or @type @status "info")}}-status-badge {{@wrapperClass}}" ...attributes>
+    <span
+        class="status-badge-inner-wrap inline-flex items-center
+            {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}}
+            text-xs font-medium leading-4 whitespace-no-wrap
+            {{@spanClass}}"
+    >
+        {{#unless (or @hideStatusDot @hideIcon)}}
+            <FaIcon @icon={{or @icon "circle"}} @size={{or @size "xs"}} @prefix={{or @iconPrefix "fas"}} class="{{@iconClass}} {{unless @hideText 'mr-1.5'}}" />
+        {{/unless}}
         {{#if (has-block)}}
             {{yield @status}}
         {{else}}
             {{#unless @hideText}}
                 {{#if @disableHumanize}}
-                    {{@status}}
+                    {{or @text @status}}
                 {{else}}
-                    {{safe-humanize @status}}
+                    {{safe-humanize (or @text @status)}}
                 {{/if}}
             {{/unless}}
         {{/if}}
diff --git a/addon/components/checkbox.js b/addon/components/checkbox.js
index 1fc7a46..bb54dea 100644
--- a/addon/components/checkbox.js
+++ b/addon/components/checkbox.js
@@ -63,9 +63,9 @@ export default class CheckboxComponent extends Component {
      * @param {*} { permission = null }
      * @memberof ButtonComponent
      */
-    constructor(owner, { value = false, permission = null, disabled = false, visible = true }) {
+    constructor(owner, { value = false, checked = null, permission = null, disabled = false, visible = true }) {
         super(...arguments);
-        this.checked = value;
+        this.checked = checked === null ? value : checked;
         this.permissionRequired = permission;
         this.visible = visible;
         this.disabled = disabled;
diff --git a/addon/components/info-block.hbs b/addon/components/info-block.hbs
index 954cc8a..1c76bdb 100644
--- a/addon/components/info-block.hbs
+++ b/addon/components/info-block.hbs
@@ -1,17 +1,17 @@
-<div class="ui-input-info-block rounded-md" ...attributes>
-    <div class="flex">
-        <div class="flex-shrink-0">
-            <FaIcon @icon={{or @icon "info-circle"}} />
+<div class="ui-input-info-block {{or @type 'info'}} {{or @size "base"}}" ...attributes>
+    <div class="ui-input-info-block-inner flex {{@innerWrapperClass}}">
+        <div class="ui-input-info-block-icon-container flex-shrink-0 {{@iconWrapperClass}}">
+            <FaIcon @icon={{or @icon "info-circle"}} @size={{or @iconSize "md"}} @prefix={{or @iconPrefix "fas"}} class={{@iconClass}} />
         </div>
-        <div class="ml-3 flex-1 md:flex md:justify-between">
-            <div class="ui-input-info-block-text text-sm subpixel-antialiased {{@blockClass}}">
+        <div class="ui-input-info-block-yield-container ml-3 flex-1 md:flex md:justify-between {{@blockContainerClass}}">
+            <div class="ui-input-info-block-text subpixel-antialiased {{@blockClass}}">
                 {{#if (has-block)}}
                     {{yield}}
                 {{else}}
                     <span class={{@textClass}}>{{@text}}</span>
                     {{#if @exampleText}}
-                        <div>
-                            <code class="mt-3 break-text subpixel-antialiased text-xs font-mono">{{@exampleText}}</code>
+                        <div class={{@exampleTextWrapperClass}}>
+                            <code class="mt-3 break-text subpixel-antialiased text-xs font-mono {{@exampleTextClass}}">{{@exampleText}}</code>
                         </div>
                     {{/if}}
                 {{/if}}
diff --git a/addon/components/layout/header.js b/addon/components/layout/header.js
index 987e64c..9b60611 100644
--- a/addon/components/layout/header.js
+++ b/addon/components/layout/header.js
@@ -60,7 +60,11 @@ export default class LayoutHeaderComponent extends Component {
         // Prepare menuItems
         const menuItems = [
             {
-                text: [this.currentUser.email, this.currentUser.companyName],
+                text: [
+                    this.currentUser.companyName,
+                    this.currentUser.email,
+                    { component: 'badge', disableHumanize: true, text: this.currentUser.roleName, status: 'info', hideStatusDot: false, wrapperClass: 'mt-1' },
+                ],
                 class: 'flex flex-row items-center px-3 rounded-md text-gray-800 text-sm dark:text-gray-300 leading-1',
                 wrapperClass: 'next-dd-session-user-wrapper',
             },
@@ -193,6 +197,14 @@ export default class LayoutHeaderComponent extends Component {
     mergeUserMenuItems(userMenuItems = []) {
         // Prepare menu items
         const menuItems = [
+            {
+                text: [this.currentUser.name, { component: 'badge', disableHumanize: true, text: this.currentUser.roleName, status: 'info', hideStatusDot: false, wrapperClass: 'mt-1' }],
+                class: 'flex flex-row items-center px-3 rounded-md text-gray-800 text-sm dark:text-gray-300 leading-1',
+                wrapperClass: 'next-dd-session-user-wrapper',
+            },
+            {
+                seperator: true,
+            },
             {
                 id: 'view-profile-user-nav-item',
                 wrapperClass: 'view-profile-user-nav-item',
diff --git a/addon/components/layout/header/dropdown/item.hbs b/addon/components/layout/header/dropdown/item.hbs
index 3c0d2de..43208dc 100644
--- a/addon/components/layout/header/dropdown/item.hbs
+++ b/addon/components/layout/header/dropdown/item.hbs
@@ -4,12 +4,49 @@
             <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
         {{/if}}
         <div class="inline-flex flex-col {{@item.inlineClass}}">
-            {{#if (is-array @item.text)}}
-                {{#each @item.text as |line|}}
-                    <div class="{{@item.class}}">{{line}}</div>
-                {{/each}}
+            {{#if @item.intl}}
+                {{#if (is-array @item.intl)}}
+                    {{#each @item.intl as |intl|}}
+                        <div class="{{@item.class}}">{{t intl}}</div>
+                    {{/each}}
+                {{else}}
+                    <div class="{{@item.class}}">{{t @item.intl}}</div>
+                {{/if}}
             {{else}}
-                <div class="{{@item.class}}">{{@item.text}}</div>
+                {{#if (is-array @item.text)}}
+                    {{#each @item.text as |line|}}
+                        {{#if (is-object line)}}
+                            <div class="{{@item.class}}">
+                                {{#if line.component}}
+                                    {{component
+                                        line.component
+                                        item=line
+                                        text=line.text
+                                        label=(or line.label line.text)
+                                        status=(or line.status line.text)
+                                        type=line.type
+                                        onClick=line.onClick
+                                        hideStatusDot=line.hideStatusDot
+                                        disableHumanize=line.disableHumanize
+                                        class=line.class
+                                        wrapperClass=line.wrapperClass
+                                        spanClass=line.spanClass
+                                        textClass=line.textClass
+                                        icon=line.icon
+                                        iconClass=line.iconClass
+                                        iconSize=line.iconSize
+                                    }}
+                                {{else}}
+                                    <div class="{{line.class}}">{{line.text}}</div>
+                                {{/if}}
+                            </div>
+                        {{else}}
+                            <div class="{{@item.class}}">{{line}}</div>
+                        {{/if}}
+                    {{/each}}
+                {{else}}
+                    <div class="{{@item.class}}">{{@item.text}}</div>
+                {{/if}}
             {{/if}}
         </div>
     </div>
@@ -21,7 +58,11 @@
             {{#if @item.icon}}
                 <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
             {{/if}}
-            <span>{{@item.text}}</span>
+            {{#if @item.intl}}
+                <span>{{t @item.intl}}</span>
+            {{else}}
+                <span>{{@item.text}}</span>
+            {{/if}}
         </LinkTo>
     </div>
 {{/if}}
@@ -38,7 +79,11 @@
             {{#if @item.icon}}
                 <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
             {{/if}}
-            <span>{{@item.text}}</span>
+            {{#if @item.intl}}
+                <span>{{t @item.intl}}</span>
+            {{else}}
+                <span>{{@item.text}}</span>
+            {{/if}}
         </a>
     </div>
 {{/if}}
@@ -49,7 +94,11 @@
             {{#if @item.icon}}
                 <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
             {{/if}}
-            <span>{{@item.text}}</span>
+            {{#if @item.intl}}
+                <span>{{t @item.intl}}</span>
+            {{else}}
+                <span>{{@item.text}}</span>
+            {{/if}}
         </a>
     </div>
 {{/if}}
diff --git a/addon/components/toggle.hbs b/addon/components/toggle.hbs
index 40ec90d..7c6ae50 100644
--- a/addon/components/toggle.hbs
+++ b/addon/components/toggle.hbs
@@ -1,5 +1,5 @@
 {{#if this.visible}}
-    <div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
+    <div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled @disabled}}>
         <span
             role="checkbox"
             tabindex="0"
diff --git a/addon/components/toggle.js b/addon/components/toggle.js
index 6f3b164..aae407f 100644
--- a/addon/components/toggle.js
+++ b/addon/components/toggle.js
@@ -95,7 +95,10 @@ export default class ToggleComponent extends Component {
      * @param {Array} [isToggled]
      * @memberof ToggleComponent
      */
-    @action onChange(el, [isToggled]) {
+    @action onChange(el, [isToggled, disabled = null]) {
         this.isToggled = isToggled === true;
+        if (disabled !== null) {
+            this.disabled = disabled;
+        }
     }
 }
diff --git a/addon/modifiers/set-max-height.js b/addon/modifiers/set-max-height.js
new file mode 100644
index 0000000..317b7da
--- /dev/null
+++ b/addon/modifiers/set-max-height.js
@@ -0,0 +1,34 @@
+import { modifier } from 'ember-modifier';
+import numbersOnly from '../utils/numbers-only';
+
+export default modifier(function setMaxHeight(element, [height]) {
+    if (height === undefined || height === null) {
+        return;
+    }
+
+    let heightValue = height;
+    let unit = '';
+
+    // Check if height is a string with a unit
+    if (typeof height === 'string') {
+        const match = height.match(/^(\d+(?:\.\d+)?)(\D+)?$/);
+        if (match !== null) {
+            heightValue = match[1];
+            unit = match[2] || '';
+        }
+    }
+
+    // Convert the height value to pixels
+    if (unit === 'em') {
+        heightValue *= 16; // 1em = 16px
+    } else if (unit === 'rem') {
+        heightValue *= 16; // 1rem = 16px (assuming default font size of 16px)
+    } else if (unit === 'pt') {
+        heightValue *= 1.33; // 1pt = 1.33px (assuming 96dpi)
+    } else if (unit === 'pc') {
+        heightValue *= 16; // 1pc = 16px (assuming 12pt = 16px)
+    }
+
+    // Set the max height of the element by the value
+    element.style.maxHeight = `${numbersOnly(heightValue)}px`;
+});
diff --git a/addon/styles/components/badge.css b/addon/styles/components/badge.css
index 4a1fb42..e4a014c 100644
--- a/addon/styles/components/badge.css
+++ b/addon/styles/components/badge.css
@@ -3,6 +3,7 @@
     width: fit-content;
 }
 
+.status-badge.rounded-full > span,
 .status-badge > span.badge-rounded-full {
     width: 0.5rem;
     height: 0.5rem;
@@ -11,14 +12,17 @@
     justify-content: center;
     text-align: center;
     border-radius: 100%;
+    border: 1px solid #4b5563;
 }
 
+.status-badge.default-status-badge > span,
 .status-badge > span {
-    @apply text-gray-800 bg-gray-100;
+    @apply bg-gray-800 border-gray-600 text-gray-100;
 }
 
+.status-badge.default-status-badge > span svg,
 .status-badge > span svg {
-    @apply text-gray-400;
+    @apply text-gray-300;
 }
 
 .status-badge.status-badge-lg > span {
@@ -37,7 +41,7 @@
 .status-badge.operational-status-badge > span,
 .status-badge.active-status-badge > span,
 .status-badge.completed-status-badge > span {
-    @apply text-green-800 bg-green-100;
+    @apply bg-green-800 border-green-600 text-green-100;
 }
 
 .status-badge[class*='2'] > span svg,
@@ -52,7 +56,7 @@
 .status-badge.operational-status-badge > span svg,
 .status-badge.active-status-badge > span svg,
 .status-badge.completed-status-badge > span svg {
-    @apply text-green-400;
+    @apply text-green-300;
 }
 
 .status-badge[class*='5'] > span,
@@ -63,7 +67,7 @@
 .status-badge.inactive-status-badge > span,
 .status-badge.failed-status-badge > span,
 .status-badge.canceled-status-badge > span {
-    @apply text-red-800 bg-red-100;
+    @apply bg-red-800 border-red-600 text-red-100;
 }
 
 .status-badge[class*='5'] > span svg,
@@ -75,22 +79,14 @@
 .status-badge.disabled-status-badge > span svg,
 .status-badge.failed-status-badge > span svg,
 .status-badge.canceled-status-badge > span svg {
-    @apply text-red-400;
-}
-
-.status-badge.low-status-badge > span svg {
-    @apply text-blue-400;
-}
-
-.status-badge.medium-status-badge > span svg {
-    @apply text-orange-400;
+    @apply text-red-300;
 }
 
 .status-badge[class*='4'] > span,
 .status-badge.offline-status-badge > span,
-.status-badge.pending-review-badge > span,
-.status-badge.awaiting-review-badge > span,
-.status-badge.scheduled-maintenance-badge > span,
+.status-badge.pending-review-status-badge > span,
+.status-badge.awaiting-review-status-badge > span,
+.status-badge.scheduled-maintenance-status-badge > span,
 .status-badge.test-status-badge > span,
 .status-badge.warning-status-badge > span,
 .status-badge.preparing-status-badge > span,
@@ -98,14 +94,14 @@
 .status-badge.trialing-status-badge > span,
 .status-badge.grace-period-status-badge > span,
 .status-badge.pending-status-badge > span {
-    @apply text-yellow-800 bg-yellow-100;
+    @apply bg-yellow-800 border-yellow-600 text-yellow-100;
 }
 
 .status-badge[class*='4'] > span svg,
 .status-badge.offline-status-badge > span svg,
-.status-badge.pending-review-badge > span svg,
-.status-badge.awaiting-review-badge > span svg,
-.status-badge.scheduled-maintenance-badge > span svg,
+.status-badge.pending-review-status-badge > span svg,
+.status-badge.awaiting-review-status-badge > span svg,
+.status-badge.scheduled-maintenance-status-badge > span svg,
 .status-badge.test-status-badge > span svg,
 .status-badge.warning-status-badge > span svg,
 .status-badge.preparing-status-badge > span svg,
@@ -113,144 +109,53 @@
 .status-badge.trialing-status-badge > span svg,
 .status-badge.grace-period-status-badge > span svg,
 .status-badge.pending-status-badge > span svg {
-    @apply text-yellow-400;
+    @apply text-yellow-300;
 }
 
+.status-badge.indigo-status-badge > span,
 .status-badge.operational-suggestion-status-badge > span,
 .status-badge.dispatched-status-badge > span,
 .status-badge.assigned-status-badge > span {
-    @apply text-indigo-800 bg-indigo-100;
+    @apply bg-indigo-800 border-indigo-600 text-indigo-100;
 }
 
+.status-badge.indigo-status-badge > span svg,
+.status-badge.operational-suggestion-status-badge > span svg,
 .status-badge.dispatched-status-badge > span svg,
 .status-badge.assigned-status-badge > span svg {
-    @apply text-indigo-400;
+    @apply text-indigo-300;
 }
 
-.status-badge.driver-enroute-badge > span,
+.status-badge.medium-status-badge > span,
 .status-badge.enroute-status-badge > span,
 .status-badge.driver-enroute-status-badge > span {
-    @apply text-orange-900 bg-orange-100;
+    @apply bg-orange-800 border-orange-600 text-orange-100;
 }
 
-.status-badge.driver-enroute-badge > span svg,
+.status-badge.medium-status-badge > span svg,
 .status-badge.enroute-status-badge > span svg,
 .status-badge.driver-enroute-status-badge > span svg {
-    @apply text-orange-400;
+    @apply text-orange-300;
 }
 
+.status-badge.low-status-badge > span,
 .status-badge.approved-status-badge > span,
 .status-badge.info-status-badge > span,
 .status-badge.in-progress-status-badge > span {
-    @apply text-blue-900 bg-blue-300;
+    @apply bg-blue-800 border-blue-600 text-blue-100;
 }
 
+.status-badge.loq-status-badge > span svg,
 .status-badge.approved-status-badge > span svg,
 .status-badge.info-status-badge > span svg,
 .status-badge.in-progress-status-badge > span svg {
-    @apply text-blue-900;
-}
-
-.status-badge.default-status-badge > span {
-    @apply text-gray-900 bg-gray-300;
-}
-
-.status-badge.default-status-badge > span svg {
-    @apply text-gray-900;
+    @apply text-blue-300;
 }
 
 body[data-theme='dark'] .status-badge:not(.shadow-none) {
     @apply shadow;
 }
 
-.status-element {
-    @apply text-orange-900 bg-orange-100;
-}
-
-.status-element.published-status-element,
-.status-element.live-status-element,
-.status-element.created-status-element,
-.status-element.enabled-status-element,
-.status-element.success-status-element,
-.status-element.succeeded-status-element,
-.status-element.dispatched-status-element,
-.status-element.operational-status-element,
-.status-element.active-status-element,
-.status-element.completed-status-element {
-    @apply border-green-100;
-}
-
-.status-element.disabled-status-element,
-.status-element.failed-status-element,
-.status-element.canceled-status-element {
-    @apply border-red-100;
-}
-
-.status-element.test-status-element,
-.status-element.warning-status-element,
-.status-element.pending-status-element {
-    @apply border-yellow-100;
-}
-
-.status-element.dispatched-status-element,
-.status-element.assigned-status-element {
-    @apply border-indigo-100;
-}
-
-.status-element.driver-enroute-element,
-.status-element.driver-enroute-status-element,
-.status-element {
-    @apply border-orange-100;
-}
-
-.status-element.info-status-element,
-.status-element.in-progress-status-element {
-    @apply border-blue-300;
-}
-
-.status-element.published-status-element,
-.status-element.live-status-element,
-.status-element.created-status-element,
-.status-element.enabled-status-element,
-.status-element.success-status-element,
-.status-element.succeeded-status-element,
-.status-element.dispatched-status-element,
-.status-element.operational-status-element,
-.status-element.active-status-element,
-.status-element.completed-status-element {
-    @apply text-green-800 bg-green-100;
-}
-
-.status-element.rejected-status-element,
-.status-element.disabled-status-element,
-.status-element.failed-status-element,
-.status-element.canceled-status-element {
-    @apply text-red-800 bg-red-100;
-}
-
-.status-element.test-status-element,
-.status-element.warning-status-element,
-.status-element.pending-status-element {
-    @apply text-yellow-800 bg-yellow-100;
-}
-
-.status-element.dispatched-status-element,
-.status-element.assigned-status-element {
-    @apply text-indigo-800 bg-indigo-100;
-}
-
-.status-element.driver-enroute-element,
-.status-element.driver-enroute-status-element,
-.status-element {
-    @apply text-orange-900 bg-orange-100;
-}
-
-.status-element.approved-status-element,
-.status-element.info-status-element,
-.status-element.in-progress-status-element {
-    @apply text-blue-900 bg-blue-300;
-}
-
 .org-badge {
     @apply rounded-md bg-yellow-500 text-gray-900 dark:text-white w-5 h-5 text-xs flex items-center justify-center text-center shadow-sm flex-shrink-0 mr-2.5;
 }
diff --git a/addon/styles/components/input.css b/addon/styles/components/input.css
index 8925e5a..b4de1a8 100644
--- a/addon/styles/components/input.css
+++ b/addon/styles/components/input.css
@@ -22,6 +22,11 @@ input.form-input.form-input-md {
     @apply px-3 py-2 text-sm leading-4;
 }
 
+select.form-input-lg,
+input.form-input.form-input-lg {
+    @apply px-4 py-3 text-base leading-5;
+}
+
 body[data-theme='light'] select.form-select.has--placeholder,
 body[data-theme='dark'] select.form-select.has--placeholder,
 select.form-select.has--placeholder {
diff --git a/addon/styles/layout/legacy.css b/addon/styles/layout/legacy.css
index eb0d67a..b70ff99 100644
--- a/addon/styles/layout/legacy.css
+++ b/addon/styles/layout/legacy.css
@@ -110,7 +110,7 @@ a.navbar-logo {
 }
 
 a.navbar-logo:hover {
-    opacity: .9;
+    opacity: 0.9;
 }
 
 a.navbar-logo > img {
@@ -558,49 +558,94 @@ body[data-theme='dark'] .radio-group-condensed .radio-group-item input[type='rad
     @apply border-gray-900;
 }
 
+.ui-input-info-block.info,
+.ui-input-info-block.base,
 .ui-input-info-block {
-    @apply bg-blue-50 border border-blue-300 text-blue-700 p-4;
+    @apply bg-blue-800 border border-blue-600 text-blue-100 rounded-md text-sm p-2;
+}
+
+.ui-input-info-block .ui-input-info-block-inner,
+.ui-input-info-block.base .ui-input-info-block-inner {
+    line-height: 1.25rem;
+}
+
+.ui-input-info-block.lg {
+    @apply px-4 py-3 text-lg;
+}
+
+.ui-input-info-block.lg .ui-input-info-block-inner {
+    @apply text-lg;
 }
 
 .ui-input-info-block.md {
-    @apply px-4 py-3;
+    @apply px-3 py-2.5 text-base;
+}
+
+.ui-input-info-block.md .ui-input-info-block-inner {
+    @apply text-base;
 }
 
 .ui-input-info-block.sm {
-    @apply px-3 py-2;
+    @apply text-sm px-3 py-2;
 }
 
-.ui-input-info-block.sm,
-.ui-input-info-block.sm span {
+.ui-input-info-block.sm .ui-input-info-block-inner {
     @apply text-sm;
 }
 
 .ui-input-info-block.xs {
-    @apply px-2 py-1;
+    @apply px-2 py-1.5;
+}
+
+.ui-input-info-block.xs .ui-input-info-block-inner {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+}
+
+.ui-input-info-block.success {
+    @apply bg-green-800 border-green-600 text-green-100;
+}
+
+.ui-input-info-block.warning {
+    @apply bg-yellow-800 border-yellow-600 text-yellow-100;
+}
+
+.ui-input-info-block.danger {
+    @apply bg-red-800 border-red-600 text-red-100;
 }
 
-.ui-input-info-block.xs,
-.ui-input-info-block.xs span {
-    @apply text-xs;
+.ui-input-info-block.magic {
+    @apply bg-indigo-800 border-indigo-600 text-indigo-100;
 }
 
 .ui-input-info-block .ui-input-info-block-text,
+.ui-input-info-block .ui-input-info-block-text span,
 .ui-input-info-block p {
-    @apply text-blue-900;
+    @apply text-blue-100;
 }
 
+.ui-input-info-block .ui-input-info-block-text.warning,
 .ui-input-info-block .ui-input-info-block-text.warning span,
 .ui-input-info-block .ui-input-info-block-text.warning p {
-    @apply text-yellow-900;
+    @apply text-yellow-100;
 }
 
+.ui-input-info-block .ui-input-info-block-text.success span,
 .ui-input-info-block .ui-input-info-block-text.success span,
 .ui-input-info-block .ui-input-info-block-text.success p {
-    @apply text-green-900;
+    @apply text-green-100;
 }
 
-.ui-input-info-block.warning {
-    @apply bg-yellow-200 border-yellow-300 text-yellow-900;
+.ui-input-info-block .ui-input-info-block-text.danger span,
+.ui-input-info-block .ui-input-info-block-text.danger span,
+.ui-input-info-block .ui-input-info-block-text.danger p {
+    @apply text-red-100;
+}
+
+.ui-input-info-block .ui-input-info-block-text.magic span,
+.ui-input-info-block .ui-input-info-block-text.magic span,
+.ui-input-info-block .ui-input-info-block-text.magic p {
+    @apply text-indigo-100;
 }
 
 .ui-input-info-block.warning .ui-input-info-block-text,
@@ -611,11 +656,7 @@ body[data-theme='dark'] .radio-group-condensed .radio-group-item input[type='rad
 .ui-input-info-block.warning span:last-child,
 .ui-input-info-block.warning span:first-child,
 .ui-input-info-block.warning p {
-    @apply text-yellow-900;
-}
-
-.ui-input-info-block.danger {
-    @apply bg-red-200 border-red-300 text-red-900;
+    @apply text-yellow-100;
 }
 
 .ui-input-info-block.danger .ui-input-info-block-text,
@@ -626,11 +667,7 @@ body[data-theme='dark'] .radio-group-condensed .radio-group-item input[type='rad
 .ui-input-info-block.danger span:last-child,
 .ui-input-info-block.danger span:first-child,
 .ui-input-info-block.danger p {
-    @apply text-red-900;
-}
-
-.ui-input-info-block.success {
-    @apply bg-green-200 border-green-300 text-green-900;
+    @apply text-red-100;
 }
 
 .ui-input-info-block.success .ui-input-info-block-text,
@@ -640,7 +677,17 @@ body[data-theme='dark'] .radio-group-condensed .radio-group-item input[type='rad
 .ui-input-info-block.success span:last-child,
 .ui-input-info-block.success span:first-child,
 .ui-input-info-block.success p {
-    @apply text-green-900;
+    @apply text-green-100;
+}
+
+.ui-input-info-block.magic .ui-input-info-block-text,
+.ui-input-info-block.magic .ui-input-info-block-text > span,
+.ui-input-info-block.magic .ui-input-info-block-text > p,
+.ui-input-info-block.magic span,
+.ui-input-info-block.magic span:last-child,
+.ui-input-info-block.magic span:first-child,
+.ui-input-info-block.magic p {
+    @apply text-indigo-100;
 }
 
 .activity-flow-connector {
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index ee702db..3bed3a2 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -20,6 +20,11 @@ textarea[disabled='true'] {
     cursor: not-allowed;
 }
 
+body.scrollable,
+body.virtual {
+    overflow-y: scroll;
+}
+
 .next-content-overlay .new-order-overlay-body {
     @apply px-4 pt-4 space-y-4;
 }
@@ -1057,11 +1062,13 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
     -webkit-app-region: drag;
 }
 
-.next-view-header .next-view-header-right .next-user-button svg.svg-inline--fa {
+.next-view-header .next-view-header-right .next-user-button button.next-dd-item svg,
+.next-view-header .next-view-header-right .next-user-button a.next-dd-item svg {
     color: #1e293b;
 }
 
-body[data-theme='dark'] .next-view-header .next-view-header-right .next-user-button svg.svg-inline--fa {
+body[data-theme='dark'] .next-view-header .next-view-header-right .next-user-button button.next-dd-item svg,
+body[data-theme='dark'] .next-view-header .next-view-header-right .next-user-button a.next-dd-item svg {
     color: #cbd5e1;
 }
 
diff --git a/app/modifiers/set-max-height.js b/app/modifiers/set-max-height.js
new file mode 100644
index 0000000..e6eda2c
--- /dev/null
+++ b/app/modifiers/set-max-height.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/modifiers/set-max-height';
diff --git a/tests/integration/modifiers/set-max-height-test.js b/tests/integration/modifiers/set-max-height-test.js
new file mode 100644
index 0000000..87e9ad0
--- /dev/null
+++ b/tests/integration/modifiers/set-max-height-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Modifier | set-max-height', function (hooks) {
+    setupRenderingTest(hooks);
+
+    // Replace this with your real tests.
+    test('it renders', async function (assert) {
+        await render(hbs`<div {{set-max-height}}></div>`);
+
+        assert.ok(true);
+    });
+});