userZoom layout reference

app/assets/javascripts/app/views/agent_ticket_create.jst.eco

@@ -65,37 +65,37 @@
             <textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
           </div>
           <label><%- @T('Tickets') %></label>
-          <ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
+          <ol class="tasks tasks--standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
-            <li class="task level-1 horizontal">
+            <li class="task level-1">
               <div class="icon-holder">
                 <div class="priority icon"></div>
               </div>
               <div class="flex">
-                <div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
+                <div class="name">Micro-SIM doesn't work</div>
                 <div class="time">23 minutes ago</div>
               </div>
-            <li class="task level-3 horizontal">
+            <li class="task level-3">
               <div class="icon-holder">
                 <div class="priority icon"></div>
               </div>
               <div class="flex">
-                <div class="u-highlight name u-textTruncate">Superb Service!</div>
+                <div class="name">Superb Service!</div>
                 <div class="time">43 minutes ago</div>
               </div>
-            <li class="task level-2 horizontal">
+            <li class="task level-2">
               <div class="icon-holder">
                 <div class="priority icon"></div>
               </div>
               <div class="flex">
-                <div class="u-highlight name u-textTruncate">Print sheets strip off</div>
+                <div class="name">Print sheets strip off</div>
                 <div class="time">1 hour ago</div>
               </div>
-            <li class="task level-3 horizontal">
+            <li class="task level-3">
               <div class="icon-holder">
                 <div class="priority icon"></div>
               </div>
               <div class="flex">
-                <div class="u-highlight name u-textTruncate">Block not properly wrought</div>
+                <div class="name">Block not properly wrought</div>
                 <div class="time">2 hour ago</div>
               </div>
           </ol>

app/assets/javascripts/app/views/dashboard.jst.eco

@@ -1,4 +1,4 @@
-<div class="main flex center">
+<div class="dashboard main flex center">
   <div class="tabs wide-tabs horizontal">
     <div class="tab my-stats active">My Stats</div>
     <div class="tab my-groups">My Group</div>
@@ -9,69 +9,69 @@
     <div class="column">
       <div class="time stat-widget vertical">
         <h3>∅ Waiting time today</h3>
-        <div class="stat-graphic flex horizontal centered">
+        <div class="stat-graphic">
           <div class="stopwatch icon centered">
             <canvas class="stat-dial"></canvas>
             <div class="stat-amount"></div>
           </div>
         </div>
-        <div class="stat-label u-textTruncate">My handling time: 25 minutes</div>
+        <div class="stat-label">My handling time: 25 minutes</div>
-        <div class="stat-detail u-textTruncate">Average: 13%</div>
+        <div class="stat-detail">Average: 13%</div>
       </div>
     </div>
     <div class="column">
       <div class="mood stat-widget vertical">
         <h3>Mood</h3>
-        <div class="stat-graphic flex horizontal centered">
+        <div class="stat-graphic">
           <div class="mood icon bad-state"></div>
         </div>
-        <div class="stat-label u-textTruncate">3% of my tickets escalated.</div>
+        <div class="stat-label">3% of my tickets escalated.</div>
-        <div class="stat-detail u-textTruncate">Average: 17%</div>
+        <div class="stat-detail">Average: 17%</div>
       </div>
     </div>
     <div class="column">
       <div class="channel-distribution stat-widget vertical centered">
         <h3>Channel Distribution</h3>
-        <div class="stat-graphic flex horizontal centered">
+        <div class="stat-graphic">
-          <div class="stats-channel email-channel vertical center">
+          <div class="stats-row email-channel">
             <div class="email channel icon"></div>
-            <div class="channel-bars horizontal end justify-center">
+            <div class="stat-bars">
-              <div class="channel-bar primary" style="height: 80%"></div>
+              <div class="stat-bar primary" style="height: 80%"></div>
-              <div class="channel-bar secondary" style="height: 100%"></div>
+              <div class="stat-bar secondary" style="height: 100%"></div>
             </div>
-            <div class="channel-percentage">34%</div>
+            <div class="stat-label">34%</div>
           </div>
-          <div class="stats-channel received-calls-channel vertical center">
+          <div class="stats-row received-calls-channel">
             <div class="received-calls channel icon"></div>
