From 1341c62c9e024cebbf2d29a28d80c6385e1785d7 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Mon, 26 Nov 2018 12:01:35 -0500
Subject: [PATCH] Adding RTL padding to reconnect button on alerts.
---
src/components/alerts/alert.css | 11 +++++++++--
src/components/alerts/alert.jsx | 4 ++--
2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 938d04b61..87c0ca4c7 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -55,7 +55,7 @@
align-self: center;
}
-.connection-button {
+.alert-connection-button {
min-height: 2rem;
padding: 0.55rem 0.9rem;
border-radius: 0.35rem;
@@ -68,6 +68,13 @@
display: flex;
align-items: center;
align-self: center;
- margin-right: 13px;
outline-style:none;
}
+
+[dir="ltr"] .alert-connection-button {
+ margin-right: 13px;
+}
+
+[dir="rtl"] .alert-connection-button {
+ margin-left: 13px;
+}
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index e38816723..facbc2303 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -42,7 +42,7 @@ const AlertComponent = ({
<div className={styles.alertMessage}>
{extensionName ? (
<FormattedMessage
- defaultMessage="Scratch lost connection to {extensionName}"
+ defaultMessage="Scratch lost connection to {extensionName}."
description="Message indicating that an extension peripheral has been disconnected"
id="gui.alerts.lostPeripheralConnection"
values={{
@@ -55,7 +55,7 @@ const AlertComponent = ({
</div>
{showReconnect && (
<button
- className={styles.connectionButton}
+ className={styles.alertConnectionButton}
onClick={onReconnect}
>
<FormattedMessage
--
GitLab