Merge pull request #2053 from mozilla-services/deneb-styles

update styles for deneb

addon/data/selector-ui.js

@@ -346,17 +346,18 @@ const ui = (function () { // eslint-disable-line no-unused-vars
       }
       boxEl = makeEl("div", "pageshot-highlight");
       let buttons = makeEl("div", "pageshot-highlight-buttons");
-      let download = makeEl("button", "pageshot-highlight-button-download");
-      download.textContent = "Download";
-      buttons.appendChild(download);
       let cancel = makeEl("button", "pageshot-highlight-button-cancel");
-      cancel.textContent = "Cancel";
+      cancel.title = "Cancel";
       buttons.appendChild(cancel);
+      let download = makeEl("button", "pageshot-highlight-button-download");
+      download.title="Download";
+      buttons.appendChild(download);
       let save = makeEl("button", "pageshot-highlight-button-save");
       save.textContent = "Save";
+      save.title = "Save"
       buttons.appendChild(save);
-      this.download = download;
       this.cancel = cancel;
+      this.download = download;
       this.save = save;
       boxEl.appendChild(buttons);
       for (let name of movements) {

server/src/pages/shot/view.js

@@ -355,12 +355,12 @@ class Body extends React.Component {
             </div>
           </div>
           <div className="more-shot-actions right">
-            <ShareButton clipUrl={clipUrl} shot={shot} isOwner={this.props.isOwner} staticLink={this.props.staticLink} renderExtensionNotification={renderExtensionNotification} sendRichCopy={this.sendRichCopy.bind(this)} isExtInstalled={this.props.isExtInstalled} />
+            { trashOrFlagButton }
             <a className="button secondary" href={ clipUrl } onClick={ this.onClickDownload.bind(this) }
               title="Download the shot image" download={ `${clipFilename}.png` }>
               <img src={ this.props.staticLink("/static/img/download.svg") } />
             </a>
-            { trashOrFlagButton }
+            <ShareButton clipUrl={clipUrl} shot={shot} isOwner={this.props.isOwner} staticLink={this.props.staticLink} renderExtensionNotification={renderExtensionNotification} sendRichCopy={this.sendRichCopy.bind(this)} isExtInstalled={this.props.isExtInstalled} />
           </div>
         </div>
         { clips }

static/css/frame.scss

@@ -76,8 +76,8 @@
 
 .shot-title {
   font-size: 16px;
-  height: 25px;
-  padding: 0 16px 6px 0;
+  height: 32px;
+  padding: 6px 22px 6px 0;
   &.saving {
     opacity: 0.7;
   }
@@ -86,15 +86,18 @@
     &:hover {
       background-image: url('/static/img/pencil.svg');
       background-repeat: no-repeat;
-      background-position: right;
+      background-position: center right;
       background-size: 16px 16px;
     }
   }
 }
 
 .shot-title-input {
+  border: 1px solid $border-color; 
+  border-radius: 3px;
   font-size: 16px;
-  height: 25px;
+  height: 32px;
+  padding: 0 10px;
 }
 
 .shot-subtitle {

static/css/inline-selection.scss

@@ -47,22 +47,53 @@ $overlay-z-index: 9999999999;
 .pageshot-highlight-button-cancel {
   @extend .button;
   @extend .secondary;
+  background: $very-light-grey url("cancel.svg") center center no-repeat;
+  background-size: 18px 18px;
   margin: 5px;
-  width: 80px;
+  width: 40px;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($very-light-grey, 7) url("cancel.svg") center center no-repeat;
+    background-size: 18px 18px;
+  }
 }
 
 .pageshot-highlight-button-save {
   @extend .button;
   @extend .primary;
+  font-size: 18px;
   margin: 5px;
   width: 80px;
 }
 
 .pageshot-highlight-button-download {
   @extend .button;
-  @extend .primary;
+  @extend .secondary;
+  background: $very-light-grey url("download.svg") center center no-repeat;
+  background-size: 18px 18px;
   margin: 5px;
-  width: 100px;
+  width: 40px;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($very-light-grey, 7) url("download.svg") center center no-repeat;
+    background-size: 18px 18px;
+  }
+}
+
+.pageshot-highlight-button-cancel,
+.pageshot-highlight-button-download {
+  opacity: 0.9;
+  transition: opacity 250ms;
+
+  &:hover,
+  &:focus,
+  &:active {
+    opacity: 1;
+  }
 }
 
 .pageshot-mover-target {
@@ -291,10 +322,15 @@ $overlay-z-index: 9999999999;
 .pageshot-pixel-dimensions {
   position: absolute;
   pointer-events: none;
+  font-weight: bold;
   font-family: sans-serif;
   font-size: 70%;
   color: #000;
-  text-shadow: 1px 1px 0 #fff;
+  text-shadow:
+      -1px -1px 0 #fff,
+      1px -1px 0 #fff,
+      -1px 1px 0 #fff,
+      1px 1px 0 #fff; 
 }
 
 // FIXME: some of the styles in .pageshot-moving-element were copied from