-            <div class="channel-bars horizontal end justify-center">
+            <div class="stat-bars">
-              <div class="channel-bar primary" style="height: 53%"></div>
+              <div class="stat-bar primary" style="height: 53%"></div>
-              <div class="channel-bar secondary" style="height: 47%"></div>
+              <div class="stat-bar secondary" style="height: 47%"></div>
             </div>
-            <div class="channel-percentage">26%</div>
+            <div class="stat-label">26%</div>
           </div>
-          <div class="stats-channel outbound-calls-channel vertical center">
+          <div class="stats-row outbound-calls-channel">
             <div class="outbound-calls channel icon"></div>
-            <div class="channel-bars horizontal end justify-center">
+            <div class="stat-bars">
-              <div class="channel-bar primary" style="height: 46%"></div>
+              <div class="stat-bar primary" style="height: 46%"></div>
-              <div class="channel-bar secondary" style="height: 53%"></div>
+              <div class="stat-bar secondary" style="height: 53%"></div>
             </div>
-            <div class="channel-percentage">24%</div>
+            <div class="stat-label">24%</div>
           </div>
-          <div class="stats-channel facebook-channel vertical center">
+          <div class="stats-row facebook-channel">
             <div class="facebook channel icon"></div>
-            <div class="channel-bars horizontal end justify-center">
+            <div class="stat-bars">
-              <div class="channel-bar primary" style="height: 24%"></div>
+              <div class="stat-bar primary" style="height: 24%"></div>
-              <div class="channel-bar secondary" style="height: 18%"></div>
+              <div class="stat-bar secondary" style="height: 18%"></div>
             </div>
-            <div class="channel-percentage">12%</div>
+            <div class="stat-label">12%</div>
           </div>
-          <div class="stats-channel twitter-channel vertical center">
+          <div class="stats-row twitter-channel">
             <div class="twitter channel icon"></div>
-            <div class="channel-bars horizontal end justify-center">
+            <div class="stat-bars">
-              <div class="channel-bar primary" style="height: 13%"></div>
+              <div class="stat-bar primary" style="height: 13%"></div>
-              <div class="channel-bar secondary" style="height: 16%"></div>
+              <div class="stat-bar secondary" style="height: 16%"></div>
             </div>
-            <div class="channel-percentage">4%</div>
+            <div class="stat-label">4%</div>
           </div>
         </div>
       </div>
@@ -79,7 +79,7 @@
     <div class="column">
       <div class="status stat-widget vertical">
         <h3>Status</h3>
-        <div class="stat-graphic flex horizontal centered">
+        <div class="stat-graphic">
           <div class="stat-tickets vertical reverse end">
             <div class="stat-ticket icon supergood-state"></div>
             <div class="stat-ticket icon supergood-state"></div>
@@ -90,28 +90,28 @@
           </div>
           <div class="stat-all-tickets icon"></div>
         </div>
-        <div class="stat-label u-textTruncate">Tickets of my Group: 78 of 234</div>
+        <div class="stat-label">Tickets of my Group: 78 of 234</div>
-        <div class="stat-detail u-textTruncate">Average: 22%</div>
+        <div class="stat-detail">Average: 22%</div>
       </div>
     </div>
     <div class="column">
       <div class="in-process stat-widget vertical">
         <h3>Tickets in process</h3>
-        <div class="stat-graphic flex horizontal centered">
+        <div class="stat-graphic">
           <div class="in-process icon supergood-state"></div>
         </div>
-        <div class="stat-label u-textTruncate">74% are currently in process</div>
+        <div class="stat-label">74% are currently in process</div>
-        <div class="stat-detail u-textTruncate">Average: 62%</div>
+        <div class="stat-detail">Average: 62%</div>
       </div>
     </div>
     <div class="column">
       <div class="reopening stat-widget vertical">
         <h3>Reopening rate</h3>
-        <div class="stat-graphic flex horizontal centered">
+        <div class="stat-graphic">
           <div class="reopening icon ok-state"></div>
         </div>
-        <div class="stat-label u-textTruncate">7% are being reopened</div>
+        <div class="stat-label">7% are being reopened</div>
-        <div class="stat-detail u-textTruncate">Average: 6%</div>
+        <div class="stat-detail">Average: 6%</div>
       </div>
     </div>
   </div>

app/assets/javascripts/app/views/generic/actions.jst.eco

@@ -1,4 +1,4 @@
-<div class="dropdown dropup actions">
+<div class="dropdown dropup dropdown--actions">
   <button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></button>
   <ul class="dropdown-menu">
     <% for item in @items: %>

