refactor: css and use ci colours

frontend/.gitignore

@@ -1,6 +1,9 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+
 # compiled output
+public/assets/tailwind.css
+
 /dist
 /tmp
 

frontend/app/analysis/edit/template.hbs

@@ -25,9 +25,18 @@
                 as |f|
               >
                 <TaskSelection
-                  @on-set-customer={{queue (fn (mut f.model.customer)) (fn this.validate f.model)}}
-                  @on-set-project={{queue (fn (mut f.model.project)) (fn this.validate f.model)}}
-                  @on-set-task={{queue (fn (mut f.model.task)) (fn this.validate f.model)}}
+                  @on-set-customer={{queue
+                    (fn (mut f.model.customer))
+                    (fn this.validate f.model)
+                  }}
+                  @on-set-project={{queue
+                    (fn (mut f.model.project))
+                    (fn this.validate f.model)
+                  }}
+                  @on-set-task={{queue
+                    (fn (mut f.model.task))
+                    (fn this.validate f.model)
+                  }}
                   @initial={{hash
                     customer=this._customer
                     project=this._project
@@ -234,4 +243,4 @@
     </div>
     <div class="grid-cell"></div>
   </div>
-</PagePermission>
+</PagePermission>

frontend/app/analysis/index/template.hbs

@@ -5,25 +5,25 @@
     <h1>Analysis</h1>
 
     {{#unless this.prefetchData.isRunning}}
-    <TaskSelection
-      @history={{false}}
-      @archived={{true}}
-      @on-set-customer={{fn this.setModelFilter "customer"}}
-      @on-set-project={{fn this.setModelFilter "project"}}
-      @on-set-task={{fn this.setModelFilter "task"}}
-      @initial={{hash
-        customer=this.selectedCustomer
-        project=this.selectedProject
-        task=this.selectedTask
-        comment=this.comment
-      }}
-      as |t|
-    >
-      <FilterSidebar
-        @appliedCount={{this.appliedFilters.length}}
-        @onReset={{queue t.clear this.reset}}
-        as |fs|
+      <TaskSelection
+        @history={{false}}
+        @archived={{true}}
+        @on-set-customer={{fn this.setModelFilter "customer"}}
+        @on-set-project={{fn this.setModelFilter "project"}}
+        @on-set-task={{fn this.setModelFilter "task"}}
+        @initial={{hash
+          customer=this.selectedCustomer
+          project=this.selectedProject
+          task=this.selectedTask
+          comment=this.comment
+        }}
+        as |t|
       >
+        <FilterSidebar
+          @appliedCount={{this.appliedFilters.length}}
+          @onReset={{queue t.clear this.reset}}
+          as |fs|
+        >
           <fs.group @label="Task" @expanded={{true}}>
             <fs.label>
               Customer
@@ -45,12 +45,19 @@
             </fs.label>
             <fs.label>
               Comment
-            <fs.filter data-test-filter-comment>
-              {{#let (unique-id) as |id|}}
-                <label for={{id}} hidden>comment</label>
-                <input id={{id}} value={{this.comment}} {{ on "change" (fn this.setModelFilterOnChange "comment")}} class="form-control comment-field" placeholder="Comment" name="comment" />
-              {{/let}}
-            </fs.filter>
+              <fs.filter data-test-filter-comment>
+                {{#let (unique-id) as |id|}}
+                  <label for={{id}} hidden>comment</label>
+                  <input
+                    id={{id}}
+                    value={{this.comment}}
+                    {{on "change" (fn this.setModelFilterOnChange "comment")}}
+                    class="form-control comment-field"
+                    placeholder="Comment"
+                    name="comment"
+                  />
+                {{/let}}
+              </fs.filter>
             </fs.label>
           </fs.group>
           <fs.group @label="Responsibility">
@@ -230,8 +237,8 @@
             </fs.label>
 
           </fs.group>
-      </FilterSidebar>
-    </TaskSelection>
+        </FilterSidebar>
+      </TaskSelection>
     {{/unless}}
 
     {{#if this.appliedFilters.length}}
@@ -482,4 +489,4 @@
       </div>
     {{/if}}
   </PagePermission>
-{{/if}}
+{{/if}}

frontend/app/application/template.hbs

@@ -4,4 +4,4 @@
 
 <div id="filter-sidebar-target"></div>
 
-{{outlet}}
+{{outlet}}

frontend/app/components/async-list/template.hbs

@@ -20,4 +20,4 @@
   </div>
 {{else}}
   {{yield "body" @data.value}}
-{{/if}}
+{{/if}}

frontend/app/components/attendance-slider/component.js

@@ -109,7 +109,7 @@ export default class AttendanceSlider extends Component {
 
         labels.push({
           value: pad2joincolon(h, m),
-          size: m === 0 ? "lg" : "sm",
+          size: m === 0 ? "text-black/80" : "text-black/65",
           style: htmlSafe(`left: ${offsetH + offsetM}%;`),
         });
       }

frontend/app/components/attendance-slider/template.hbs

@@ -1,4 +1,4 @@
-<div class="attendance-slider" ...attributes>
+<div class="attendance-slider pt-4 relative" ...attributes>
   <RangeSlider
     @start={{this.start}}
     @step={{15}}
@@ -12,25 +12,28 @@
     @on-change={{perform this.save}}
   />
 
-  <div class="slider-labels">
+  <div class="slider-labels relative h-12 text-black/85">
     {{#each this.labels as |label|}}
       <div
         style={{label.style}}
-        class="slider-label slider-label--{{label.size}}"
+        class="slider-label
+          {{label.size}}
+          flex absolute top-4 -translate-x-3/4 text-3xs"
       >
-        <div class="slider-label-text">
+        <div class="slider-label-text -rotate-45">
           {{label.value}}
         </div>
       </div>
     {{/each}}
   </div>
 
-  <div class="slider-title">
+  <div class="slider-title absolute top-0 left-0 text-xs text-black">
     <span>{{this.duration}}</span>
     <FaIcon
       @icon="trash-can"
+      class="cursor-pointer"
       data-test-delete-attendance="true"
       {{on "click" (perform this.delete)}}
     />
   </div>
-</div>
+</div>

frontend/app/components/balance-donut/component.js

@@ -13,20 +13,20 @@ class BalanceDonutComponent extends Component {
     return abs(this.args.balance.usedDays / this.args.balance.credit);
   }
 
-  get color() {
+  get strokeClass() {
     if (this.args.balance.usedDuration) {
-      return "primary";
+      return "stroke-primary";
     }
 
     if (this.value > 1 || this.value < 0) {
-      return "danger";
+      return "stroke-danger";
     }
 
     if (this.value === 1) {
-      return "warning";
+      return "stroke-warning";
     }
 
-    return "success";
+    return "stroke-adfinis-green/75";
   }
 
   radius = 100 / (2 * PI);

frontend/app/components/balance-donut/template.hbs

@@ -1,10 +1,10 @@
-<div {{style this.style}} class="{{@class}} balance-donut {{this.color}}">
-  <div class="donut-title">{{@title}}</div>
+<div {{style this.style}} class="{{@class}} balance-donut {{this.strokeClass}} relative translate-y-[calc(var(--max-offset)*var(--offset-multiplicator))] md:basis-24 text-black/85">
+  <div class="donut-title text-center text-2xl">{{@title}}</div>
 
-  <div class="donut">
+  <div class="donut relative">
     <svg width="100%" height="100%" viewBox="0 0 40 40">
       <circle
-        class="donut-ring"
+        class="donut-ring stroke-adfinis-darkgrey/60"
         cx="20"
         cy="20"
         r={{this.radius}}
@@ -19,17 +19,20 @@
         r={{this.radius}}
         fill="transparent"
         stroke-width="2"
-        stroke-dasharray="{{mult (min this.value 1) 100}} {{mult (sub 1 (min this.value 1)) 100}}"
+        stroke-dasharray="{{mult (min this.value 1) 100}} {{mult
+          (sub 1 (min this.value 1))
+          100
+        }}"
         stroke-dashoffset="25"
       ></circle>
     </svg>
 
-    <div class="donut-content">
+    <div class="donut-content absolute flex justify-center items-center text-center paddin-4 p-4 inset-0 w-full h-full flex-col">
       {{#if @balance.usedDuration}}
         {{format-duration @balance.usedDuration false}}
       {{else}}
         {{#if @balance.credit}}
-          <div>{{@balance.usedDays}} of {{@balance.credit}}</div>
+          <div class="text-xs text-adfinis-darkgrey">{{@balance.usedDays}} of {{@balance.credit}}</div>
           {{#if (gte @balance.credit 1)}}
             <div>{{round (mult this.value 100)}}%</div>
           {{/if}}

frontend/app/components/customer-visible-icon/template.hbs

@@ -1,3 +1,3 @@
 <div ...attributes title="This project's comments are visible to the customer">
   <FaIcon @icon="eye" />
-</div>
+</div>

frontend/app/components/date-buttons/template.hbs

@@ -5,4 +5,4 @@
     type="button"
     {{on "click" (fn this.selectDate choice)}}
   >{{choice}}</button>
-{{/each}}
+{{/each}}

frontend/app/components/date-navigation/template.hbs

@@ -1,8 +1,8 @@
-<div class="date-navigation btn-toolbar" ...attributes>
+<div class="date-navigation btn-toolbar flex flex-row" ...attributes>
   <div class="btn-group">
     <MagicLinkBtn />
   </div>
-  <div class="btn-group">
+  <div class="btn-group mx-6">
     <button
       type="button"
       data-test-previous
@@ -33,4 +33,4 @@
   </div>
 
   <SyDatepickerBtn @value={{@current}} @onChange={{@onChange}} />
-</div>
+</div>

frontend/app/components/duration-since/template.hbs

@@ -1,3 +1,3 @@
-<span>
+<span ...attributes>
   {{format-duration this.duration}}
 </span>

frontend/app/components/filter-sidebar/filter/template.hbs

@@ -58,4 +58,4 @@
   {{else}}
     {{yield}}
   {{/if}}
-</div>
+</div>

frontend/app/components/filter-sidebar/group/template.hbs

@@ -1,18 +1,22 @@
-<div class="filter-sidebar-group {{if this.expanded 'filter-sidebar-group--expanded'}}">
+<div
+  class="filter-sidebar-group
+    {{if this.expanded 'filter-sidebar-group--expanded'}}"
+>
   <a
     href="#"
     class="filter-sidebar-group-label"
-    {{on "click" (toggle "expanded" this)}}>
+    {{on "click" (toggle "expanded" this)}}
+  >
     {{@label}}
     <FaIcon
       @icon="angle-right"
       @prefix="fas"
       @transform="{{if this.expanded 'rotate-90'}}"
-      />
-    </a>
-    <div class="filter-sidebar-group-body">
-      <div class="filter-sidebar-group-content">
-        {{yield}}
-      </div>
+    />
+  </a>
+  <div class="filter-sidebar-group-body">
+    <div class="filter-sidebar-group-content">
+      {{yield}}
     </div>
-  </div>
+  </div>
+</div>

frontend/app/components/filter-sidebar/template.hbs

@@ -49,4 +49,4 @@
     {{! template-lint-disable}}
     {{on "click" (fn (mut this.visible) false)}}
   ></div>
-{{/in-element}}
+{{/in-element}}

frontend/app/components/magic-link-btn/template.hbs

@@ -5,8 +5,11 @@
   class="btn btn-default"
   {{on "click" (toggle "isModalVisible" this)}}
 >
-  <FaIcon @icon="bolt" @prefix="fas" /> 
+  <FaIcon @icon="bolt" @prefix="fas" />
   {{#if this.isModalVisible}}
-    <MagicLinkModal @isVisible={{this.isModalVisible}} @onClose={{toggle "isModalVisible" this}} />
+    <MagicLinkModal
+      @isVisible={{this.isModalVisible}}
+      @onClose={{toggle "isModalVisible" this}}
+    />
   {{/if}}
-</button>
+</button>

frontend/app/components/magic-link-modal/template.hbs

@@ -5,10 +5,7 @@
   data-test-magic-link-modal
   as |modal|
 >
-  <div
-    class="magic-link-modal"
-    data-test-magic-link-form
-  >
+  <div class="magic-link-modal" data-test-magic-link-form>
     <modal.header>
       Create a magic link
     </modal.header>
@@ -20,15 +17,9 @@
           @on-set-task={{this.onSetTask}}
           as |t|
         >
-          <div
-            class="form-list-cell form-group"
-          >{{t.customer}}</div>
-          <div
-            class="form-list-cell form-group"
-          >{{t.project}}</div>
-          <div
-            class="form-list-cell form-group"
-          >{{t.task}}</div>
+          <div class="form-list-cell form-group">{{t.customer}}</div>
+          <div class="form-list-cell form-group">{{t.project}}</div>
+          <div class="form-list-cell form-group">{{t.task}}</div>
         </TaskSelection>
       </div>
 

frontend/app/components/no-mobile-message/template.hbs

@@ -9,4 +9,4 @@
     Try opening this page on a larger device, or go back to the
     <LinkTo @route="index">home page</LinkTo>!
   </p>
-</div>
+</div>