Handle thumbnail sizes with synced icon. (#4958) (#4961)

mozilla-services · Sep 27, 2018 · b39ccf0 · b39ccf0
1 parent 8015449
commit b39ccf0
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 19 deletions.
diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -329,7 +329,9 @@ class Card extends React.Component {
     let syncedShotIndicator = null;
     if (shot.isSynced) {
       syncedShotIndicator = <Localized id="shotIndexSyncedShot" attrs={{title: true}}>
-        <div className="indicator synced-shot" title=""></div>
+        <div className="indicator synced-shot" title="">
+          <img src={this.props.staticLink("/static/img/icon-sync.svg")} />
+        </div>
       </Localized>;
     }
 

diff --git a/static/css/shot-index.scss b/static/css/shot-index.scss
@@ -119,30 +119,54 @@ $shot-width: 210px;
     overflow: hidden;
   }
 
-  &.landscape .shot-image-container {
-    height: 140px;
-    img {
+  &.landscape {
+    .shot-image-container {
       height: 140px;
+      img {
+        height: 140px;
+      }
+    }
+
+    .synced-shot {
+      top: 120px;
     }
   }
 
-  &.portrait .shot-image-container {
-    height: 280px;
-    img {
-      width: $shot-width;
+  &.portrait {
+    .shot-image-container {
+      height: 280px;
+      img {
+        width: 210px;
+      }
+    }
+
+    .synced-shot {
+      top: 260px;
     }
   }
 
-  &.square-x .shot-image-container {
-    height: $shot-width;
-    img {
-      width: $shot-width;
+  &.square-x {
+    .shot-image-container {
+      height: 210px;
+      img {
+        width: 210px;
+      }
+    }
+
+    .synced-shot {
+      top: 190px;
     }
   }
-  &.square-y .shot-image-container {
-    height: $shot-width;
-    img {
-      height: $shot-width;
+  &.square-y {
+    .shot-image-container {
+      height: 210px;
+      img {
+        height: 210px;
+      }
+    }
+
+    .synced-shot {
+      top: 190px;
     }
   }
 
@@ -217,10 +241,12 @@ $shot-width: 210px;
   }
 
   .synced-shot {
-    background-image: url("../img/icon-sync.svg");
     right: 12px;
-    top: 260px;
-    opacity: 0.4;
+
+    img {
+      padding: 8px;
+      filter: brightness(2.8);
+    }
   }
 }