Switch the font to roboto

10 files changed, 55 insertions, 27 deletions

diff --git a/client/components/cards/labels.jade b/client/components/cards/labels.jade
index 5742969f..a868627c 100644
--- a/client/components/cards/labels.jade
+++ b/client/components/cards/labels.jade
@@ -30,8 +30,8 @@ template(name="cardLabelsPopup")
       li
         a.card-label-edit-button.fa.fa-pencil.js-edit-label
         span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}"
-          class="{{# if isLabelSelected ../_id }}active{{/ if }}")
+          class="{{# if isLabelSelected ../_id }}active{{/if}}")
             = name
-            if isLabelSelected ../_id
+            if(isLabelSelected ../_id)
               i.card-label-selectable-icon.fa.fa-check
   a.quiet-button.full.js-add-label {{_ 'label-create'}}
diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl
index 0d731e33..db82fd7c 100644
--- a/client/components/cards/labels.styl
+++ b/client/components/cards/labels.styl
@@ -25,6 +25,12 @@
   &.add-label
     box-shadow: 0 0 0 2px darken(white, 25%) inset
 
+    &:hover, &.is-active
+      box-shadow: 0 0 0 2px darken(white, 60%) inset
+
+    i.fa-plus
+      margin-top: 3px
+
 .palette-colors
   display: flex
   flex-wrap: wrap
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index 1cf87beb..d886cd6f 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -67,17 +67,6 @@
       height: 100%
       width: 100%
 
-  .minicard-title
-    display: block
-    font-weight: 400
-    overflow: hidden
-    margin-bottom: 2px
-    text-decoration: none
-    word-wrap: break-word
-
-    &::selection
-      background: transparent
-
   .minicard-labels
     float: right
     display: flex
diff --git a/client/components/main/fonts.styl b/client/components/main/fonts.styl
new file mode 100644
index 00000000..fc8c8f00
--- /dev/null
+++ b/client/components/main/fonts.styl
@@ -0,0 +1,17 @@
+@font-face
+  font-family: 'Roboto'
+  font-style: normal
+  font-weight: 400
+  src: local('Roboto'),
+       local('Roboto-Regular'),
+       url('/fonts/roboto-regular.woff2') format('woff2'),
+       url('/fonts/roboto-regular.woff') format('woff')
+
+@font-face
+  font-family: 'Roboto'
+  font-style: normal
+  font-weight: 700
+  src: local('Roboto Bold'),
+       local('Roboto-Bold'),
+       url('/fonts/roboto-bold.woff2') format('woff2'),
+       url('/fonts/roboto-bold.woff') format('woff')
diff --git a/client/components/main/header.styl b/client/components/main/header.styl
index 76a1bc8c..1840becb 100644
--- a/client/components/main/header.styl
+++ b/client/components/main/header.styl
@@ -3,7 +3,7 @@
 #header
   color: white
   transition: background-color 0.4s
-  background: #27AE60
+  background: #2980B9
 
   #header-quick-access
     background-color: rgba(0, 0, 0, 0.2)
@@ -117,7 +117,7 @@
     .board-header-btn,
     h1.is-clickable
       &.is-active,
-      &:hover
+      &:hover:not(.is-disabled)
         background: rgba(0, 0, 0, .15)
 
     .separator
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index e998b389..a6512574 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -3,13 +3,14 @@
 global-reset()
 
 html, body, input, select, textarea, button
-  font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif
+  font: 14px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif
   line-height: 18px
   color: #4d4d4d
 
 html
   font-size: 100%
   max-height: 100%
+  user-select: none
   -webkit-text-size-adjust: 100%
 
 body
@@ -29,9 +30,6 @@ body
   position: relative
   flex: 1
 
-div::selection
-  background: transparent
-
 h1
   font-size: 22px
   line-height: 1.2em
@@ -81,6 +79,8 @@ strong
   font-weight: bold
 
 p
+  user-select: text
+
   a
     text-decoration: underline
     word-wrap: break-word
diff --git a/client/components/mixins/perfectScrollbar.js b/client/components/mixins/perfectScrollbar.js
index 06e8aedd..510a4563 100644
--- a/client/components/mixins/perfectScrollbar.js
+++ b/client/components/mixins/perfectScrollbar.js
@@ -1,6 +1,14 @@
 Mixins.PerfectScrollbar = BlazeComponent.extendComponent({
   onRendered: function() {
     var component = this.mixinParent();
-    Ps.initialize(component.find('.js-perfect-scrollbar'));
+    var domElement = component.find('.js-perfect-scrollbar');
+    Ps.initialize(domElement);
+
+    // XXX We should create an event map to be consistent with other components
+    // but since BlazeComponent doesn't merge Mixins events transparently I
+    // prefered to use a jQuery event (which is what an event map ends up doing)
+    component.$(domElement).on('mouseenter', function() {
+      Ps.update(domElement);
+    });
   }
 });
diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade
index 9616e1df..9c15c4f1 100644
--- a/client/components/sidebar/sidebar.jade
+++ b/client/components/sidebar/sidebar.jade
@@ -51,10 +51,9 @@ template(name="memberPopup")
     .miniprofile-header
       +userAvatar(userId=user._id)
       .info
-        h3.bottom
-          .js-profile
-            = user.profile.fullname
-        p.quiet.bottom @#{user.username}
+        h3
+          .js-profile= user.profile.fullname
+        p.quiet @#{user.username}
 
     if currentUser.isBoardMember
       ul.pop-over-list
@@ -73,7 +72,7 @@ template(name="memberPopup")
 
 
 template(name="removeMemberPopup")
-  p {{_ 'remove-member-pop' name=user.profile.fullname username=user.username boardTitle=board.title}}
+  p {{_ 'remove-member-pop' name=user.profile.name username=user.username boardTitle=board.title}}
   button.js-confirm.negate.full(type="submit") {{_ 'remove-member'}}
 
 template(name="addMemberPopup")
@@ -83,10 +82,10 @@ template(name="addMemberPopup")
   ul.pop-over-member-list
     +esEach(index="users")
       li.item.js-member-item(class="{{#if isBoardMember }}disabled{{/if}}")
-        a.name.js-select-member(title="{{ profile.fullname }} ({{ username }})")
+        a.name.js-select-member(title="{{ profile.name }} ({{ username }})")
           +userAvatar(userId=_id)
           span.full-name
-            = profile.fullname
+            = profile.name
             | (<span class="username">{{ username }}</span>)
           if isBoardMember
             .extra-text.quiet ({{_ 'joined'}})
diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl
index a5b695e9..cda15ba5 100644
--- a/client/components/sidebar/sidebar.styl
+++ b/client/components/sidebar/sidebar.styl
@@ -21,6 +21,11 @@
 
     h3
       color: darken(white, 50%)
+      font-size: 1em
+      margin-bottom: 10px
+
+      i.fa
+        margin-right: 3px
 
     hr
       margin: 13px 0
diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl
index e2a66d1e..83257792 100644
--- a/client/components/users/userAvatar.styl
+++ b/client/components/users/userAvatar.styl
@@ -81,6 +81,9 @@ avatar-radius = 50%
     justify-content: center
     box-shadow: 0 0 0 2px darken(white, 25%) inset
 
+    &:hover, &.is-active
+      box-shadow: 0 0 0 2px darken(white, 60%) inset
+
 .atMention
   background: #dbdbdb
   border-radius: 3px
@@ -99,6 +102,7 @@ avatar-radius = 50%
 
     h3, p
       margin-bottom: 0
+      padding-left: 0
 
     p
       padding-top: 0