app/assets/javascripts/app/views/generic/user_search/input.jst.eco

@@ -1,6 +1,7 @@
 <div class="u-positionOrigin">
   <input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
   <input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
+  <span class="select-arrow icon"></span>
 </div>
 
 <div class="dropdown-menu" aria-labelledby="customer_id">

app/assets/javascripts/app/views/layout_ref/content.jst.eco

@@ -71,7 +71,7 @@
 
             <div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
               <input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organisation/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
-              <span class="caret"></span>
+              <span class="select-arrow icon"></span>
             </div>
 
             <div class="dropdown-menu" aria-labelledby="customer_id">

app/assets/javascripts/app/views/layout_ref/index.jst.eco

@@ -15,6 +15,7 @@
     <li>Communication Reply - with content <a href="#layout_ref/communication_reply/content">Example</a></li>
     <li>Communication Reply - with multiline content <a href="#layout_ref/communication_reply/mulit_line_content">Example</a></li>
     <li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
+    <li><a href="#layout_ref/user_zoom">User Profile</a></li>
   </ul>
 
 </div>

app/assets/javascripts/app/views/layout_ref/user_zoom.jst.eco

@@ -0,0 +1,269 @@
+<div class="flex userZoom">
+
+  <div class="userZoom-window">
+    <div class="userZoom-section vertical centered">
+      <div class="align-right userZoom-action dropdown dropdown--actions">
+        <div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
+          <div class="light cog icon"></div>
+          <label>Aktion</label>
+          <span class="select-arrow icon"></span>
+        </div>
+        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
+          <li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Änderungsprotokoll</a>
+          <li role="presentation"><a role="menuitem" tabindex="-1">Benutzer zusammenführen</a>
+          <li role="presentation"><a role="menuitem" tabindex="-1">Benutzer löschen</a>
+        </ul>
+      </div>
+      <div class="avatar size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
+      <h1>Doreen Kubiak</h1>
+      <div class="userZoom-organisation">Steuerbüro C. Kaik</div>
+    </div>
+    <div class="userZoom-section">
+      <div class="userZoom-details  horizontal wrap">
+        <div class="userZoom-detailsEntry">
+          <label>Email</label>
+          <a href="mailto:doreen.kubiak@gmail.com">doreen.kubiak@gmail.com</a>
+        </div>
+        <div class="userZoom-detailsEntry">
+          <label>Organisation</label>
+          Steuerbüro C. Kaik
+        </div>
+        <div class="userZoom-detailsEntry">
+          <label>Web</label>
+          <a href="http://ckaik.com" target="_blank">chaik.com</a>
+        </div>
+        <div class="userZoom-detailsEntry">
+          <label>Strasse</label>
+          Johannitergasse 2/2
+        </div>
+        <div class="userZoom-detailsEntry">
+          <label>Telefon</label>
+          +43 5522 36346
+        </div>
+        <div class="userZoom-detailsEntry">
+          <label>PLZ, ORT</label>
+          6800 Feldkirch
+        </div>
+        <div class="userZoom-detailsEntry">
+          <label>Mobile-Nr.</label>
+          +43 699 4565789
+        </div>
+        <div class="userZoom-detailsEntry">
+          <label>Land</label>
+          Österreich
+        </div>
+      </div>
+    </div>
+    <div class="userZoom-section">
+      <!-- if user has organisation -->
+      <div class="tabs wide-tabs horizontal">
+        <div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
+        <div class="tab js-organisationTickets">Tickets von Steuerbüro C. Kaik</div>
+      </div>
+      <!-- endif -->
+      <div class="userZoom-ticketLists horizontal">
+        <div class="userZoom-ticketList">
+          <label>Offene Tickets (23)</label>
+          <ol class="tasks tasks--standalone">
+            <li class="task level-2">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Micro-SIM doesn't work</div>
+                <div class="time">23 minutes ago</div>
+              </div>
+            <li class="task level-2">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Superb Service!</div>
+                <div class="time">43 minutes ago</div>
+              </div>
+            <li class="task level-2">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Print sheets strip off</div>
+                <div class="time">1 hour ago</div>
+              </div>
+            <li class="task level-2">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Block not properly wrought</div>
+                <div class="time">2 hour ago</div>
+              </div>
+          </ol>
+          <a href="#">Alle Tickets von Doreen Kubiak …</a>
+        </div>
+        <div class="userZoom-ticketList">
+          <label>Bearbeitete Tickets (12)</label>
+          <ol class="tasks tasks--standalone">
+            <li class="task level-1">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Micro-SIM doesn't work</div>
+                <div class="time">23 minutes ago</div>
+              </div>
+            <li class="task level-1">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Superb Service!</div>
+                <div class="time">43 minutes ago</div>
+              </div>
+            <li class="task level-1">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Print sheets strip off</div>
+                <div class="time">1 hour ago</div>
+              </div>
+            <li class="task level-1">
+              <div class="icon-holder">
+                <div class="priority icon"></div>
+              </div>
+              <div class="flex">
+                <div class="name">Block not properly wrought</div>
+                <div class="time">2 hour ago</div>
+              </div>
+          </ol>
+          <a href="#">Alle Tickets von Steuerbüro C. Kaik …</a>
+        </div>
+      </div>
+    </div>
+    <div class="userZoom-section horizontal two-columns">
+      <div class="column status stat-widget vertical">
+        <h3>Status</h3>
+        <div class="stat-graphic">
+          <div class="stat-tickets vertical reverse end">
+            <div class="stat-ticket icon supergood-state"></div>
+            <div class="stat-ticket icon supergood-state"></div>
+            <div class="stat-ticket icon supergood-state"></div>
+            <div class="stat-ticket icon supergood-state"></div>
+            <div class="stat-ticket icon supergood-state"></div>
+            <div class="stat-ticket icon supergood-state"></div>
+          </div>
+          <div class="stat-all-tickets icon"></div>
+        </div>
+        <!-- 
+          Achtung: hier müssen wir schauen, dass wir das Widget genauso verwenden wie im Dashboard. Sonst gibt's Verwirrung.
+        -->
+        <div class="stat-label">Tickets of my Group: 78 of 234</div>
+        <div class="stat-detail">Average: 22%</div>
+      </div>
+      <div class="column mood stat-widget vertical">
+        <h3>Stimmung</h3>
+        <div class="stat-graphic">
+          <div class="mood icon supergood-state"></div>
+        </div>
+        <div class="stat-label">3% of my tickets escalated.</div>
+        <div class="stat-detail">Average: 17%</div>
+      </div>
+    </div>
+    <div class="userZoom-section">
+      <div class="frequency stat-widget vertical">
+        <h3>Frequency</h3>
+        <div class="stat-graphic">
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 80%"></div>
+              <div class="stat-bar secondary" style="height: 34%"></div>
+            </div>
+            <div class="stat-label">Jan</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 53%"></div>
+              <div class="stat-bar secondary" style="height: 47%"></div>
+            </div>
+            <div class="stat-label">Feb</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 46%"></div>
+              <div class="stat-bar secondary" style="height: 21%"></div>
+            </div>
+            <div class="stat-label">Mär</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 24%"></div>
+              <div class="stat-bar secondary" style="height: 18%"></div>
+            </div>
+            <div class="stat-label">Apr</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 13%"></div>
+              <div class="stat-bar secondary" style="height: 5%"></div>
+            </div>
+            <div class="stat-label">Mai</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 18%"></div>
+              <div class="stat-bar secondary" style="height: 10%"></div>
+            </div>
+            <div class="stat-label">Jun</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 50%"></div>
+              <div class="stat-bar secondary" style="height: 8%"></div>
+            </div>
+            <div class="stat-label">Jul</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 67%"></div>
+              <div class="stat-bar secondary" style="height: 13%"></div>
+            </div>
+            <div class="stat-label">Aug</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 34%"></div>
+              <div class="stat-bar secondary" style="height: 2%"></div>
+            </div>
+            <div class="stat-label">Sep</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 5%"></div>
+              <div class="stat-bar secondary" style="height: 0%"></div>
+            </div>
+            <div class="stat-label">Okt</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 25%"></div>
+              <div class="stat-bar secondary" style="height: 0%"></div>
+            </div>
+            <div class="stat-label">Nov</div>
+          </div>
+          <div class="stats-row">
+            <div class="stat-bars">
+              <div class="stat-bar primary" style="height: 80%"></div>
+              <div class="stat-bar secondary" style="height: 5%"></div>
+            </div>
+            <div class="stat-label">Dez</div>
+          </div>
+        </div>
+        <div class="stat-legend">
+          <div class="stat-legendEntry primary"><span class="primary stat-circle"></span>Bearbeitet</div>
+          <div class="stat-legendEntry secondary"><span class="secondary stat-circle"></span>Offen</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/assets/stylesheets/zammad.css.scss

