changed service icons; icons for template picker [ci skip]

app/assets/javascripts/app/pages/composer.js

@@ -16,7 +16,9 @@ app.pages.Composer = app.views.Base.extend({
 
   initialize : function(){
     app.frame = this.model = this.model || new app.models.StatusMessage();
-    this.postForm = new app.forms.Post({model : this.model});
+
+    /* add class to make this smaller than the default framer */
+    this.postForm = new app.forms.Post({model : this.model, className : "span4 offset1"});
     this.composerControls = new app.views.ComposerControls({model : this.model});
   },
 

app/assets/stylesheets/mentions.css.scss

@@ -2,6 +2,8 @@
 @import '_mixins.css.scss';
 
 .mentions-input-box {
+  @include border-radius(3px);
+
   background: #fff;
   position: relative;
 

app/assets/stylesheets/new_styles/_base.scss

@@ -14,7 +14,8 @@ body {
 }
 
 /* new link color */
-a { color : rgb(42,156,235)  }
+$link-blue : rgb(42,156,235);
+a { color : $link-blue  }
 
 /* bootstrap extentions */
 .icon-red   { background-image: image_url("img/glyphicons-halflings-red.png");   }

app/assets/stylesheets/new_styles/_composer.scss

@@ -44,7 +44,8 @@
   }
 
   .template-picker {
-    margin-bottom : 1em;
+    float : left;
+    margin-left : 20px;
 
     input {
       display : none;
@@ -54,6 +55,8 @@
       @include transition(background-color);
       @include border-radius();
 
+      display : inline-block;
+
       cursor : pointer;
 
       margin-right: 11px;
@@ -63,13 +66,37 @@
       line-height: 2em;
 
       &:hover {
-        background-color: #222;
-        text-decoration: none;
+        img {
+          border : 4px solid rgba(255,255,255,1);
         }
       }
 
+      .template-name {
+        text-align : center;
+        text-transform : uppercase;
+      }
+
+      img {
+        @include border-radius(5px);
+        @include transition(border);
+
+        border : 4px solid transparent;
+        background-color : #ddd;
+
+        height : 54px;
+        width : 54px;
+      }
+
+    }
+
     input:checked + label {
-      background-color: #222;
+      .template-name {
+        color : $link-blue;
+      }
+
+      img {
+        border : 4px solid $link-blue;
+      }
     }
   }
 
@@ -133,10 +160,11 @@
 
     img {
       @include transition(opacity);
+      @include box-shadow(0,0,0,0);
 
       cursor : pointer;
-      height : 28px;
-      width : 28px;
+      height : 70px;
+      width : 54px;
     }
 
     input:not(:checked) + label {
@@ -174,8 +202,8 @@ input[type="image"] {
 
 .new_photo .photo{
   display: inline;
-  max-width: 200px;
-  max-height: 75px;
+  max-width: 240px;
+  max-height: 240px;
   padding: 2px;
 }
 

app/assets/templates/framer-content.jst.hbs

@@ -3,6 +3,12 @@
 <div class='template-picker'>
     {{#each templates}}
         <input id='frame_name_{{name}}' name="frame_name" type="radio" class="mood" value={{name}} {{#if checked}}checked=checked{{/if}} />
-    <label for='frame_name_{{name}}'>{{name}}</label>
+        <label for='frame_name_{{name}}'>
+            <img src="/assets/branding/asterisk.png" />
+            <div class="template-name">
+                {{name}}
+            </div>
+        </label>
+        <br />
     {{/each}}
 </div>

app/assets/templates/services-selector.jst.hbs

@@ -3,7 +3,7 @@
     {{#each services}}
         <input id="services[{{name}}]" type="checkbox" name="services[{{name}}]" class="services" value="{{name}}" {{#if checked}}checked="checked"{{/if}}/>
         <label for="services[{{name}}]">
-            <img class="legacy-provider-image" src="/assets/social_media_logos/{{name}}-32x32.png" data-provider="{{name}}" data-url="/auth/{{name}}" title="Share on {{name}}" />
+            <img class="legacy-provider-image" src="/assets/buttons/{{name}}_hov@2x.png" data-provider="{{name}}" data-url="/auth/{{name}}" title="Share on {{name}}" />
         </label>
     {{/each}}
 </form>