Adding RTL padding to reconnect button on alerts.

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;
+}

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