@@ -15,8 +15,13 @@ p {
   margin: 14px 0;
 }
 
+.u-highlight {
+  color: hsl(194,90%,45%);
+}
+
 a {
   outline: none !important;
+  @extend .u-highlight;
 }
 
 a.create {
@@ -29,10 +34,6 @@ small {
   font-size: 12px;
 }
 
-.u-highlight {
-  color: hsl(194,90%,45%);
-}
-
 .u-unclickable {
   pointer-events: none;
 }
@@ -528,7 +529,7 @@ textarea,
     padding-right: 10px;
   }
 
-  select.form-control + .select-arrow  {
+  .form-control + .select-arrow  {
     position: absolute;
     right: 12px;
     top: 50%;
@@ -759,7 +760,6 @@ ol.tabs li {
   }
 
   .wide-tabs {
-    width: 60%;
     margin: 25px auto 20px;
     font-size: 15px;
     font-weight: 300;
@@ -767,6 +767,10 @@ ol.tabs li {
     border-radius: 8px;
   }
 
+  .dashboard .wide-tabs {
+    width: 60%;
+  }
+
   .wide-tabs .tab:first-child {
     border-radius: 8px 0 0 8px;
   }
@@ -1304,6 +1308,7 @@ ol.tabs li {
     width: 12px;
     height: 7px;
     background-position: -81px -308px;
+    margin-top: -2px;
   }
 
   .dark.group.icon {
@@ -1690,29 +1695,35 @@ footer {
   overflow: auto;
 }
 
-  .tasks.tasks-standalone {
+  .tasks.tasks--standalone {
     background: none;
     margin-top: 8px;
   }
 
-    .tasks-standalone .task {
+    .tasks--standalone .task {
       padding: 0;
       margin-bottom: 9px;
+      @extend .horizontal;
     }
 
-    .tasks-standalone .icon-holder {
+    .tasks-standalone .name {
+      @extend .u-highlight;
+      @extend .u-textTruncate;
+    }
+
+    .tasks--standalone .icon-holder {
       width: 20px;
     }
 
-    .tasks-standalone .icon-holder .icon {
+    .tasks--standalone .icon-holder .icon {
       margin-top: 4px;
     }
 
-    .tasks-standalone .time {
+    .tasks--standalone .time {
       color: hsl(198,19%,72%);
     }
 
-    .tasks-standalone .task .priority.icon:after {
+    .tasks--standalone .task .priority.icon:after {
       background: white;
     }
 
@@ -2322,10 +2333,13 @@ footer {
 
   .stat-widget {
     height: 200px;
-    margin: 7px; 
     padding: 13px;
     text-align: center;
     line-height: 20px;
+  }
+
+  .dashboard .stat-widget {
+    margin: 7px; 
     background: white;
     border: 1px solid #e5f0f5;
     border-radius: 1px;
@@ -2341,16 +2355,22 @@ footer {
 
     .stat-widget .stat-label {
       color: #444a4f;
+      @extend .u-textTruncate;
     }
 
     .stat-widget .stat-detail {
       color: #b4b7b9;
+      @extend .u-textTruncate;
     }
 
     .channel-distribution.stat-widget {
       color: #a1a4a7;
     }
 
+  .stat-graphic {
+    @extend .flex, .horizontal, .centered;
+  }
+
   .time.stat-widget .stat-graphic .icon {
     position: relative;
   }
@@ -2370,17 +2390,18 @@ footer {
       left: 14px;
     }
 
-.stats-channel {
+.stats-row {
   padding: 8px 0 7px;
   margin-bottom: -7px;
   border-radius: 3px;
+  @extend .vertical, .center;
 }
 
-.stats-channel:hover {
+.stats-row:hover {
   background: rgba(0,8,14,.03);
 }
 
-  .stats-channel .channel-bars {
+  .stats-row .stat-bars {
     height: 73px;
     margin: 16px 0 15px;
     padding: 2px 12px;
@@ -2388,18 +2409,62 @@ footer {
     background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px);
     background-position: center bottom;
     background-size: 100% 12px;
+    @extend .horizontal, .end;
   }
 
-  .channel-bars .channel-bar {
+  .stat-bars .stat-bar {
     border-radius: 5px;
     width: 10px;
+    color: #a9bcc4;
     background: #a9bcc4;
   }
 
-  .channel-bars .channel-bar.secondary {
+  .stat-widget .secondary {
     opacity: .38;
+    color: #a9bcc4;
+    background: #a9bcc4;
   }
 
+  .stat-legend {
+    margin-top: 30px;
+    @extend .align-right, .horizontal;
+  }
+
+  .stat-legendEntry {
+    font-size: 11px;
+    line-height: 1;
+    margin-left: 20px;
+    background: none !important;
+  }
+
+  .stat-circle {
+    margin-bottom: -1px;
+    margin-right: 7px;
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    display: inline-block;
+  }
+
+.frequency.stat-widget {
+  .stat-bars {
+    margin-top: 0;
+  }
+
+  .stats-row {
+    margin-bottom: 0;
+  }
+
+  .stat-label {
+    color: #a1a4a7;
+  }
+
+  .primary {
+    color: hsl(145,51%,45%);
+    background: hsl(145,51%,45%);
+  }
+}
+
 .activity.sidebar {
   width: 370px;
   padding: 0;
@@ -3550,7 +3615,7 @@ footer {
 .dropdown-menu {
   margin: 0;
   padding: 0;
-  width: 100%;
+  min-width: 100%;
   color: white;
   background: none;
   border-radius: 0;
@@ -3559,6 +3624,10 @@ footer {
   overflow-x: hidden;
 }
 
+  .dropdown-toggle {
+    @extend .u-clickable;
+  }
+
   .dropdown ul {
     margin: 0;
     background: hsl(234,10%,19%);
@@ -3598,10 +3667,14 @@ footer {
     display: block;
   }
 
-  .dropdown.actions li {
+  .dropdown.dropdown--actions li {
     padding: 0;
   }
 
+  .dropdown.dropdown--actions a {
+    @extend .u-clickable;
+  }
+
 .recipientList,
 .recipientList-organisationMembers {
   list-style: none;
@@ -3622,6 +3695,7 @@ footer {
   }
 
   .recipientList-name {
+    color: white;
     margin-left: 10px;
     margin-top: 2px;
   }
@@ -4083,6 +4157,103 @@ footer {
   left: 0 !important;
 }
 
+.userZoom {
+  padding: 60px;
+  overflow: auto;
+  
+  h1 {
+    margin: 18px 0 0;
+  }
+
+  .tabs {
+    margin-top: 2px;
+    margin-bottom: 25px;
+  }
+}
+
+.userZoom-window {
+  background: white;
+  max-width: 660px;
+  margin: 0 auto;
+  border: 1px solid #e6e6e6;
+}
+
+.userZoom-section {
+  padding: 20px 50px;
+}
+
+.userZoom-section:not(:last-child) {
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.userZoom-action {
+  margin-right: -20px;
+  
+  .dropdown-toggle {
+    margin-top: -20px;
+    margin-right: -30px;
+    margin-bottom: 8px;
+    padding: 26px 40px 2px;
+  }
+  
+  label {
+    margin: 0 10px;
+    padding: 0;
+    opacity: 0.8;
+    cursor: inherit;
+  }
+  .cog.icon {
+    opacity: 0.55;
+  }
+}
+
+.userZoom-organisation {
+  font-size: 16px;
+  @extend .u-highlight;
+}
+
+.userZoom-details {
+  margin-left: -50px;
+}
+
+.userZoom-detailsEntry {
+  margin: 8px 0;
+  padding-left: 50px;
+  width: 50%;
+}
+
+.userZoom-detailsEntry label {
+  padding: 0;
+  margin-bottom: 2px;
+  display: block;
+}
+
+.userZoom-ticketList {
+  @extend .flex;
+  
+  &:not(:last-child) {
+    margin-right: 50px;
+  }
+}
+
+.userZoom-ticketList {
+  ol {
+    padding: 0;
+  }
+
+  .name {
+    @extend .u-highlight;
+  }
+}
+
+.userZoom .frequency.stat-widget {
+  height: 230px;
+  
+  .stat-bars {
+    height: 100px;
+  }
+}
+
 
 /*