From 9132c2cad05687c56ae2931380717e9459dc4abc Mon Sep 17 00:00:00 2001
From: carljbowman <bowman@media.mit.edu>
Date: Thu, 25 Oct 2018 09:29:28 -0400
Subject: [PATCH] Update tutorial and close icons

Adjusted the hierarchy of these icons. Close icon is now smaller and less prominent.
---
 src/components/cards/card.css        | 11 ++++++-----
 src/components/cards/cards.jsx       |  2 +-
 src/components/cards/icon--close.svg | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 src/components/cards/icon--close.svg

diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 439c8191f..908edbf91 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -183,8 +183,13 @@
     max-width: 200px;
 }
 
-.help-icon, .close-icon {
+.help-icon {
+    height: 1.25rem;
+}
+
+.close-icon {
     height: 1rem;
+    margin: .125rem 0; /* To offset the .25rem difference in icon size */
 }
 
 [dir="ltr"] .help-icon {
@@ -195,10 +200,6 @@
     margin-left: 0.25rem;
 }
 
-.close-icon {
-    transform: rotate(45deg);
-}
-
 [dir="ltr"] .close-icon {
     margin-left: 0.25rem;
 }
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 1ca7672f1..2bf29c618 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -9,7 +9,7 @@ import rightArrow from './icon--next.svg';
 import leftArrow from './icon--prev.svg';
 
 import helpIcon from '../../lib/assets/icon--tutorials.svg';
-import closeIcon from '../close-button/icon--close.svg';
+import closeIcon from './icon--close.svg';
 
 import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
 
diff --git a/src/components/cards/icon--close.svg b/src/components/cards/icon--close.svg
new file mode 100644
index 000000000..a02ec1049
--- /dev/null
+++ b/src/components/cards/icon--close.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>General/Check Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M10,7.73577763 L12.2675846,5.46819305 C12.8909754,4.84480221 13.8988379,4.84194841 14.5284447,5.47155526 C15.1536925,6.096803 15.1476685,7.11655392 14.531807,7.73241542 L12.2642224,10 L14.531807,12.2675846 C15.1551978,12.8909754 15.1580516,13.8988379 14.5284447,14.5284447 C13.903197,15.1536925 12.8834461,15.1476685 12.2675846,14.531807 L10,12.2642224 L7.73241542,14.531807 C7.10902458,15.1551978 6.10116212,15.1580516 5.47155526,14.5284447 C4.84630752,13.903197 4.85233155,12.8834461 5.46819305,12.2675846 L7.73577763,10 L5.46819305,7.73241542 C4.84480221,7.10902458 4.84194841,6.10116212 5.47155526,5.47155526 C6.096803,4.84630752 7.11655392,4.85233155 7.73241542,5.46819305 L10,7.73577763 Z" id="path-1"></path>
+    </defs>
+    <g id="General/Check-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="close-icon" fill="#FFFFFF" xlink:href="#path-1"></use>
+        <g id="Color/White" mask="url(#mask-2)" fill="#FFFFFF">
+            <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file