Fix ui

Author: Stigmatoz

src/scripts/chart/chart-core.js

@@ -28,7 +28,7 @@ function donutChart() {
             // radius will dictate the thickness of the donut
             var arc = d3.arc()
                 .outerRadius(radius * 0.9)
-                .innerRadius(radius * 0.6)
+                .innerRadius(radius * 0.8)
                 .cornerRadius(cornerRadius)
                 .padAngle(padAngle);
 
@@ -144,7 +144,7 @@ function donutChart() {
 
                     svg.append('circle')
                         .attr('class', 'toolCircle')
-                        .attr('r', radius * 0.55) // radius of tooltip circle
+                        .attr('r', radius * 0.75) // radius of tooltip circle
                         .style('fill', colour(data.data[category])) // colour based on category mouse is over
                         .style('fill-opacity', 0.35);
 

src/scripts/ui.js

@@ -347,7 +347,7 @@ class UI {
                 var label = this.createElement('label', ['day-block', 'lbl-toggle']);
                 label.setAttribute('for', days[i].date);
                 var span = this.createElement('span', ['day'], new Date(days[i].date).toLocaleDateString());
-                var spanTime = this.createElement('span', ['day-time']);
+                var spanTime = this.createElement('span', ['span-time']);
                 this.createElementsForTotalTime(days[i].total, TypeListEnum.ByDays, spanTime);
 
                 label = this.appendChild(label, [span, spanTime]);

src/style/webact.css

@@ -203,7 +203,7 @@ p.table-header {
 .day-block {
     display: inline-flex;
     width: 100%;
-    height: 25px;
+    height: 20px;
     cursor: pointer;
     border-bottom: 1px solid rgb(223, 221, 221);
 }
@@ -239,19 +239,17 @@ input[type='checkbox'] {
 }
 
 .lbl-toggle {
-    font-family: monospace;
     font-size: 12px;
     cursor: pointer;
 }
 
 .lbl-toggle::before {
     content: '    ';
     display: table;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-    border-left: 5px solid currentColor;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 8px solid currentColor;
     vertical-align: middle;
-    transform: translateY(3px);
     transition: transform .2s ease-out;
 }