fix(frontend): style progress-tooltip

adfinis · Oct 18, 2024 · e26a5ec · e26a5ec
1 parent 16bc215
commit e26a5ec
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/frontend/app/components/progress-tooltip/component.js b/frontend/app/components/progress-tooltip/component.js
@@ -82,37 +82,41 @@ export default class ProgressTooltipComponent extends Component {
  : 0;
  }
 
+ get badgeClass() {
+ return "text-foreground-primary rounded-xl py-1 px-1.5 font-mono text-xs rounded-xl m-0.5 inline-block min-w-2.5 text-center whitespace-nowrap";
+ }
+
  // The color of the badge and progress bar for billable time spent
  get colorBillable() {
  if (this.progressBillable > 1) {
- return "danger";
+ return "bg-danger";
  } else if (this.progressBillable >= 0.9) {
- return "warning";
+ return "bg-warning";
  }
 
- return "success";
+ return "bg-success";
  }
 
  // The color of the badge and progress bar for total time spent
  get colorTotal() {
  if (this.progressTotal > 1) {
- return "danger";
+ return "bg-danger";
  } else if (this.progressTotal >= 0.9) {
- return "warning";
+ return "bg-warning";
  }
 
- return "success";
+ return "bg-success";
  }
 
  // The color of the badge and progress bar for remaining effort
  get colorRemainingEffort() {
  if (this.progressRemainingEffort > 1) {
- return "danger";
+ return "bg-danger";
  } else if (this.progressRemainingEffort >= 0.9) {
- return "warning";
+ return "bg-warning";
  }
 
- return "success";
+ return "bg-success";
  }
 
  get tooltipVisible() {

diff --git a/frontend/app/components/progress-tooltip/template.hbs b/frontend/app/components/progress-tooltip/template.hbs
@@ -1,24 +1,23 @@
 {{#if this.tooltipVisible}}
  <EmberTether
- @class="progress-tooltip"
+ @class="progress-tooltip z-30 py-1.5 px-2 bg-foreground-mid text-foreground-primary"
  @target={{@target}}
  @targetAttachment="middle left"
  @attachment="middle right"
  @offset="0 20px"
  >
- <div class="time-info">
+ <div class="time-info grid grid-cols-[minmax(0,1fr),auto]">
 
  <span data-test-spent-total>Spent (Total):
  {{humanize-duration this.spent}}</span>
  <div class="progress-badge">
  {{#if this.progressTotal}}
- <span class="badge badge--{{this.colorTotal}}">
+ <span class="badge {{this.colorTotal}} {{this.badgeClass}}">
  {{#if (gt this.progressTotal 1)}}<FaIcon
  @icon="exclamation-triangle"
  @prefix="fas"
  />
- {{/if}}
- {{round (mult 100 this.progressTotal)}}%
+ {{/if}}{{round (mult 100 this.progressTotal)}}%
  </span>
  {{/if}}
  </div>
@@ -27,7 +26,7 @@
  {{humanize-duration this.billable}}</span>
  <div class="progress-badge">
  {{#if this.progressBillable}}
- <span class="badge badge--{{this.colorBillable}}">
+ <span class="badge {{this.colorBillable}} {{this.badgeClass}}">
  {{#if (gt this.progressBillable 1)}}<FaIcon
  @icon="exclamation-triangle"
  @prefix="fas"
@@ -38,7 +37,7 @@
  {{/if}}
  </div>
 
- <span data-test-budget>Budget:
+ <span data-test-budget class="col-span-2">Budget:
  {{if this.estimated (humanize-duration this.estimated) "None"}}</span>
 
  {{#if this.remainingEffort}}
@@ -48,7 +47,9 @@
  }}</span>
  <div class="progress-badge">
  {{#if this.progressRemainingEffort}}
- <span class="badge badge--{{this.colorRemainingEffort}}">
+ <span
+ class="badge {{this.colorRemainingEffort}} {{this.badgeClass}}"
+ >
  {{#if (gt this.progressRemainingEffort 1)}}<FaIcon
  @icon="exclamation-triangle"
  @prefix="fas"
@@ -62,4 +63,4 @@
 
  </div>
  </EmberTether>
-{{/if}}
+{{/if}}