Merge pull request #71 from jedmund/fix-69

Fix #69: Uncap stars were too small and getting cut off

components/UncapStar/index.scss

@@ -1,20 +1,13 @@
 .UncapStar {
   $size: 18px;
-
-  @media (max-width: $tablet) {
-    $size: 12px;
-  }
-
   background-repeat: no-repeat;
   background-size: $size;
   display: block;
   height: $size;
   width: $size;
 
-  @media (min-width: $laptop) {
-    &:hover {
-      transform: scale(1.2);
-    }
+  &:hover {
+    transform: scale(1.2);
   }
 
   &.empty,
@@ -22,42 +15,55 @@
   &.empty.flb,
   &.empty.ulb,
   &.empty.special {
-    background-image: url('/icons/uncap/empty.svg');
+    background-image: url('/icons/uncap/empty@3x.png');
 
     &:hover {
-      background-image: url('/icons/uncap/empty-hover.svg');
+      background-image: url('/icons/uncap/empty-hover@3x.png');
     }
   }
 
   &.mlb {
-    background-image: url('/icons/uncap/yellow.svg');
+    background-image: url('/icons/uncap/yellow@3x.png');
 
     &:hover {
-      background-image: url('/icons/uncap/yellow-hover.svg');
+      background-image: url('/icons/uncap/yellow-hover@3x.png');
     }
   }
 
   &.special {
-    background-image: url('/icons/uncap/red.svg');
+    background-image: url('/icons/uncap/red@3x.png');
 
     &:hover {
-      background: url('/icons/uncap/red-hover.svg');
+      background: url('/icons/uncap/red-hover@3x.png');
     }
   }
 
   &.flb {
-    background-image: url('/icons/uncap/blue.svg');
+    background-image: url('/icons/uncap/blue@3x.png');
 
     &:hover {
-      background: url('/icons/uncap/blue-hover.svg');
+      background-image: url('/icons/uncap/blue-hover@3x.png');
     }
   }
 
   &.ulb {
-    background-image: url('/icons/uncap/purple.svg');
+    background-image: url('/icons/uncap/purple@3x.png');
 
     &:hover {
-      background-image: url('/icons/uncap/purple-hover.svg');
+      background-image: url('/icons/uncap/purple-hover@3x.png');
+    }
+  }
+}
+
+// Phone up to iPhone 14 Pro Max
+@media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) {
+  .UncapStar {
+    background-size: cover;
+    height: 14px;
+    width: 14px;
+
+    &:hover {
+      transform: scale(1);
     }
   }
 }