Improve number description

src/pretix/control/views/new_dashboard.py

@@ -21,8 +21,9 @@ from pretix.control.forms.event import CommentForm
 from pretix.control.permissions import EventPermissionRequiredMixin
 from pretix.control.views import ChartContainingView
 
-NUM_WIDGET = str('<div class="numwidget"><span class="num">{num}</span>'
-                 '<span class="text">{text}</span>'
+NUM_WIDGET = str('<div class="numwidget">'
+                 '<span class="num">{num}</span>'
+                 '<span class="text"><span class="label-primary">{text}</span></span>'
                  '<span class="text-add">{text_add}</span></div>')
 
 
@@ -102,8 +103,8 @@ class IndexView(EventPermissionRequiredMixin, ChartContainingView, TemplateView)
         ).count()
         ctx['attendees_paid_ordered'] = {
             'content': NUM_WIDGET.format(
-                num=f'<span class="fa fa-user icon"></span> {tickc}',
-                text=_('Attendees'),
+                num=f'{tickc}',
+                text=_('<span class="fa fa-user icon"></span> Attendees'),
                 text_add=f'{paidc} paid, {tickc - paidc} pending'),
             'priority': 100,
             'url': reverse('control:event.orders.overview', kwargs={
@@ -130,8 +131,8 @@ class IndexView(EventPermissionRequiredMixin, ChartContainingView, TemplateView)
                     currency=self.request.event.currency,
                     amount=formats.localize(round_decimal(rev, self.request.event.currency))
                 ),
-                text='',
-                text_add=_('Total revenue')
+                text=_('Total revenue'),
+                text_add=''
             ),
             'priority': 100,
             'url': reverse('control:event.orders.overview', kwargs={

src/pretix/static/pretixcontrol/scss/_dashboard.scss

@@ -3,6 +3,7 @@
   flex-wrap: wrap;
   align-items: flex-start;
   margin-left: -5px;
+  margin-top: -5px;
   margin-right: -5px;
 }
 
@@ -21,11 +22,15 @@
 }
 
 .dashboard .widget-container.event-dashboard {
-  background: none !important;
+  background: white;
   padding: 0 5px 15px;
   min-height: 0;
 }
 
+.dashboard .widget-container.event-dashboard:hover {
+  background: #e5e5e5;
+}
+
 .dashboard .widget-container.widget-full {
   width: 100%;
 }
@@ -38,10 +43,15 @@
   width: 25%;
 
   .icon {
-    color: lighten($brand-primary, 15%);
-    font-size: 34px;
+    color: lighten($brand-primary, 25%);
     font-weight: bold;
   }
+
+  .text .label-primary {
+    color: white;
+    border-radius: 20px;
+    padding: 0 10px;
+  }
 }
 
 .dashboard .widget-container.widget-lazy-loading {
@@ -59,7 +69,7 @@
 }
 
 .dashboard .widget-container:hover, .dashboard .widget-container:focus {
-  background: #EEEEEE;
+  background: $brand-primary;
 }
 
 .dashboard .widget:hover, .dashboard .widget:focus, .dashboard a:hover {
@@ -69,21 +79,20 @@
 .dashboard .numwidget {
   .num {
     display: block;
+    font-size: 32px;
     text-align: center;
-    font-size: 40px;
   }
 
   .text {
     display: block;
     text-align: center;
-    font-size: 20px;
+    font-size: 16px;
   }
 
   .text-add {
     display: block;
-    //padding: 10px 0;
     text-align: center;
-    font-size: 20px;
+    font-size: 16px;
   }
 }