enable using template as menuLabel; icon tweaks

packages/telescope-core/lib/client/templates/common/css.js

@@ -15,7 +15,7 @@ Template.css.helpers({
 
       // loop over all properties, and add the relevant selectors
       _.each(properties, function (selector, property) {
-        css += selector + "{\n  " + property + ": " + Settings.get(color) + ";\n}\n";
+        css += selector + "{\n  " + property + ": " + Settings.get(color, Telescope.colorElements.defaultColors[color]) + ";\n}\n";
       });
     });
     return css;

packages/telescope-core/lib/client/templates/menu/menu_component.html

@@ -20,6 +20,7 @@ menuItems (Array)
   | data contexnt for the template
 
 menuLabel (String) [optional]
+| The name of a template to use as menu label, or a string
 
 menuClass (String) [optional]
 | An optional default CSS class given to the menu
@@ -34,7 +35,13 @@ menuMode (String) [optional]
 
 <template name="menuComponent">
   <div class="menu {{menuClass}}">
-    <div class="menu-top-level" href="/">{{menuLabel}}</div>
+    <div class="menu-top-level" href="/">
+      {{#if labelIsTemplate}}
+        {{> Template.dynamic template=menuLabel}}
+      {{else}}
+        {{menuLabel}}
+      {{/if}}
+    </div>
     <div class="menu-menu">
       {{#with getMenuItems}}
         <ul class="menu-contents" role="menu" aria-labelledby="dLabel">
@@ -48,8 +55,8 @@ menuMode (String) [optional]
         </ul>
       {{/with}}
       <a class="show-more" href="#">
-        {{{icon "open"}}}
-        {{{icon "close"}}}
+        {{{icon "expand"}}}
+        {{{icon "collapse"}}}
       </a>
     </div>
   </div>

packages/telescope-core/lib/client/templates/menu/menu_component.js

@@ -47,6 +47,9 @@ Template.menuComponent.helpers({
 
     return _.unique(classes).join(" ");
   },
+  labelIsTemplate: function () {
+    return typeof Template[this.menuLabel] !== "undefined"
+  },
   menuLabel: function () {
     // if label is defined, use this. Else default to menu name
     return !!this.menuLabel ? this.menuLabel : i18n.t(this.menuName);

packages/telescope-lib/lib/colors.js

@@ -11,6 +11,13 @@ Telescope.colorElements.colorTable = {
   secondaryContrastColor: []
 };
 
+Telescope.colorElements.defaultColors = {
+  accentColor: "#DD3416", // red
+  accentContrastColor: "#ffffff", // white
+  secondaryColor: "#4e555d", // slate
+  secondaryContrastColor: "#ffffff" // white
+};
+
 /**
  * Register an element to use a custom color
  * @param {string} selector - the CSS selector of the element

packages/telescope-lib/lib/icons.js

@@ -16,8 +16,9 @@ Telescope.utils.getIcon = function (iconName, iconClass) {
  * A directory of icon keys and icon codes
  */
 Telescope.utils.icons = {
-  open: "plus",
-  close: "minus",
+  expand: "plus",
+  collapse: "minus",
+  close: "times",
   upvote: "chevron-up",
   voted: "check",
   downvote: "chevron-down",

packages/telescope-newsletter/lib/client/templates/newsletter_banner.html

@@ -10,7 +10,7 @@
           <button class="button newsletter-button btn btn-primary">{{_ "get_newsletter"}}<span class="button-loader"><img src="/packages/telescope_core/public/img/loading-balls.svg"/></span></button>
         </form>
         <h4 class="newsletter-subscribed">{{_ "thanks_for_subscribing"}}</h4>
-        <a href="#" class="newsletter-dismiss banner-dismiss">×</a>
+        <a href="#" class="newsletter-dismiss banner-dismiss">{{{icon "close"}}}</a>
       </div>
     {{/if}}
   </div>

packages/telescope-releases/lib/client/templates/current_release.html

@@ -6,7 +6,7 @@
         <div class="markdown">
           {{#markdown}}{{notes}}{{/markdown}}
         </div>
-        <a href="#" class="release-dismiss banner-dismiss">×</a>
+        <a href="#" class="release-dismiss banner-dismiss">{{{icon "close"}}}</a>
       </div>
     </div>
   {{/with}}

packages/telescope-theme-hubble/lib/client/scss/modules/_banners.scss

@@ -25,7 +25,7 @@
   top: 50%;
   margin-top: -15px;
   right: 20px;
-  font-size: 24px;
+  font-size: 16px;
   text-align: center;
   vertical-align: middle;
   line-height: 32px;