From d7729d295a269cb1b19c0f0927c3952459895a36 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Tue, 21 Apr 2020 17:50:08 -0400
Subject: [PATCH] RTL for the security badge, add an arrow to the tooltip
 (#1469)

* FIx RTL on the encryption shield

* Add an arrow to the tooltip
---
 src/components/LayerUI.scss | 26 +++++++++++++++++++++++---
 src/components/LayerUI.tsx  |  4 +++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss
index b8d2e667..1ffda3c7 100644
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -3,7 +3,7 @@
 .layer-ui__wrapper {
   .encrypted-icon {
     position: relative;
-    margin-left: 15px;
+    margin-inline-start: 15px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -18,8 +18,13 @@
     &.tooltip .tooltip-text {
       visibility: hidden;
       width: 20rem;
-      bottom: calc(50% + 0.8rem);
-      left: -5px;
+      bottom: calc(50% + 0.8rem + 6px);
+      :root[dir="ltr"] & {
+        left: -5px;
+      }
+      :root[dir="rtl"] & {
+        right: -5px;
+      }
       background-color: $oc-black;
       color: $oc-white;
       text-align: center;
@@ -30,6 +35,21 @@
       font-size: 13px;
       line-height: 1.5;
       white-space: pre-wrap;
+
+      &::after {
+        --size: 6px;
+        content: "";
+        border: var(--size) solid transparent;
+        border-top-color: $oc-black;
+        position: absolute;
+        bottom: calc(-2 * var(--size));
+        :root[dir="ltr"] & {
+          left: calc(5px + var(--size) / 2);
+        }
+        :root[dir="rtl"] & {
+          right: calc(5px + var(--size) / 2);
+        }
+      }
     }
 
     // the following 3 rules ensure that the tooltip doesn't show (nor affect
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 2e482db9..befac6c2 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -63,7 +63,9 @@ const LayerUI = ({
       target="_blank"
       rel="noopener noreferrer"
     >
-      <span className="tooltip-text">{t("encrypted.tooltip")}</span>
+      <span className="tooltip-text" dir="auto">
+        {t("encrypted.tooltip")}
+      </span>
       {shield}
     </a>
   );