Adding icons to all dialogs.

media/css/modals.css

@@ -80,6 +80,13 @@
     font-size: 22px;
 }
 
+.NB-modal-title .NB-icon {
+    width: 28px;
+    height: 28px;
+    float: left;
+    margin: 0 12px 0 0;
+}
+
 .NB-modal h5,
 .NB-module h5,
 .NB-module-header {
@@ -410,27 +417,38 @@
 
 .NB-modal .NB-modal-tab {
     float: left;
-    padding: 8px 12px 10px;
-    background-color: #E0E0E0;
+    padding: 8px 18px 10px;
+    font-size: 12px;
+    background-color: #F0F1EC;
     border-top: 1px solid #A0A0A0;
     border-left: 1px solid #A0A0A0;
     border-bottom: 1px solid #A0A0A0;
     cursor: pointer;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
     margin-top: -4px;
+    -webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, .1);
+    -moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, .1);
+    box-shadow: inset 0px -1px 1px rgba(0, 0, 0, .1);
 }
 
 .NB-modal .NB-modal-tab:hover {
-    background-color: #F2F2F9;
+    background-color: #E4E5DF;
+}
+.NB-modal .NB-modal-tab:first-child {
+    border-top-left-radius: 2px;
 }
 .NB-modal .NB-modal-tab:last-child {
     border-right: 1px solid #A0A0A0;
+    border-top-right-radius: 2px;
 }
 
 .NB-modal .NB-modal-tab.NB-active {
     background-color: white;
     border-bottom: 1px solid white;
     cursor: default;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
 }
 
 .NB-modal .NB-tab {
@@ -441,6 +459,7 @@
     overflow: auto;
     height: 400px;
     width: 100%;
+    font-size: 14px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;    

media/css/reader.css

@@ -4005,6 +4005,11 @@ form.opml_import_form input {
   margin: 8px 0px 0 0;
 }
 
+.NB-modal-classifiers .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_intelligence.png');
+    background-size: 28px;
+}
+
 .NB-modal-classifiers h2.NB-like {
     color: #007000;
 }
@@ -4497,6 +4502,11 @@ form.opml_import_form input {
 /* = Mark Read Modal = */
 /* =================== */
 
+
+.NB-modal-markread .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_markread.png');
+    background-size: 28px;
+}
 .NB-modal-markread .NB-markread-slider {
     margin-top: 24px;
 }
@@ -6277,6 +6287,10 @@ form.opml_import_form input {
 /* = Feed Recommendation Modal = */
 /* ============================= */
 
+.NB-modal-recommend .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_recommend.png');
+    background-size: 28px;
+}
 .NB-modal-recommend .NB-modal-loading {
   margin: 6px 8px 0;
 }
@@ -6403,6 +6417,11 @@ form.opml_import_form input {
 /* = Tutorial Modal = */
 /* ================== */
 
+
+.NB-modal-tutorial .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_tutorial.png');
+    background-size: 28px;
+}
 .NB-modal-tutorial h4 {
   clear: both;
 }
