From 3b21996c3978f949af2b7bfa3e9fe1dd4558ebe4 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 13 Nov 2018 19:46:32 -0500
Subject: [PATCH 01/10] Beginning to change CSS/components of alerts to handle
 multi-line.

---
 src/components/alerts/alert.css |  9 +++++++++
 src/components/alerts/alert.jsx | 31 +++++++++++++++++--------------
 src/components/gui/gui.css      |  2 +-
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index ee4c71058..9627ef822 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -4,8 +4,10 @@
 
 .alert {
     width: 100%;
+    height: auto;
     display: flex;
     flex-direction: row;
+    justify-content: center;
     overflow: hidden;
     align-items: left;
     border-radius: $space;
@@ -25,12 +27,17 @@
     box-shadow: 0px 0px 0px 2px $extensions-light;
 }
 
+.alert-spinner {
+    align-self: center;
+}
+
 .alert-icon {
     margin: $space;
     vertical-align: middle;
 }
 
 .alert-message {
+    align-self: center;
     color: #555;
     font-weight: bold;
     font-size: .75rem;
@@ -52,6 +59,7 @@
 }
 
 .connection-button {
+    height: 31px;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
     background: #FF8C1A;
@@ -63,6 +71,7 @@
     cursor: pointer;
     display: flex;
     align-items: center;
+    align-self: center;
     margin-right: 13px;
     outline-style:none;
 }
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index 04ea672c4..efb1e2030 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -29,21 +29,24 @@ const AlertComponent = ({
     <Box
         className={classNames(styles.alert, styles[level])}
     >
+        {/* TODO: implement Rtl handling */}
+        <div className={styles.alertSpinner}>
+            {iconSpinner && (
+                <Spinner />
+            )}
+        </div>
+        <div className={styles.alertIcon}>
+            {iconURL && (
+                <img
+                    className={styles.alertIcon}
+                    src={iconURL}
+                />
+            )}
+        </div>
         <div className={styles.alertMessage}>
-            {/* TODO: implement Rtl handling */}
-            <div className={styles.alertIcon}>
-                {iconSpinner && (
-                    <Spinner />
-                )}
-                {iconURL && (
-                    <img src={iconURL} />
-                )}
-            </div>
-            <div>
-                {message}
-                &nbsp;
-                {content}
-            </div>
+            {message}
+            &nbsp;
+            {content}
         </div>
         {showReconnect && (
             <button
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index eb4f1c929..3e4d763c4 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -303,7 +303,7 @@ $fade-out-distance: 15px;
 /* Alerts */
 
 .alerts-container {
-    width: 520px;
+    width: 448px;
     z-index: $z-index-alerts;
     left: 0;
     right: 0;

From 67d11fb92a591b320304ab02c6ec099cdeba9a77 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 13 Nov 2018 19:54:44 -0500
Subject: [PATCH 02/10] Fixing alert image components and CSS.

---
 src/components/alerts/alert.jsx | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index efb1e2030..f73af6130 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -30,19 +30,15 @@ const AlertComponent = ({
         className={classNames(styles.alert, styles[level])}
     >
         {/* TODO: implement Rtl handling */}
-        <div className={styles.alertSpinner}>
-            {iconSpinner && (
-                <Spinner />
-            )}
-        </div>
-        <div className={styles.alertIcon}>
-            {iconURL && (
-                <img
-                    className={styles.alertIcon}
-                    src={iconURL}
-                />
-            )}
-        </div>
+        {iconSpinner && (
+            <Spinner className={styles.alertSpinner} />
+        )}
+        {iconURL && (
+            <img
+                className={styles.alertIcon}
+                src={iconURL}
+            />
+        )}
         <div className={styles.alertMessage}>
             {message}
             &nbsp;

From d79b7e0b7594344c9e5c7da90fe473c4288b0269 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 13 Nov 2018 20:11:46 -0500
Subject: [PATCH 03/10] Removing extraneous message prop from alerts.

---
 src/components/alerts/alert.jsx | 4 ----
 src/reducers/alerts.js          | 6 +++++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index f73af6130..78b7163ec 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -21,7 +21,6 @@ const AlertComponent = ({
     iconSpinner,
     iconURL,
     level,
-    message,
     onCloseAlert,
     onReconnect,
     showReconnect
@@ -40,8 +39,6 @@ const AlertComponent = ({
             />
         )}
         <div className={styles.alertMessage}>
-            {message}
-            &nbsp;
             {content}
         </div>
         {showReconnect && (
@@ -77,7 +74,6 @@ AlertComponent.propTypes = {
     iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     level: PropTypes.string,
-    message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired,
     onReconnect: PropTypes.func,
     showReconnect: PropTypes.bool
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 75687d0ee..925d72280 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -16,8 +16,11 @@ const initialState = {
     // * extentionId (optional): id string that identifies the extension
     // * iconURL (optional): string
     // * level (required): string, one of AlertLevels
+<<<<<<< HEAD
     // * message (optional): string
     // * showReconnect (optional): bool
+=======
+>>>>>>> Removing extraneous message prop from alerts.
     alertsList: []
 };
 
@@ -70,7 +73,8 @@ const reducer = function (state, action) {
             if (extension) {
                 newAlert.showReconnect = true;
                 if (extension.name) {
-                    newAlert.content = extension.name;
+                    // TODO: make translate-friendly
+                    newAlert.content = `${action.data.message} ${extension.name}`;
                 }
                 if (extension.smallPeripheralImage) {
                     newAlert.iconURL = extension.smallPeripheralImage;

From 911adb8def73d568778e9127204c9f84c2872dad Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 13 Nov 2018 20:25:25 -0500
Subject: [PATCH 04/10] Minor cleanup in alerts reducer.

---
 src/reducers/alerts.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 925d72280..5ee32dfa9 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -66,12 +66,15 @@ const reducer = function (state, action) {
             level: AlertLevels.WARN
         };
         const extensionId = action.data.extensionId;
-        newAlert.showReconnect = false;
-        newAlert.extensionId = extensionId;
-        if (extensionId) { // if it's an extension
+        if (extensionId) {
+            const newList = state.alertsList.slice();
+            const newAlert = {
+                level: AlertLevels.WARN,
+                extensionId: extensionId,
+                showReconnect: true
+            };
             const extension = extensionData.find(ext => ext.extensionId === extensionId);
             if (extension) {
-                newAlert.showReconnect = true;
                 if (extension.name) {
                     // TODO: make translate-friendly
                     newAlert.content = `${action.data.message} ${extension.name}`;
@@ -81,11 +84,12 @@ const reducer = function (state, action) {
                 }
                 newAlert.closeButton = true;
             }
+            newList.push(newAlert);
+            return Object.assign({}, state, {
+                alertsList: newList
+            });
         }
-        newList.push(newAlert);
-        return Object.assign({}, state, {
-            alertsList: newList
-        });
+        return state; // if extension not found, show nothing
     }
     case CLOSE_ALERT: {
         const newList = state.alertsList.slice();

From 8c69578c860fededbc903049b895559d2dcfc686 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 13 Nov 2018 20:42:17 -0500
Subject: [PATCH 05/10] Fixing a prop type.

---
 src/reducers/alerts.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 5ee32dfa9..693b444ec 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -16,11 +16,8 @@ const initialState = {
     // * extentionId (optional): id string that identifies the extension
     // * iconURL (optional): string
     // * level (required): string, one of AlertLevels
-<<<<<<< HEAD
     // * message (optional): string
     // * showReconnect (optional): bool
-=======
->>>>>>> Removing extraneous message prop from alerts.
     alertsList: []
 };
 

From 514ade253a99fad02971fe1de0158c08eef31779 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 14 Nov 2018 15:07:42 -0500
Subject: [PATCH 06/10] Adding localization to extension alerts.

---
 src/components/alerts/alert.jsx  | 17 +++++++++++++++--
 src/components/alerts/alerts.jsx |  1 +
 src/components/gui/gui.css       |  1 +
 src/containers/alert.jsx         |  3 +++
 src/reducers/alerts.js           |  8 +++++---
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index 78b7163ec..aaf63bca4 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -18,6 +18,7 @@ const closeButtonColors = {
 const AlertComponent = ({
     content,
     closeButton,
+    extensionName,
     iconSpinner,
     iconURL,
     level,
@@ -39,7 +40,18 @@ const AlertComponent = ({
             />
         )}
         <div className={styles.alertMessage}>
-            {content}
+            {extensionName ? (
+                <FormattedMessage
+                    defaultMessage="Scratch lost connection to {extensionName}"
+                    description="Message indicating that an extension peripheral has been disconnected"
+                    id="gui.alerts.peripheraldisconnect"
+                    values={{
+                        extensionName: (
+                            `${extensionName}`
+                        )
+                    }}
+                />
+            ) : content}
         </div>
         {showReconnect && (
             <button
@@ -70,7 +82,8 @@ const AlertComponent = ({
 
 AlertComponent.propTypes = {
     closeButton: PropTypes.bool,
-    content: PropTypes.element,
+    content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+    extensionName: PropTypes.string,
     iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     level: PropTypes.string,
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 0ae89dfb0..b2b14a638 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -18,6 +18,7 @@ const AlertsComponent = ({
                 closeButton={a.closeButton}
                 content={a.content}
                 extensionId={a.extensionId}
+                extensionName={a.extensionName}
                 iconSpinner={a.iconSpinner}
                 iconURL={a.iconURL}
                 index={index}
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 3e4d763c4..1e4785a53 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -304,6 +304,7 @@ $fade-out-distance: 15px;
 
 .alerts-container {
     width: 448px;
+    min-width: 448px;
     z-index: $z-index-alerts;
     left: 0;
     right: 0;
diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx
index 9235d8d8a..3aefc70b2 100644
--- a/src/containers/alert.jsx
+++ b/src/containers/alert.jsx
@@ -26,6 +26,7 @@ class Alert extends React.Component {
         const {
             closeButton,
             content,
+            extensionName,
             index, // eslint-disable-line no-unused-vars
             level,
             iconSpinner,
@@ -37,6 +38,7 @@ class Alert extends React.Component {
             <AlertComponent
                 closeButton={closeButton}
                 content={content}
+                extensionName={extensionName}
                 iconSpinner={iconSpinner}
                 iconURL={iconURL}
                 level={level}
@@ -62,6 +64,7 @@ Alert.propTypes = {
     closeButton: PropTypes.bool,
     content: PropTypes.element,
     extensionId: PropTypes.string,
+    extensionName: PropTypes.string,
     iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     index: PropTypes.number,
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 693b444ec..ca2fd64c3 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -70,11 +70,12 @@ const reducer = function (state, action) {
                 extensionId: extensionId,
                 showReconnect: true
             };
+            newAlert.extensionId = extensionId;
+            newAlert.showReconnect = true;
             const extension = extensionData.find(ext => ext.extensionId === extensionId);
             if (extension) {
                 if (extension.name) {
-                    // TODO: make translate-friendly
-                    newAlert.content = `${action.data.message} ${extension.name}`;
+                    newAlert.extensionName = extension.name;
                 }
                 if (extension.smallPeripheralImage) {
                     newAlert.iconURL = extension.smallPeripheralImage;
@@ -82,11 +83,12 @@ const reducer = function (state, action) {
                 newAlert.closeButton = true;
             }
             newList.push(newAlert);
+
             return Object.assign({}, state, {
                 alertsList: newList
             });
         }
-        return state; // if extension not found, show nothing
+        return state; // if alert not found, show nothing
     }
     case CLOSE_ALERT: {
         const newList = state.alertsList.slice();

From 7bfaa04e00735fb79ca128387c7c5b897809acb6 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 14 Nov 2018 15:18:06 -0500
Subject: [PATCH 07/10] Extension name fix.

---
 src/reducers/alerts.js | 41 +++++++++++++++--------------------------
 1 file changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index ca2fd64c3..5b0fbd09a 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -56,37 +56,26 @@ const reducer = function (state, action) {
         return state; // if alert not found, show nothing
     }
     case SHOW_EXTENSION_ALERT: {
-        const newList = state.alertsList.slice();
-        const newAlert = {
-            alertType: AlertTypes.EXTENSION,
-            message: action.data.message,
-            level: AlertLevels.WARN
-        };
         const extensionId = action.data.extensionId;
         if (extensionId) {
-            const newList = state.alertsList.slice();
-            const newAlert = {
-                level: AlertLevels.WARN,
-                extensionId: extensionId,
-                showReconnect: true
-            };
-            newAlert.extensionId = extensionId;
-            newAlert.showReconnect = true;
             const extension = extensionData.find(ext => ext.extensionId === extensionId);
             if (extension) {
-                if (extension.name) {
-                    newAlert.extensionName = extension.name;
-                }
-                if (extension.smallPeripheralImage) {
-                    newAlert.iconURL = extension.smallPeripheralImage;
-                }
-                newAlert.closeButton = true;
-            }
-            newList.push(newAlert);
+                const newList = state.alertsList.slice();
+                const newAlert = {
+                    alertType: AlertTypes.EXTENSION,
+                    closeButton: true,
+                    extensionId: extensionId,
+                    extensionName: extension.name,
+                    iconURL: extension.smallPeripheralImage,
+                    level: AlertLevels.WARN,
+                    showReconnect: true
+                };
+                newList.push(newAlert);
 
-            return Object.assign({}, state, {
-                alertsList: newList
-            });
+                return Object.assign({}, state, {
+                    alertsList: newList
+                });
+            }
         }
         return state; // if alert not found, show nothing
     }

From 6c7a486cb85d059a0a629e72b1c8fe207df36a80 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 14 Nov 2018 15:23:39 -0500
Subject: [PATCH 08/10] Fix gui localization id to be camel case.

---
 src/components/alerts/alert.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index aaf63bca4..e38816723 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -44,7 +44,7 @@ const AlertComponent = ({
                 <FormattedMessage
                     defaultMessage="Scratch lost connection to {extensionName}"
                     description="Message indicating that an extension peripheral has been disconnected"
-                    id="gui.alerts.peripheraldisconnect"
+                    id="gui.alerts.lostPeripheralConnection"
                     values={{
                         extensionName: (
                             `${extensionName}`

From 3e8941be6fd438e6ce5b2d383bd5b7b2dcc847e2 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Mon, 19 Nov 2018 10:31:09 -0500
Subject: [PATCH 09/10] Trying to fix styling after merge.

---
 src/components/alerts/alert.css | 9 ---------
 src/components/alerts/alert.jsx | 4 ++--
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 9627ef822..ee4c71058 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -4,10 +4,8 @@
 
 .alert {
     width: 100%;
-    height: auto;
     display: flex;
     flex-direction: row;
-    justify-content: center;
     overflow: hidden;
     align-items: left;
     border-radius: $space;
@@ -27,17 +25,12 @@
     box-shadow: 0px 0px 0px 2px $extensions-light;
 }
 
-.alert-spinner {
-    align-self: center;
-}
-
 .alert-icon {
     margin: $space;
     vertical-align: middle;
 }
 
 .alert-message {
-    align-self: center;
     color: #555;
     font-weight: bold;
     font-size: .75rem;
@@ -59,7 +52,6 @@
 }
 
 .connection-button {
-    height: 31px;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
     background: #FF8C1A;
@@ -71,7 +63,6 @@
     cursor: pointer;
     display: flex;
     align-items: center;
-    align-self: center;
     margin-right: 13px;
     outline-style:none;
 }
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index e38816723..87a2d68dc 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -30,10 +30,10 @@ const AlertComponent = ({
         className={classNames(styles.alert, styles[level])}
     >
         {/* TODO: implement Rtl handling */}
-        {iconSpinner && (
+        {true && (
             <Spinner className={styles.alertSpinner} />
         )}
-        {iconURL && (
+        {false && (
             <img
                 className={styles.alertIcon}
                 src={iconURL}

From b64b57ba8fdc568255dd71147d9ccc8628128973 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 20 Nov 2018 16:13:26 -0500
Subject: [PATCH 10/10] adjusted margins and padding within alerts

---
 src/components/alerts/alert.css | 9 +++++++--
 src/components/alerts/alert.jsx | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index ee4c71058..4be827ab1 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -11,6 +11,7 @@
     border-radius: $space;
     padding: $space;
     margin-bottom: 7px;
+    min-height: 1.5rem;
 }
 
 .alert.warn {
@@ -26,7 +27,8 @@
 }
 
 .alert-icon {
-    margin: $space;
+    margin-left: .25rem;
+    margin-right: .25rem;
     vertical-align: middle;
 }
 
@@ -38,6 +40,8 @@
     width: 100%;
     display: flex;
     align-items: center;
+    padding-left: .5rem;
+    padding-right: .5rem;
 }
 
 .alert-close-button {
@@ -52,17 +56,18 @@
 }
 
 .connection-button {
+    min-height: 2rem;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
     background: #FF8C1A;
     color: white;
     font-weight: 700;
     font-size: 0.77rem;
-    margin: 0.25rem;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
+    align-self: center;
     margin-right: 13px;
     outline-style:none;
 }
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index 87a2d68dc..e38816723 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -30,10 +30,10 @@ const AlertComponent = ({
         className={classNames(styles.alert, styles[level])}
     >
         {/* TODO: implement Rtl handling */}
-        {true && (
+        {iconSpinner && (
             <Spinner className={styles.alertSpinner} />
         )}
-        {false && (
+        {iconURL && (
             <img
                 className={styles.alertIcon}
                 src={iconURL}