Allow people to see the full precompiled letter

Sometimes people print stuff under where we’re folding the letter. It’s
annoying to not be able to see it.

This commit adds a little detail where, once you’ve sent the letter
you can unfolds the corner to see what’s underneath.

It’s better that we do this for all letters for discoverability.

app/assets/images/envelope-fold.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 277.3 233.2" style="enable-background:new 0 0 277.3 233.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);fill-opacity:4.000000e-02;}
+	.st1{fill:#726650;}
+	.st2{fill:#B7A47E;}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="255.3511" y1="-23.0955" x2="25.9489" y2="250.2955">
+	<stop  offset="0.3929" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.4881" style="stop-color:#000000;stop-opacity:0.4723"/>
+	<stop  offset="0.4937" style="stop-color:#000000;stop-opacity:0.5"/>
+	<stop  offset="0.4938" style="stop-color:#090909;stop-opacity:0.4963"/>
+	<stop  offset="0.494" style="stop-color:#373737;stop-opacity:0.4762"/>
+	<stop  offset="0.4943" style="stop-color:#626262;stop-opacity:0.4535"/>
+	<stop  offset="0.4946" style="stop-color:#888888;stop-opacity:0.4291"/>
+	<stop  offset="0.4949" style="stop-color:#A8A8A8;stop-opacity:0.4025"/>
+	<stop  offset="0.4953" style="stop-color:#C4C4C4;stop-opacity:0.3731"/>
+	<stop  offset="0.4957" style="stop-color:#DADADA;stop-opacity:0.34"/>
+	<stop  offset="0.4962" style="stop-color:#EBEBEB;stop-opacity:0.3013"/>
+	<stop  offset="0.4968" style="stop-color:#F6F6F6;stop-opacity:0.2534"/>
+	<stop  offset="0.4977" style="stop-color:#FDFDFD;stop-opacity:0.1863"/>
+	<stop  offset="0.5" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="0.5008" style="stop-color:#E7E7E7;stop-opacity:1.627757e-02"/>
+	<stop  offset="0.5033" style="stop-color:#A2A2A2;stop-opacity:6.645314e-02"/>
+	<stop  offset="0.5056" style="stop-color:#686868;stop-opacity:0.114"/>
+	<stop  offset="0.5078" style="stop-color:#3B3B3B;stop-opacity:0.1573"/>
+	<stop  offset="0.5097" style="stop-color:#1B1B1B;stop-opacity:0.1959"/>
+	<stop  offset="0.5113" style="stop-color:#070707;stop-opacity:0.2281"/>
+	<stop  offset="0.5124" style="stop-color:#000000;stop-opacity:0.25"/>
+	<stop  offset="0.5388" style="stop-color:#000000;stop-opacity:0"/>
+</linearGradient>
+<rect x="2" y="-3" class="st0" width="277.3" height="233.2"/>
+<polygon class="st1" points="0,0 277.3,0 277.3,233.2 272,6.9 "/>
+<polygon class="st2" points="2.5,-1 279.8,-1 279.8,232.2 274.5,5.9 "/>
+</svg>

app/assets/stylesheets/components/letter.scss

@@ -82,6 +82,19 @@ $iso-paper-ratio: 141.42135624%;
 
     }
 
+    .letter-sent &:hover {
+
+      background-color: transparent;
+      border: none;
+      box-shadow: none;
+      background-image: file-url('envelope-fold.svg');
+
+      @include ie-lte(8) {
+        background-image: file-url('envelope-fold.png');
+      }
+
+    }
+
   }
 
   img {

app/templates/views/notifications/notification.html

@@ -72,7 +72,9 @@
       {% endif %}
     {% endif %}
 
-    {{ template|string }}
+    <div class="{{ 'letter-sent' if template.template_type == 'letter' else '' }}">
+      {{ template|string }}
+    </div>
 
     {% if template.template_type == 'letter' %}
       <div class="js-stick-at-bottom-when-scrolling">