@@ -7612,6 +7631,10 @@ form.opml_import_form input {
 /* = Goodies Modal = */
 /* ================= */
 
+.NB-modal-goodies .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_goodies.png');
+    background-size: 28px;
+}
 .NB-modal-goodies .NB-goodies-group {
   clear: both;
   margin: 16px 0 0 0;
@@ -7733,6 +7756,11 @@ form.opml_import_form input {
 /* = Keyboard Shortcuts Modal = */
 /* ============================ */
 
+
+.NB-modal-keyboard .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_keyboard.png');
+    background-size: 28px;
+}
 .NB-modal-keyboard .NB-keyboard-group {
   clear: both;
   margin: 16px 0 0 0;
@@ -7796,6 +7824,10 @@ form.opml_import_form input {
 .NB-modal-preferences {
     overflow: hidden;
 }
+.NB-modal-preferences .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_preferences.png');
+    background-size: 28px;
+}
 .NB-modal-preferences .NB-modal-submit-button {
     float: left;
 }
@@ -8041,6 +8073,10 @@ form.opml_import_form input {
 /* = Account Dialog = */
 /* ================== */
 
+.NB-modal-account .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_account.png');
+    background-size: 28px;
+}
 .NB-modal-account .NB-preference-username input,
 .NB-modal-account .NB-preference-email input {
     width: 306px;
@@ -8780,6 +8816,11 @@ form.opml_import_form input {
 /* = Friends Modal = */
 /* ================= */
 
+.NB-modal-friends .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_friends.png');
+    background-size: 28px;
+}
+
 .NB-modal-friends .NB-tab {
     min-height: 80px;
     padding: 12px 0;
@@ -8932,6 +8973,11 @@ form.opml_import_form input {
 /* = Profile Editor Modal = */
 /* ======================== */
 
+.NB-modal-profile-editor .NB-modal-title .NB-icon {
+    background: transparent url('/media/embed/icons/circular/g_modal_profile.png');
+    background-size: 28px;
+}
+
 .NB-modal-profile-editor .NB-tab {
     min-height: 80px;
     padding: 12px 0;

media/js/newsblur/reader/reader_account.js

@@ -37,7 +37,10 @@ _.extend(NEWSBLUR.ReaderAccount.prototype, {
         
         this.$modal = $.make('div', { className: 'NB-modal-preferences NB-modal-account NB-modal' }, [
             $.make('a', { href: '#preferences', className: 'NB-link-account-preferences NB-splash-link' }, 'Switch to Preferences'),
-            $.make('h2', { className: 'NB-modal-title' }, 'My Account'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Account'
+            ]),
             $.make('form', { className: 'NB-preferences-form' }, [
                 $.make('div', { className: 'NB-preference NB-preference-username' }, [
                     $.make('div', { className: 'NB-preference-options' }, [

media/js/newsblur/reader/reader_classifier.js

@@ -276,7 +276,10 @@ var classifier_prototype = {
         var self = this;
         
         this.$modal = $.make('div', { className: 'NB-modal-classifiers NB-modal NB-modal-trainer'}, [
-            $.make('h2', { className: 'NB-modal-title' }, 'Intelligence Trainer'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Intelligence Trainer'
+            ]),
             $.make('h3', { className: 'NB-modal-subtitle' }, 'Here\'s what to do:'),
             $.make('ol', { className: 'NB-trainer-points' }, [
                 $.make('li', [

media/js/newsblur/reader/reader_friends.js

@@ -33,7 +33,10 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
                 $.make('div', { className: 'NB-modal-tab NB-modal-tab-following' }, 'I\'m Following'),
                 $.make('div', { className: 'NB-modal-tab NB-modal-tab-followers' }, 'Following Me')
             ]),
-            $.make('h2', { className: 'NB-modal-title' }, 'Friends and Followers'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Friends and Followers'
+            ]),
             $.make('div', { className: 'NB-tab NB-tab-findfriends NB-active' }, [
                 $.make('fieldset', [
                     $.make('legend', 'Your profile'),

media/js/newsblur/reader/reader_goodies.js

@@ -19,7 +19,10 @@ NEWSBLUR.ReaderGoodies.prototype = {
         var self = this;
         
         this.$modal = $.make('div', { className: 'NB-modal-goodies NB-modal' }, [
-            $.make('h2', { className: 'NB-modal-title' }, 'Goodies & Extras'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Goodies & Extras'
+            ]),
             $.make('div', { className: 'NB-goodies-group' }, [
               NEWSBLUR.generate_bookmarklet(),
               $.make('div', { className: 'NB-goodies-title' }, 'Add Site & Share Story Bookmarklet')

media/js/newsblur/reader/reader_keyboard.js

@@ -24,7 +24,10 @@ _.extend(NEWSBLUR.ReaderKeyboard.prototype, {
         var self = this;
         
         this.$modal = $.make('div', { className: 'NB-modal-keyboard NB-modal' }, [
-            $.make('h2', { className: 'NB-modal-title' }, 'Keyboard shortcuts'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Keyboard shorcuts'
+            ]),
             $.make('div', { className: 'NB-keyboard-group' }, [
               $.make('div', { className: 'NB-keyboard-shortcut' }, [
                 $.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Next story'),

media/js/newsblur/reader/reader_mark_read.js

@@ -32,7 +32,10 @@ _.extend(NEWSBLUR.ReaderMarkRead.prototype, {
         var self = this;
         
         this.$modal = $.make('div', { className: 'NB-modal-markread NB-modal' }, [
-            $.make('h2', { className: 'NB-modal-title' }, 'Mark old stories as read'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Mark old stories as read'
+            ]),
             $.make('form', { className: 'NB-markread-form' }, [
                 $.make('div', { className: 'NB-markread-slider'}),
                 $.make('div', { className: 'NB-markread-explanation'}),

media/js/newsblur/reader/reader_preferences.js

@@ -35,12 +35,15 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
         
         this.$modal = $.make('div', { className: 'NB-modal-preferences NB-modal' }, [
             $.make('div', { className: 'NB-modal-tabs' }, [
-                $.make('div', { className: 'NB-modal-loading' }),
                 $.make('div', { className: 'NB-modal-tab NB-active NB-modal-tab-general' }, 'General'),
                 $.make('div', { className: 'NB-modal-tab NB-modal-tab-feeds' }, 'Feeds'),
                 $.make('div', { className: 'NB-modal-tab NB-modal-tab-stories' }, 'Stories')
             ]),
-            $.make('h2', { className: 'NB-modal-title' }, 'Preferences'),
+            $.make('div', { className: 'NB-modal-loading' }),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Preferences'
+            ]),
             $.make('form', { className: 'NB-preferences-form' }, [
                 $.make('div', { className: 'NB-tab NB-tab-general NB-active' }, [
                     $.make('div', { className: 'NB-preference' }, [
@@ -605,9 +608,7 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
                 ])
             ]),
             $.make('div', { className: 'NB-modal-submit NB-modal-submit-form' }, [
-                $.make('div', { disabled: 'true', className: 'NB-modal-submit-button NB-modal-submit-green NB-disabled' }, 'Make changes above...'),
-                ' or ',
-                $.make('a', { href: '#', className: 'NB-modal-cancel' }, 'cancel')
+                $.make('div', { disabled: 'true', className: 'NB-modal-submit-button NB-modal-submit-green NB-disabled' }, 'Make changes above...')
             ])
         ]);
     },

media/js/newsblur/reader/reader_profile_editor.js

@@ -38,7 +38,10 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, {
                 $.make('div', { className: 'NB-modal-tab NB-active NB-modal-tab-profile' }, 'Profile'),
                 $.make('div', { className: 'NB-modal-tab NB-modal-tab-blurblog' }, 'Blurblog')
             ]),
-            $.make('h2', { className: 'NB-modal-title' }, 'Your Profile'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Profile'
+            ]),
             $.make('div', { className: 'NB-tab NB-tab-profile NB-active' }, [
                 $.make('fieldset', [
                     $.make('legend', 'Preview'),

media/js/newsblur/reader/reader_recommend_feed.js

@@ -34,7 +34,10 @@ _.extend(NEWSBLUR.ReaderRecommendFeed.prototype, {
                 this.make_feed_chooser()
             ]),
             $.make('div', { className: 'NB-modal-loading' }),
-            $.make('h2', { className: 'NB-modal-title' }, 'Recommend this Site'),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                'Recommend this Site'
+            ]),
             $.make('h2', { className: 'NB-modal-subtitle' }, [
                 $.make('img', { className: 'NB-modal-feed-image feed_favicon', src: $.favicon(this.feed) }),
                 $.make('div', { className: 'NB-modal-feed-heading' }, [

media/js/newsblur/reader/reader_tutorial.js

@@ -52,7 +52,10 @@ _.extend(NEWSBLUR.ReaderTutorial.prototype, {
         this.$modal = $.make('div', { className: 'NB-modal-tutorial NB-modal' }, [
             $.make('span', { className: 'NB-modal-loading NB-spinner'}),
             $.make('div', { className: 'NB-modal-page' }),
-            $.make('h2', { className: 'NB-modal-title' }),
+            $.make('h2', { className: 'NB-modal-title' }, [
+                $.make('div', { className: 'NB-icon' }),
+                $.make('span', 'Tips & Tricks')
+            ]),
             $.make('div', { className: 'NB-page NB-page-1' }, [
               $.make('h4', 'NewsBlur is a visual feed reader with intelligence.'),
               $.make('div', 'You\'ll figure out much of NewsBlur by playing around and trying things out. This tutorial is here to quickly offer a foundation.'),
@@ -350,7 +353,7 @@ _.extend(NEWSBLUR.ReaderTutorial.prototype, {
     },
     
     set_title: function() {
-      $('.NB-modal-title', this.$modal).text(this.TITLES[this.page_number-1]);
+      $('.NB-modal-title span', this.$modal).text(this.TITLES[this.page_number-1]);
     },
 
     load_tips: function() {