From b77bc7a8b44c2068fbb568edcba79822914e454c Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 10 Apr 2019 11:49:34 -0400
Subject: [PATCH] Adding a new div to hold the shrink button.

---
 src/components/cards/card.css  | 19 +++++++++++++++++++
 src/components/cards/cards.jsx | 31 ++++++++++++++++++-------------
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 28f79e176..9589590d4 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -104,6 +104,25 @@
     font-weight: bold;
 }
 
+.header-buttons-right {
+    display: flex;
+    flex-direction: row;
+}
+
+.shrink-button {
+    cursor: pointer;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0.75rem;
+}
+
+.shrink-button:hover, .all-button:hover {
+    background-color: $ui-black-transparent;
+}
+
 .remove-button, .all-button {
     cursor: pointer;
     color: white;
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 48217a912..74e5b851c 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -41,19 +41,24 @@ const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
                     ))}
             </div>
         ) : null}
-        <div
-            className={styles.removeButton}
-            onClick={onCloseCards}
-        >
-            <FormattedMessage
-                defaultMessage="Close"
-                description="Title for button to close how-to card"
-                id="gui.cards.close"
-            />
-            <img
-                className={styles.closeIcon}
-                src={closeIcon}
-            />
+        <div className={styles.headerButtonsRight}>
+            <div className={styles.shrinkButton}>
+                {'Shrink'}
+            </div>
+            <div
+                className={styles.removeButton}
+                onClick={onCloseCards}
+            >
+                <FormattedMessage
+                    defaultMessage="Close"
+                    description="Title for button to close how-to card"
+                    id="gui.cards.close"
+                />
+                <img
+                    className={styles.closeIcon}
+                    src={closeIcon}
+                />
+            </div>
         </div>
     </div>
 );