Merge pull request #60 from fleetbase/change-success-button-styling

make the success button color scheme darker to easier read text and b…

addon/components/progress-bar.hbs

@@ -0,0 +1,12 @@
+<div>
+    <div class="mb-2 flex justify-between items-center">
+        <h3 class="text-sm font-semibold text-gray-800 dark:text-white">{{@title}}</h3>
+        <span class="text-sm text-gray-800 dark:text-white">{{@percent}}%</span>
+    </div>
+    <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-700" role="progressbar" aria-valuenow={{@percent}} aria-valuemin="0" aria-valuemax="100">
+        <div
+            class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500"
+            {{did-update this.setProgress @percent}}
+        ></div>
+    </div>
+</div>

addon/components/progress-bar.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ProgressBarComponent extends Component {
+    @action setProgress(el, [percent]) {
+        el.style.width = `${percent}%`;
+    }
+}

addon/components/table/cell/currency.hbs

@@ -0,0 +1,5 @@
+<Table::Cell::Base @column={{@column}}>
+    {{#let (or @row.currency @column.currency) as |currency|}}
+        {{format-currency @value currency}}
+    {{/let}}
+</Table::Cell::Base>

addon/styles/components/button.css

@@ -138,7 +138,7 @@ a.btn.fb-button-success,
 a.btn.btn-success,
 .fc-button.btn-success,
 .ui-full-calendar .fc-button.btn-success {
-    @apply text-white bg-green-500 border-green-600 shadow-sm;
+    @apply text-white bg-green-700 border-green-600 shadow-sm;
 }
 
 .btn.fb-button-success:hover:not(:disabled),

addon/styles/components/chat.css

@@ -114,7 +114,7 @@ body[data-theme='dark'] .chat-window-input {
     width: 100%;
     display: flex;
     flex-direction: row;
-    justify-content: end;
+    justify-content: flex-end;
     padding: 0.5rem;
 }
 
@@ -194,7 +194,7 @@ body[data-theme='dark'] .chat-window-controls-container .chat-window-name {
 .chat-window-controls-container .chat-window-controls {
     display: flex;
     flex-direction: row;
-    justify-content: end;
+    justify-content: flex-end;
     flex: 1;
 }
 
@@ -409,7 +409,7 @@ body[data-theme='dark'] .chat-window-pending-attachment {
 
 .chat-window-pending-attachment > .chat-window-pending-attachment-actions {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     align-items: center;
     font-size: 0.65rem;
 }
@@ -513,7 +513,7 @@ body[data-theme='dark'] .chat-message-container .chat-message-content-bubble-con
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    align-items: start;
+    align-items: flex-start;
     align-self: start;
     background-color: #fff;
     height: 45px;
@@ -570,7 +570,7 @@ body[data-theme='dark'] .chat-message-container .chat-message-created-at {
     flex: 1;
     flex-direction: row;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end;
 }
 
 .chat-message-container .chat-message-receipts > div:not(:last-child)::after {
@@ -607,7 +607,7 @@ body[data-theme='dark'] .chat-message-container .chat-message-receipts .chat-mes
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: start;
+    justify-content: flex-start;
 }
 
 .chat-message-container .chat-message-sender-bubble > img {

addon/styles/components/full-calendar.css

@@ -40,7 +40,7 @@ body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:disabled
 }
 
 .fleetbase-full-calendar.fc .fc-toolbar {
-    justify-content: start;
+    justify-content: flex-start;
 }
 
 .fleetbase-full-calendar.fc .fc-toolbar.fc-header-toolbar {

addon/styles/layout/next.css

@@ -107,6 +107,10 @@ body[data-theme='dark'] .fleetbase-next-container {
     z-index: 800;
 }
 
+.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-body .next-content-overlay-panel-body-inner-wrapper > .section-header-actions {
+    overflow-y: hidden;
+}
+
 .next-content-overlay.is-open {
     @apply opacity-100;
 }
@@ -1040,10 +1044,18 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
     box-align: center;
     align-items: center;
     justify-content: flex-end;
-    -webkit-user-select: none;
+    user-select: none;
     -webkit-app-region: drag;
 }
 
+.next-view-header .next-view-header-right .next-user-button svg.svg-inline--fa {
+    color: #1e293b
+}
+
+body[data-theme="dark"] .next-view-header .next-view-header-right .next-user-button svg.svg-inline--fa {
+    color: #cbd5e1
+}
+
 .next-view-header #view-header-left-content-a,
 .next-view-header #view-header-left-content-b,
 .next-view-header #view-header-actions {
@@ -1321,13 +1333,16 @@ body[data-theme="dark"] .next-sidebar .next-sidebar-panel-container > .next-side
 }
 
 .next-dd-menu {
-    @apply mt-2 border border-transparent bg-gray-800 overflow-hidden pb-1 shadow-next-nav;
+    @apply border border-transparent bg-gray-800 shadow-next-nav;
+    margin-top: 0.5rem;
+    overflow-x: hidden;
+    min-height: 100%;
+    height: 100%;
     border-radius: 5px;
     width: 250px;
     z-index: 600;
     max-width: 100vw;
-    max-height: calc(100vh - 130px);
-    padding: 0;
+    padding: 0 0 0.25rem 0;
 }
 
 .next-dd-menu.overflow-visible {
@@ -1998,7 +2013,7 @@ body[data-theme='dark'] .x-fleetbase-file > .x-fleetbase-file-wrapper {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end;
 }
 
 .x-fleetbase-file > .x-fleetbase-file-wrapper .x-fleetbase-file-actions #x-fleetbase-file-actions-dropdown {

addon/styles/layout/reset.css

@@ -6,10 +6,16 @@
 }
 
 body {
+    --sb-track-color: #e2e8f0;
+    --sb-thumb-color: rgba(148, 163, 184, 0.75);
+    --sb-thumb-hover-color: #64748b;
+    --sb-size: 7px;
+}
+
+body[data-theme="dark"] {
     --sb-track-color: #111827;
     --sb-thumb-color: #374151;
     --sb-thumb-hover-color: rgba(55, 65, 81, .5);
-    --sb-size: 7px;
 }
 
 ::-webkit-scrollbar {
@@ -18,12 +24,11 @@ body {
 
 ::-webkit-scrollbar-track {
     background: var(--sb-track-color);
-    border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
     background: var(--sb-thumb-color);
-    border-radius: 5px;
+    border-radius: .15rem;
 }
 
 ::-webkit-scrollbar-thumb:hover {

app/components/progress-bar.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/progress-bar';

app/components/table/cell/currency.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/table/cell/currency';

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.18",
+    "version": "0.2.19",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",
@@ -41,10 +41,10 @@
         "@embroider/macros": "^1.8.3",
         "@fleetbase/ember-accounting": "^0.0.1",
         "@floating-ui/dom": "^1.0.1",
-        "@fortawesome/ember-fontawesome": "^1.0.0",
-        "@fortawesome/fontawesome-svg-core": "^6.4.0",
-        "@fortawesome/free-brands-svg-icons": "^6.4.0",
-        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/ember-fontawesome": "^2.0.0",
+        "@fortawesome/fontawesome-svg-core": "6.4.0",
+        "@fortawesome/free-brands-svg-icons": "6.4.0",
+        "@fortawesome/free-solid-svg-icons": "6.4.0",
         "@fullcalendar/core": "^6.1.9",
         "@fullcalendar/daygrid": "^6.1.9",
         "@fullcalendar/interaction": "^6.1.9",