From 949c3841ea54dd9ec828ab631e637ef3cf1d3aa7 Mon Sep 17 00:00:00 2001
From: Lipis <lipiridis@gmail.com>
Date: Fri, 21 Feb 2020 17:04:54 +0100
Subject: [PATCH] Show hint under toolbar (#783)

---
 src/components/HintViewer.css | 10 +++++++---
 src/index.tsx                 | 12 ++++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/HintViewer.css b/src/components/HintViewer.css
index 6af44678..f5049b36 100644
--- a/src/components/HintViewer.css
+++ b/src/components/HintViewer.css
@@ -1,8 +1,12 @@
 .HintViewer {
-  position: absolute;
-  left: 0.5em;
-  bottom: 0.5em;
+  background-color: rgba(255, 255, 255, 0.88);
+  color: #868e96; /* OC: GRAY 6*/
   font-size: 0.8rem;
+  left: 50%;
+  pointer-events: none;
+  position: absolute;
+  top: 54px;
+  transform: translateX(calc(-50% - 16px)); /* 16px is half of lock icon */
 }
 
 @media (max-width: 600px), (max-height: 500px) and (max-width: 1000px) {
diff --git a/src/index.tsx b/src/index.tsx
index 2dfddab2..5d06507c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -518,6 +518,12 @@ const LayerUI = React.memo(
     ) : (
       <>
         <FixedSideContainer side="top">
+          <HintViewer
+            elementType={appState.elementType}
+            multiMode={appState.multiElement !== null}
+            isResizing={appState.isResizing}
+            elements={elements}
+          />
           <div className="App-menu App-menu_top">
             <Stack.Col gap={4} align="end">
               <section
@@ -578,12 +584,6 @@ const LayerUI = React.memo(
           </div>
         </FixedSideContainer>
         <footer role="contentinfo">
-          <HintViewer
-            elementType={appState.elementType}
-            multiMode={appState.multiElement !== null}
-            isResizing={appState.isResizing}
-            elements={elements}
-          />
           <LanguageList
             onChange={lng => {
               setLanguage(lng);