From 85dbe19611e7b74c20ba559ecb4871ca99c4469a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 15 May 2020 12:24:50 +0100
Subject: [PATCH] Add envelope for international letters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

International letters aren’t sent by first or second class post. In
keeping with the little touch of skeumorphism, let’s label them with the
commonly recognised marker of international mail instead.
---
 app/assets/images/envelope-international.svg  | 70 +++++++++++++++++++
 app/assets/stylesheets/components/letter.scss |  4 ++
 2 files changed, 74 insertions(+)
 create mode 100644 app/assets/images/envelope-international.svg

diff --git a/app/assets/images/envelope-international.svg b/app/assets/images/envelope-international.svg
new file mode 100644
index 000000000..4bebb1dce
--- /dev/null
+++ b/app/assets/images/envelope-international.svg
@@ -0,0 +1,70 @@
+<?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" 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:#B7A47E;}
+	.st1{fill:#C4B186;}
+	.st2{fill:#DEE0E1;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:url(#SVGID_1_);fill-opacity:3.000000e-02;}
+	.st5{fill:#00629E;}
+	.st6{fill:none;}
+</style>
+<g id="Layer_1">
+	<rect y="0" class="st0" width="277.3" height="233.2"/>
+	<rect y="3" class="st1" width="274.3" height="230.2"/>
+	<polyline class="st2" points="277.3,233.2 0,233.2 0,0 	"/>
+	<g>
+		<path class="st1" d="M209.2,165.9V83.5h-31.9V64.1c4.5,0.1,8.8-0.2,13-1s7.9-2.2,11.3-4.2c3.3-2,6.1-4.6,8.4-7.9
+			c2.3-3.3,3.8-7.3,4.5-12.2H235v127h-25.8V165.9z"/>
+	</g>
+	<polygon class="st3" points="277.3,233.2 0,233.2 0,0 	"/>
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="77.0257" y1="799.1396" x2="122.4226" y2="753.7426" gradientTransform="matrix(1 0 0 1 0 -659.02)">
+		<stop  offset="0" style="stop-color:#FFFFFF"/>
+		<stop  offset="1" style="stop-color:#000000"/>
+	</linearGradient>
+	<path class="st4" d="M163.8,136.1L72.9,61.4l0.1,74.7H163.8"/>
+</g>
+<g id="Layer_2">
+	<polygon class="st5" points="73,61.4 73,28.2 251.7,28.2 251.7,137.7 163.7,137.7 	"/>
+</g>
+<g id="Layer_3">
+	<path class="st3" d="M237,99.3c-3.8,0-9.3,0-9.3,0s-10.6-16-11.5-17.6c-0.9-1.6-2.1-2-3-2H210l6.4,19.7l-14.4,0.9
+		c0,0-2.1-5.5-2.3-5.8c-0.4-0.7-1.1-1.4-2.4-1.4s-2.3,0-2.3,0l1.9,8.2c0,0-0.9,1.1-0.9,1.9c0,0.9,0.9,1.8,0.9,1.8l-1.9,8.2
+		c0,0,1,0,2.3,0s2-0.7,2.4-1.4c0.2-0.3,2.3-5.8,2.3-5.8l14.4,0.9l-6.4,19.7h3.3c0.9,0,2.1-0.4,3-2c0.9-1.6,11.5-17.6,11.5-17.6
+		s5.5,0,9.3,0s6.2-2.1,6.2-3.9C243.2,101.4,240.8,99.3,237,99.3z"/>
+	<g>
+		<rect x="80.7" y="37.2" class="st6" width="162.7" height="32.7"/>
+		<path class="st3" d="M103.8,60.5l-1.2-3.2H92.1l-1.2,3.3c-0.5,1.3-0.9,2.2-1.2,2.6s-0.9,0.7-1.7,0.7c-0.7,0-1.2-0.2-1.7-0.7
+			s-0.8-1-0.8-1.6c0-0.4,0.1-0.7,0.2-1.1s0.3-0.9,0.6-1.6l6.6-16.7c0.2-0.5,0.4-1.1,0.7-1.7s0.5-1.2,0.8-1.7s0.7-0.8,1.2-1.1
+			s1.1-0.4,1.8-0.4c0.7,0,1.3,0.1,1.8,0.4s0.9,0.6,1.2,1.1s0.6,0.9,0.8,1.4s0.5,1.2,0.8,2l6.7,16.6c0.5,1.3,0.8,2.2,0.8,2.8
+			c0,0.6-0.2,1.1-0.7,1.6s-1.1,0.7-1.8,0.7c-0.4,0-0.8-0.1-1.1-0.2s-0.5-0.3-0.7-0.6s-0.4-0.6-0.6-1.2S104,60.9,103.8,60.5z
+			 M93.5,53.4h7.7l-3.9-10.6L93.5,53.4z"/>
+		<path class="st3" d="M112.7,60.7V40.4c0-1.1,0.2-1.8,0.7-2.4s1.1-0.8,1.9-0.8c0.8,0,1.4,0.3,1.9,0.8s0.7,1.3,0.7,2.4v20.3
+			c0,1.1-0.2,1.9-0.7,2.4s-1.1,0.8-1.9,0.8c-0.8,0-1.4-0.3-1.9-0.8S112.7,61.8,112.7,60.7z"/>
+		<path class="st3" d="M130.8,52.4H129v8.3c0,1.1-0.2,1.9-0.7,2.4s-1.1,0.8-1.9,0.8c-0.8,0-1.5-0.3-1.9-0.8s-0.7-1.3-0.7-2.4V40.9
+			c0-1.1,0.3-1.9,0.8-2.4s1.3-0.8,2.4-0.8h8.5c1.2,0,2.2,0,3,0.1s1.6,0.3,2.3,0.6c0.8,0.3,1.5,0.8,2.1,1.5s1.1,1.4,1.4,2.2
+			s0.5,1.7,0.5,2.7c0,1.9-0.5,3.5-1.6,4.6s-2.7,2-4.9,2.4c0.9,0.5,1.8,1.2,2.7,2.2s1.6,2,2.3,3.1s1.2,2.1,1.5,2.9s0.6,1.5,0.6,1.8
+			c0,0.3-0.1,0.7-0.3,1s-0.5,0.6-0.9,0.8s-0.8,0.3-1.3,0.3c-0.6,0-1.1-0.1-1.5-0.4s-0.7-0.6-1-1c-0.3-0.4-0.7-1-1.2-1.9l-2.1-3.5
+			c-0.8-1.3-1.4-2.2-2-2.9s-1.2-1.1-1.8-1.4S131.7,52.4,130.8,52.4z M133.8,41.6H129v7.1h4.7c1.3,0,2.3-0.1,3.2-0.3s1.5-0.6,2-1.1
+			s0.7-1.2,0.7-2.2c0-0.7-0.2-1.3-0.5-1.9s-0.9-1-1.5-1.2C136.8,41.7,135.6,41.6,133.8,41.6z"/>
+		<path class="st3" d="M167.4,59.6l-4.1-16.4v17.8c0,1-0.2,1.7-0.7,2.2s-1,0.7-1.7,0.7c-0.7,0-1.3-0.2-1.7-0.7s-0.7-1.2-0.7-2.2
+			V40.5c0-1.1,0.3-1.9,0.9-2.3s1.4-0.6,2.4-0.6h1.6c1,0,1.7,0.1,2.1,0.3s0.8,0.5,1,0.9s0.5,1.2,0.7,2.2l3.7,14.1l3.7-14.1
+			c0.3-1,0.5-1.8,0.7-2.2s0.5-0.8,1-0.9s1.1-0.3,2.1-0.3h1.6c1,0,1.8,0.2,2.4,0.6s0.9,1.2,0.9,2.3v20.4c0,1-0.2,1.7-0.7,2.2
+			s-1,0.7-1.8,0.7c-0.7,0-1.3-0.2-1.7-0.7s-0.7-1.2-0.7-2.2V43.1l-4.1,16.4c-0.3,1.1-0.5,1.8-0.7,2.3s-0.5,1-0.9,1.4
+			s-1.1,0.6-1.9,0.6c-0.6,0-1.1-0.1-1.5-0.4s-0.8-0.6-1-1s-0.4-0.9-0.6-1.4S167.5,60.1,167.4,59.6z"/>
+		<path class="st3" d="M204.4,60.5l-1.2-3.2h-10.5l-1.2,3.3c-0.5,1.3-0.9,2.2-1.2,2.6s-0.9,0.7-1.7,0.7c-0.7,0-1.2-0.2-1.7-0.7
+			s-0.8-1-0.8-1.6c0-0.4,0.1-0.7,0.2-1.1s0.3-0.9,0.6-1.6l6.6-16.7c0.2-0.5,0.4-1.1,0.7-1.7s0.5-1.2,0.8-1.7s0.7-0.8,1.2-1.1
+			s1.1-0.4,1.8-0.4c0.7,0,1.3,0.1,1.8,0.4s0.9,0.6,1.2,1.1s0.6,0.9,0.8,1.4s0.5,1.2,0.8,2l6.7,16.6c0.5,1.3,0.8,2.2,0.8,2.8
+			c0,0.6-0.2,1.1-0.7,1.6s-1.1,0.7-1.8,0.7c-0.4,0-0.8-0.1-1.1-0.2s-0.5-0.3-0.7-0.6s-0.4-0.6-0.6-1.2S204.6,60.9,204.4,60.5z
+			 M194.1,53.4h7.7l-3.9-10.6L194.1,53.4z"/>
+		<path class="st3" d="M213.3,60.7V40.4c0-1.1,0.2-1.8,0.7-2.4s1.1-0.8,1.9-0.8c0.8,0,1.4,0.3,1.9,0.8s0.7,1.3,0.7,2.4v20.3
+			c0,1.1-0.2,1.9-0.7,2.4s-1.1,0.8-1.9,0.8c-0.8,0-1.4-0.3-1.9-0.8S213.3,61.8,213.3,60.7z"/>
+		<path class="st3" d="M229.5,40.4v18.8h10.6c0.8,0,1.5,0.2,1.9,0.6s0.7,0.9,0.7,1.5c0,0.6-0.2,1.1-0.7,1.5s-1.1,0.6-2,0.6h-12.6
+			c-1.1,0-2-0.3-2.5-0.8s-0.7-1.3-0.7-2.4V40.4c0-1.1,0.2-1.8,0.7-2.4s1.1-0.8,1.9-0.8c0.8,0,1.4,0.3,1.9,0.8S229.5,39.3,229.5,40.4
+			z"/>
+	</g>
+</g>
+</svg>
diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 84503da16..d23408248 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -70,6 +70,10 @@ $iso-paper-ratio: 141.42135624%;
       background-image: file-url('envelope-2nd-class.svg');
     }
 
+    &-international {
+      background-image: file-url('envelope-international.svg');
+    }
+
     .letter-sent &:hover {
       background-color: transparent;
       border-color: transparent;